Log in
JavaScript Conferences
JS GameDev Summit 2022JS GameDev Summit 2022
ES

Introducción a WebXR con Babylon.js

Gustavo Cordido
Gustavo Cordido
Microsoft
certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Get Multipass
Rate this content
Bookmark

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.

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

FAQ

Para participar en el masterclass necesitas tener instalado Visual Studio Code y Node.js.

El presentador del masterclass es Gustavo Corbido, un defensor de la nube para la computación espacial en Microsoft.

WebXR es una tecnología que permite crear experiencias de realidad virtual y aumentada directamente en un navegador, utilizando WebGL para aprovechar la GPU del ordenador y construir experiencias en 3D.

En el masterclass se utiliza Babylon.js, un completo framework de JavaScript que permite construir juegos y experiencias tridimensionales con WebGL, WebVR y Web Audio.

Puedes utilizar el Babylon.js Playground, una herramienta que permite probar creaciones en el navegador sin necesidad de descargas adicionales.

Durante el masterclass se desarrollará una aplicación Babylon JS tematizada en torno al lanzamiento de la última película de Space Jam.

No, WebXR no es específico de un dispositivo o plataforma ya que funciona a través de la web y puede operar en múltiples dispositivos.

Para crear una aplicación WebXR se necesita principalmente JavaScript, además de algo de HTML y CSS.

En el primer módulo se trabajará en una experiencia básica de Babylon.js utilizando una plantilla de GitHub que facilita la adquisición de activos necesarios.

Debes clonar un repositorio desde GitHub usando Visual Studio Code y luego ejecutar comandos como 'NPM install' y 'NPM run build' para preparar tu entorno.

3dgame development
Gustavo Cordido
Gustavo Cordido
86 min
19 Apr, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Este masterclass se centra en el desarrollo de realidad mixta utilizando Babylon JS y WebXR. Los participantes aprenderán cómo crear una aplicación de Babylon JS con WebXR, construir el entorno de Babylon.js y agregar física a la escena. También explorarán la solución de problemas y la creación de un nuevo repositorio, así como la creación de iconos de personajes, botones e imágenes emergentes. El masterclass enfatiza la importancia de la documentación y proporciona oportunidades para la exploración. El código se puede ejecutar en varias plataformas con soporte de WebXR.
Available in English: Introduction to WebXR with Babylon.js
Video transcription and chapters available for users with access.
Available in other languages:

Watch more workshops on 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.
webglgame development
Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
WorkshopFree
Frank Force
Frank Force
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.
webglanimations3d
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.
game developmentgame engine
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.
game developmentgame engine
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.
game development

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
Will Eastcott
Will Eastcott
CEO & co-founder of PlayCanvas
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.
performancegame developmentgame engine
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
David Rousset
David Rousset
Senior Program Manager @ Microsoft. Co-creator of Babylon.js.
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
VR and ARgame development
Haciendo Juegos Increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Haciendo Juegos Increíbles con LittleJS
Top Content
Frank Force
Frank Force
Game Designer, Software Engineer
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.
game developmentgame engine
¡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!
Florin Ciornei
Florin Ciornei
CrazyGames
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.
performancewebglgame developmentreact unity webgl
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
Christoph Nakazawa
Christoph Nakazawa
CEO at Nakazawa Tech
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.
case studygame developmentbuilders and founders
TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue
Vue.js London 2023Vue.js London 2023
27 min
TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue
Alvaro Saburido
Alvaro Saburido
Storyblok
The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.
vuevue 33d