WebXR: Realidad Virtual y Realidad Aumentada de forma nativa en navegadores

Entonces, les mostraré muchos ejemplos de cómo pueden trabajar con WebXR, crear sus propios experimentos. Así que por favor, tomen tantas fotos como puedan, mencionen mi nombre, mencionen el evento. Esto nos ayuda mucho con el trabajo que hemos estado haciendo aquí mismo.

De acuerdo, ¿quién está aquí por primera vez en C3? Conferencia C3. Wow, eso es increíble. Sí. Oh, mucha gente. Así que sí, espero que disfruten esto. Esta es mi tercera vez en Ámsterdam. Estuve en JS Nation y esta es una de mis personas favoritas porque la gente siempre está interactuando. Así que siéntanse libres de publicar sus preguntas más tarde o sus sugerencias también en Slido y eso nos va a ayudar mucho.

De acuerdo, ¿quién ha jugado con realidad virtual antes? Genial. ¿Quién ha programado algo para VR? Oh, eso es genial. Vi que ahora tienen un premio, ¿verdad, para un MetaQuest? Así que probablemente vamos a tener muchas ideas si quieren esto. Háganme saber más tarde qué van a construir. ¿Qué tal la realidad aumentada? ¿Alguien todavía juega Pokemon Go? Oh, veo muchas caras como, oh no, no estoy seguro de que conozcan esto. No, Pokemon Go está bien. Es bastante bueno. De acuerdo, espero que ustedes no sean así en el futuro, como personas caminando por ahí y esto se está volviendo muy viral, pero no sé ustedes, pero me siento muy raro como la gente caminando por las calles con esos lentes, pero es bastante asombroso.

De acuerdo, como siempre, en mis charlas, vamos a tener solo 20 minutos aquí. Así que todo el contenido que preparé aquí lo pueden seguir más tarde, crear sus propios experimentos, pero quiero mostrarles algunas cosas para que las tengan en cuenta durante toda la presentación. Así que uno de mis objetivos aquí es motivarlos a que creen sus propios experimentos. Esto no es solo para mirar, okay, pueden llegar allí, clonar los proyectos y probarlos en casa. Y aquí diría que pensemos fuera de la caja, ¿verdad?, tratemos de trabajar fuera de nuestro trabajo de 9 a 6 PM, tratemos de usar el software como nuestro pasatiempo porque así es como estamos mejorando nuestro CV, o simplemente divirtiéndonos con JavaScript y divirtiéndonos con la tecnología en general. Y diría que esto es algo así como para mí, la gente dice, wow, no programo después del trabajo, pero no, también podemos usarlo como algo divertido y les mostraré muchas posibilidades.

De acuerdo, así que compré el MetaQuest hace poco tiempo, y pensé, wow, quiero programar con esto, quiero probar algo, pero no he visto a muchos desarrolladores web hablar de esto. Fue bastante raro, no sé si se dieron cuenta, pero durante las conferencias es muy raro ver esto. Sin embargo, esas experiencias, han estado allí durante unos 40 años y esto es algo que les voy a mostrar hoy. ¿Quién aquí ha jugado con el Google Cardboard, quién tuvo esto antes? Bueno, yo tuve uno y fue bastante terrible, no sé ustedes, como me sentí un poco mareado, y en mi opinión, bueno, la realidad virtual, los gráficos no son tan buenos, la experiencia no es tan buena, así que no le presté mucha atención a esto.

Y cuando vi a Uncle Zuckenberg jugando con esto, pensé, vamos, estamos en 2024, estos gráficos son como los de Nintendo Wii, mucho tiempo atrás, él está apostando mucho por el Metaverso, pero sentí como que no, esto es solo hype o algo así. Aunque vi este juego, vamos, mira qué bonito es esto, hay un montón de gráficos allí, las animations, y es bastante hermoso. Así que cuando me di cuenta de esto, pensé, wow, hay un mundo aquí que no estoy viendo. Y me volví aún más loco cuando vi este juego de AR. Así que puedes tener tus personajes, los monstruos pasando por tus muebles, analizando tu entorno y demás. Así que pensé, wow, hay mucha atención aquí y puedo empezar a trabajar con esto. En aquel entonces compré el MetaQuest 2. Así que este MetaQuest 2, creo que ahora está obsoleto, pero es el que pude comprar en aquel entonces, pero funciona bastante bien. Así que cuando empecé a jugar con él, empecé a preguntar a mis amigos, bueno, ¿qué debo hacer? Y luego descubrí esta tienda, que es, diría yo, para desarrolladores independientes, la mayoría de los juegos y aplicaciones aquí, son de código abierto, así que puedes empezar a usarlos de inmediato. Y aquí también puedes pagar a los desarrolladores. Y la mayoría de los juegos aquí, usan C sharp y usan Unity para crear todas esas cosas. Empecé a preguntar a mis amigos, bueno, ¿qué juego debería usar o qué experiencias debería probar en mis gafas de realidad virtual? Ellos dijeron, ve a jugar Beat Saber. Cuando vi el precio pensé, oh no, no voy a comprar esto, es demasiado caro. Y luego intenté encontrar otros juegos y encontré este, Moon Rider. Cuando encontré este juego, vi un botón muy interesante, WebXR. Así que mi mente explotó, wow, WebXR, esto significa que este juego o esta experiencia se va a ejecutar en el navegador. Y esto significa que puedo ejecutarlo en mi navegador, puedo ejecutarlo en MetaQuest, en el teléfono móvil, en cualquier lugar que quiera. ¿Cómo fue? Así que Moon Rider aquí, es una reinterpretación del juego. Y para mí fue increíble porque los gráficos y las experiencias, me sentí como en una aplicación nativa. No pude encontrar ningún retraso. Aquí solo estoy mostrando cómo es el gráfico. Es bastante simple, funciona muy bien. Voy a avanzar un poco en el futuro para ver cómo se juega. Pero sí, tienes la misma experiencia, la misma inmersión que veías en aquel entonces. Soy un jugador malo aquí, pero funciona muy bien. Así que pensé, wow, hay muchas posibilidades aquí. JavaScript ejecutándose allí, no sé, busquemos más. ¿Qué tal este tipo de cosas? Antes de continuar, diría que este tipo de tecnología es peligrosa. Es bastante peligrosa. Así que ten cuidado cuando estés desarrollando algo, creando algo, porque pueden ocurrir accidentes.

Mira de nuevo, por Dios, golpeé tan fuerte esto. Cuando estaba jugando, golpeé una caja cerca de mí, golpeé a mi esposa, así que debes tener mucho cuidado al realizar este tipo de operación.

De acuerdo, Moon Rider, cuando estaba revisando el proyecto, vi allí A-frame y WebXR. Así que empecé a preguntarme, WebXR, A-frame. WebXR es básicamente AR y VR, utilizamos la misma API en el navegador para crear nuestros proyectos. Google lanzó muchas cosas en Android para que puedas usarlas de inmediato. Apple acaba de lanzar algunas noticias al respecto, pero es solo la tecnología que puedes integrar con tu entorno. Puedes colocar objetos 3D y es bastante sencillo. Para hacer que todo funcione de manera estándar, puedes usar A-frame.

¿Alguien ha jugado con A-frame antes? Wow, genial. Esto es, no sé, es una obra de arte, ¿verdad? Porque con el mismo código puedes usarlo en MetaQuest, Apple Vision, en el navegador, y puedes tener diferentes capas de renderizado, y tienen fallbacks y funcionan muy bien. Detrás de escena, están utilizando 3JS para obtener esos módulos, y también es bastante estándar, pero es increíble cómo se ven. Así que puedes colocar todos estos objetos en tu aplicación web y ver cómo funcionan en VR o AR. Y este juego es básicamente una experiencia, aquí estoy usando mi teléfono, así que puedes ver, bueno, si no estás usando las gafas, puedes tener fallbacks para controlarlo, puedes tener joysticks, o si no quieres usar joysticks, puedes usar... Aquí puedes usar el cardboard, bastante sencillo. No tuve que tocar ninguna de las cosas. Todo venía de la biblioteca actual.

Así que bueno, ahora entendimos el potencial de la cosa, y ahora es el momento de comenzar a codificar, ¿verdad? Deberíamos ver cómo son las herramientas y qué tan difícil es codificar algo como esto. Primero vamos a necesitar un emulador. Estaba usando esta extensión del navegador, así que lo hace mucho más fácil. Diría que, en las primeras aplicaciones, estaba implementando en mi teléfono o intentando actualizar la cosa, y llevaba mucho tiempo. Con esto, puedes ahorrar mucho tiempo. O puedes usar 8th Wall, que es el propietario de Pokemon, el Niantic, construyeron esto para que tengas un emulador allí que puede enviar videos, puedes ver la profundidad del entorno y probar el código antes de implementarlo o actualizarlo.

Bueno, para los dispositivos de Apple, Apple no nos permite usar WebXR en la web en este momento, ¿verdad? Creo que acaban de lanzar la versión beta que puedes activar con banderas, pero para hacer todos esos experimentos, tuve que instalar navegadores de terceros para comenzar a usarlos. Y así es como funciona nuestro Hello World. Puedo colocar componentes, puedo colocar entidades, animaciones, y con solo, diría yo, menos de 30 líneas de código, tengo toda una experiencia. Puedo ver cómo funcionan los objetos en movimiento. Incluso puedo interactuar con el entorno o la emulación y es agradable. Bastante sencillo, bastante fácil. Sin embargo, no sé si ustedes lo saben, pero soy un desarrollador de backend.

No sé cómo voy a colocar objetos. Si me preguntas, intentar hacer algo en CSS, estoy en problemas. Así que quería ver cómo puedo hacer algo de magia usando caracteres reales o utilizando animaciones complejas en mis propias aplicaciones. Así que lo más destacado de esta charla para que ustedes sigan adelante más tarde es que pueden descargar cosas, pueden editar, personalizar como deseen y comenzar a usarlas en sus aplicaciones. Para mí, esto fue una de las mejores cosas. Así que hay otras tiendas aquí donde pueden encontrar muchos activos de forma gratuita. Pueden ir allí, o para los más complejos, entornos más ricos, y así sucesivamente, pueden comprar o pagar a desarrolladores. Hay una enorme comunidad detrás de esto y pueden obtener todo, no solo los módulos, sino también las texturas y todo lo que puedan obtener de forma gratuita. Una vez que encuentres algo que te guste, en este caso un objeto bastante complejo, simplemente lo descargo. Lo descargo, lo coloco en mi sistema de archivos y cuando voy a la aplicación web, es como una imagen. Tengo la fuente, solo apunto al módulo y listo. Todo funciona. Funcionará en MetaQuest y en cualquier dispositivo que desees, solo con unas pocas líneas de código.

Esto es bastante sencillo, y para mí es increíble lo que podemos hacer con esto. ¡Ok, ahora empiezo a gustar, ¿verdad? Porque soy un desarrollador backend, cuando empiezo a codificar me gusta usar cosas como WrapableStrap, me gusta usar jQuery, así que me gusta esto para empezar a trabajar con algo y divertirme, y luego pensar en algún producto o crear algo más adelante. ¿Ok, qué hay de las animaciones? Bueno, los videojuegos son básicamente animaciones, ¿verdad? Estás interactuando con el usuario, pero cambias cómo se mueve o baila tu personaje. Entonces, ¿qué tan difícil es para mí, como desarrollador backend, empezar a trabajar con esto? La misma idea. Vas a la tienda, encuentras un objeto que te gusta, y luego puedes subirlo a Mixamo. Así puedes colocar las animaciones, como bailar, puedes bailar capoeira brasileña también, puedes hacer que algunos objetos caigan, hay un montón de animaciones gratuitas que puedes encontrar allí, o incluso puedes ir y editar si quieres en Blender, que es la característica más popular aquí para editarlo. Pero diría que este es el siguiente paso. Mi objetivo aquí es mostrar que puedes obtener todo de forma gratuita, puedes empezar a trabajar, construir tu MVP, y luego personalizar y mejorar tu software, ¿verdad? Ok, A-Frame es increíble porque viene con muchas funciones incorporadas. Como puedes ver el fondo, y mira qué increíble es activar mi animación. Solo tengo una propiedad, y empieza a funcionar. Tengo todo mi entorno funcionando para VR, puedo usarlo en cualquier dispositivo que quiera. Así que aquí tengo, diría que más de cien líneas de código porque tengo luces y más objetos complejos, pero es increíble lo fácil que va a ser esto. Como en solo un fin de semana puedes construir algo realmente funcional, ¿verdad? Ok, he estado hablando mucho sobre realidad virtual, pero la realidad aumentada para mí es lo mejor, ¿verdad? Podemos interactuar con la audiencia. Así que podría construir una animación, alguien corriendo y volando o sentado alrededor. Así que la realidad aumentada es algo que para mí es donde está el poder en el desarrollo de software, ¿verdad? Diría que el mejor caso de uso es Pokemon Go. Así que si estás en un lago, vas a ver diferentes Pokemons, vas a ver diferentes animaciones, para que puedan entender objetos y cómo funciona tu entorno. Para hacerlo, los dispositivos modernos utilizan el escáner LiDAR. Básicamente, lanzan una luz al entorno y calculan cuánto tiempo tarda la luz en volver. Así es como pueden mapear los obstáculos en el entorno y comprobar cómo va. Sin embargo, estaba construyendo toda esta presentación en una versión anterior de iPhone y les estaba preguntando a mis amigos, wow, les estaba diciendo, ¿qué tan increíble es esto? El iPhone puede mapear todo el entorno. Y luego muestro mi teléfono. Y ellos me dijeron, sabes qué, Tu teléfono no tiene un LiDAR. Tienes un micrófono ahí. Y yo estaba como, wow, ¿pero cómo pude crear esto entonces? Entonces, lo que tenemos ahí, utilizando WebXR, puedes tener visión por computadora detrás de escena. Así que si no tienes el sensor, puedes usar versiones anteriores para mapear tu entorno basado en la visión por computadora. Así que en este caso, estoy usando el iPhone anterior para ver que puedo interactuar con el entorno y así sucesivamente.

OK. Hay muchos tipos de realidad virtual. Esto es algo realmente nuevo para mí. Así que una de las mejores demostraciones que encontré en internet fue esta. Así que puedes tener tus cartas. ¿Has visto Yu-Gi-Oh! Far Beyond Memories? ¿Alguien lo ha jugado antes? Es genial. Así que puedes tener tus monstruos. Puedes tener animation. Es un mundo de posibilidades para esto. También tenemos basado en GPS. Así que puedes ver museos. Puedes hacer que tus amigos lleguen a tu casa. Pero esto funciona mejor al aire libre. Diría que en interiores no funciona tan bien porque el GPS no es tan preciso. Y el último es el más común, diría yo. Como he visto a Coca-Cola y otras compañías, solo apuntas tu teléfono celular a un código QR code y puedes ver algo moverse. Aquí, el chico simplemente colocó un video encima del objeto y puedes verlo moverse. Bastante fácil, bastante sencillo, ¿verdad? Esto es algo que una aplicación puede hacer en 20 minutos. Es increíble.

De acuerdo. Uno de mis favoritos son las pruebas de calor. Así es como puedes crear experiencias como Iron Man. Puedes mover cosas, puedes colocarlas en la espalda, puedes colocarlas en tu propio entorno. Y puedes empezar a moverte en tu entorno y los objetos estarán fijos en los lugares que desees. Así que si tienes una habitación grande, puedes trabajar con ella muy bien.

De acuerdo. ¿Alguien ha visto los anuncios de Apple recientemente? ¿La WWDC, alguien la ha visto? Genial. Hace cuatro días, creo, dijeron algo increíble. Puedes usar Apple Vision para crear tus propias cosas. Puedes usar WebXR para crear aplicaciones en Apple Vision.

Ya sé que estás pensando que es demasiado caro por ahora. Pero como desarrollador, imagina el mundo de posibilidades. Este es un mundo nuevo, ¿verdad? No hay tantas personas trabajando en esto. Y Apple Vision es algo nuevo. Así que si tienes ideas, puedes utilizar todas esas tecnologías que te he mostrado para crear tus propias experiencias y estar un paso adelante de los demás. Así que utilizando su tecnología, es prácticamente la misma idea que con otros dispositivos. Sin embargo, Apple Vision tiene el seguimiento ocular, ¿verdad? Así que estás mirando ese componente y usas tu dedo para pellizcar. Detrás de escena, se van a enviar los mismos eventos. Así que para nosotros, los desarrolladores, no deberíamos hacer nada diferente. Así que con el mismo code, tenemos diferentes entornos y va a funcionar en todos ellos sin problemas. Esto es realmente asombroso.

De acuerdo. Sé que es mucha información, ¿verdad? Quiero ver ahora cuántos de ustedes van a intentar experimentar con esto. ¡Oh, genial! He recopilado todos los enlaces, toda la investigación que he hecho para esta presentación en un documento de Google, y se los enviaré más tarde. ¿De acuerdo? Así que básicamente, el resumen de esta charla es que estamos viviendo en la mejor época para el desarrollo. Tenemos las API web, tenemos el audio, tenemos la IA, tenemos WebXR, y podemos empezar a pensar fuera de la caja porque podemos construir por diversión o incluso crear nuevos productos con ello. ¿De acuerdo? Así que tenlo en cuenta.

Y como prometí, aquí está el código QR, así que tómate tu tiempo para tomar una foto o seguir el enlace. Y antes de terminar, como tradición, hagamos una selfie. ¿Qué te parece? ¡Woohoo! ¡Hagamos una selfie! ¿Siguen conmigo? ¡Siento que algunas personas están adormiladas! De acuerdo. Voy a contar hasta tres, y decimos, como la otra vez, ¿verdad? Sí, sí, sí. ¡Uno, dos, tres! ¡Ah! ¡Muchas gracias, C3! ¿Hay optimismo sobre el soporte de iOS para WebXR en producción? Creo que se basa en tu afirmación de que está oculto detrás de las banderas. Oh, sí. ¿Qué piensas? Quiero decir, Apple acaba de decirlo. Yo diría que cuando lo lanzaron, estaba tratando de encontrar los recursos que estaban utilizando, pero es mejor. Así que diría que ahora tenemos una empresa que está avanzando. Diría que vamos a obtener más mejoras en el navegador porque alguien está invirtiendo mucho ahora, ¿verdad? Pero antes, diría que todo era experimental. Pero ahora, con Apple, con este gran anuncio, y ellos están apuntando a la empresa a través de las gafas, pensé, wow, esto podría ser bueno. Así que estoy muy optimista al respecto.

Genial, genial, genial. Pero no lo sabemos, ¿verdad? Y déjame tomar el siguiente. Y por cierto, una de las ideas que tuve fue asustar a mi mamá. Imagina que hay muchas películas de terror. Recuerdo que era como una chica, ella pasa por, como puedes verla en la pantalla y ella simplemente salta a tu cara, ¿verdad? Así que este tipo de experiencia podría funcionar muy bien, ¿verdad? Solo apuntas el teléfono celular a la televisión y luego, wow, salta a su cara. Podría ser divertido. Muchas preguntas surgieron recientemente.

De acuerdo, tomemos esta. ¿Hay un marketplace separado para este tipo de aplicaciones? Sí, puedes usar la tienda MetaQuest de Facebook, pero tienes todas las licencias y otras cosas. Pero estaba mostrando SideQuest, que para mí es la mejor biblioteca de todas. Así que puedes tener juegos gratuitos, aplicaciones gratuitas. Incluso tienen aplicaciones para testing. Como quiero probar ejemplos de aplicaciones. Cómo va a funcionar este entorno. Es maravilloso y la mayor parte del code está en GitHub. Así que es increíble cómo esta community está ahí. Pero nunca los he visto durante las conferencias, ¿verdad? Así que algo que si ustedes saben, chicos y chicas saben, cualquiera que trabaje en este tipo de cosas, invítelos a estos eventos porque podemos intercambiar mucho contenido, ¿verdad? Es increíble. Esa es una idea genial. Tal vez una muy buena idea para que GitNation tenga una conferencia sobre ese tema. De acuerdo, hecho.

Así que tomemos esta. ¿Cuánto conocimiento de física se necesita para entender la configuración y las coordenadas X, Y, Z? La mayoría de las aplicaciones que vi, usamos bibliotecas. Así que no tendremos que lidiar con matemáticas. Quiero decir, dependiendo de qué tan personalizada o qué tan compleja sea tu experiencia, podrías tocar eso. Pero A-Frame, hay muchos complementos que simplemente arrastras y sueltas, y comienzas a usar de inmediato. Si me preguntas, soy terrible con las matemáticas también, así que no podría hacer nada allí. Increíble. Increíble. Tomemos esta. ¿Qué tan bien abstrae WebXR las convenciones de la plataforma? Esto es asombroso porque algunos teléfonos celulares que les mostré, algunos de ellos, no tienen LiDAR y algunos de ellos no tienen tantos recursos como los dispositivos modernos ahora.

Así que tienen una capa de respaldo. Si tu teléfono celular no es compatible con WebGPU, utilizarán la CPU. Si no puedes usar WebGL, utilizarán otras opciones. Es como, diría yo, cuando juegas en una PC con recursos más bajos, los gráficos son un poco más feos, diría yo. No son tan ricos, pero funcionan. Con un solo code, puedes hacer que funcione en todas partes.

3JS es la clave detrás de escena. Sí, es genial escuchar que el code funciona en todas partes. Me encanta. Un poco. Y respaldos y respaldos para respaldos. Eso es genial. En realidad, es más una solicitud que una pregunta. ¿Puedes crear un curso sobre WebAR y WebXR en Eric Randall training? Eso es tarea para ti. Dios mío, tengo tantas ideas. O conferencias. Podríamos tener a alguien que simplemente recorra con una cámara de 360 grados y las personas que están en la pantalla ahora podrían interactuar entre sí. Como había un juego de rol en el que la gente se reunía. Gather.io. Sí. Imagina un Gather.io para AR o VR, y hay muchas ideas. Mucho mejor que el metaverso, ¿verdad? Y esa es tu respuesta.

Es una excelente transición a nuestra última pregunta. Permíteme mostrarla en pantalla. Sí, en realidad, tengo una diferente. Y es muy breve. ¿Qué opinas sobre el mejor caso de uso para WebXR? Diría que la mejor experiencia es que eres un desarrollador web, conoces las API web, conoces los navegadores, por lo que puedes obtener todas tus experiencias y comenzar a usarlas allí mismo. Para mí, no sientes que estás en un entorno diferente. Tienes exactamente el mismo flujo de trabajo que tienes en la web, pero puedes usarlo allí. Así que, en cuanto a la experiencia del desarrollador, creo que es una de las mejores cosas.

Otra cosa, creo, es la comunidad. Así que la comunidad es bastante extensa. Están ayudando mucho. Y para nosotros, que estamos tratando de ganar dinero con esto, creo que el mejor escenario es que no haya tantas personas haciendo esto, por lo que podemos comenzar a construir algo ahora. Así que en unos años podemos convertirnos en la referencia en el campo. Sí.

Comienza temprano. Exactamente. Terminemos con esta afirmación. Comienza temprano. Construye algo hoy. Muchas gracias, Erik. Fue genial, genial, genial tenerte aquí. Muchas gracias. Gracias.