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

This talk has been presented at JS GameDev Summit 2022, check out the latest edition of this JavaScript Conference.

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.

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.

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.

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
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Haciendo Juegos Increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Haciendo Juegos Increíbles con LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
¡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!
Top Content
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
31 min
Cómo no construir un videojuego
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Mejora el rendimiento de tus juegos utilizando Canvas
JS GameDev Summit 2023JS GameDev Summit 2023
8 min
Mejora el rendimiento de tus juegos utilizando Canvas
The Talk discusses the use of the canvas element in games and web applications to improve performance. It compares the Canvas API and WebGL API, highlighting the advantages and disadvantages of each. The Canvas API allows for both CPU and GPU rendering, while WebGL API only uses GPU and hardware acceleration. Using the canvas element can significantly enhance performance, but it comes with increased complexity and development costs.
Juegos Web 3: Qué es y por qué es importante
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Juegos Web 3: Qué es y por qué es importante
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

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.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.
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.