Oculus Quest 2 es un visor de realidad virtual (RV) creado por Oculus, una división de Meta. Ahora, los desarrolladores pueden compilar y distribuir aplicaciones web progresivas (AWP) 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 de los auriculares anteriores de la empresa, Oculus Quest. El dispositivo puede ejecutarse como auriculares independientes con un sistema operativo interno basado en Android y con software de realidad virtual compatible con Oculus que se ejecuta en una computadora de escritorio cuando se conecta a través de USB o Wi-Fi. Usa el sistema Qualcomm Snapdragon XR2 en un chip con 6 GB de RAM. La pantalla del Quest 2 es un panel LCD con cambio rápido único con una resolución de 1,832 × 1,920 píxeles por ojo que funciona a una frecuencia de actualización de hasta 120 Hz.
El navegador de Oculus
Actualmente, hay tres navegadores disponibles para Oculus Quest 2: Wolvic, el sucesor de Firefox Reality y el navegador Oculus integrado. Este artículo se centra en el último. En el sitio web de Oculus, se presenta el navegador Oculus de la siguiente manera.
"Oculus Browser proporciona compatibilidad con 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 2D funcionan muy bien en el navegador Oculus porque cuentan con la tecnología del motor de renderización de Chromium. Está aún más optimizado para las gafas 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, 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 escribir este artículo 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, que es solo una versión anterior a 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 características (fila superior de izquierda a derecha):
- Botón Atrás
- Botón "Volver a cargar"
- Información del sitio
- Barra de URL
- Botón Crear favorito
- Botón para cambiar el tamaño con opciones estrechas, medianas y anchas, además de una función de zoom
- Botón para solicitar el sitio web móvil
- 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 para minimizar
- Botón de tres puntos con opciones para atrás, adelante y volver a cargar
Frecuencia de actualización y proporción de píxeles del dispositivo
En Oculus Quest 2, el navegador de Oculus renderiza el contenido de la página web 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 según la velocidad 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 obtener un texto nítido.
AWP en el navegador de Oculus y en Oculus Store
El 28 de octubre de 2021, Jacob Rossi, líder de Administración de Productos de Meta (Oculus), compartió que las AWP llegarían a Oculus Quest y Oculus Quest 2. A continuación, describiré la experiencia de la AWP en Oculus y explicaré cómo compilar, transferir y probar tu AWP en Oculus Quest 2.
Uso compartido de estado
El estado de acceso se comparte entre el navegador de Oculus y las AWP, lo que permite a los usuarios cambiar sin problemas entre ambos. Por supuesto, Acceso con Facebook es compatible de forma predeterminada. El navegador 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 las apps instaladas.
Tamaños de ventana de la AWP
El usuario puede cambiar libremente el tamaño de las ventanas del navegador y 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.
Cómo interactuar con las AWP
Las AWP se pueden controlar con los controles izquierdo y derecho de Oculus, los mouses y teclados Bluetooth, y el seguimiento de la mano. El desplazamiento funciona mediante las palancas de los controles de Oculus o pellizcando los dedos pulgar y el índice, y moviéndose en la dirección deseada. Para seleccionar algo, el usuario puede señalar 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 se admiten todas las funciones. Por ejemplo, si 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 detección de funciones de las APIs se definirá mejor 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 AWP 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 Oculus.
- Inicia Google Chrome en tu computadora y ve a
chrome://inspect/#devices. - Busca el dispositivo Oculus en cuestión, seguido de un conjunto de pestañas del navegador de Oculus que estén abiertas en el dispositivo.
- Haz clic en Inspeccionar en la pestaña del navegador de Oculus que desees.
Descubrimiento de apps
Las personas pueden usar el navegador o la Oculus Store para descubrir las AWP. Al igual que con cualquier otro navegador, las AWP instaladas también funcionan en el navegador de Oculus como sitios web que se ejecutan en una pestaña. Cuando un usuario visite 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 instalada la app, el navegador Oculus los ayudará a cambiar fácilmente a la app si lo desean.
AWP ejemplares en Oculus Quest 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 de apps independientes que no tienen una barra de URL y que se pueden cambiar de tamaño libremente.
AWP de otros desarrolladores
En el momento de escribir este artículo, hay una cantidad pequeña, pero creciente, de AWP para 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 listas de 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 compilación rápida de soluciones nuevas.
Se agregarán más AWP, como Slack, Dropbox o Canva, como se anunció en un video en el que aparece Jacob Rossi y 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 la app web
Existen algunas diferencias importantes en comparación con los criterios de instalabilidad de Chrome y la especificación del manifiesto de la app web. Por ejemplo, Oculus solo admite idiomas de izquierda a derecha en este momento, mientras que la especificación del manifiesto de la app web no aplica 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 AWP para 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 de manifiesto de app web propietarios que se pueden usar para personalizar la experiencia de la AWP.
Empaquetamiento de AWP 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 de Android que inicie tu AWP como una Actividad web de confianza (TWA).
Actualmente, el navegador Meta Quest no es totalmente compatible con TWA, pero a partir de la versión 1.18.0, Bubblewrap admite el empaquetado de AWP para dispositivos Meta Quest.
Puede generar archivos APK universales que abren un archivo TWA en dispositivos Android normales y el navegador de Meta Quest en dispositivos de Meta Quest.
Si 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, podrás descargar e instalar automáticamente las dependencias externas requeridas: Java Development Kit (JDK) y 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, compila y firma el proyecto ejecutando lo siguiente:
bubblewrap build
Se generará un archivo llamado app-release-signed.apk. Este archivo se puede instalar en el dispositivo o publicarlo en Meta Quest Store, Google Play Store o cualquiera de las otras plataformas de distribución de apps para Android.
Empaquetamiento de AWP con la utilidad de la plataforma de Oculus
Oculus Platform Utility es la herramienta de línea de comandos oficial que desarrolló 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.
Dirige la herramienta a la URL activa del manifiesto de la app web a través del parámetro --web-manifest-url.
Si tu AWP publicada no tiene un manifiesto o deseas 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 notación de nombre de dominio inverso (por ejemplo, com.company.app.pwa), en lugar de agregar el campo ovr_package_name del 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
Empaquetamiento de AWP con PWABuilder
En opinión de los autores, usar 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, como Microsoft Store, Google Play Store, App Store y Meta Quest Store.
Empaquetar 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 les permite a los desarrolladores elegir qué herramienta usar para empaquetar AWP 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 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 AWP, esta proporciona un comando de alias conveniente para cargar el archivo APK de forma lateral:
bubblewrap install
Las apps transferidas aparecen en la sección Fuentes desconocidas del selector de aplicaciones.
Envío de apps
La carga y el envío de AWP a Oculus Store se abordan en detalle en la documentación del Centro de desarrolladores de Oculus.
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. Esto les permite enviar una app directamente a los usuarios finales, incluso si está en las primeras etapas de desarrollo, es experimental o está dirigida a un público único.
Cómo probar apps de varias pestañas
Para probar las apps con varias pestañas, creé una pequeña AWP de prueba que demuestra las distintas funciones de los vínculos: abrir una nueva pestaña en la AWP, permanecer en la pestaña actual, abrir una nueva ventana del navegador y abrir una WebView en la pestaña actual. Ejecuta los siguientes comandos en tu máquina para crear una copia de esta app que se pueda instalar de forma local.
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
Esta es una presentación en pantalla de la app de prueba.
Una versión de SVGcode para Oculus
Para probar las instrucciones, creé una versión de Oculus de mi AWP más reciente, SVGcode. Puedes descargar el archivo APK resultante output.apk desde mi Google Drive. Si quieres investigar el paquete con más detalle, también tengo una versión descompilada. Encuentra las instrucciones de compilación en package.json.
Puedes usar la app en Oculus correctamente, incluida la capacidad de abrir y guardar archivos. El navegador de Oculus no es compatible con 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 del gatillo en ambos controles y, luego, moviéndolos en direcciones opuestas. Aparte de eso, todo lo demás tuvo buen rendimiento y receptividad, como puedes ver en la presentación en pantalla incorporada.
AWP 3D envolventes de WebXR
La compatibilidad con AWP en Oculus Quest no se limita a las apps 2D planas. Los desarrolladores pueden crear experiencias 3D envolventes para la RV con la API de WebXR.
¿Te preguntas cómo se manejan varias solicitudes (instalación de AWP, solicitudes de permisos, notificaciones) desde la RV, si es que se manejan?
Esta es una presentación en pantalla de la prueba de instrucciones del usuario-agente de las Pruebas de WebXR de Immersive Web Working Group.
Como puedes ver, ingresar al modo de realidad virtual requiere el permiso del usuario. Se solicita permiso una vez por origen. Si solicitas permisos, se saldrá del modo envolvente. Por el momento, no se admiten las notificaciones.
Seguimiento de manos
Puedes usar las manos para interactuar con los PWA en modo inmersivo gracias a la API de entrada de manos de WebXR y al sistema de seguimiento de manos basado en IA de Meta.
Este es un video instructivo de la muestra de seguimiento de manos de los ejemplos de WebXR del grupo de trabajo de la Web Immersive.
Realidad aumentada o mixta (transparencia)
Como se anunció en Meta Connect 2022, el navegador Meta Quest agregó compatibilidad con la realidad aumentada (RA) de WebXR, también conocida como realidad mixta (MR), en los dispositivos Meta Quest 2 y Meta Quest Pro.
Veamos un ejemplo inicial de A-Frame ligeramente modificado con modelos reducidos y cielo y plano ocultos para la realidad aumentada.
A-Frame es un framework web de código abierto para crear experiencias en 3D, VR y RA completamente a partir de elementos HTML personalizados declarativos y reutilizables que son fáciles de leer, entender y copiar y pegar.
Esta es una presentación en pantalla de esta demostración en Meta Quest 2.
Meta Quest 2 tiene cámaras monocromáticas, por lo que la transferencia es en escala de grises, mientras que Meta Quest Pro tiene cámaras en color.
Conclusiones
Las AWP en Oculus Quest 2 son muy divertidas y prometedoras. El lienzo virtual sin fin que permite a los usuarios escalar la pantalla para que se ajuste mejor a la tarea actual tiene mucho potencial para cambiar la forma en que trabajamos en el futuro. Si bien la escritura en RV con seguimiento de manos aún está en desarrollo y, al menos para mí, aún 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 AWP en Oculus Quest 2 es que son AWP 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. Segmentar contenido para varias plataformas con el mismo código nunca fue tan fácil. ¡Salud por las AWP en VR y RA en la Web! El futuro es prometedor.
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 una ilustración de la visibilidad de apps y una animación de seguimiento de la mano, cortesía de Meta. Hero image de Arnau Marín i Puig. Esta publicación fue revisada por Joe Medley.