Cuando nos preparamos para Google I/O, queremos destacar las interesantes posibilidades de la realidad aumentada (RA) en la Web. Chacmool es una demostración de experiencia web educativa que creamos para mostrar la facilidad con la que la RA basada en la Web puede ayudar a los usuarios a interactuar con experiencias de RA. La Web hace que la RA sea conveniente y accesible desde cualquier lugar.
Ya habilitamos esta demostración en
Chrome Canary
para
dispositivos Android compatibles con ARCore con Android O o versiones posteriores. También deberás instalar ARCore.
Este trabajo se basa en una nueva propuesta de WebXR (la
API de WebXR Hit Test), por lo que está bajo una alerta y tiene la intención de permanecer en Canary mientras probamos y perfeccionamos la nueva propuesta de API con otros miembros de Immersive Web Community Group. De hecho, para acceder a la demostración deberás habilitar dos marcas en chrome://flags:, #webxr y #webxr-hit-test. Una vez que los tengas habilitados y hayas reiniciado Canary, puedes consultar la demostración de Chacmool.
La experiencia de RA de Chacmool se centra en la educación y aprovecha la naturaleza interactiva y envolvente de la RA para ayudar a los usuarios a aprender sobre las antiguas esculturas de Chacmool. Los usuarios pueden colocar una estatua en tamaño real en su realidad y moverse para verla desde diferentes ángulos y distancias. La naturaleza envolvente de la RA permite a los usuarios explorar, descubrir contenido y jugar con él libremente, al igual que en el mundo real. Cuando se visualiza un objeto en RA, en lugar de verlo en una pantalla plana en 2D, podemos comprender mejor lo que estamos viendo, ya que podemos verlo desde muchos ángulos y distancias diferentes con un modelo de interacción muy intuitivo: caminar alrededor del objeto y acercarse físicamente o más lejos. Además, en esta experiencia, hay anotaciones colocadas directamente en la escultura. Esto permite a los usuarios conectar directamente lo que se describe en el texto y dónde se encuentran esos elementos en la escultura.
Esta demostración se creó en el transcurso de aproximadamente un mes para aprovechar algunos de los componentes de WebAR-Article, la primera demostración de RA basada en la Web del equipo de WebXR. La información sobre la escultura se obtuvo de la página Arts & Culture de Google, y el socio de Google Arts & Culture, CyArk, proporcionó el modelo 3D. Con el objetivo de preparar el modelo 3D para la Web, se usó una combinación de Meshlab y Mesh Mixer para reparar el modelo y diezmar su malla con el objetivo de disminuir el tamaño del archivo. Luego, se usó Draco, una biblioteca para comprimir y descomprimir mallas geométricas en 3D y nubes de puntos para reducir el tamaño del archivo del modelo de 44.3 megabytes a solo 225 kilobytes. Por último, se usa un trabajador web para cargar el modelo en un subproceso en segundo plano, de modo que la página permanezca interactiva mientras el modelo se carga y descomprime. Esta operación generalmente provoca bloqueos y evita que se desplace la página.
No podemos dejar de hacer hincapié en eso, como estábamos desarrollando en computadoras de escritorio y realizando la implementación en un teléfono, el uso de las herramientas de depuración remota de Chrome para inspeccionar la experiencia crea un ciclo de iteración excelente y rápido entre los cambios de código, y hay increíbles herramientas para desarrolladores en Chrome para depurar y verificar el rendimiento.
Prácticas recomendadas para experiencias de RA y RV
La mayoría de los lineamientos de ingeniería y diseño para diseñar experiencias de RA nativas se aplican al diseño de experiencias de RA basadas en la Web. Si quieres obtener más información sobre las prácticas recomendadas generales, consulta los lineamientos de diseño de RA que lanzamos recientemente.
En particular, cuando se diseñan experiencias de RA basadas en la Web, es mejor usar toda la pantalla (es decir, cambiar a pantalla completa de manera similar a como los reproductores de video en pantalla completa en dispositivos móviles) cuando se usa la RA. De esta manera, evitas que los usuarios se desplacen por la vista o se distraigan con otros elementos de la página web. La transición a RA debe ser fluida y fluida, y debe mostrar la vista de la cámara antes de ingresar a la integración de RA (p.ej., dibujar un retículo). Lo importante a tener en cuenta sobre la RA basada en la Web es que, a diferencia de los nativos, los desarrolladores no tienen acceso al marco de la cámara, la estimación de la iluminación, las anclas ni los planos (todavía), por lo que es importante que los diseñadores y desarrolladores tengan en mente estas limitaciones cuando diseñen una experiencia de RA basada en la Web.
Además, debido a la variedad de dispositivos que se usan en las experiencias web, es importante que el rendimiento se optimice para crear la mejor experiencia del usuario. Por lo tanto, mantén bajos los recuentos de polígonos, intenta reducir la cantidad de luces y calcula previamente las sombras si es posible y minimiza las llamadas de dibujo. Cuando muestres texto en RA, usa técnicas modernas de renderización de texto (basadas en campos de distancia firmado) para asegurarte de que el texto sea claro y legible desde todas las distancias y ángulos. Cuando coloques anotaciones, piensa en la mirada del usuario como otra entrada y solo muéstralas cuando sean relevantes (es decir, las anotaciones basadas en la proximidad que aparecen cuando un usuario está enfocado en un área de interés).
Por último, debido a que este contenido está basado en la Web, también es importante aplicar las prácticas recomendadas de diseño generales para la Web. Asegúrate de que el sitio brinde una buena experiencia en todos los dispositivos (computadoras de escritorio, tablets, dispositivos móviles, auriculares, etc.). Admitir la mejora progresiva implica diseñar también para dispositivos que no admiten RA (es decir, mostrar un visualizador de modelos 3D en dispositivos que no sean de RA).
Si te interesa desarrollar tus propias experiencias de RA basadas en la Web, tenemos una publicación complementaria aquí que te brindará más detalles para comenzar a compilar RA en la Web por tu cuenta. (También puedes consultar la fuente de la demostración de Chammool). La API de WebXR Device está en desarrollo y nos gustaría conocer tus comentarios para asegurarnos de que habilita todo tipo de aplicaciones y casos de uso, así que ve a GitHub y únete a la conversación.