Construyendo Experimentos Divertidos con WebXR y Babylon.js

Rate this content
Bookmark

En esta sesión, veremos un par de demos 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 arcade, hasta un uso más serio para crear nuevas formas de colaboración utilizando AR o VR, deberías tener una buena comprensión de lo que puedes hacer hoy en día.


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

33 min
07 Apr, 2022

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 demos, incluyendo la transformación de un juego 2D en una experiencia 3D y de VR, composición de música en VR, demos 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 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 se ejecuta en WebGL y WebGPU. Web XR permite experiencias de realidad virtual y aumentada en diferentes dispositivos. Es un reemplazo de web VR y actualmente es compatible con navegadores Chromium. Babylon GS es un marco de código abierto que admite WebXR y proporciona excelentes características como autocompletado y espacialización en VR. Se utiliza ampliamente en aplicaciones de Microsoft.

Hola, mi nombre es David. Trabajo en Microsoft y hoy les mostraré algunos experimentos de web XR utilizando Babylon JS. Va a ser divertido.

Les mostraré muchos ejemplos diferentes y veamos juntos lo que pueden hacer hoy con web XR. Trabajo en la división de desarrolladores de Microsoft, las personas a cargo de GitHub, VS Code, Visual Studio y algunas características de Azure también. Pero hoy hablaré sobre WebGL y web XR.

No dudes en seguirme en Twitter si tienes preguntas después de la charla. ¿Qué es web XR? Probablemente hayas oído hablar de eso, pero definámoslo brevemente antes de mostrar algunas demostraciones sobre esta tecnología. Web XR es una API web que puede habilitar tanto la realidad virtual, utilizando auriculares Oculus Quest 2, HTC Vive o Valve Index, como la realidad aumentada utilizando un teléfono inteligente con sistema operativo Android. También el HoloLens 2 puede admitir la función de realidad aumentada de web XR. Es un reemplazo de web VR, si has oído hablar de web VR antes. Solo se trataba de VR y ha habido algunas refactorizaciones en torno a la API. Actualmente solo es compatible con el navegador Chromium, como Microsoft Edge, Chrome, por supuesto, pero también Samsung Internet en Android y, obviamente, Chrome en Android. Ya he hablado sobre los diferentes dispositivos compatibles.

Hoy vamos a hablar sobre Babylon GS. Babylon GS es un motor 3D en el que he estado trabajando hace un par de años con un amigo, por eso es mi pequeño bebé en cierto modo. Si quieres comenzar con Babylon GS, puedes encontrar un enlace a continuación, pero lo veremos justo después. Babylon GS es un motor 3D de código abierto que se ejecuta sobre WebGL y también sobre WebGPU hoy en día. Admitimos WebGPU. Utilizamos Web Audio, lo cual es excelente para la espacialización en VR. Y admitimos WebXR de manera nativa. Es un marco de código abierto que utiliza la licencia Apache 2. Hay muchas contribuciones de la comunidad. Más de la mitad del código fuente ahora proviene de la comunidad. Está completamente escrito en TypeScript, lo que permite excelentes características como autocompletado y calidad del código, en general gracias a los tipos. Y admite WebXR de manera nativa, utilizando controles ya para VR. Tienes muchos controles que funcionan en 2D con el mouse y en 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, muchas aplicaciones de primera parte en Microsoft lo utilizan, como PowerPoint, como el modelo 3D que tienes en tu pantalla.

2. Demos de WebXR y Experiencia de VR

Short description:

SharePoint, Teams. Además, XCloud, el servicio de juegos en la nube de Xbox, utiliza Babylon GS para el control táctil. Más adelante, publicaré una publicación en mi blog para compartir el código fuente de todas las demostraciones. Primero, vamos a utilizar la característica súper simple pero poderosa llamada Experiencia XR. Estamos utilizando esta línea de código. Si no tienes un auricular de VR, puedes instalar una extensión en Chrome o Edge llamada la extensión WebXR. Y si tienes esta extensión habilitada, tendrás este botón que te pedirá que cambies a un modo inmersivo. Muy útil, con una sola línea de código puedes tener una experiencia lista para usar y puedes salir del modo inmersivo para volver al modo clásico. Pero veamos cómo funciona en un auricular 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 habitación reutilizándola. Y verás que en el auricular, obviamente, tengo una representación estereoscópica. Estoy usando la vista de VR de SteamVR en Windows y verás la experiencia inmersiva, así que algún día debes probarlo con cualquier tipo de auricular compatible con WebXR como Valve Index en escritorio, pero también Oculus Quest 2 de Xerox, y tendrás una experiencia inmersiva súper genial con solo una línea de código una vez más y nosotros nos encargamos de toda la teleportación, visualización de los controladores, cosas así. Como ves, es muy fácil de habilitar.

SharePoint, Teams. Además, XCloud, el servicio de juegos en la nube de Xbox, utiliza Babylon GS para el control táctil. También es utilizado por Adobe, algunos socios, Sony, el Ejército de EE. UU. y Ubisoft.

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

Primero, vamos a utilizar la característica súper simple pero poderosa llamada Experiencia XR. Estamos utilizando esta línea de código. Con solo una línea de código, habilitarás una experiencia de VR en nuestro caso. Así que voy a pasar a Chrome por ahora. Verás esta escena, que solo carga el valle de esta escena, Hill Valley de Regreso al Futuro, y una vez que la escena se haya cargado en este código de devolución de llamada, lo que voy a pedirle a Babylon.js, utilizando esta única línea de código, es que convierta esta experiencia existente en una experiencia compatible con VR. Solo necesitas proporcionar un parámetro, que es lo que actuará como un piso para soportar el objetivo de teleportación que veremos en el video justo después de esto.

Si no tienes un auricular de VR, puedes instalar 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 que te pedirá que cambies a un modo inmersivo. Así que voy a hacer clic en este botón, se va a renderizar, ya sabes, para el ojo izquierdo y el ojo derecho para la representación estereoscópica. Y para poder simular un auricular de VR, debes presionar la tecla F12 y luego tendrás una nueva propiedad WebXR allí. Así que vamos a colocar eso a la derecha y esto a la izquierda. Y vamos a intentar, por ejemplo, mover el auricular. Verás que puedo moverme hacia los diferentes lados para simular el hecho de que te estás moviendo, pero también obviamente el controlador y también puedes cambiar de Quest de forma predeterminada a HTC Vive. Y verás que Babylon JS obtiene el modelo correcto de forma automática, descargándolo desde nuestro CDN. Así que volvamos a un Oculus Quest. Muy útil, con una sola línea de código puedes tener una experiencia lista para usar y puedes salir del modo inmersivo para volver al modo clásico. Así que es súper fácil tener una primera experiencia, solo carga una escena, agrega esta línea de código y funcionará. Pero veamos cómo funciona en un auricular 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 habitación reutilizándola. Y verás que en el auricular, obviamente, tengo una representación estereoscópica. Estoy usando la vista de VR de SteamVR en Windows y verás la experiencia inmersiva, así que algún día debes probarlo con cualquier tipo de auricular compatible con WebXR como Valve Index en escritorio, pero también Oculus Quest 2 de Xerox, y tendrás una experiencia inmersiva súper genial con solo una línea de código una vez más y nosotros nos encargamos de toda la teleportación, visualización de los controladores, cosas así. Como ves, es muy fácil de habilitar.

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

Short description:

Transformé un juego existente en 2D 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, replicé la experiencia de jugar el juego en una máquina arcade en VR.

La siguiente demostración es algo así como verás que tengo una máquina arcade justo detrás de mí. Soy un gran fanático de los videojuegos en general, pero también de las máquinas arcade. Así que lo que quería hacer es convertir, sí, transformar un juego existente en 2D que tenía que estaba utilizando IsleJS, Create.js si lo conoces, en una experiencia 3D y luego, obviamente, en una experiencia de VR. Así que echemos un vistazo al código fuente de eso. Así que fue realmente una experiencia sencilla. Así que vamos a abrirlo. Y verás que puedes moverte de derecha a izquierda y saltar. Es un juego de plataformas. Nada especial en eso. Y este es un juego de lienzo 2D. Así que lo que quería hacer es transformarlo en 3D. Así es como lo hice allí. Así que esto es como tomé un modelo gratuito en Sketchfab, creo, según recuerdo, sobre una máquina arcade machine. Tomé como un plano 2D encima de la máquina arcade para transformarlo en mi lienzo 2D. Así que lo que estoy haciendo, básicamente, es tomar este lienzo 2D y proyectarlo en 3D. BabylonJS admite texturas dinámicas, lo que significa que puedes tomar un lienzo 2D y proyectarlo 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 se pueden renderizar en el modo inmersivo en el auricular. Así que necesitas hacer todo en el lienzo WebGL. Así es como lo 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 de esa manera, pero en 3D en ese momento, 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 te mostraré la experiencia completa, ya sabes cómo funciona para mí. Entonces, um, puedes ver que actualmente estoy jugando usando el controlador de Xbox. Como en 2D, y luego voy a presionar el botón del auricular en la parte inferior derecha. Entonces cambiará, gracias a SteamVR, al modo inmersivo. Y obviamente necesito ponerme el auricular para poder hacerlo. Y de la misma manera, como durante la demostración de Regreso al Futuro, pude ver eso en 3D. Esta vez, lo que he estado haciendo es mapear, ya sabes, en el controlador, el joystick para poder moverme. Y la experiencia es realmente genial. Quería replicar realmente lo que pude hacer, um, en mi máquina de arcade, 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 de música en VR y piano 360

Short description:

Más adelante tendrás acceso al código fuente. Tendré que mapear el controlador de la máquina Arcan para moverlo con mi mano. Voy a mostrarte una demostración de piano 360. Estoy utilizando audio web para analizar la onda de sonido en tiempo real. Puedo tocar música utilizando las diferentes 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 mediante BabylonGS. Puedo simular un evento de puntero usando mi mano. Es muy fácil usar diferentes hardware con la misma tecnología web.

Así que bastante divertido. Como tendrás acceso al código fuente más adelante, si quieres probarlo en casa, pero, tal vez en la próxima versión tendré que mapear en el controlador de la máquina Arcan físicamente para poder moverlo con mi mano, porque soportamos el seguimiento de manos de forma nativa.

Lo siguiente también es interesante. Soy realmente un gran fanático de la música. Estoy componiendo música yo mismo y quería combinar mi pasión, cómo hacer VR y música. Así que lo que voy a hacer esta vez es mostrarte esta demostración. Es como un piano 360. Si presiono las diferentes notas, puedo tocar música con él. Estoy utilizando audio web para analizar en tiempo real la onda de sonido y mostrarla en la cinta. Es divertido.

Voy a estar en el centro de esta experiencia para cambiar a VR esta vez. Obviamente, lo he hecho usando mi auricular, he grabado eso y usando el Oculus Quest 2. Echemos un vistazo. Estoy dentro del Oculus Quest 2, como puedes ver, y voy a presionar una vez más el botón mágico. Ahora estoy en el centro de la experiencia como hemos visto en el navegador. Y tal vez puedas reconocer esta música súper famosa hecha por John William. Verás que los controladores se muestran en 3D. Y ahora puedo tener una experiencia de piano 360.

Quería hacer lo mismo pero usando el HoloLens 2 esta vez. La demostración es bastante similar. Lo que he hecho esta vez es, como puedes ver, estoy en el centro del piano, puedo presionar una vez más las diferentes 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 reemplazar la textura negra con una transparente. Así que podré ver a través de ella si quieres. Veamos cómo funciona ahora dentro del HoloLens. Primero estoy mostrando Microsoft Edge en 2D, aunque lo veo como un holograma, y voy a presionar una vez más el botón de modo inmersivo. Y esta vez estaré rodeado por mi piano virtual y verás que se ha eliminado la textura negra y el seguimiento se realiza mediante BabylonGS de forma nativa. Lo cual significa que ahora puedo usar mi mano para tocar y simular un evento de puntero. Podríamos haber hecho algo similar tomando un objeto virtual y golpeando las diferentes teclas, pero así es como funciona. Mientras tengas un evento de puntero, se simulará en VR para ti. Como ves, es muy fácil una vez más poder usar el Valve Index, Oculus Quest 2, HoloLens 2, utilizando la misma tecnología web que puede funcionar en todos los dispositivos.

5. Demostración 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 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 muy divertida, es una demostración de AR. Hasta ahora hemos visto VR. AR también es compatible de forma nativa en WebXR y BabylonJS. Esta vez voy a colocar un objeto, un objeto virtual en esta habitación. Y verás que tendré una experiencia aumentada siendo mostrada. Tal vez ya puedas ver algunas partículas siendo mostradas. Puedes ver a alguien volando alrededor. Esto no es normal en el mundo clásico. Y cuando me mueva ligeramente hacia atrás de esta habitación, verás una especie de orbe, un orbe mágico siendo mostrado, enviando partículas mágicas al mundo real. Esto se ha hecho usando un teléfono Samsung Android que es el S8, que no es muy reciente. Así que necesitas tener un teléfono bastante reciente para que funcione. Y tendrás esta experiencia. Es muy divertido. Si quieres probarlo en casa, simplemente ve a esta URL, ak.ms/orb-demo-AR, y podrás probarlo tú mismo si quieres, y echa un vistazo al código fuente si tienes un teléfono Android reciente.

Así que hemos visto muchas fun demos, pero obviamente, estamos utilizando este tipo de tecnología en Microsoft para escenarios más serios, aunque para mí los videojuegos también son un negocio serio. Primero, el comercio electrónico está muy interesado en los escenarios de realidad aumentada, sin duda. 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 demostración allí. Así que si quieres probarlo en casa, también puedes ir allí y cargarlo. Así que lo hiciste, una vez más, con un teléfono compatible con WebXR, y realmente tienes este tipo de experiencia. Así que puedo mostrarte eso en la demostración, lo que significa que puedes colocar 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 hogar. Así que podemos ver muchos escenarios útiles, obviamente, para e-commerce, pero no solo para e-commerce como veremos justo después. 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á. Todos hablamos del Metaverso. Así que algo que quería hacer es habilitar una llamada virtual de alguna manera dentro de una escena de VR para poder llamar a alguien estando en Microsoft Teams, que es nuestro equivalente de Zoom, si no lo conoces, o Slack. Así que podemos hacer llamadas de video. Para eso, estoy utilizando 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 establecer una llamada con Teams. Así que hay varios SDK, como el de JavaScript que voy a usar, y combinarlo con Babylon.js. Así que echemos un vistazo al resultado de esta demostración.

6. Explorando un Museo Virtual y Haciendo Llamadas en VR

Short description:

Hola, estoy en un museo virtual dentro de un metaverso, utilizando 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 utilizando Azure Communication Services para conectarme con alguien en Microsoft Teams. Llamé a Christina, mi novia, para que me ayude 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, utilizando 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 es 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 utilizando los Servicios de Comunicación de Azure para poder llamar a alguien dentro de Microsoft Teams. Así que es un equipo de Microsoft normal, nada especial en esta versión. Y voy a presionar el botón de llamada, y voy a establecer una conexión con esta hermosa mujer. Normalmente, debería estar en el vestíbulo, en el otro lado. Y ella debería poder aceptarme. Y tan pronto como ella me haya aceptado. Así que hola, Christina. 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 ir delante de ti? Y acércate a la pared que está a la derecha en la sala grande. ¿Lo ves? De acuerdo, te llevaré conmigo en mi controlador. Será más fácil. Así que te llevaré allí. ¿Está a mi derecha? Oh, sí. Mira la imagen a tu derecha. Solo la primera. Se ve tan hermosa. Esta. Sí. Entonces, ¿qué piensas? ¿Deberíamos comprarla? ¿A ti también te gusta? Depende del número de ceros después del primer precio.

7. Using WebXR in Microsoft Products

Short description:

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

No te preocupes. No es el precio, es el... cuando fue hecho. Así que no sé sobre el precio. Tal vez deberíamos discutir eso más adelante. Pero es genial. Estamos de acuerdo en este. Así que como puedes ver, voy a volver allí para devolverte... Así que ves que poder hacer una llamada inmersiva completa 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 compres tu casa y te guste tener este tipo de visitas virtuales interactivas. Hay muchos escenarios interesantes que utilizan estas tecnologías.

También lo estamos utilizando en otros productos de Microsoft, como SharePoint. Lo están 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 la sala de estar, pero con objetos importantes para poder ver si un objeto grande entrará como tus edificios. Así que una vez más, se está utilizando WebXR. Y también para poder hacer algún tipo de experiencia multimedia interactiva, como algo que a menudo vemos en AR, esto también se puede hacer utilizando WebXR. Así que si quieres ir más allá, 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 funcionar en ambos modos. La versión 5 de Babylon.js estará disponible pronto, o estará pronto cuando se publique este video. Tendremos un nuevo conjunto de herramientas de realidad mixta disponible. Y si quieres poder jugar con esas demos en tu 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 fantástica primera charla. Supongo que eres un gran aficionado al cine con todas las referencias a Regreso al Futuro y Star Wars. Sí, soy un gran fanático de esas películas.

8. Web Development VR and the Metaverse

Short description:

Me encantan las películas y las películas de ciencia ficción. Me encanta escuchar a Hans Zimmer. La mayoría de las personas están interesadas en el lado de realidad virtual de los videojuegos. WebXR ahora es AR y muchas personas están interesadas en escenarios de AR como el comercio electrónico. Creo firmemente que la web podría ser la próxima frontera para los videojuegos en general y la realidad virtual. Actualmente estoy involucrado en muchos proyectos en Microsoft relacionados con el tema del metaverso utilizando tecnologías web. El desarrollo web en realidad virtual se está volviendo más simple y ahora es más fácil de implementar gracias a frameworks 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 muchos desarrolladores y también 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 pasar a las preguntas que llegan por el chat, echaremos un vistazo a los resultados de la encuesta, que están aquí en la pantalla para que todos los vean. Porque ve, la mayoría de las personas están interesadas en el lado de realidad virtual de los videojuegos, como alguien que trabaja mucho en la industria de los videojuegos. También he trabajado mucho con la realidad virtual. Estos resultados no me sorprenden realmente. Entonces, ¿qué piensas de los resultados de esta 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 de que fuera WebVR, por lo que WebVR era solo realidad virtual. Pero ahora WebXR es AR y a muchas personas les interesa más, por lo general, en escenarios de AR como el comercio electrónico, porque es más fácil llegar a las personas, ya que solo necesitas el teléfono en lugar de usar un auricular. Pero es interesante, tal vez tenemos un sesgo debido a la comunidad que también asiste a esta conferencia y está interesada en los videojuegos. Pero es genial, es genial ver que a muchas personas les interesa hacer juegos en realidad virtual. Creo firmemente que la web podría ser la próxima frontera para los videojuegos en general y la realidad virtual. Me encantaría ver cada vez más juegos experimentales en realidad virtual utilizando tecnologías web, sería increíble. Y el metaverso, por supuesto, porque es una palabra de moda y es muy popular. Así que no me sorprende el metaverso tampoco. Y para ser honesto, actualmente estoy involucrado en muchos proyectos en Microsoft relacionados con el tema del metaverso utilizando tecnologías web. Muchas de esas personas están trabajando en eso para impulsar y crear nuevos productos. Así que es genial ver eso, pero un poco sorprendido como tú, Michèle. ¿Y qué crees que es hacia dónde se está moviendo el desarrollo web y el desarrollo web en realidad virtual? ¿Todavía es algo así como un truco o qué estás empezando a ver? Supongo que has experimentado y probado en la realidad virtual web.

Antes no era algo realmente útil, era complejo de implementar. Ahora es más simple, gracias a muchos frameworks. Gracias a BabylonJS, A-Frame, FreeJS y muchos otros grandes frameworks que existen en el mercado. Ahora es realmente fácil configurar una experiencia y las personas lo están utilizando de verdad, 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 productos oficiales, para utilizar este tipo de tecnologías y colocar objetos en el mundo real. Así que comienza a ser real, sin duda. Y en cuanto al metaverso, desde mi punto de vista, si funciona, porque nadie sabe si realmente funcionará. Y si las personas estarán interesadas en eso. Pero la web también podría ser una gran implementación de esta tecnología. Así que tal vez a muchas personas les interese hacer realidad virtual.

QnA

WebXR y Babylon.js en Safari iOS

Short description:

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

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

Tengo una pregunta de Melody Connor, que parece ser una desarrolladora de iOS que pregunta, ¿cuándo crees que WebXR llegará pronto al sistema Safari iOS? Así que es más bien una pregunta para Apple, y me encantaría que Apple adoptara WebXR. Ha habido algunos rumores. También, si sigues a algunas personas que han influido en el espacio web o PWA, algunas personas han visto que WebXR estaba a punto de ser implementado por Apple. No tengo ninguna información oficial al respecto. Tenemos rumores de que tal vez Apple vaya a lanzar gafas. Me encantaría que Apple adoptara esta tecnología, porque significaría que podríamos tener una base de código única que pueda dirigirse a todos los dispositivos, que también es la promesa de las tecnologías web. Antes de eso, ya puedes experimentar un poco en el iPhone utilizando más o menos tecnología web. Tenemos algún tipo de componente web que existe, que puede traducir, ya sabes, tu modelo al formato USD de Apple y poder hacer este tipo de AR. Así que he estado haciendo experimentos yo mismo, pero no utilizando WebXR. Hoy en día estás obligado a utilizar una implementación nativa. Y una forma de influir en eso, diría que cuanto más personas utilicen WebXR, más presión sobre Apple para considerar la implementación de WebXR, porque no quieren perder esos grandes experimentos en sus propios dispositivos. Así que esta es una forma para que tú también puedas influir en eso. Así que supongo que necesitamos tener a Apple en el próximo y podemos hacerles esa pregunta.

Tenemos otra pregunta sobre WebXR de KB, que pregunta, ¿cómo se compara WebXR con otras contrapartes nativas o basadas en escritorio en términos del rendimiento del producto? Siempre tenemos esta pregunta, para ser honesto, incluso fuera de WebXR, como con WebGL y ahora tenemos WebGPU. Por supuesto, el rendimiento de lo que puedes hacer en un navegador hoy en día es menos impresionante que lo que puedes hacer utilizando la pila nativa como DirectX, OpenGL o Meta en iOS. Pero eso es algo que también debes tener en cuenta al diseñar tu experiencia. No podrás construir juegos AAA en el navegador hoy en día, al menos no todavía, incluso si es equivalente al 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 limitación principal que tenemos no es la GPU, para ser honesto, sino el lado de la CPU porque JavaScript sigue siendo en su mayoría monohilo, por lo que va a limitar mucho lo que puedes hacer en cuanto a física, por ejemplo, porque todo está en el lado de la CPU. Así que en comparación con lo nativo, seguramente tenemos características menos potentes. Pero por eso creo que utilizando modelos simples para hacer AR o incluso VR, como mucha gente está haciendo VR utilizando modelos de baja poligonización, ya puedes hacer muchas cosas y en comparación con lo nativo puedes llegar a muchos más dispositivos. Genial, gracias por eso.

Otra pregunta sobre el conjunto de herramientas Babylon.js y WebXR y sé que Babylon.js acaba de recibir una importante actualización la semana pasada, así que podría haberse incluido, pero ¿puede el conjunto de herramientas detectar superficies verticales? Superficies verticales, así que esta es una buena pregunta. Necesitaría verificarlo con mi equipo porque no estoy seguro. Sé que tenemos acceso al mapeo espacial para tener superficies planas como una horizontal una. Necesitaría verificar cómo hacer la vertical. Así que no estoy seguro de lo que enviamos exactamente con el conjunto de herramientas, fue un conjunto de bloques de construcción de interfaz de usuario que puedes usar provenientes de HoloLens porque hemos estado trabajando en estrecha colaboración con las personas que construyen HoloLens y para inspirarnos en su paradigma de experiencia de usuario y poner eso en Babylon, pero necesitaría verificar lo de la vertical y siéntete libre de hacer la pregunta en nuestros foros, como en el foro de Babylon.js. Así que puedes encontrarlo en Babylonjs.com.

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

Short description:

Algunas personas más inteligentes que yo podrían responder esa pregunta. Gracias por hacerla. Babylon.js acaba de lanzar la versión 5.0 con una gran cantidad de cambios nuevos. 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 cosas increíbles construidas con 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 hoy!

Algunas personas más inteligentes que yo podrían responder esa pregunta. Gracias por hacerla. Realmente creo que Babylon incluso podría estar utilizando la función de discusiones en GitHub también. Así que sí, ve y pregúntales. Deberían poder decirte y también echa un vistazo a su última versión, la versión 5.0 que se lanzó hace solo siete días. Estoy viendo que mi calendario pasó de medianoche. Tienen una gran cantidad de cambios nuevos. Así que échale un vistazo. Es realmente genial.

Nuestra próxima pregunta es, ¿cuáles son los diferenciadores clave de Babylon.js en cuanto al soporte de WebXR? Así que nuestro principal diferenciador, diría que es algo en lo que he estado trabajando durante mucho tiempo. No es porque tenga un ego demasiado grande, pero esto era algo que queríamos lograr, hacerlo súper simple de usar. Así que una vez que cargas, por ejemplo, una escena completa como he mostrado, como con la espalda hacia el futuro, como la escena de Lorian, tienes una sola línea de código 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, cargar el modelo desde nuestro CDN. Así que es realmente, realmente simple de usar. Si no eres un experto en 3D, nos encargamos de todo por ti. Si eres un desarrollador más avanzado, también te proporcionaremos un conjunto de controles, como el conjunto de herramientas de realidad mixta y también un control avanzado que funcionará con el mouse, el tacto y tu controlador de VR. Así que realmente estamos tratando de simplificar al máximo tu experiencia de incorporación. Y todo está incluido, como tenemos audio web, tenemos, ya sabes, audio espacial incluido, física y escena que se pueden habilitar si te encargas de eso en VR. Así que este es nuestro principal diferenciador, simplicidad y muchas cosas incluidas de serie.

Increíble, ¿y dónde podemos encontrar las cosas increíbles que has construido con Babylon.js y WebXR? ¿Tienes un repositorio en GitHub o algo que podamos revisar para ver tus proyectos? Sí, esta semana o probablemente a principios de la próxima semana publicaré en mi blog davrous.com todas las muestras en las que he estado trabajando, para ser honesto, he estado trabajando en ellas en mi tiempo libre, así que ahora necesito limpiar un poco el código para compartirlo con los desarrolladores y lo pondré en mi blog con una especie de, tal vez, el video de esta conferencia más adelante.

Increíble, y sé que hay algunas personas en el chat a las que quizás no hayamos podido responder sus preguntas porque se nos acaba el tiempo, pero si las personas tienen 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 ponerse en contacto conmigo en Twitter, sin duda, así que davrous en Twitter. Normalmente soy muy receptivo allí, así que no dudes en hacerme cualquier pregunta, ya sea pública o privada, y trataré de ayudarte con tus preguntas. Increíble, muchas gracias por unirte hoy, David. Realmente lo disfruté. Me encantaron las referencias a las películas y es genial ver lo que está sucediendo en el espacio de la RA y RV, 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

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.
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.

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
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.