Construyendo Experimentos Divertidos con WebXR & Babylon.js

Rate this content
Bookmark

Durante esta sesión, veremos un par de demostraciones de lo que puedes hacer usando WebXR, con Babylon.js. Desde experimentos de audio en VR, hasta juegos casuales en VR en una máquina de arcade hasta un uso más serio para crear nuevas formas de colaboración usando AR o VR, deberías tener una comprensión bastante buena de lo que puedes hacer hoy.


Consulta también el artículo para ver el contenido completo, incluyendo ejemplos de código: artículo

David Rousset
David Rousset
33 min
07 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla explora el uso de Babylon.js y WebXR para crear experiencias inmersivas de VR y AR en la web. Muestra varias demostraciones, incluyendo la transformación de un juego 2D en una experiencia 3D y VR, composición de música VR, demostraciones de AR, y exploración de un museo virtual. El orador enfatiza el potencial del desarrollo web en el metaverso y menciona el uso de WebXR en productos de Microsoft. Se discuten las limitaciones de WebXR en Safari iOS, junto con la simplicidad y las características de Babylon.js. Se proporciona información de contacto para consultas adicionales.

Available in English

1. Introducción a Web XR y Babylon GS

Short description:

Hola, soy David de Microsoft. Hoy, les mostraré experimentos de web XR utilizando Babylon JS, un motor 3D que funciona con WebGL y WebGPU. Web XR permite experiencias de VR y AR en diferentes dispositivos. Es un reemplazo para web VR y actualmente es compatible con los navegadores Chromium. Babylon GS es un marco de trabajo de código abierto que admite WebXR y ofrece excelentes características como autocompletado y espacialización en VR. Se utiliza ampliamente en las aplicaciones de Microsoft.

Hola, mi nombre es David. Trabajo en Microsoft y hoy voy a mostrarles algunos experimentos web XR utilizando Babylon JS. Va a ser divertido.

Voy a mostrarles una gran cantidad de ejemplos diferentes y vamos a ver juntos lo que puedes hacer hoy con web XR. Así que trabajo en la división de desarrolladores de Microsoft, las personas a cargo de GitHub, VS Code, Visual Studio, algunas características de Azure también. Pero hoy voy a hablar sobre WebGL y web XR.

No duden en seguirme en Twitter si tienen preguntas después de la charla. Entonces, ¿qué es web XR? Probablemente hayan oído hablar de eso, pero vamos a definirlo brevemente antes de tener algunas demostraciones sobre esta tecnología. Así que web XR es obviamente una API web, que puede habilitar tanto la realidad virtual, utilizando Oculus Quest 2, HTC Vive o Valve Index, pero también AR utilizando ya sea un smartphone, utilizando Android OS. Pero también HoloLens 2 puede soportar la característica AR de web XR. Así que es un reemplazo de web VR, si has oído hablar de web VR antes. Así que solo estaba haciendo VR y ha habido algunos refactorizaciones alrededor de la API. Y también actualmente solo es compatible con el navegador Chromium, por lo tanto, Microsoft Edge, Chrome por supuesto, pero también Samsung internet en Android, y obviamente, Chrome en Android. Así que ya he hablado sobre el hardware soportado.

Y hoy vamos a hablar de Babylon GS. Así que Babylon GS, es un motor 3D en el que he estado trabajando hace un par de años con un amigo mío, por eso es mi pequeño bebé de alguna manera. Y si les gustaría empezar con Babylon GS, no duden en tener un enlace a continuación, pero vamos a ver eso justo después de esto. Así que Babylon GS, si aún no saben qué es Babylon GS, es un motor 3D de código abierto que funciona en la parte superior de WebGL, pero también WebGPU hoy. Estamos soportando WebGPU. Estamos utilizando Web Audio, que podría ser genial para la espacialización en VR. Y estamos soportando WebXR de serie. Es un marco de trabajo de código abierto que utiliza la licencia Apache 2. Mucha contribución de la comunidad. Más de la mitad del código fuente ahora proviene de la comunidad. Completamente escrito en TypeScript, lo que permite grandes características como autocompletado y calidad del código, generalmente gracias a los tipos. Y soporta WebXR de serie, también utilizando controles ya para VR. Tienes muchos controles que funcionan en 2D con el mouse y VR gracias a los elementos de puntero. Pronto tendremos MRTK, que es el kit de herramientas de realidad mixta que llegará a Babylon GS versión 5. Eso permitirá aún más control para la productividad. Hoy en día es utilizado por muchas aplicaciones de primera parte en Microsoft, como PowerPoint, como el modelo 3D que tienes en tu pantalla.

2. Demos de WebXR y Experiencia VR

Short description:

SharePoint, Teams. También, el XCloud, el servicio de juegos en la nube de Xbox utiliza Babylon GS para el control táctil. Más adelante, publicaré una entrada en mi blog para compartir el código fuente de todas las demos. Primero, vamos a utilizar la característica súper simple, pero a la vez súper potente llamada la Experiencia XR. Estamos utilizando esta línea de código. Si no tienes un casco de VR, lo que puedes instalar es una extensión en Chrome o Edge llamada la extensión WebXR. Y si tienes esta extensión habilitada, tendrás este botón allí pidiéndote que cambies a un modo inmersivo. Así que muy útil, ves una línea de código y realmente tienes una experiencia funcionando de inmediato y puedes salir del modo inmersivo para volver al modo clásico, diría yo. Pero veamos cómo funciona en un casco real como el Valve Index en mi caso. Así que volvamos a mi presentación de PowerPoint y esta vez será un video de mí dentro de esta sala reutilizándolo. Y ves que en el casco obviamente, tengo una representación estereoscópica. Estoy utilizando allí la vista VR de SteamVR en Windows y ves la experiencia inmersiva, así que tienes que probarlo un día usando cualquier tipo de casco compatible con WebXR como Valve Index en Desktop pero también Xerox Oculus Quest 2 y tienes una experiencia inmersiva súper genial con solo una línea de código una vez más y nosotros gestionamos para ti toda la teleportación, la visualización de los controladores, cosas así. Así que ves, súper fácil de habilitar.

SharePoint, Teams. También, el XCloud, el servicio de juegos en la nube de Xbox está utilizando Babylon GS para el control táctil. Está siendo utilizado por Adobe, algunos socios, Sony y el Ejército de los EE.UU. o Ubisoft.

Entonces, vamos a saltar a algunas divertidas demos. Más adelante, publicaré una entrada en mi blog para compartir el código fuente de todas las demos, pero solo tenemos 20 minutos, así que veamos lo que puedes hacer con WebXR si aún no sabes lo que puedes hacer con él.

Primero, vamos a utilizar la característica súper simple, pero a la vez súper potente llamada la Experiencia XR. Estamos utilizando esta línea de código. Usando solo una línea de código, habilitarás alguna experiencia de VR en nuestro caso. Así que voy a saltar a Chrome por ahora. Así que ves esta escena, que solo carga esta escena del valle con Hill Valley de Volver al Futuro escena en 3D, y una vez que la escena ha sido cargada en este código de devolución de llamada, lo que voy a pedir a Babylon.js, usando esta única línea de código, es por favor convierte esta experiencia existente en una experiencia compatible con VR. Necesitas proporcionar solo un parámetro, que es lo que debería actuar como un suelo para soportar el objetivo de teleportación que vamos a ver en el video justo después de eso.

Si no tienes un casco de VR, lo que puedes instalar es una extensión en Chrome o Edge llamada la extensión WebXR, así que puedes buscarla en tu motor de búsqueda favorito. Y si tienes esta extensión habilitada, tendrás este botón allí pidiéndote que cambies a un modo inmersivo. Así que voy a hacer clic en este botón, va a renderizar, ya sabes, para el ojo izquierdo y el derecho para la representación estereoscópica. Y para poder simular un casco de VR, necesitas presionar la tecla F12 y luego tendrás una nueva propiedad WebXR allí. Así que vamos a ajustar eso a la derecha y este a la izquierda. Y vamos a intentar, por ejemplo, mover el casco. Ves que puedo moverme por los varios lados para simular el hecho de que te estás moviendo, pero también obviamente el controlador y también puedes cambiar de Quest por defecto a HTC Vive. Y ves que Babylon JS está obteniendo el modelo correcto de inmediato, descargándolo de nuestro CDN. Así que volvamos a un Oculus Quest. Así que muy útil, ves una línea de código y realmente tienes una experiencia funcionando de inmediato y puedes salir del modo inmersivo para volver al modo clásico, diría yo. Así que súper fácil tener una primera experiencia, solo carga una escena, añade esta línea de código y funcionará. Pero veamos cómo funciona en un casco real como el Valve Index en mi caso. Así que volvamos a mi presentación de PowerPoint y esta vez será un video de mí dentro de esta sala reutilizándolo. Así que ves que podemos apuntar al suelo y teleportarnos, elegir la orientación cuando llegues al objetivo. Así que decidí enfrentar la puerta del DeLorean allí. Luego puedo moverme y enfrentar el frente del coche. Y ves que en el casco obviamente, tengo una representación estereoscópica. Estoy utilizando allí la vista VR de SteamVR en Windows y ves la experiencia inmersiva, así que tienes que probarlo un día usando cualquier tipo de casco compatible con WebXR como Valve Index en Desktop pero también Xerox Oculus Quest 2 y tienes una experiencia inmersiva súper genial con solo una línea de código una vez más y nosotros gestionamos para ti toda la teleportación, la visualización de los controladores, cosas así. Así que ves, súper fácil de habilitar.

3. Transformando un Juego 2D en 3D y VR

Short description:

Transformé un juego 2D existente en una experiencia 3D y VR utilizando BabylonJS. Al proyectar un lienzo 2D en 3D, pude mostrar el juego en VR. Con solo unas pocas líneas de código, pude replicar la experiencia de jugar el juego en una máquina de arcade en VR.

Entonces, la siguiente demostración es algo como lo que ves, tengo una máquina de arcade justo detrás de mí. Soy un gran fanático de los videojuegos en general, pero también de las máquinas de arcade. Así que lo que quería hacer es transformar un juego 2D existente que tenía, que estaba usando IsleJS, Create.js si lo conoces, en una experiencia 3D y luego obviamente en una experiencia VR. Así que echemos un vistazo al código fuente de ese. Era realmente una experiencia simple. Así que vamos a abrirlo. Y ves que puedes moverte de derecha a izquierda y saltar. Es un juego de plataforma. Nada especial al respecto. Y este es un juego de lienzo 2D. Así que lo que quería hacer es transformarlo en 3D. Así que esto es lo que he hecho allí. Así que esto es como si tomara un modelo gratuito en Sketchfab, creo, hasta donde recuerdo, sobre una máquina de arcade. Tomé como un plano 2D en la parte superior de la máquina de arcade para transformarlo en mi lienzo 2D. Así que lo que estoy haciendo, básicamente, es tomar este lienzo 2D, proyectándolo en 3D. BabylonJS soporta textura dinámica, lo que significa que puedes tomar un lienzo 2D y proyectar eso en 3D, lo cual es súper importante si te gusta moverte en VR. Necesitas hacer todo en el lienzo 3D porque los elementos clásicos de HTML no pueden ser renderizados en el modo inmersivo en el casco. Así que necesitas hacer todo en el lienzo WebGL. Así que esto es lo que estoy haciendo, básicamente, estoy cargando mi juego desde la versión 2D y lo estoy mostrando en 3D, lo que significa que ahora puedo jugar al juego también de esa manera, pero en 3D al mismo tiempo, lo cual es divertido, pero no tan divertido como hacerlo en VR. Así que probemos esta misma experiencia ahora en VR. Para eso, voy a volver a mi presentación y voy a mostrarles la experiencia completa, saben cómo funciona para mí. Entonces, um, puedes ver que actualmente estoy jugando usando el controlador de Xbox. Así que como en 2D, y luego voy a presionar el botón del casco en la parte inferior derecha. Así que va a cambiar, gracias a SteamVR en el modo inmersivo. Y obviamente necesito ponerme el casco para poder hacerlo. Y de la misma manera, como durante la demostración de, ya sabes, volver al futuro, pude ver eso en 3D. Esta vez, lo que he estado haciendo es mapear, ya sabes, en el controlador, um, el thumbstick para poder moverme. Y la experiencia es realmente genial. Quería realmente replicar lo que era capaz de hacer, um, en mi, uh, máquina Arcan, pero en VR. Así que puedes ver que en un par de líneas de código una vez más, pude transformar un juego 2D en 3D y luego gracias a BabylonJS en VR esta vez.

4. Composición Musical en VR y Piano 360

Short description:

Tendrás acceso al código fuente más tarde. Tendré que mapear el controlador de la máquina Arcan para moverlo con mi mano. Voy a mostrarles una demo de piano 360. Estoy utilizando web audio para analizar la onda de sonido en tiempo real. Puedo tocar música utilizando las diversas notas. Puedo tener una experiencia de piano 360 en el Oculus Quest 2. También puedo hacerlo en el HoloLens 2 con un fondo negro único. Se elimina la textura negra y el seguimiento se realiza por BabylonGS. Puedo simular un evento de puntero usando mi mano. Es súper fácil usar diferentes hardware con la misma tecnología web.

Entonces, bastante divertido. Como tendrás acceso al código fuente más tarde, si te gustaría probarlo en casa, pero uh, la, tal vez la próxima versión tendré que mapear en el, ya sabes, físico, ya sabes, de alguna manera, el controlador de la máquina Arcan para mover eso con mi mano, porque soportamos el seguimiento de la mano de serie.

Entonces, el siguiente también es interesante. Así que soy realmente un gran fan de la music. Así que estoy haciendo una composición de music yo mismo, y quería mezclar mi pasión, como cómo hacer VR y music. Así que lo que voy a hacer esta vez, voy a mostrarles esta demo. Así que es como un piano 360. Así que si presiono, ya sabes, las diversas notas puedo tocar algo de music con ello. Y estoy usando web audio para analizar en tiempo real, la onda del sonido para mostrar eso en la cinta. Así que es divertido.

Y voy a estar en el centro de esta experiencia para cambiar a VR esta vez. Así que obviamente lo hice usando mi casco, hice la grabación de ello y usando el Oculus Quest 2. Así que echemos un vistazo. Así que estoy dentro del Oculus Quest 2, como puedes ver, y voy a presionar una vez más el botón mágico. Así que ahora estoy en el centro de la experiencia como hemos visto en el navegador. Y tal vez puedas reconocer esta famosa music hecha por John William. Así que ves que los controladores se muestran en 3D. Y ahora puedo tener una experiencia de piano 360.

Quería hacer lo mismo pero usando esta vez el HoloLens 2. Así que la demo es bastante similar. Lo que hice esta vez es, ves que estoy en el centro del piano, puedo presionar una vez más las diversas notas, pero he reemplazado todo el fondo con un color negro único. Cuando usas el HoloLens 2 en VR y si tienes un fondo negro como para el Skydome, el HoloLens va a eliminar la textura negra con una transparente. Así que podré ver a través si te gusta. Así que veamos cómo funciona ahora dentro del HoloLens. Así que primero estoy mostrando Microsoft Edge en 2D, incluso si lo estoy viendo a través de un holograma, y voy a presionar el botón de modo inmersivo una vez más. Y esta vez estaré rodeado por mi piano virtual y ves que la textura negra ha sido eliminada y el seguimiento se está haciendo por BabylonGS de serie también. Lo que significa que ahora puedo usar mi mano para tocar y simular un evento de puntero. Podríamos haber hecho algo similar como tomar un objeto virtual y tocar las diversas teclas, pero ves cómo funciona. Mientras tengas un evento de puntero, será simulado en VR para ti. Así que ves, súper fácil una vez más con ser capaz de usar el Valve Index, Oculus Quest 2, HoloLens 2, usando la misma tecnología web que puede funcionar en todo el hardware.

5. Demo de AR y Llamadas Virtuales

Short description:

A continuación, se muestra una demostración de AR donde se coloca un objeto virtual en una habitación, creando una experiencia aumentada. Puedes ver partículas y objetos interactuando con el mundo real. Para probarlo tú mismo, visita ak.ms/orb-demo-AR. Los escenarios de realidad aumentada tienen aplicaciones en el comercio electrónico, permitiendo a los usuarios visualizar objetos virtuales en su entorno real. Consulta el blog de Babylon Medium para obtener más información. Además, exploramos el concepto de una llamada virtual dentro de una escena de VR utilizando Azure Communication Services y Babylon.js.

La siguiente es súper divertida, es una demostración de AR. Hasta ahora hemos visto VR. AR también está soportado de serie en WebXR y BabylonJS. Así que esta vez voy a poner un objeto, un objeto virtual en esta habitación. Y verás que tendré una especie de experiencia aumentada que se muestra. Así que tal vez ya puedes ver algunas partículas que se muestran. Puedes ver a alguien volando alrededor. Así que esto no es normal en el mundo clásico. Y cuando me voy a mover ligeramente, ya sabes, al fondo de esta habitación, verás una especie de orbe, orbe mágico que se muestra, ya sabes, enviando partículas mágicas al mundo real. Así que esto se ha hecho usando un teléfono Samsung Android que es S8, que no es muy reciente. Así que necesitas tener un teléfono bastante reciente para que funcione. Y tienes este tipo de experiencia. Así que es súper divertido. Si te gustaría hacerlo en casa, simplemente puedes ir a esta URL, ak.ms slash orb demo AR, y podrás probarlo tú mismo si te gusta, y echar un vistazo al código fuente si tienes un teléfono Android reciente.

Así que hemos visto un montón de fun demos, pero obviamente, estamos usando este tipo de tecnología en Microsoft para escenarios más serios, incluso si para mí los juegos también son un negocio serio. Así que primero, el comercio electrónico está realmente interesado en los escenarios de realidad aumentada por supuesto. Así que tenemos este artículo en el blog de Babylon JS, que puedes ver allí, que puede mostrarte el tipo de experiencia que puedes construir. Así que tenemos acceso a esta demo allí. Así que si te gustaría probarlo en casa, también, simplemente puedes ir allí y cargarlo. Así que hiciste, una vez más, el teléfono compatible con WebXR, y realmente tienes este tipo de experiencia. Así que puedo mostrarte eso en la demo, lo que significa que puedes posicionar una silla virtual en tu sala de estar real, potencialmente cambiar, ya sabes, el material, el color, y luego tener una especie de experiencia de cómo se verá el objeto en tu casa. Así que podemos ver un montón de escenarios útiles, obviamente, para el e-commerce, pero no sólo para e-commerce como vamos a ver justo después de eso. Así que siéntete libre de ir al blog de Babylon Medium y comprobarlo por tu cuenta.

Una vez que hemos hecho estas cosas divertidas, podemos ir un paso más allá. Así que todos hablamos sobre Metaverse. Así que esto es algo que quería hacer es habilitar una llamada virtual de alguna manera dentro de una escena de VR para poder llamar a alguien que esté en Microsoft Teams, que es nuestro equivalente de Zoom, si no lo conoces, o Slack. Así que podemos hacer video llamadas. Así que para eso, estoy usando Azure Communication Services, que es como una especie de los bloques de construcción subyacentes de Teams que puedes usar en tu propia aplicación web para poder establecer una llamada con Teams. Así que hay varios SDK, como el de JavaScript que voy a usar, y mezclar eso con Babylon.js. Así que vamos a ver el resultado de esta demo.

6. Explorando un Museo Virtual y Realizando Llamadas en VR

Short description:

Hola, estoy en un museo virtual dentro de un metaverso, funcionando con WebXR y Babylon.js. Imaginemos que estoy visitando un museo con muchas pinturas. Podría perderme, pero puedo usar el mismo objetivo de teletransporte. También puedo hacer llamadas usando Azure Communication Services para conectarme con alguien en Microsoft Teams. Llamé a Christina, mi novia, para que me ayudara a navegar por el museo. Encontramos una hermosa pintura. ¿Deberíamos comprarla?

Va a... Así que hola, estoy en este museo virtual dentro de un metaverso, funcionando con WebXR y Babylon.js. Y vamos a imaginar que me gusta visitar este museo con muchas pinturas. Pero podría perderme rápidamente porque estoy... Así que ves que puedo usar el mismo objetivo de teletransporte que hemos visto al principio. Así que realmente el mismo tipo de llamada con Teams hasta ahora.

Oh, y seamos geniales. Poder llamar a alguien a través de Teams. Así que lo que voy a hacer, estoy usando Azure Communication Services para poder llamar a alguien dentro de Microsoft Teams. Así que es un Microsoft Team regular, nada especial sobre esta versión. Y voy a presionar el botón de llamada, y voy a establecer una conexión con esta hermosa mujer. Así que normalmente, debería estar en el vestíbulo, en el otro lado. Y ella debería poder aceptarme. Y tan pronto como ella me ha aceptado. Así que hola, Christina. Así que Christina es mi novia. Así que ella me ayudó a hacer esta demostración. Y Christina, ¿puedes ayudarme a entrar en este museo? Porque estoy un poco perdido. Sí, por supuesto. ¿Podrías por favor ir delante de ti? Y acércate a la pared que está a la derecha en la gran sala. ¿Lo ves? Vale, te voy a llevar conmigo en mi controlador. Será más fácil. Así que te voy a llevar allí. ¿Está a mi derecha? Oh, sí. Mira la imagen a tu derecha. Justo la primera. Se ve tan hermosa. Esta. Sí. ¿Qué te parece? ¿Deberíamos comprarla? ¿También te gusta? Depende del número de ceros después del primer precio.

7. Uso de WebXR en Productos de Microsoft

Short description:

Estamos utilizando WebXR en otros productos de Microsoft como SharePoint Spaces y PowerApps. Permite visitas virtuales interactivas y experiencias de medios. Prueba nuestro experimento y controles de WebXR, incluyendo opciones 2D y 3D. La versión 5 de Babylon.js y un nuevo kit de herramientas de realidad mixta estarán disponibles pronto. Visita daverus.com para más información.

No te preocupes. No es el precio, es... cuando fue hecho. Así que no sé sobre el precio. Quizás deberíamos discutir sobre eso más tarde. Pero es genial. Hemos acordado en esto. Así que como puedes ver, voy a volver allí para ponerte de nuevo en... Así que ves que ser capaz de hacer una llamada completamente inmersiva en el navegador esta vez, llamando a mi novia, estando en Teams. Así que puedes pensar en este tipo de escenarios para hacer visitas virtuales cuando compras tu casa y te gustaría tener el tipo de visitas virtuales interactivas. Hay muchos escenarios interesantes utilizando estas tecnologías.

Así que también lo estamos utilizando en otros productos de Microsoft, como SharePoint. Lo está utilizando en un producto llamado SharePoint Spaces. También lo estamos utilizando en PowerApps. Tenemos controles para habilitar este mismo tipo de, ya sabes, con una silla que estaba en el salón, pero como con objetos importantes para poder ver si un objeto grande entrará como tus edificios. Así que está utilizando una vez más WebXR. Y también para poder hacer algún tipo de experiencia de medios interactivos, como algo que a menudo vemos en AR, así que esto también se puede hacer usando WebXR. Así que si te gustaría ir más allá de eso, deberías probar nuestro experimento y controles de WebXR También tenemos controles 2D y 3D que funcionan tanto en 2D como en VR porque estamos utilizando el evento de puntero para trabajar en ambos modos. La versión 5 de Babylon.js debería salir pronto, o estará pronto cuando este video sea lanzado. Tendremos un nuevo kit de herramientas de realidad mixta disponible. Y si te gustaría poder jugar estas demos tú mismo en casa, si tienes el hardware, ve a daverus.com, que es mi blog. Y publicaré un artículo completo sobre esta conferencia. Muchas gracias. Y si tienes alguna pregunta, envíame un mensaje en Twitter y pregúntame algo después de la charla. Nos vemos. Gracias. Sí. Gracias, David, por esa, esa fantástica primera charla. Supongo que eres un poco cinéfilo con todas las referencias a Regreso al Futuro y Star Wars Sí, soy un gran fan de esas películas.

8. Desarrollo Web VR y el Metaverso

Short description:

Me encantan las películas y las películas de ciencia ficción. Me encanta escuchar a Hans Zimmer. A la mayoría de las personas les interesa el lado de la realidad virtual de los videojuegos. WebXR ahora es AR y a muchas personas les interesan los escenarios de AR como el comercio electrónico. Soy un verdadero creyente de que la web podría ser la próxima frontera para los videojuegos en general y VR. Actualmente estoy involucrado en muchos proyectos en Microsoft en torno al tema del metaverso utilizando tecnologías web. El desarrollo web VR se está moviendo hacia la simplicidad y ahora es más fácil de implementar gracias a marcos como BabylonJS, A-Frame y FreeJS. Ahora está en productos oficiales y comienza a ser real. El metaverso es una palabra de moda y la web podría ser una gran implementación de esta tecnología.

Me encantan las películas y las películas de ciencia ficción, supongo, como a muchos desarrolladores y también a las estrellas de cine. Y me encanta escuchar a Hans Zimmer, por ejemplo. Me encanta. Me encanta.

Ahora, esa no es una de las preguntas oficiales. Antes de saltar a las preguntas que están llegando a través del chat, tendremos un vistazo a los resultados de la encuesta, que están aquí en la pantalla para que todos los vean. Porque veo que a la mayoría de las personas les interesa el lado de la realidad virtual de los videojuegos como alguien que trabaja bastante en la industria de los videojuegos. He trabajado bastante con VR también. Estos resultados realmente no me sorprenden. Entonces, ¿cuáles son tus pensamientos sobre estos resultados de la encuesta, David?

También me sorprende, porque la mayoría de las veces las personas con las que me encuentro están haciendo WebXR antes era WebVR, por lo que WebVR era solo VR. Pero ahora WebXR es AR y a muchas personas les interesa más, generalmente en escenarios de AR como e-commerce, porque es más fácil llegar al bolsillo de las personas, porque solo necesitas el teléfono en lugar de escuchar un auricular. Pero es interesante, tal vez tenemos un sesgo debido a la comunidad también asistiendo a esta Eben interesante en los videojuegos. Entonces, pero es genial, es genial ver a muchas personas interesadas en hacer videojuegos en VR. Soy un verdadero creyente de que la web podría ser la próxima frontera para los videojuegos en general y VR. Entonces, me encantaría ver más y más experimentos de videojuegos en VR utilizando tecnologías web sería increíble. Y el metaverso, por supuesto, porque de cómo esto es una palabra de moda, es súper popular. Entonces, no me sorprende el metaverso tampoco. Y para ser honesto, actualmente estoy involucrado en muchos proyectos en Microsoft en torno al tema del metaverso utilizando tecnologías web. Entonces, muchas de esas personas están trabajando en eso para impulsar y crear nuevos productos. Entonces, genial ver eso, pero un poco sorprendido como tú, Michèle. ¿Y qué piensas es donde el desarrollo web y el desarrollo web VR se está moviendo hacia? ¿Sigue siendo una especie de truco o qué estás empezando a ver? Supongo que experimentado con y probado en web VR?

No es bien, solía ser algo que no era realmente útil, complejo de implementar. Ahora es más simple, gracias a muchos frameworks. Entonces, gracias a BabylonJS, A-Frame, FreeJS muchos grandes frameworks que tienes en el mercado. Entonces, ahora es realmente fácil configurar una experiencia y las personas la están utilizando para verdaderas como al final de mis conferencias me refería a los productos de Microsoft, por supuesto, porque los conozco porque hemos estado trabajando con ellos. Pero ahora está en como sabes, producto oficial, para usar este tipo de tecnologías para hacer este tipo de colocación de objetos en el mundo real. Entonces, comienza a ser real con seguridad. Y el metaverso desde mi punto de vista, si funciona, porque nadie sabe si va a funcionar realmente. Y si a la gente le va a interesar eso. Pero la web también podría ser una gran implementación de esta tecnología. Entonces, tal vez a muchas personas les interese más hacer VR.

QnA

WebXR y Babylon.js en Safari iOS

Short description:

WebXR en Safari iOS es una pregunta para Apple. Los rumores sugieren que Apple podría implementar WebXR, lo que permitiría una única base de código para todos los dispositivos. Actualmente, puedes experimentar con la tecnología web en el iPhone utilizando un componente web que traduce los modelos al formato USD de Apple. El rendimiento de WebXR en el navegador no es tan potente como sus homólogos nativos, pero permite escenarios interesantes. La principal limitación es la CPU, ya que JavaScript es en su mayoría monothreaded. Sin embargo, utilizando modelos simples, puedes lograr mucho en AR y VR. El kit de herramientas WebXR de Babylon.js puede que no detecte superficies verticales, pero ofrece bloques de construcción de UI inspirados en HoloLens. Para obtener más información, visita el foro de Babylon.js.

O diría también realidad mixta como XR, realmente XR usando metaverso. Así que espero que estemos al comienzo de un nuevo ciclo, pero ya se está implementando en producción, para ser honesto para AR al menos. Supongo que muchas personas que van a desarrollar algunos de esos VR y AR, buena suerte si tienes que hacerlo.

Así que tengo una pregunta de Melody Connor, que parece ser una desarrolladora de iOS que pregunta, ¿cuándo crees que WebXR llegará al sistema Safari iOS pronto? Así que es quizás más una pregunta para Apple, y me encantaría que Apple adoptara WebXR. Así que ha habido algunos rumores. También si sigues a algunas personas que han sido influyentes en el espacio web o PWA, algunas personas han visto que WebXR estaba quizás a punto de ser implementado por Apple. No tengo ninguna información oficial al respecto. Tenemos rumores sobre quizás Apple yendo a chip, ya sabes, gafas. Me encantaría que Apple adoptara esta tecnología, porque significaría con seguridad que podríamos tener una única base de código capaz de dirigirse a todos los dispositivos, que es también la promesa de las tecnologías web. Antes de eso, ya puedes experimentar un poco en el iPhone usando más o menos tecnología web. Tenemos una especie de componente, componente web, que existe, que puede traducir, ya sabes, tu modelo al formato USD de Apple y ser capaz de hacer este tipo de AR. He estado haciendo experimentos yo mismo, pero no está usando WebXR. Hoy en día estás obligado a usar una implementación nativa. Y una forma de influir en eso, diría que cuanto más gente use WebXR, más presión sobre Apple para considerar la implementación de WebXR, seguro, porque no quieren perder esos grandes experimentos en sus propios dispositivos. Así que esta es una forma para ti también de influir en eso de alguna manera. Así que supongo que necesitamos conseguir a Apple en el próximo y podemos hacerles esa pregunta.

Así que tenemos otra pregunta de WebXR de KB, que pregunta, ¿cómo se compara WebXR con otros homólogos nativos o basados en escritorio en términos del rendimiento del producto? Siempre tenemos esta pregunta, para ser honestos, fuera de WebXR, incluso con WebGL y ahora tenemos WebGPU. Por supuesto, los rendimientos de lo que puedes hacer en un navegador hoy en día son menos impresionantes que lo que puedes hacer usando la pila nativa como DirectX, OpenGL, o meta en iOS. Pero eso es por lo que necesitas tener en cuenta también para diseñar tu experiencia. No podrás construir juegos AAA hoy en el navegador, todavía no, incluso si ha sido el equivalente del rendimiento de al menos Xbox 360, y ahora incluso más que eso, en el navegador lo que significa que ya permite algunos escenarios interesantes en el navegador. La principal limitación que tenemos no es la GPU para ser honesto, sino el lado de la CPU porque JavaScript sigue siendo monothreaded la mayor parte del tiempo por lo que va a limitar mucho lo que puedes hacer en relación a la física por ejemplo porque todo está en el lado de la CPU. Así que comparado con lo nativo, seguro que tenemos características menos potentes. Pero eso es por lo que creo que usando un modelo simple para hacer AR o incluso VR como mucha gente está haciendo VR usando modelos de baja poligonización, ya puedes hacer muchas cosas y comparado con lo nativo puedes dirigirte a muchos más dispositivos. Genial, gracias por eso.

Así que otra pregunta sobre el kit de herramientas de Babylon.js y WebXR y sé que Babylon.js acaba de recibir una gran actualización la semana pasada, por lo que podría haber sido incluido, pero ¿puede el kit de herramientas detectar superficies verticales? Superficies verticales, así que esta es una buena pregunta. Necesitaría verificar con mi equipo porque no estoy seguro. Sé que tenemos acceso a mapeo espacial para tener superficies planas como una horizontal. Necesitaría verificar cómo hacer la vertical. Así que no estoy seguro de lo que exactamente enviamos con el kit de herramientas fue un conjunto de bloques de construcción de UI que puedes usar provenientes de HoloLens porque hemos estado trabajando de cerca con las personas que construyen el HoloLens y para inspirarnos en su paradigma de UX y poner eso en Babylon, pero necesitaría verificar la vertical y no dudes en hacer la pregunta en nuestro foros como en el foro de Babylon.js. Así que puedes encontrarlo en Babylonjs.com.

Babylon.js, Soporte WebXR e Información de Contacto

Short description:

Algunas personas que serían más inteligentes que yo podrían responder a esa pregunta. Gracias por hacer esa pregunta. Babylon.js acaba de lanzar la versión 5.0 con un montón de nuevos cambios. El diferenciador clave de Babylon.js en el soporte de WebXR es su simplicidad y la inclusión de varias características de serie. Puedes encontrar las cosas impresionantes construidas en Babylon.js y WebXR en davrous.com. No dudes en contactarme en Twitter, davrous, si tienes alguna pregunta o quieres ponerte en contacto. ¡Gracias por unirte a nosotros hoy!

Algunas personas que serían más inteligentes que yo podrían responder a esa pregunta. Gracias por hacer esa pregunta. Realmente voy a pensar que Babylon incluso podría estar usando la función de discusiones en GitHub también. Así que sí, ve y pregúntales. Deberían poder decirte y también ve a revisar su última versión, la versión 5.0 acaba de ser lanzada hace solo siete días. Estoy mirando mi calendario que ha pasado la medianoche. Tienen un montón de nuevos cambios. Así que ve a revisarlo. Es realmente genial.

Nuestra siguiente pregunta es, ¿cuáles son los diferenciadores clave de Babylon.js en cuanto al soporte de WebXR? Así que nuestro principal diferenciador, diría yo, es algo en lo que he estado trabajando durante mucho tiempo. Así que no es porque yo, ya sabes, tenga un ego demasiado grande, pero esto era algo que queríamos trabajar para hacerlo súper simple de usar. Así que una vez que estás cargando, por ejemplo, una escena completa como la que he mostrado, como con el Back to the Future, como la escena de Lorian, tienes una sola línea de code para habilitar una experiencia lista para usar de serie. Lo llamamos el ayudante de experiencia WebXR, lo que significa que por defecto puedes teletransportarte. Puedes, ya sabes, tener el modelo cargado desde nuestro CDN. Así que es realmente, realmente simple de usar. Si no eres un experto en 3D, nosotros nos encargamos de todo por ti. Si eres un desarrollador más avanzado, lo que vamos a proporcionarte también es como un conjunto de controles, como el toolkit de realidad mixta y también controles avanzados que van a funcionar usando el ratón, el tacto y tu controlador de VR. Así que realmente estamos tratando de simplificar lo más posible tu experiencia de incorporación. Y todo está dentro, como tenemos web audio, tenemos, ya sabes, audio espacial incluido, física y escena que podrían ser habilitadas si te ocupas de eso en VR. Así que este es nuestro principal diferenciador, simplicidad y un montón de cosas incluidas de serie.

Genial y ¿dónde podemos encontrar las cosas impresionantes que has construido en Babylon.js y WebXR? ¿Tienes un repositorio de GitHub o algo que podamos revisar para tus proyectos? Sí, así que publicaré esta semana o probablemente a principios de la próxima semana en mi blog davrous.com Todos los ejemplos en los que he estado trabajando para ser honesto, he estado trabajando en un trozo de tiempo libre así que ahora necesito limpiar un poco el code para compartirlo con los desarrolladores y lo pondré en mi blog con una especie de lo mismo, el video quizás de esta conferencia más tarde.

Genial, y sé que hay algunas personas en el chat a las que quizás no hemos llegado a sus preguntas porque se nos acaba el tiempo, pero si la gente tiene preguntas o están viendo la grabación y quieren ponerse en contacto contigo, ¿cuál es la mejor manera para que se pongan en contacto contigo y hagan preguntas después de esta cumbre? La mejor manera es contactarme en Twitter, seguro, así que davrous en Twitter. Normalmente soy muy receptivo allí, así que no dudes en hacerme cualquier pregunta allí, ya sea pública o privada, y trataré de ayudarte en tus preguntas. Genial, así que muchas gracias por unirte a nosotros hoy, David. Realmente lo disfruté. Me encantan las referencias a las películas y es realmente genial ver lo que está pasando en el espacio de AR y VR, así que gracias por estar aquí. Muchas gracias. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into:
- Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers.
Additionally, we'll introduce our proprietary tool designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly. 
Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.
How to Make a Web Game All by Yourself
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
How to Make a Web Game All by Yourself
It's never been easier to make your own web game, but it's still extremely difficult. What game should you make? Which engine should you choose? Let's discuss how to answer these problems and ways to leverage the unique platform that is the web.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.