Cuando nos preparamos para Google I/O, queríamos destacar las emocionantes 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 en todas partes.
Ahora habilitamos esta demostración en Chrome Canary en 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 Hit Test de WebXR), por lo que está marcado y se mantendrá en Canary mientras probamos y definimos mejor la nueva propuesta de API con otros miembros del grupo de la comunidad de Web Immersive. De hecho, para acceder a la demostración, deberás habilitar dos marcas en chrome://flags:: #webxr y #webxr-hit-test. Una vez que hayas habilitado ambas opciones y reiniciado Canary, puedes ver la demo 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 esculturas de Chacmool antiguas. Los usuarios pueden colocar una estatua de tamaño real en su realidad y moverse para ver la escultura desde diferentes ángulos y distancias. La naturaleza envolvente de la RA permite a los usuarios explorar, descubrir y jugar con el contenido libremente, al igual que lo hacen en el mundo real. Cuando vemos un objeto en RA, en lugar de verlo en una pantalla 2D plana, podemos obtener una comprensión profunda de lo que estamos viendo porque podemos verlo desde muchos ángulos y distancias diferentes con un modelo de interacción muy intuitivo: caminar alrededor del objeto y acercarnos o alejarnos físicamente. 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 esas características en la escultura.
Esta demostración se compiló durante aproximadamente un mes y aprovechó algunos de los componentes de la primera demostración de RA basada en la Web del equipo de WebXR, WebAR-Article. La información sobre la escultura se obtuvo de su página de Google Arts & Culture, y el modelo 3D fue proporcionado por el socio de Google Arts & Culture, CyArk. Para 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 para disminuir el tamaño del archivo. Luego, se usó Draco, una biblioteca para comprimir y descomprimir mallas geométricas 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 para que la página siga siendo interactiva mientras se carga y descomprime el modelo, una operación que, por lo general, causaría interrupciones y evitaría que se desplace la página.
No podemos enfatizar lo suficiente que, como estábamos desarrollando en computadoras de escritorio y, luego, implementábamos en un teléfono, usar las herramientas de depuración remota de Chrome para ayudar a inspeccionar la experiencia crea un ciclo de iteración rápido y excelente entre los cambios de código, y hay herramientas para desarrolladores increíbles en Chrome para depurar y verificar el rendimiento.
Prácticas recomendadas para las experiencias de RA/RV
La mayoría de los lineamientos de diseño y de ingeniería para crear experiencias de RA nativas se aplican a la creación de experiencias de RA basadas en la Web. Si deseas 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 diseñes experiencias de RA basadas en la Web, es mejor usar la pantalla completa (es decir, ir a pantalla completa de manera similar a como los reproductores de video van a pantalla completa en dispositivos móviles) cuando uses RA. Esto evita que los usuarios se desplacen por la vista o se distraigan con otros elementos de la página web. La transición a la RA debe ser fluida y sin interrupciones, y mostrar la vista de la cámara antes de ingresar a la integración de RA (p.ej., dibujar un retículo). Es importante tener en cuenta que, a diferencia de la RA nativa, los desarrolladores aún no tienen acceso al fotograma de la cámara, la estimación de iluminación, las anclas ni los planos, por lo que es importante que los diseñadores y desarrolladores tengan en cuenta estas limitaciones cuando diseñen una experiencia de RA basada en la Web.
Además, debido a la variedad de dispositivos que se usan para 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 usar la menor cantidad posible de luces, calcula las sombras de antemano si es posible y minimiza las llamadas de dibujo. Cuando muestres texto en RA, usa técnicas modernas de renderización de texto (es decir, basadas en campos de distancia firmados) 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 muestra anotaciones cuando sean relevantes (es decir, anotaciones basadas en la proximidad que aparecen cuando un usuario se enfoca en un área de interés).
Por último, como este contenido se basa en la Web, es importante aplicar también las prácticas recomendadas de diseño general para la Web. Asegúrate de que el sitio proporcione una buena experiencia en todos los dispositivos (computadoras de escritorio, tablets, dispositivos móviles, visores, etcétera). Admitir la mejora progresiva también significa diseñar para dispositivos que no son compatibles con la RA (es decir, mostrar un visor de modelos 3D en dispositivos que no son compatibles con la RA).
Si te interesa desarrollar tus propias experiencias de RA basadas en la Web, tenemos una entrada complementaria aquí que te brindará más detalles para comenzar a crear RA en la Web por tu cuenta. (También puedes consultar la fuente de la demo de Chacmool). La API de WebXR Device se encuentra en desarrollo activo y nos encantaría recibir comentarios para asegurarnos de que admita todo tipo de aplicaciones y casos de uso. Visita GitHub y únete a la conversación.