AWP en Oculus Quest 2

El Oculus Quest 2 es un visor de realidad virtual (RV) creado por Oculus, una división de Meta. Los desarrolladores ahora pueden compilar y distribuir apps web progresivas (AWP) en 2D y 3D que aprovechan la función para realizar varias tareas a la vez de Oculus Quest 2.

Oculus Quest 2

Oculus Quest 2 es un visor de realidad virtual (RV) creado por Oculus, una división de Meta. Es el sucesor del visor anterior de la empresa, la Oculus Quest. El dispositivo puede ejecutarse como auriculares independientes con un sistema operativo interno basado en Android y con software de RV compatible con Oculus que se ejecuta en una computadora de escritorio cuando se conecta por USB o Wi-Fi. Usa el sistema Snapdragon XR2 de Qualcomm en un chip con 6 GB de RAM. La pantalla de la Quest 2 es un único panel LCD de cambio rápido con una resolución de 1,832 × 1,920 píxeles por ojo que se ejecuta a una frecuencia de actualización de hasta 120 Hz.

El navegador Oculus

Actualmente, hay tres navegadores disponibles para Oculus Quest 2: Wolvic, un sucesor de Firefox Reality, y el navegador Oculus integrado. Este artículo se centra en este último. El sitio web de Oculus presenta el navegador de Oculus de la siguiente manera.

"Oculus Browser admite los estándares web más recientes y otras tecnologías para ayudarte a crear experiencias de RV en la Web. Actualmente, los sitios web en 2D funcionan muy bien en el navegador Oculus, ya que cuenta con la tecnología del motor de renderización de Chromium. Está optimizada aún más para que los auriculares Oculus obtengan el mejor rendimiento y permitan a los desarrolladores web aprovechar todo el potencial de la RV con nuevas APIs, como WebXR. A través de WebXR, estamos abriendo las puertas a la próxima frontera de la Web".

Usuario-agente

La cadena de usuario-agente del navegador en el momento de la escritura es la siguiente.

Mozilla/5.0 (X11; Linux x86_64; Quest 2)
AppleWebKit/537.36 (KHTML, like Gecko)
OculusBrowser/18.1.0.2.46.337441587
SamsungBrowser/4.0
Chrome/95.0.4638.74
VR
Safari/537.36

Como puedes ver, la versión actual 18.1.0.2.46.337441587 del navegador Oculus se basa en Chrome 95.0.4638.74, esa es solo una versión posterior a la versión estable actual de Chrome, que es 96.0.4664.110. Si el usuario cambia al modo móvil, VR cambia a Mobile VR.

Interfaz de usuario

La interfaz de usuario del navegador (que se muestra arriba) tiene las siguientes funciones (fila superior de izquierda a derecha):

• Botón Atrás
• Botón "Volver a cargar"
• Información del sitio
• Barra de URL
• Botón para crear favoritos
• Botón para cambiar el tamaño con opciones estrechas, medianas y anchas, así como una función de zoom
• Botón Solicitar sitio web móvil
• Botón de menú con las siguientes opciones:
  • Ingresar al modo privado
  • Cerrar todas las pestañas
  • Configuración
  • Favoritos
  • Descargas
  • Historial
  • Borrar datos de navegación

La fila inferior incluye las siguientes características:

• Botón de cerrar
• Botón para minimizar
• Botón de tres puntos con opciones para retroceder, avanzar y volver a cargar

Frecuencia de actualización y proporción de píxeles del dispositivo

En el caso de Oculus Quest 2, el navegador de Oculus procesa contenido de páginas web en 2D y WebXR a una frecuencia de actualización de 90 Hz. Cuando miras contenido multimedia en pantalla completa, el navegador de Oculus optimiza la frecuencia de actualización del dispositivo en función de la velocidad de fotogramas del video, por ejemplo, 24 FPS. Oculus Quest 2 tiene una proporción de píxeles del dispositivo de 1.5 para ofrecer texto nítido.

AWP en el navegador Oculus y en Oculus Store

El 28 de octubre de 2021, Jacob Rossi, jefe de Administración de Productos de Meta (Oculus), compartió que las AWP iban a Oculus Quest y Oculus Quest 2. A continuación, describo la experiencia de AWP en Oculus y explico cómo compilar, transferir y probar tu AWP en la Quest 2 de Oculus.

Uso compartido de estado

El estado de acceso se comparte entre el navegador Oculus y las AWP, lo que permite a los usuarios alternar sin problemas entre ambos. Naturalmente, el Acceso con Facebook está lista para usar. Oculus Browser incluye un administrador de contraseñas que permite a los usuarios almacenar y compartir sus contraseñas de forma segura entre el navegador y las experiencias de la app instalada.

Tamaños de ventana de la AWP

El usuario puede cambiar libremente el tamaño de las ventanas del navegador y las ventanas de las AWP instaladas. La altura puede variar entre 625 px y 1,200 px. El ancho se puede establecer entre 400 px y 2,000 px. Las dimensiones predeterminadas son de 1,000 × 625 px.

Interacción con las AWP

Las AWP se pueden controlar con los controles izquierdo y derecho de Oculus, el mouse y el teclado Bluetooth, y con seguimiento manual. El desplazamiento funciona con las palancas de los controles de Oculus o pellizcando los dedos índice y pulgar, y moviéndolos en la dirección deseada. Para seleccionar algo, el usuario puede apuntar y pellizcar.

Permisos para AWP

Los permisos del navegador Oculus funcionan casi de la misma manera que en Chrome. El estado se comparte entre las apps que se ejecutan en el navegador y las AWP instaladas, de modo que los usuarios puedan cambiar entre las dos experiencias sin tener que volver a otorgar los mismos permisos.

Si bien se implementan muchos permisos, no todas las funciones son compatibles. Por ejemplo, si bien la solicitud del permiso de ubicación geográfica se realiza correctamente, el dispositivo nunca obtiene una ubicación. Del mismo modo, las diversas APIs de hardware, como WebHID, Web Bluetooth, etc., pasan la detección de funciones, pero no muestran un selector que permita al usuario vincular el Oculus con un dispositivo de hardware. Supongo que la capacidad de detección de funciones de las APIs se definirá mejor una vez que el navegador crezca.

Depuración de AWP con las Herramientas para desarrolladores de Chrome

Después de habilitar el modo de desarrollador, la depuración de las AWP en Oculus Quest 2 funciona exactamente como se describe en Depuración remota de dispositivos Android.

1. En el dispositivo Oculus, navega hasta el sitio deseado en el navegador Oculus.
2. Inicia Google Chrome en tu computadora y ve a chrome://inspect/#devices.
3. Busca el dispositivo Oculus en cuestión, seguido de un conjunto de pestañas del navegador de Oculus abiertas actualmente en el dispositivo.
4. Haz clic en inspect en la pestaña deseada del navegador de Oculus.

Descubrimiento de apps

Los usuarios pueden utilizar el mismo navegador o Oculus Store para descubrir AWP. Al igual que con cualquier otro navegador, las AWP instaladas también funcionan en el navegador Oculus como sitios web que se ejecutan en una pestaña. Cuando un usuario visite un sitio, Oculus Browser lo ayudará a descubrir la app si (y solo si) está disponible en Oculus Store. En el caso de los usuarios que ya tienen la app instalada, Oculus Browser los ayudará a cambiar fácilmente a la app si lo desean.

AWP ejemplares en la Quest de Oculus 2

AWP de Meta

Varias divisiones de Meta crearon AWP para Oculus Quest 2, por ejemplo, Instagram y Facebook. Estas AWP se ejecutan en ventanas independientes de apps que no tienen una barra de URL y a las que se puede cambiar el tamaño libremente.

AWP de otros desarrolladores

Al momento de la redacción de este documento, hay una cantidad pequeña, pero creciente de AWP para Oculus Quest 2 en la tienda de Oculus. Spike permite que los usuarios experimenten todas las herramientas de trabajo esenciales, como el correo electrónico, el chat, las llamadas, las notas, las tareas y las tareas pendientes desde su bandeja de entrada en un centro de entorno virtual directamente en la app de Spike.

Otro ejemplo es Smartsheet, un lugar de trabajo dinámico que proporciona administración de proyectos, flujos de trabajo automatizados y una compilación rápida de soluciones nuevas.

Están llegando más AWP, como Slack, Dropbox o Canva, como se adelantó en un video con Jacob Rossi que se lanzó en el contexto de la conferencia Connect de Facebook en 2021.

Cómo crear AWP para Oculus

Meta describió los pasos necesarios en su documentación. En general, las AWP que se pueden instalar en Chrome a menudo deberían funcionar de inmediato en Oculus.

Requisitos del manifiesto de apps web

Existen algunas diferencias importantes en comparación con los criterios de instalación de Chrome y la especificación del manifiesto de apps web. Por ejemplo, por el momento, Oculus solo admite idiomas de izquierda a derecha, mientras que la especificación del manifiesto de apps web no aplica esas restricciones. Otro ejemplo es start_url, que Chrome requiere estrictamente para que una app sea instalable, pero que en Oculus es opcional. Oculus ofrece una herramienta de línea de comandos que permite a los desarrolladores crear AWP para Oculus Quest 2, lo que les permite pasar los parámetros faltantes (o anular los existentes) en el manifiesto de apps web.

Oculus tiene varios campos opcionales del manifiesto de apps web de propiedad que se pueden usar para personalizar la experiencia de la AWP.

Empaqueta AWP con la CLI de burbujas

Bubblewrap es un conjunto de bibliotecas de código abierto y una herramienta de línea de comandos (CLI) para Node.js. El equipo de Google Chrome desarrolló la función de burbujas para ayudar a los desarrolladores a generar, compilar y firmar un proyecto de Android que inicie tu AWP como una actividad web de confianza (TWA).

Actualmente, el navegador de Meta Quest no es totalmente compatible con TWA, pero, a partir de la versión 1.18.0, Burbblewrap admite AWP de empaquetado para dispositivos de Meta Quest.

Puede generar archivos APK universales que abren un TWA en dispositivos Android normales y el navegador Meta Quest en dispositivos Meta Quest.

Si suponemos que Node.js está instalado, la CLI de burbujas se puede instalar con el siguiente comando:

npm i -g @bubblewrap/cli

Cuando ejecutes Burbujas por primera vez, ofrecerá la posibilidad de descargar e instalar automáticamente las dependencias externas requeridas: el kit de desarrollo de Java (JDK) y las herramientas de compilación del SDK de Android.

Para generar un proyecto de Android compatible con Meta Quest que una tu AWP, ejecuta el comando init con la marca --metaquest y sigue el asistente:

bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest

Una vez que se haya generado el proyecto, ejecuta el siguiente comando para compilarlo y firmarlo:

bubblewrap build

Se mostrará un archivo llamado app-release-signed.apk. Este archivo se puede instalar en el dispositivo o publicarse en Meta Quest Store, Google Play Store o en cualquiera de las otras plataformas de distribución de apps para Android.

Cómo empaquetar AWP con la utilidad de la plataforma de Oculus

Oculus Platform Utility es la herramienta de línea de comandos oficial desarrollada por Meta para publicar apps destinadas a dispositivos Oculus Rift y Meta Quest.

También permite empaquetar AWP para dispositivos Meta Quest con el comando create-pwa y publicarlas en Meta Quest Store y App Lab.

Establece el nombre del archivo de salida a través del parámetro -o y la ruta de acceso al SDK de Android a través del parámetro --android-sdk.

Apunta la herramienta a la URL publicada del manifiesto de la app web mediante el parámetro --web-manifest-url.

Aunque no tengas un manifiesto en tu AWP publicada o quieras anularlo, puedes generar un APK para tu AWP con un archivo de manifiesto local y el parámetro --manifest-content-file.

Para dejar el manifiesto lo más puro posible, usa el parámetro --package-name con un valor en la notación del nombre de dominio inverso (por ejemplo, com.company.app.pwa), en lugar de agregar el campo de propiedad ovr_package_name al manifiesto.

ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa

Cómo empaquetar las AWP con PWABuilder

Los autores consideran que el uso de PWABuilder es la forma más fácil y, por lo tanto, recomendada de empaquetar AWP para Meta Quest en este momento.

PWABuilder es un proyecto de código abierto desarrollado por Microsoft que permite a los desarrolladores empaquetar y firmar sus AWP para publicarlas en varias tiendas, incluidas Microsoft Store, Google Play Store, App Store y Meta Quest Store.

Empaquetar las AWP con PWABuilder es tan fácil como ingresar la URL de una AWP, ingresar o editar los metadatos de la app y hacer clic en el botón Generar.

PWABuilder ofrece a los desarrolladores la posibilidad de elegir qué herramienta internamente utilizar para empaquetar las AWP de los dispositivos Meta Quest.

Puedes elegir la opción Meta Quest para usar la utilidad de Oculus Platform.

Puedes elegir la opción Android para usar el envoltorio de burbujas y seleccionar la casilla de verificación Compatible con Meta Quest.

Cómo instalar AWP con ADB

Después de crear el archivo APK, puedes transferirlo al dispositivo Meta Quest con ADB a través de USB o Wi-Fi:

adb install app-release-signed.apk

Si usas la CLI de burbujas para empaquetar AWP, proporciona un comando de alias conveniente para transferir el archivo APK:

bubblewrap install

Las apps transferidas aparecen en la sección Fuentes desconocidas del panel de apps.

Envío de apps

La carga y el envío de AWP a Oculus Store se aborda en detalle en los documentos de Oculus Developer Center.

Además de enviar apps a Oculus Store, los desarrolladores también pueden distribuirlas a través de plataformas como SideQuest directamente a los consumidores de manera segura, sin requerir la aprobación de la tienda. De esta manera, pueden obtener una app directamente para los usuarios finales, incluso si está en las etapas iniciales de desarrollo, experimental o orientada a un público único.

Cómo probar apps con varias pestañas

Para probar apps con varias pestañas, creé una pequeña AWP que muestra las diversas funciones de los vínculos: por ejemplo, abrir una nueva pestaña en la AWP, permanecer en la pestaña actual, abrir una ventana nueva del navegador y abrir una WebView en la pestaña actual. Para crear una copia instalable de forma local de esta app, ejecuta los siguientes comandos en tu máquina.

ovr-platform-util create-pwa -o test.apk --android-skd ~/bin/android-10 --web-manifest-url https://tomayac.github.io/oculus-pwa-test/manifest.json --package-name com.example.pwa
adb install test.apk

Aquí hay una presentación en pantalla de la app de prueba.

Una versión de Oculus de SVGcode

Para llevar a cabo las instrucciones, creé una versión de Oculus de mi AWP más reciente, SVGcode. Puedes descargar el archivo APK resultante output.apk de mi Google Drive. Si deseas investigar más sobre el paquete, también tenemos una versión descompilada. Encuentra las instrucciones de compilación en package.json.

El uso de la app en Oculus funciona bien, incluida la capacidad de abrir y guardar archivos. El navegador Oculus no admite la API de Acceso al sistema de archivos, pero el enfoque de resguardo ayuda. Lo único que no funcionó es la función de pellizcar para hacer zoom. Mi expectativa era que funcionara: presionar el botón del activador en ambos controles y, luego, moverlos en direcciones opuestas. Aparte de eso, todo lo demás tenía un buen rendimiento y capacidad de respuesta, como puedes ver en la presentación en pantalla incorporada.

AWP envolventes de WebXR en 3D

La compatibilidad de las AWP en Oculus Quest no se limita a las aplicaciones 2D planas. Los desarrolladores pueden crear experiencias 3D envolventes para RV con la API de WebXR.

¿Te preguntas cómo se manejan varios mensajes (instalación de AWP, solicitudes de permisos, notificaciones) desde la RV, si es que lo hacen?

Esta es una presentación en pantalla de la prueba de instrucciones del usuario-agente de las pruebas de WebXR del grupo de trabajo web de Immersive.

Como puedes ver, para ingresar al modo RV, se requiere el permiso del usuario. Los permisos se solicitan una vez por origen. La solicitud de permisos sale del modo envolvente. Por el momento, no se admiten las notificaciones.

Seguimiento de la mano

Puedes usar tus manos para interactuar con las AWP en modo envolvente gracias a la API de WebXR Hand Input y el sistema de seguimiento manual basado en IA de Meta.

Aquí hay una presentación en pantalla de Hand Tracking Sample de las muestras de WebXR del Immersive Web Working Group.

Realidad aumentada/mezcla (transferencia)

Como se anunció en Meta Connect 2022, el navegador de Meta Quest agregó compatibilidad con la realidad aumentada (RA) de WebXR, también conocida como realidad mixta (MR), en dispositivos Meta Quest 2 y Meta Quest Pro.

Veamos un ejemplo inicial de un marco A un poco modificado con modelos reducidos y un cielo y un plano ocultos para la realidad aumentada.

A-Frame es un framework web de código abierto para crear experiencias 3D/VR/RA completamente a partir de elementos HTML personalizados declarativos y reutilizables que son fáciles de leer, comprender y copiar y pegar.

A continuación, se incluye una presentación en pantalla de esta demostración de Meta Quest 2.

Meta Quest 2 tiene cámaras monocromáticas, por lo que la transferencia está en escala de grises, mientras que Meta Quest Pro tiene cámaras de color.

Conclusiones

Las AWP de Oculus Quest 2 son muy divertidas y muy prometedoras. El lienzo virtual infinito que permite a los usuarios escalar su pantalla a lo que mejor se adapte a la tarea actual tiene mucho potencial para cambiar la forma en que trabajamos en el futuro. Si bien la escritura en RV con el seguimiento de la mano todavía es algo reciente y, al menos para mí, aún no funciona de forma muy confiable, funciona lo suficientemente bien para ingresar URLs o escribir textos cortos.

Lo que más me gusta de las AWP de Oculus Quest 2 es que son solo AWP comunes que se pueden usar sin cambios en una pestaña del navegador o a través de un wrapper delgado de APK sin ninguna API específica de la plataforma. Nunca fue tan fácil segmentar tus anuncios para varias plataformas con el mismo código. Por las AWP en RV y RA en la Web. El futuro es brillante.

Agradecimientos

Foto de Oculus Quest 2 de Maximilian Prandstätter en Flickr Imágenes de Oculus Store de apps de Instagram, Facebook, Oculus Browser y Spike, así como ilustraciones de visibilidad de la app y animación del seguimiento manual gracias a Meta. Hero image de Arnau Marín i Puig. Joe Medley revisó esta publicación.