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

Entonces, en primer lugar, ¿quién está aquí por primera vez en JS Nation? ¡Wow! Mucha gente. Así era yo en 2022. Estaba mostrando cómo usaba JavaScript para integrar en mi casa, cómo mi esposa se estaba volviendo loca conmigo haciendo mucha ingeniería allí, pero fue increíble. Sí, JS Nation es una de mis charlas o conferencias favoritas de todos los tiempos. ¿Quién aquí ha estado jugando con gafas de RV? Oh, genial. ¿Quién ha programado algo para gafas de RV? Oh, solo unas pocas personas. Es increíble. ¿Qué tal Pokemon Go? ¿Quién todavía juega Pokemon Go? No te avergüences, está bien. De acuerdo. Entonces, me pregunto si estás jugando en... Bueno, no hagas como este chico, ¿verdad? La tecnología está evolucionando tan rápido y tan fuerte, pero a veces pensamos, bueno, no creo que esto sea normal en absoluto, pero definitivamente lo haré, ¿verdad? Vale, cada vez que hago una conferencia o una charla, sé que tengo poco tiempo para presentar algunas ideas, así que traje algunas metas para que las tengas en cuenta durante esta presentación. Primero, preparé toda la investigación, todas las referencias, todos los enlaces, y los puse en un solo video para que puedas seguirlo más tarde. Mi objetivo aquí no es solo que escuches esta charla, sino que experimentes con ella en tu propia casa, crees algo y me lo hagas saber porque me encanta cómo la tecnología está evolucionando. Y realmente, como le digo a la gente, deberíamos hacer algo más allá de las 9 de 6, ¿verdad? Deberíamos usar la tecnología para mejorar nuestra imaginación, nuestra creatividad, y también para ganar dinero en YouTube, ¿verdad? Y, como les digo a las personas, también deberíamos ver la tecnología o la programación como algo divertido, para que puedas tener tu propio hobby mientras haces tu trabajo, creando, usando chat CPT, usando API web, hay tantas cosas que estamos haciendo más allá del crud que hacemos, que a veces es aburrido. Entonces, comencé a pensar cómo crear experiencias de realidad virtual o realidad aumentada, así que comencé a investigar y descubrí que hay tantas posibilidades de las que nunca había escuchado hablar y en realidad es mucho más fácil de lo que pensaba.

Antes de continuar, ¿quién aquí ha tenido estas Google Glasses o Google Cardboard? Bueno, yo tuve este que conseguí en un evento, pero me mareaba un poco, no podía encontrar, no sé, la sensación, las emociones allí, no me sentía tan bien, así que pensé, esto es solo una moda. Luego vi a Uncle Mark jugando con el Metaverso y fue como, estos son los gráficos que vimos en Nintendo Wii hace diez años, ¡vamos! Tenemos PS5, PS4, tenemos las computadoras, bueno, deberíamos hacer algo mucho mejor. Luego vi este juego. Mira qué hermoso es esto. Así que esto se está ejecutando en las gafas, así que pensé, wow, probablemente hay muchas cosas que no estoy viendo y algo que me volvió aún más loco es usar realidad aumentada, para que puedas tener tus personajes, tus enemigos y monstruos interactuando con tu propio entorno. Así que esto me dio una idea, pensé, wow, ahora está mucho más allá de lo que Zuckenberg mostró en su presentación y podemos hacerlo.

Así que compré el MetaQuest 2, que ahora está desactualizado, pero era el más barato que pude encontrar. Y alguien me habló de una tienda, que es una tienda independiente fuera de la tienda de Facebook, la Metastore, y aquí verás muchas cosas de código abierto, muchos desarrolladores independientes que están construyendo proyectos, construyendo juegos, y puedes empezar a usar de inmediato. La mayoría de ellos usan C Sharp y Unit, pero yo pensé, bueno, nada especial aquí, podría instalar muchas cosas, sigamos adelante.

Cuando empecé a preguntar a mis amigos, bueno, ¿qué debería instalar?, me dijeron, bueno, Beat Saber. Beat Saber es increíble. Pero cuando vi el precio, pensé, bueno, no, no voy a comprar esto. Pero luego empecé a investigar en SideQuest y vi una reinterpretación de este, que era de código abierto. Se llama Moon Rider. Algo bastante interesante aquí. WebXR. Pensé, espera, si contiene la palabra web, esto significa que podría ejecutarse en el navegador. Entonces, ¿cómo funciona esto? Tengo mi navegador allí, y en realidad se siente como una aplicación nativa. Mira, es bastante bonito. Voy a avanzar rápido aquí para que podamos ver también jugar juegos. Pero es lo mismo. Así que no tuve que usar C Sharp, no tuve que hacer nada. Puedo usar el mismo entorno, las mismas ideas que estamos usando para la web para este tipo de aplicación también. Esto es increíble. Y mira, no soy un buen jugador. Pero funciona. ¿Verdad? De acuerdo. Para la siguiente sección, debo advertirte. Esta tecnología es increíble, pero es bastante peligrosa. Te mostraré por qué. Así que estaba grabando las demostraciones para aquí y de repente... Veámoslo de nuevo.

Bueno, empujé con mucha fuerza. Una vez empujé a mi esposa, una vez empujé a mi perro... Así que, sí. Creo que el sistema de seguridad no es tan bueno. Así que debemos tener en cuenta que esto puede suceder. De acuerdo. Hablemos de Moon Rider. Lo vi allí. A-Frame y WebXR. Así que, tengo palabras elegantes para buscar. Entonces, ¿qué son WebXR y A-Frame? Lo primero que encontré al buscar sobre esto fue Google mostrando cómo funciona Chrome. Básicamente, WebXR es en realidad AR más VR. Así que, Google tenía este increíble video mostrando cómo funcionan esas cosas. Puedes usarlo en Chrome, puedes usarlo en Android. La experiencia es asombrosa. Utilizas APIs nativas, que no solo son de Google. Es un estándar web. Por lo tanto, puedes usar lo que funcione, cualquier navegador que lo implemente. Y A-Frame es solo una abstracción como Angular, React y todo para esas llamadas al sistema operativo.

Lo asombroso de A-Frame es que con un solo código, puedo tener mi código ejecutándose en el MetaQuest, en dispositivos móviles, en el escritorio e incluso en Apple Vision. ¡Dios mío! Voy a ver esto funcionar en la práctica. A-Frame está construido sobre Three.js. ¿Alguien aquí ha jugado con Three.js? ¡Wow! Así que, ustedes están listos para empezar a trabajar con esto de inmediato. Por cierto, soy un desarrollador de backend. Así que, esto para mí es magia, ¿verdad? Bueno, cuando empecé a hacer algunos experimentos, vi este juego. Así que, lo estoy usando en mi teléfono, simplemente utilizando la misma experiencia que siempre he tenido en mi teléfono. Y tengo el botón justo aquí, VR. Así que, cuando hago clic en él, puedo usar Google Cardboard y verlo funcionar perfectamente. Y mira, está en el navegador.

Entonces, puedo tener el mismo juego o la misma experiencia en cualquiera de esos dispositivos. Entonces, ahora eres un hackerman, ¿verdad? Ahora estás listo para empezar a implementar y ahora deberíamos echar un vistazo a las tooling. ¿Qué necesitas para empezar a jugar con esto?

Primero, vas a necesitar algún emulador, ¿verdad? Así que, cuando empecé, estaba debugging cosas, estaba implementando cosas en mi teléfono, tratando de entender el entorno, moviéndome y todo eso. Pero aquí, puedes usar simplemente un emulador de API que funciona muy bien. Si quieres algo más sofisticado, hay un editor muy bueno. La empresa es Niantic, la misma empresa que construyó Pokemon Go.

Y allí, tienen un emulador. Así que, puedes poner tus diferentes videos y puedes entrenar y verificar la profundidad de tus videos, tus experiencias. Creo que esto, para mí, fue mucho más fácil. También tienen una gran biblioteca de proyectos. Pero aún así, tienes que pagar. Así que, si no quieres pagar, puedes instalarlo tú mismo. Bueno, descubrí que Apple no te permite usar WebXR nativo en los navegadores, incluso en Safari, así que tuve que instalar navegadores alternativos para que funcione. Y luego, estamos listos, ¿de acuerdo? Así que, mira lo increíble que es esto.

Tengo un marco, tengo algunos componentes, tengo una entidad, y mira, voy a dibujar un sol, un sistema solar, con solo unas pocas líneas de code, comienzo a trabajar de inmediato, y puedo animarlo, es bastante poderoso. Sin embargo, cuando fui allí, pensé, bueno, esto no es tan bueno porque quiero algo poderoso, algo que pueda usar. Entonces, puedes descargar módulos 3D, están listos y puedes comenzar a usarlos.

Entonces, aquí, hay esta increíble biblioteca a la que puedes ir, descargar de forma gratuita, incluso puedes comprar otros de forma gratuita, comprar de forma gratuita, no es fácil, ¿verdad? Puedes ir allí y puedes comprar, pagar la licencia y simplemente comenzar a usarlo. ¿Cómo es esto? Veamos. Entonces, tengo esta galería bastante compleja y voy a ir allí. Este es uno gratuito. Voy a descargar el objeto y como una imagen para HTML, simplemente puedo hacer referencia al objeto, y todo funciona. Puedo probarlo en MetaQuest, puedo probarlo en mi teléfono celular, solo con eso. Así que sí, muchas ideas.

Cuando vi esto, pensé, sí, hombre, está de vuelta en los tiempos de Rapiboost Rap, ¿verdad? Tenemos las plantillas, podemos comenzar a usar. No sé qué está pasando detrás de escena. Sin embargo, si quiero extenderlo, también puedo hacerlo. ¿Qué hay de las animaciones? Creo que los videojuegos se tratan de animaciones, ¿de acuerdo? Entonces, ¿cómo lo haces? La misma idea. Tienes el módulo 3D allí, puedes descargarlo y subirlo a Mixmanual, que creo que es gratis, no sé, tienen algunos planes de pago. Pero, mira, las animaciones están ahí. Va a cambiar tu modelo, puedes descargarlo y simplemente usarlo en un archivo HTML. Es increíble lo fácil que es esto.

Bueno, ¿y cómo lo vamos a usar? Entonces, A-Frame trae muchos componentes de entorno, así que puedes usar el cielo, puedes poner animación, puedes poner Capoeira. Algo increíble de esto es como el hola mundo, ¿verdad? Cada vez que comenzamos a trabajar con alguna tecnología, es como, oh, Dios mío, esto está funcionando muy bien, con solo unas pocas líneas de code, y abstraemos todas las cosas, como, oh, Dios mío, ¿dónde está la base de datos? No, solo haciendo algo por diversión, pero eso podría terminar siendo algo bueno. Bien, la realidad virtual está lista, ¿qué hay de la realidad aumentada? Quiero integrarme con mi propio entorno, quiero sostener algún elemento y comenzar a trabajar. Entonces, creo que el ejemplo es Pokemon Go, cuando vas a un lago, vas a ver diferentes peces allí, vas a ver algunos terrenos de manera diferente.

Pero para hacer esto, por lo general, tu teléfono celular, los teléfonos celulares modernos, tienen el escáner LIDAR que es un LIDAR que emite luz y mapea, como el tiempo que tarda en volver la luz, por lo que saben que hay alguna obstrucción, y puedes poner tus propios objetos allí. De acuerdo, pero estaba construyendo todas estas demos con un iPhone antiguo y estaba tan feliz. Este sensor es tan increíble cómo funciona, y mi amigo me dijo, hombre, no tienes el sensor, ¿verdad? Esto es un micrófono. Me quedé sorprendido, pero ¿cómo funciona esto? Entonces, cuando estás trabajando con A-Frame, tienen alternativas y allí puedes usar la visión por computadora para analizar tu entorno y saber dónde está todo, los obstáculos, y mucho más, así que es muy útil. Tenemos muchos tipos de realidad aumentada, así que el primero que me encanta es el basado en el mercado de IA, por lo que puedes tener una tarjeta como esta, puedes poner alguna imagen. ¿Alguien ha jugado Yu-Gi-Oh! Form the Memories aquí? Wow, mucha gente. Estaba pensando, imagina que los monstruos van allí, Dios mío, esto trae muchas ideas, y solo tenemos que jugar con ello, ¿verdad? Bueno, uno de los más comerciales es el basado en la ubicación, por lo que puedes poner tu propio GPS y las coordenadas, para que puedas mostrar a tus amigos dónde vives, o ir a museos, tiendas y mucho más, pero quiero decirte, esto no funciona tan bien cuando estás trabajando en entornos muy cercanos. Esto funciona mejor al aire libre.

Vale, y el último es el más popular. Diría que Coca-Cola y otros han estado haciendo mucho esto para Navidad, así que tienes un código QR, y con este código QR, quieres colocar algunos objetos 3D que están ahí, y puedes hacer que esto se anime. Así que, veamos. Mira qué increíble es esto. Alguien simplemente llegó allí y puso una imagen en esto, pero no parece un modelo 3D, ¿verdad? Es bonito, exactamente igual, pero puedes hacer esta animación, así que diría que para tu tarjeta de presentación, puedes hacer una experiencia como esta en solo un fin de semana, pero puedes extenderla, crear productos o incluso hacerlo solo por diversión. Vale, uno de mis favoritos es la prueba de calor, donde puedes colocar objetos en el entorno, así que con esto, puedes crear, como, tus experiencias de Iron Man. Imagina, voy a poner aquí YouTube, voy a poner aquí mi trabajo, VS Code, Terminales, y puedes ver todo en tu tienda. Puedes empezar a caminar alrededor de esto, puedes interactuar con ello. Así que, lo único que se necesita aquí es creatividad, que a veces es difícil, pero cuando estamos jugando con algo nuevo, es algo increíble. Vale. Hace tres días, alguien tuvo un evento enorme, y para mí fue interesante. Viste, he estado mencionando mucho, MetaQuest, teléfonos móviles, porque viste, para ejecutar en iPhone, tuve que instalar un navegador diferente que marca el comportamiento, y puedo trabajar en eso. Sin embargo, en WWDC24, Apple acaba de ver, bueno, ahora puedes usar WebXR para Vision OS. Esto es genial, ¿no? Es un nuevo mercado, así que puedes empezar a crear proyectos y puedes ganar dinero con esto, porque no hay mucha gente haciéndolo ahí. Así que, en su sistema operativo, puedes ir allí y tener una experiencia muy similar. Sin embargo, Apple tiene seguimiento ocular, ¿verdad? Así que, cuando estás mirando el objeto, puedes pellizcar y mover los objetos justo allí, y esto, para nosotros, en la web, van a emitir los mismos eventos que hemos estado viendo en el navegador.

Un clic, un arrastre, y esto funciona perfectamente. ¡Wow, eso es mucha información, ¿verdad? Como les dije, he recopilado toda la información para que puedan seguirla más tarde, experimentar con ella y crear proyectos.

Ahora, quiero hacer una pregunta. ¿Quién va a experimentar con esto? Oh, muy bien, muy bien. Entonces, Desarrollo Web es increíble. Tenemos APIs web, tenemos cadenas, web workers, tenemos 3D, WebQL, web CPU, Dios mío, tenemos todo lo que podemos hacer funcionar. Pero ahora, podemos integrar tus propios conocimientos para comenzar a crear esas experiencias.

Muy bien, como prometí, aquí está el enlace para ustedes. Voy a enviar todo, todos estos experimentos, todas estas diapositivas también, así que tomen un momento para tomar una foto justo allí. Y como tradición, hagamos nuestro video selfie, ¿verdad? ¿Qué les parece? ¡Woohoo! Bien, voy a contar hasta tres, y vamos a hacer, oh, y solo levanten las manos, ¿de acuerdo? Entonces, uno, dos, tres, ¡oh! ¡Muchas gracias, Yassi Nation! Entonces, si no han hecho sus preguntas, aquí está, oh, todavía está ahí en el costado, ¿no? 1317 en Slido, pueden comenzar a hacer sus preguntas.

El primero para que lo intentes y respondas, ¿cuándo puedo venir a conducir el Mercedes? Es un chiste bastante bueno, porque compré un coche, mi color favorito, es, no sé, verde, me ha seguido toda mi vida. Resulta que Node.js también es verde. Es ese verde neón de Node.js también. Bastante brillante, sí, es verde lima. Sí, lima, sí. Así que todos decían, oh dios mío, es un Node Mobile. Yo decía, ¡sí! Realmente lo es. Excelente. Y nuevamente, solo para mostrar que la gente ya está pensando en lo que puede crear, espera un momento, voy a cambiar esto. ¿Cuál sería el mejor enfoque para AOR si quisiera crear un Web XOR donde los usuarios puedan probar diferentes relojes? Así que la gente ya está tratando de ser creativa. Ya tienes gente. Hay muchas cosas que puedes hacer. Puedes poner tu código QR, o algo que estaba probando en casa. Tenemos TensorFlow.js, ¿verdad? Creo que Jason también va a hablar de algo sobre esto más tarde. Pero podemos entender todo el entorno, detectar imágenes y colocar los objetos 3D justo allí. Entonces, con tus relojes, no creo que vayamos a tener algo holográfico solo mirándolo, pero puedes usar tu teléfono para probar y mostrar algo así, ¿verdad? Hay muchas cosas interesantes aquí. Ooh, genial. Genera muchas ideas. Una cosa genial. Sabes, se me olvidó. Es una película de terror donde la chica sale de la pantalla y salta sobre la cara del usuario o de quien está mirando. Esto debería ser genial. Imagina darle el teléfono celular a mi mamá. Mamá, señala a la televisión y luego algo salta sobre su cara. Como, wow, esto debería ser genial. Esa es una forma de darle un susto temprano... Después de eso viene un funeral. Wow. Definitivamente voy a intentarlo. Mi pobre mamá definitivamente lo va a recibir.

Mi pobre mamá definitivamente va a recibir eso. Sí. Una pregunta sobre WebXR, y asumo que con el anuncio de Apple debería serlo. ¿Pero se está desarrollando activamente WebXR? Sí. Estuve en Google I/O, así que conocí a algunos chicos que trabajaban en el equipo allí, y ellos decían, no estamos hablando mucho de esto, pero la especificación va muy bien. Y ahora, con la incorporación de Apple al juego, creo que todo va a ser mucho más fácil para nosotros, porque lo de la velocidad, el seguimiento ocular, dijeron que también van a tener algo para los teléfonos. Así que probablemente ahora vamos a acelerar las cosas. Pero honestamente, solo tengo curiosidad. Así que he visto la community, es bastante grande. Si intentas encontrar los recursos que dejé allí, hay muchos enlaces que la gente está haciendo, así que puedes usar joysticks, puedes usar tus ojos, puedes usar los sensores, cámaras y hay muchas cosas. Ya es bastante estable, diría yo. Y hay tantas cosas diferentes que puedes probar. Es experimental, pero es bastante estable. No experimental, ese es todo el punto. Sí, exactamente.

¿Necesitas una gran database para almacenar todos estos modelos y animations diferentes? ¿Cuánto necesitas y cuál es el tráfico para estos clientes? Lo primero que pensé fue, bueno, tengo la galería allí, que era un módulo 3D. Era enorme, tenía 200 megabytes. Pero luego pensé, bueno, entonces debería crear todo en características, editores, como Blender u otros. Pero luego me di cuenta de que vas a tener cada pieza individual de tu entorno, como el personaje aquí, tengo la mesa. Cada uno de ellos, va a ser un archivo separado diferente, así que vas a renderizar la pantalla según la demanda. Así que dependiendo de la plataforma en la que estés, podrían ser muy pesados. Por ejemplo, si vas a jugar en PS4, verás la carga. Así que dependiendo de qué tan compleja sea tu experiencia, esto será muy pesado.

Entonces, ¿depende del hardware en el que estés ejecutando? Depende de qué tan compleja sea la aplicación. Porque son los elementos, ¿verdad? Estamos renderizando 60 cuadros por segundo allí. ¿Y eso es como la carga perezosa, como en la web? Solo se carga lo que está a la vista, ¿verdad? Y todo está integrado en A-Frame. Ah, excelente. Entonces A-Frame es la forma de hacerlo de manera responsable. Es increíble. Increíble.

Muy bien. AOR ahora requiere un casco enorme. Cuesta una fortuna. Nadie los usaría afuera. No sé. ¿Viste ese video? Creo que la gente los usaría afuera. Simplemente te ves ridículo afuera. ¿Cómo superar el problema? ¿Volverían las Google Glass o algo así? Ves, esto es solo especulación, ¿qué te gustaría ver que suceda para que sea más accesible?

Honestamente, creo que para mí, pensaría más en la capa de atrás. No me importan mucho los dispositivos, sino la API que está en el medio. Así que si las Google Glass regresan, me encantaría ver cómo van a funcionar. Pero por ahora, pensé, bueno, lo único en lo que me estoy enfocando es, tengo un solo code que se ejecutaría en todas partes. Entonces, sí, pero me gustaría ver más gafas, ¿verdad? Más opciones. Más potentes, más opciones. Con una cámara interna para rastrear los ojos y todo, pero no demasiado caras. Para que no termines golpeando cosas como tu esposa cuando estás jugando. Creo que el problema ahora es que no tenemos, quiero decir, hay algunas gafas, bastante pequeñas, pero para pantallas, múltiples monitores, pero no como la Visión de Apple con solo estas gafas. Es algo, no sé cómo lo van a hacer, porque requiere mucha potencia de procesamiento. Ah, eliminé una pregunta que quería hacer allí.

¿Cómo podemos hacer que los visores de PDF sean más atractivos en XOR? ¿PDF? PDFs. Él dice, hagamos que los PDFs sean geniales. Esto es algo agradable, pero no diría que es un PDF. Probablemente un archivo readme o un sitio web que se va a renderizar allí. Porque, imagina, son cosas 3D que aparecen. Eso podría ser una puerta de libro o algo así, no sé. No sé. Imagina, es como el huevo de Pascua en Microsoft Word. Cuando haces clic, ves que el clip uno se está moviendo. Sí, Mr. Clippy, sí.

Algunas de las ideas que tuve fueron, imagina que estoy jugando a las cartas, como jugando a Uno. Y tengo un fantasma o alguien que me habla, que podría ser un asistente como ChatGPT, Google o lo que sea. Pero están jugando a las cartas, moviendo las cartas. Es un juego que está sucediendo allí. Pero siento que es una persona real. Entonces, ¿qué tan peligroso crees que es? Jugar con alguien que parece humano.

Sí, será divertido. Estamos llegando allí. Claro. Con la nueva visión y ¿tenemos avatares que se parecen a personas? Podemos hacer que hagas una charla el próximo año y ni siquiera estarás aquí. Exactamente. Solo se grabará a partir de tus últimas charlas. Exactamente. O tu gemelo, ¿verdad? Sí, exactamente. Tu gemelo malvado. A-Frame tiene funcionalidad limitada en comparación con Tree.js. ¿Podrías explicar dónde es más fácil usar A-Frame y dónde Tree.js, o incluso WebGPU o WebGL nativo?

Bueno. Básicamente, A-Frame es la capa de abstracción, ¿verdad? Entonces, está utilizando WebXR o tienen muchos fallbacks si tu computadora es demasiado pequeña, tu dispositivo tiene recursos limitados. Pero detrás de esto, utilizan Tree.js para renderizar todos los objetos. Entonces, si dices, oh, no me gustó mucho A-Frame, pero tengo esto, esto y aquello. Bueno, puedes ir desde allí y usar Tree.js directamente. Es como usar TypeScript.

Si no te gustan los tipos, puedes usar JavaScript directamente. Es solo una capa de abstracción, pero es poderosa. Muy poderosa.

Sí. Estoy realmente emocionado. Casi olvidé subir y hacer preguntas porque estaba tan metido en esta charla. Estaba tratando rápidamente de encontrar un enlace a esta diapositiva en mi sitio. Increíble.

Así que, bien hecho. Y el sentimiento fue compartido porque incluso tenemos muchos mensajes amables que dicen gracias por una charla tan animada. Hay muchos comentarios. Se supone que son preguntas, no cumplidos. Voy a encontrarlos afuera. Y hay algunas preguntas sobre Ronaldo. Increíble. Cosas de Pro Brasil. También hay muchos fanáticos aquí.

Eso es todo el tiempo que tenemos para preguntas aquí. Pero si alguien quiere encontrar a Eric después, estará en el puesto de preguntas y respuestas afuera. O si estás viendo en línea, únete a Discord y haz algunas preguntas allí. Nuevamente, una vez más, un aplauso para Eric. Gracias. Gracias. Gracias.