Puede que ya lo sepas

La API del dispositivo WebXR se envió el otoño pasado en Chrome 79. Como se dijo entonces, la implementación de la API en Chrome es un trabajo en progreso. Chrome se complace en anunciar que parte del trabajo está terminado. En Chrome 81, han llegado dos nuevas funciones:

Este artículo cubre la realidad aumentada¿Qué es la realidad aumentada?Tecnología que posibilita la reproducción en pantalla del entorno real captado por una cámara, sobre el que se superpone una capa de contenidos virtuales e interactivos generando una nueva realidad combinada. más. Si ya ha utilizado WebXR Device API, le alegrará saber que hay muy pocas novedades que aprender. Entrar en una sesión de WebXR es básicamente lo mismo. Ejecutar un bucle de cuadro es básicamente lo mismo. Las diferencias radican en configuraciones que permiten mostrar el contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más de forma adecuada para la realidad aumentada. Si no está familiarizado con los conceptos básicos de WebXR, debería leer mis publicaciones anteriores sobre la API del dispositivo WebXR, o al menos estar familiarizado con los temas que se tratan allí. Debe saber cómo solicitar e ingresar a una sesión y debe saber cómo ejecutar un bucle de tramas.

Para obtener información sobre las pruebas de posicionamiento, consulte el artículo complementario Posicionamiento de objetos virtuales en vistas del mundo real. El código de este artículo se basa en el ejemplo de sesión de AR inmersivo (manifestación
fuente) de Immersive Web Working Group’s Muestras de API de dispositivo WebXR.

Antes de sumergirse en el código, debe utilizar el Muestra de sesión de realidad aumentada inmersiva
al menos una vez. Necesitará un teléfono Android moderno con Chrome 81 o posterior.

¿Para qué sirve?

La realidad aumentada será una valiosa adición a muchas páginas web nuevas o existentes al permitirles implementar casos de uso de RA sin salir del navegadorUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los más. Por ejemplo, puede ayudar a las personasLas personas son personalidades imaginarias que representan a un determinado grupo objetivo. En el marketing online, las personas ayudan a entender mejor a los usuarios de un portal web o a los clientes de una tienda online. Concepto de personas Para que las personas puedan ejercer su efecto positivo, deben ser lo más detalladas viable. Esto conlleva un término exhaustiva de los grupos destinatarios para conseguir datos empíricos. La próxima más a aprender en sitios educativos y permitir que los compradores potenciales visualicen objetos en su hogar mientras compran.

Considere el segundo caso de uso. Imagina la simulación de colocar una representación a tamaño real de un objeto virtual en una escena real. Una vez colocada, la imagen permanece en la superficie seleccionada, aparece del tamaño que tendría si el elemento real estuviera en esa superficie y permite al usuario moverse alrededor de ella, así como más cerca o más lejos de ella. Esto brinda a los espectadores una comprensión más profunda del objeto de lo que es posible con una imagen bidimensional.

Me estoy adelantando un poco. Para hacer realmente lo que he descrito, necesita la funcionalidad AR y algunos medios para detectar superficies. Este artículo cubre el primero. El artículo adjunto sobre la API de prueba de éxito de WebXR (vinculado a arriba) cubre este último.

Solicitando una sesión

Solicitar una sesión es muy parecido a lo que ha visto antes. Primero averigüe si el tipo de sesión que desea está disponible en el dispositivo actual llamando
xr.isSessionSupported(). En lugar de pedir 'immersive-vr' como antes, solicitud 'immersive-ar'.

if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-ar');
  if (supported) {
    xrButton.addEventListener('click', onButtonClicked);
    xrButton.textContent = 'Enter AR';
    xrButton.enabled = supported; 
  }
}

Como antes, esto habilita un botón ‘Ingresar AR’. Cuando el usuario haga clic en él, llame
xr.requestSession(), también pasando 'immersive-ar'.

let xrSession = null;
function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession('immersive-ar')
    .then((session) => {
      xrSession = session;
      xrSession.isImmersive = true;
      xrButton.textContent = 'Exit AR';
      onSessionStarted(xrSession);
    });
  } else {
    xrSession.end();
  }
}

Una propiedad de conveniencia

Probablemente haya notado que resalté dos líneas en la última muestra de código. los XRSession el objeto parece tener una propiedad llamada isImmersive. Esta es una propiedad de conveniencia que he creado yo mismo y no forma parte de la especificación. Lo usaré más tarde para tomar decisiones sobre qué mostrarle al espectador. ¿Por qué esta propiedad no forma parte de la API? Debido a que su aplicación puede necesitar rastrear esta propiedad de manera diferente, los autores de especificaciones decidieron mantener limpia la API.

Entrar en una sesión

Recordar que onSessionStarted() parecía en mi artículo anterior:

function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}

Necesito agregar algunas cosas para tener en cuenta la representación de la realidad aumentada. Apague el fondo Primero, voy a determinar si necesito el fondo. Este es el primer lugar donde usaré mi propiedad de conveniencia.

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });

}

Espacios de referencia

Mis artículos anteriores repasaron los espacios de referencia. La muestra que estoy describiendo usa dos de ellos, así que es hora de corregir esa omisión.

Un espacio de referencia describe la relación entre el mundo virtual y el entorno físico del usuario. Hace esto por:

• Especificar el origen del sistema de coordenadas utilizado para expresar posiciones en el mundo virtual.
• Especificar si se espera que el usuario se mueva dentro de ese sistema de coordenadas.
• Si ese sistema de coordenadas tiene límites preestablecidos. (Los ejemplos que se muestran aquí no utilizan sistemas de coordenadas con límites preestablecidos).

Para todos los espacios de referencia, la coordenada X expresa izquierda y derecha, Y expresa arriba y abajo, y Z expresa adelante y atrás. Los valores positivos son correctos, hacia arriba y hacia atrás, respectivamente.

Las coordenadas devueltas por XRFrame.getViewerPose() dependen de lo solicitado
tipo de espacio de referencia. Más sobre eso cuando lleguemos al bucle de cuadro. En este momento, debemos seleccionar un tipo de referencia que sea apropiado para la realidad aumentada. Nuevamente, esto usa mi propiedad de conveniencia.

let refSpaceType
function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

Si ha visitado el Muestra de sesión de realidad aumentada inmersiva
Notarás que inicialmente la escena es estática y nada de realidad aumentada. Puede arrastrar y deslizar el dedo para moverse por la escena. Si hace clic en «INICIAR AR», el fondo desaparece y puede moverse por la escena moviendo el dispositivo. Los modos utilizan diferentes tipos de espacios de referencia. El texto resaltado arriba muestra cómo se selecciona. Utiliza los siguientes tipos de referencia:

local – El origen nativo está en la posición del espectador en el momento de la creación de la sesión. Esto significa que la experiencia no necesariamente tiene un piso bien definido y la posición exacta del origen puede variar según la plataforma. Aunque no hay límites preestablecidos para el espacio, se espera que el contenido se pueda ver sin otro movimiento que la rotación. Como puede ver en nuestro propio ejemplo de RA, es posible que se produzca algún movimiento dentro del espacio.

viewer – Utilizado con mayor frecuencia para el contenido presentado en línea en la página, este espacio sigue al dispositivo de visualización. Cuando se pasa a getViewerPose, no proporciona seguimiento y, por lo tanto, siempre informa una pose en el origen a menos que la aplicación la modifique con XRReferenceSpace.getOffsetReferenceSpace(). La muestra utiliza esto para habilitar la panorámica táctil de la cámara.

Ejecutando un bucle de cuadro

Conceptualmente, nada cambia con respecto a lo que hice en la sesión de realidad virtualLa Realidad Virtual es un mundo artificial creado por medio de programas informáticos. Un usuario es teléfono celular en este mundo. La sección respectivo del mundo digital creado artificialmente se adapta a los movimientos y puntos de vista del usuario. Al ingresar en la realidad virtual, todos los movimientos del cuerpo pueden ser utilizados para la navegación y la percepción. "Las "gafas de realidad virtual" se usan normalmente como interfaz más descrita en mis artículos anteriores. Pase el tipo de espacio de referencia a XRFrame.getViewerPose(). El retorno XRViewerPose será para el tipo de espacio de referencia actual. Utilizando
viewer ya que el valor predeterminado permite que una página muestre vistas previas del contenido antes de que se solicite el consentimiento del usuario para AR o VR. Esto ilustra un punto importante: el contenido en línea utiliza el mismo bucle de cuadro que el contenido inmersivo, lo que reduce la cantidad de código que debe mantenerse.

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
  if (xrViewerPose) {
    
  }
}

Conclusión

Esta serie de artículos solo cubre los conceptos básicos de la implementación de contenido inmersivo en la web. El grupo de trabajo Immersive Web Working Group presenta muchas más capacidades y casos de uso. Muestras de API de dispositivo WebXR. También acabamos de publicar un artículo de prueba de éxito que explica una API para detectar superficies y colocar elementos virtuales en una vista de cámara del mundo real. Échales un vistazo y mira el blogEl término blog se usa para describir un diario virtual en Internet. El autor de un blogger puede publicar posts sobre cualquier tema. Los posts suelen estar presente de forma cronológica. El estilo de redacción de un blog suele ser informal y se escribe en primera persona. No obstante, además son posibles otros estilos, por ejemplo en el caso de los periódicos online, en los que la atención se centra más de web.dev para ver más artículos durante el próximo año.

Foto por David Grandmougin en Unsplash