El Oculus Quest 2 es un visor de realidad virtual (RV) creado por Oculus, una división de Meta. Ahora, los desarrolladores pueden crear y distribuir aplicaciones web progresivas (AWP) en 2D y 3D que aprovechen la función de multitarea de Oculus Quest 2.
Oculus Quest 2
El 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, el Oculus Quest. El dispositivo puede funcionar 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 a través de USB o Wi-Fi. Utiliza el sistema en un chip Snapdragon XR2 de Qualcomm con 6 GB de RAM. La pantalla del Quest 2 es un panel LCD de conmutación rápida único con una resolución de 1,832 × 1,920 píxeles por ojo que funciona con una frecuencia de actualización de hasta 120 Hz.
El navegador de Oculus
Actualmente, hay tres navegadores disponibles para el Oculus Quest 2: Wolvic, sucesor de Firefox Reality, y el Oculus Browser integrado. Este artículo se centra en esta última opción. 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. Los sitios web en 2D actuales funcionan muy bien en el navegador de Oculus porque usan el motor de renderización de Chromium. Además, está optimizado para los visores de Oculus para obtener el mejor rendimiento y permitir que los desarrolladores web aprovechen todo el potencial de la RV con nuevas APIs, como WebXR. Con WebXR, abrimos 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 de Oculus Browser se basa en Chrome 95.0.4638.74, que solo está una versión por detrás de la versión estable actual de Chrome, que es 96.0.4664.110. Si el usuario cambia al modo para dispositivos móviles, 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 un marcador
- Botón para cambiar el tamaño con opciones estrecha, mediana y ancha, además de una función de zoom
- Botón para solicitar el sitio web para dispositivos móviles
- Botón de menú con las siguientes opciones:
- Cómo 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 funciones:
- Botón de cerrar
- Botón de minimizar
- Botón de tres puntos con opciones para volver, avanzar y volver a cargar
Frecuencia de actualización y proporción de píxeles del dispositivo
En el caso del Oculus Quest 2, el navegador de Oculus renderiza el contenido de páginas web en 2D y WebXR con una frecuencia de actualización de 90 Hz. Cuando miras contenido multimedia en pantalla completa, Oculus Browser optimiza la frecuencia de actualización del dispositivo según la frecuencia de fotogramas del video, por ejemplo, 24 FPS. El Oculus Quest 2 tiene una relación de píxeles del dispositivo de 1.5 para un texto nítido.
AWP en el navegador de Oculus y la tienda de Oculus
El 28 de octubre de 2021, Jacob Rossi, jefe de Administración de Productos en Meta (Oculus), compartió que las APW llegarían a Oculus Quest y Oculus Quest 2. A continuación, describo la experiencia de las APW en Oculus y explico cómo compilar, transferir de forma local y probar tu APW en el Oculus Quest 2.
Compartir estado
El estado de acceso se comparte entre el navegador de Oculus y las APW, lo que permite a los usuarios cambiar entre ambos sin problemas. Naturalmente, el acceso con Facebook se admite de forma predeterminada. El navegador de Oculus 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 apps instaladas.
Tamaños de ventana de la PWA
El usuario puede cambiar el tamaño de las ventanas del navegador y de las APW instaladas libremente. 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 1,000 × 625 px.
Cómo interactuar con las AWP
Las PWA se pueden controlar con los controles izquierdo y derecho de Oculus, mouses y teclados Bluetooth, y con el seguimiento de manos. El desplazamiento funciona con los joysticks analógicos de los controles de Oculus o pellizcando el pulgar y el índice, y moviendo los dedos en la dirección deseada. Para seleccionar un elemento, el usuario puede apuntar y pellizcar.
Permisos para PWA
Los permisos en el navegador de Oculus funcionan de la misma manera que en Chrome. El estado se comparte entre las apps que se ejecutan en el navegador y las PWA instaladas, por lo que los usuarios pueden cambiar entre las dos experiencias sin tener que otorgar los mismos permisos nuevamente.
Si bien se implementaron muchos permisos, no se admiten todas las funciones. 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 distintas 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 detección de funciones de las APIs se perfeccionará una vez que el navegador madure.
Cómo depurar AWP con las Herramientas para desarrolladores de Chrome
Después de habilitar el modo de desarrollador, la depuración de APW en Oculus Quest 2 funciona exactamente como se describe en Depuración remota de dispositivos Android.
- En el dispositivo Oculus, navega al sitio deseado en el navegador de Oculus.
- Inicia Google Chrome en tu computadora y navega a
chrome://inspect/#devices. - Busca el dispositivo Oculus en cuestión, al que le seguirá un conjunto de pestañas del navegador de Oculus que están abiertas en el dispositivo.
- Haz clic en Inspeccionar en la pestaña deseada de Oculus Browser.
Descubrimiento de apps
Las personas pueden usar el navegador o la Oculus Store para descubrir APW. Al igual que con cualquier otro navegador, las AWP instaladas también funcionan en Oculus Browser como sitios web que se ejecutan en una pestaña. Cuando un usuario visita un sitio, el navegador de Oculus 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, el navegador de Oculus los ayudará a cambiar fácilmente a la app si lo desean.
AWP ejemplares en el Oculus Quest 2
AWP de Meta
Varias divisiones de Meta crearon AWP para el Oculus Quest 2, por ejemplo, Instagram y Facebook. Estas APW se ejecutan en ventanas de apps independientes que no tienen una barra de URL y que se pueden cambiar de tamaño libremente.
APW de otros desarrolladores
En el momento de escribir este artículo, hay una cantidad pequeña, pero cada vez mayor, de APW para el Oculus Quest 2 en Oculus Store. Spike permite a los usuarios experimentar todas las herramientas de trabajo esenciales, como correo electrónico, chat, llamadas, notas, tareas y pendientes, desde su bandeja de entrada en un centro de entorno virtual directamente en la app de Spike.
Otro ejemplo es Smartsheet, un espacio de trabajo dinámico que proporciona administración de proyectos, flujos de trabajo automatizados y creación rápida de nuevas soluciones.
Pronto habrá más APW, como Slack, Dropbox o Canva, tal como se anticipó en un video con Jacob Rossi que se lanzó en el contexto de la conferencia Connect de Facebook en 2021.
Cómo crear APW para Oculus
Meta describió los pasos necesarios en su documentación. En general, las APW que se pueden instalar en Chrome suelen funcionar de inmediato en Oculus.
Requisitos del manifiesto de la app web
Existen algunas diferencias importantes en comparación con los criterios de instalación de Chrome y la especificación del manifiesto de la app web. Por ejemplo, en este momento, Oculus solo admite idiomas de izquierda a derecha, mientras que la especificación del manifiesto de la app web no impone tales restricciones. Otro ejemplo es start_url, que Chrome requiere estrictamente para que una app se pueda instalar, pero que en Oculus es opcional. Oculus ofrece una herramienta de línea de comandos que permite a los desarrolladores crear APW para el Oculus Quest 2, lo que les permite pasar los parámetros faltantes (o anular los existentes) en el manifiesto de la app web.
Oculus tiene varios campos opcionales propietarios del manifiesto de la app web que se pueden usar para personalizar la experiencia de la AWP.
Cómo empaquetar APW con la CLI de Bubblewrap
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ó Bubblewrap para ayudar a los desarrolladores a generar, compilar y firmar un proyecto para Android que inicie tu AWP como una Actividad web de confianza (TWA).
Actualmente, el navegador de Meta Quest no admite por completo las TWA, pero, a partir de la versión 1.18.0, Bubblewrap admite el empaquetado de APW para dispositivos Meta Quest.
Puede generar archivos APK universales que abren una AWP en dispositivos Android normales y en el navegador de Meta Quest en dispositivos Meta Quest.
Si ya tienes instalado Node.js, puedes instalar la CLI de Bubblewrap con el siguiente comando:
npm i -g @bubblewrap/cli
Cuando ejecutes Bubblewrap por primera vez, se ofrecerá a 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 encapsule tu PWA, 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, compílalo y fírmalo ejecutando el siguiente comando:
bubblewrap build
Esto generará un archivo llamado app-release-signed.apk. Este archivo se puede instalar en el dispositivo o publicar en Meta Quest Store, Google Play Store o cualquier otra plataforma de distribución de apps para Android.
Cómo empaquetar PWA con la utilidad de la plataforma de Oculus
Oculus Platform Utility es la herramienta oficial de línea de comandos desarrollada por Meta para publicar apps para 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 activa del manifiesto de la app web a través del parámetro --web-manifest-url.
Si no tienes un manifiesto en tu PWA activa o deseas anular el manifiesto activo, puedes generar un APK para tu PWA con un archivo de manifiesto local y el parámetro --manifest-content-file.
Para que el manifiesto sea lo más puro posible, usa el parámetro --package-name con un valor en notación de nombre de dominio inverso (por ejemplo, com.company.app.pwa), en lugar de agregar el campo ovr_package_name propietario 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 AWP con PWABuilder
En opinión de los autores, usar PWABuilder es la forma más sencilla y, por lo tanto, recomendada de empaquetar PWA 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 APW para publicarlas en varias tiendas, incluidas Microsoft Store, Google Play Store, App Store y Meta Quest Store.
Empaquetar APW con PWABuilder es tan sencillo como ingresar la URL de una APW, ingresar o editar los metadatos de la app y hacer clic en el botón Generar.
PWABuilder les permite a los desarrolladores elegir qué herramienta usar de forma interna para empaquetar APW para dispositivos Meta Quest.
Puedes elegir la opción Meta Quest para usar la utilidad de la plataforma de Oculus.
Puedes elegir la opción Android para usar Bubblewrap 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 de forma local 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 Bubblewrap para empaquetar APPs, esta proporciona un alias de comando conveniente para transferir de forma local el archivo APK:
bubblewrap install
Las apps transferidas de forma local aparecen en la sección Fuentes desconocidas del selector de aplicaciones.
Envío de la app
En la documentación del Centro para desarrolladores de Oculus, se explica en detalle cómo subir y enviar APW a Oculus Store.
Además de enviar apps a la Oculus Store, los desarrolladores también pueden distribuirlas a través de plataformas como SideQuest directamente a los consumidores de forma segura, sin necesidad de aprobación de la tienda. Esto les permite ofrecer una app directamente a los usuarios finales, incluso si se encuentra en una etapa temprana de desarrollo, es experimental o está dirigida a un público único.
Cómo probar apps con varias pestañas
Para probar las apps de varias pestañas, creé una pequeña PWA de prueba que demuestra las diversas funciones de vínculos: específicamente, abrir una pestaña nueva en la PWA, permanecer en la pestaña actual, abrir una ventana nueva del navegador y abrir en una WebView permaneciendo en la pestaña actual. Para crear una copia de esta app que se pueda instalar de forma local, 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í tienes un screencast de la app de prueba.
Una versión de SVGcode para Oculus
Para probar las instrucciones, creé una versión para Oculus de mi PWA más reciente, SVGcode. Puedes descargar el archivo APK resultante
output.apk
desde mi Google Drive. Si quieres investigar más el paquete, también tengo 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 de Oculus no admite la API de File System Access, pero el enfoque de resguardo ayuda. Lo único que no funcionó fue el zoom con pellizco. Esperaba que funcionara presionando el botón de activación de ambos controles y, luego, moviéndolos en direcciones opuestas. Aparte de eso, todo lo demás funcionó de manera eficiente y respondió bien, como puedes ver en la grabación de pantalla incorporada.
AWP de WebXR inmersivas en 3D
La compatibilidad con AWP en Oculus Quest no se limita a las apps planas en 2D. Los desarrolladores pueden crear experiencias envolventes en 3D para RV con la API de WebXR.
¿Te preguntas cómo se controlan varias indicaciones (instalación de APW, solicitudes de permisos, notificaciones) desde la VR, si es que se controlan?
A continuación, se muestra una grabación de pantalla de la prueba de mensajes del usuario-agente de las pruebas de WebXR del Grupo de trabajo de la Web inmersiva.
Como puedes ver, ingresar al modo de VR requiere el permiso del usuario. Los permisos se solicitan una vez por origen. Cuando se solicitan permisos, se abandona el modo envolvente. Actualmente, no se admiten las notificaciones.
Monitoreo de manos
Puedes usar las manos para interactuar con las APW en el modo envolvente gracias a la API de WebXR Hand Input y al sistema de seguimiento de manos basado en IA de Meta.
Aquí tienes una captura de pantalla de Hand Tracking Sample de WebXR Samples del Immersive Web Working Group.
Realidad aumentada o mixta (Passthrough)
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 (RM), en los dispositivos Meta Quest 2 y Meta Quest Pro.
Veamos un ejemplo de inicio de A-Frame ligeramente modificado con modelos reducidos y el cielo y el plano ocultos para la realidad aumentada.
A-Frame es un framework web de código abierto para crear experiencias en 3D, RV y 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 muestra una grabación de pantalla de esta demostración en Meta Quest 2.
Los Meta Quest 2 tienen cámaras monocromáticas, por lo que el modo de transferencia es en escala de grises, mientras que los Meta Quest Pro tienen cámaras a color.
Conclusiones
Las PWA en Oculus Quest 2 son muy divertidas y prometedoras. El lienzo virtual infinito que permite a los usuarios ajustar la pantalla a lo que mejor se adapte a la tarea actual tiene mucho potencial para cambiar la forma en que trabajaremos en el futuro. Si bien escribir en RV con el seguimiento de manos aún está en sus inicios y, al menos para mí, no funciona de forma muy confiable, sí funciona lo suficientemente bien para ingresar URLs o escribir textos cortos.
Lo que más me gusta de las APW en el Oculus Quest 2 es que son APW normales que se pueden usar sin cambios en una pestaña del navegador o a través de un wrapper de APK delgado sin ninguna API específica de la plataforma. Nunca fue tan fácil segmentar varias plataformas con el mismo código. Brindamos por las PWA 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 la tienda de Oculus de las apps de Instagram, Facebook, Oculus Browser y Spike, así como ilustraciones de la visibilidad de las apps y animaciones de seguimiento de manos cortesía de Meta. Imagen de héroe de Arnau Marín i Puig. Joe Medley revisó esta publicación.