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

FAQ

WebXR es una API web que habilita la realidad virtual y la realidad aumentada. Permite experiencias de VR con dispositivos como Oculus Quest 2, HTC Vive, y Valve Index, y de AR con smartphones Android y HoloLens 2. Es un desarrollo avanzado de WebVR, siendo compatible principalmente con navegadores Chromium.

Babylon JS es un motor 3D de código abierto que opera sobre WebGL y WebGPU. Es conocido por facilitar la creación de contenido 3D y VR en la web, utilizando Web Audio para la espacialización en VR y soporta WebXR de serie. Está escrito en TypeScript, lo que mejora la autocompletación y la calidad del código.

WebXR es compatible con dispositivos que incluyen cascos de VR como Oculus Quest 2, HTC Vive, Valve Index, y también con dispositivos de AR como smartphones Android y HoloLens 2. Además, requiere navegadores basados en Chromium como Microsoft Edge y Google Chrome.

Para comenzar con Babylon JS, puedes acceder a recursos y documentación en línea. Babylon JS ofrece ejemplos y una comunidad activa que contribuye a su desarrollo. Es recomendable revisar la documentación oficial y unirse a los foros de la comunidad para obtener asistencia inicial.

Babylon JS se utiliza en varios proyectos de Microsoft, incluyendo PowerPoint para modelos 3D, SharePoint, Teams, y el servicio de juegos en la nube XCloud. También es utilizado por compañías como Adobe, Sony, el Ejército de los EE.UU., y Ubisoft.

Sí, WebXR también soporta experiencias de realidad aumentada (AR) que pueden ser utilizadas en smartphones y dispositivos como el HoloLens 2. Esto permite una amplia gama de aplicaciones más allá de la VR tradicional.

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.

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.

QnA

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

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
El motor de juegos de código abierto PlayCanvas está construido específicamente para el navegador, incorporando 10 años de aprendizaje sobre optimización. En esta charla, descubrirás la salsa secreta que permite a PlayCanvas generar juegos con tiempos de carga increíblemente rápidos y tasas de fotogramas sólidas como una roca.
Creando juegos increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Creando juegos increíbles con LittleJS
LittleJS es un motor de juegos súper ligero que es fácil de usar y extremadamente rápido. El desarrollador hablará sobre por qué lo creó, qué hace y cómo puedes usarlo para crear tus propios juegos. La charla incluirá una demostración de cómo construir un pequeño juego desde cero con LittleJS.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
En esta charla profundizaremos en el arte de crear algo significativo y gratificante. A través de la mirada de mi propio viaje de redescubrir mi pasión por la programación y construir un videojuego desde cero con JavaScript y React, exploraremos los compromisos entre soluciones fáciles y rendimiento rápido. Obtendrás información valiosa sobre prototipado rápido, infraestructura de pruebas y una variedad de trucos de CSS que se pueden aplicar tanto al desarrollo de juegos como a tu trabajo diario.
¡Mejora el rendimiento de tus juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el rendimiento de tus juegos WebGL Unity!
Unity, cuando se implementa en la web, enfrenta tres desafíos críticos: el tamaño de la compilación, el uso de memoria y el rendimiento general. Esta charla profundiza en técnicas avanzadas de optimización para ayudarte a abordar cada uno de estos problemas. Los asistentes obtendrán información sobre:
- Estrategias efectivas para optimizar texturas, audio y modelos.- Un análisis detallado de nuestra experimentación con ASTC en Unity, arrojando luz sobre los resultados inesperados a pesar de las afirmaciones de Unity.- Una guía completa de la herramienta de perfilado de memoria de Unity y sus implicaciones.- Una exploración de configuraciones de Unity menos conocidas que siguen siendo subutilizadas por muchos desarrolladores.
Además, presentaremos nuestra herramienta propietaria diseñada específicamente para la optimización de Unity. También mostraremos el panel de control para desarrolladores de CrazyGames, nuestra plataforma que permite a los desarrolladores monitorear y mejorar el rendimiento de sus juegos web de manera fluida.
Únete a nosotros para equiparte con las últimas estrategias y herramientas para elevar tus proyectos de juegos web de Unity.
Cómo hacer un juego web tú solo
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
Cómo hacer un juego web tú solo
Nunca ha sido tan fácil hacer tu propio juego web, pero sigue siendo extremadamente difícil. ¿Qué juego deberías hacer? ¿Qué motor deberías elegir? Vamos a discutir cómo responder a estos problemas y formas de aprovechar la plataforma única que es la web.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Construyendo el Metaverso Interconectado y Traversable
JS GameDev Summit 2022JS GameDev Summit 2022
103 min
Construyendo el Metaverso Interconectado y Traversable
WorkshopFree
Avaer Kazmer
Avaer Kazmer
Basado en gran medida en Free Association en el Metaverso - Avaer @Exokit - M3, Avaer demostrará algunas de las formas en que los estándares abiertos permiten la travesía abierta y gratuita de usuarios y activos en todo el metaverso interconectado.