Log in
JavaScript conferences
JS GameDev Summit 2022JS GameDev Summit 2022
workshops

Introducción a WebXR con Babylon.js

Gustavo Cordido
Gustavo Cordido
Microsoft
Recording available for Multipass and Full ticket holders
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.

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.

game development3d
Gustavo Cordido
Gustavo Cordido
86 min
19 Apr, 2022

Comments

Sign in or register to post your comment.
Video transcription, chapters and summary available for users with access.

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.
animationswebgl3d
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
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
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.
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.
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. 
VR and ARgame development
Creando juegos increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Creando juegos increíbles con LittleJS
Frank Force
Frank Force
Game Designer, Software Engineer
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.
game developmentgame engine
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
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.
case studybuilders and foundersgame development
¡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
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.
performancewebglgame development
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
Conoce TresJS ▲ ■ ●, una forma declarativa de llevar la magia de ThreeJS utilizando componentes y composables de Vue en la vida cotidiana. Piénsalo como React-three-fiber o Lunchbox pero sin necesidad de un renderizador personalizado. Simplemente funciona.¿Estás listo para agregar una nueva dimensión a tus aplicaciones Vue?
vue3dvue 3