Desatando Experiencias Web 3D de Última Generación con Babylon.js 6.0

Primero, un poco sobre mí. Soy un desarrollador de software en Microsoft. Soy el líder técnico web de Babylon.js y un colaborador principal desde aproximadamente 2014. Soy un director responsable de la infraestructura de Babylon, su sistema de compilación, el WebEx nuestra abstracción, y algunas otras características en el camino.

Pero hablemos de Babylon. Nuestro objetivo en Babylon.js es crear el motor de renderizado web más potente, hermoso, simple y abierto. Queremos proporcionar a cualquier desarrollador, diseñador y aficionado todas las herramientas necesarias para crear experiencias y juegos 3D acelerados por GPU en la web, sin la necesidad de comprender profundamente el renderizado 3D, al mismo tiempo que permitimos a los desarrolladores experimentados aprovechar al máximo estas APIs.

Entonces, Babylon es un motor de renderizado web completo. Está escrito en Typescript, transpilado a JavaScript, y está construido sobre estándares web abiertos. Estándares como WebGL y WebGPU para el renderizado, Web Audio y Video para la reproducción de medios, y otros estándares como WebXR, WebRTC, WebAssembly, en general, cualquier API que comience con web, queremos admitirla. Babylon siempre es compatible con versiones anteriores, lo cual es un principio rector para el equipo al desarrollar nuevas características o modificar las antiguas. Nuestro código, escrito en Babylon 3, seguirá funcionando en Babylon 6, 7 o 10. El framework tiene aproximadamente 10 años y se utiliza en sitios web de producción en toda la web.

Además de nuestro paquete principal, ofrecemos diferentes paquetes como cargadores, serializadores, materiales, interfaz de usuario y otros, incluidos todos nuestros editores y herramientas. Todo es de código abierto y los publicamos tanto en NPM como en nuestro CDN. De forma predeterminada, tenemos soporte completo para WebGL 1 y 2, WebGPU. Tenemos una interfaz de usuario acelerada por canvas, sistema de materiales avanzado, integración de física, abstracción de WebXR, sistema de entrada de dispositivos y muchas, muchas otras características. Puedes visitar nuestro sitio web y la página de documentación para ver una lista completa de las características.

Babylon tiene un conjunto de herramientas poderosas para permitirte aprovechar al máximo el motor. La primera herramienta es el Playground. El Playground es un editor de código lado a lado que te permite ver tu escena en la que estás trabajando directamente en tu navegador. Está basado en Monaco, que es el editor utilizado, entre otros, en VS Code. Puedes escribir código en JavaScript o TypeScript, y tienes acceso completo a todas las características y paquetes publicados de Babylon. El Playground te permite guardar tu código, compartirlo con otros e incluso descargar tu escena y alojarla tú mismo. El Playground está disponible en playground.babylonjs.com y es un lugar perfecto para comenzar con el motor y comprender sus capacidades. Incluye muchos ejemplos diferentes.

La segunda herramienta es el Inspector. El Inspector es una herramienta de depuración para tu escena.

La tercera herramienta de la que quiero hablar es el Editor de Materiales Node. El Editor de Materiales Node o NME te permite crear materiales de sombreado utilizando un conjunto de bloques disponibles en nuestra biblioteca principal. Utilizando una interfaz de usuario muy intuitiva, puedes crear materiales, guardarlos como archivos JSON o directamente en nuestro servidor de fragmentos gratuito y agregarlos a tu escena utilizando una sola línea de código.

La última herramienta que quiero mostrar aquí es el Editor de UI. Esta es la herramienta que estás viendo ahora mismo. El Editor de UI te permite crear una interfaz de usuario acelerada en 2D para tu experiencia en Babylon. Utilizando todas las características de nuestra potente biblioteca de UI, puedes agregar, eliminar y transformar diferentes tipos de elementos de UI, y al igual que el NME, guardarlos como archivos JSON descargables o en nuestro servidor de fragmentos y luego usarlos directamente en tu escena. Utilizar eso no podría ser más sencillo. Simplemente analiza el JSON o proporciona el ID del fragmento para integrar la UI en tu escena y vincular cualquier devolución de llamada que necesites utilizando la sencilla API de entrada de dispositivos de Babylon. Todas esas herramientas, como puedes ver, están integradas en el Playground, por lo que si agregas un material de nodo o una UI, puedes editarlos directamente en el Playground.

Quiero mencionar brevemente Babylon Native. Babylon Native lleva el poder de Babylon Engine a plataformas nativas. Como desarrollador, puedes reutilizar el mismo código que usas para experiencias web en entornos nativos como Android, iOS, Windows y otros. Si quieres saber más sobre Babylon Native y Babylon React Native, puedes visitar GitHub o nuestra página de documentación.

Esa fue una visión general de BabylonJS. Ahora quiero profundizar en las nuevas características agregadas en nuestra última versión importante, BabylonJS 6.0, que se lanzó en abril pasado. Babylon 6.0 fue un hito importante para el equipo, ya que trajo muchas mejoras y nuevas API a nuestra comunidad de desarrolladores. La característica más notable que agregamos en 6.0 fue la integración del motor de física Havok. Havok es un motor de física conocido en todo el mundo que se utiliza en muchos, muchos, muchos juegos AAA. Junto con el equipo de Havok, hemos trabajado para llevar Havok a la web utilizando WebAssembly. Hasta la versión 6.0, teníamos soporte para los motores de física MOJS, Canon y OIMO utilizando una API unificada. Para Havok, también hemos introducido una nueva versión de nuestra API de física que simplifica la creación de una experiencia de física altamente eficiente en BabylonJS. La API de física 2.0 nos permite agregar nuevas y emocionantes características a nuestras capacidades de física, como el ray casting de física avanzada, un mejor soporte de articulaciones, soporte completo de mallas y convex hull, y mucho, mucho más, al tiempo que hace que el motor funcione 20 veces más rápido que la API anterior. También hemos lanzado un juego llamado Playroom para mostrar las nuevas capacidades. Puedes visitar el juego en theplayroom.BabylonJS.com.

Así que vamos al playground y veamos algunos ejemplos de física. El primer ejemplo que quiero mostrar es la prueba de estrés que hemos implementado. Puedes ver que cuando usamos MLJS, que estamos viendo ahora mismo, con un gran número de objetos, MLJS se queda un poco atascado y, en mi máquina, funciona aproximadamente a 6 fotogramas por segundo. Ahora, veamos qué sucede cuando cambiamos a Havok. Cuando cambiamos a Havok, puedes ver que el rendimiento se mantiene en 60 fotogramas por segundo e incluso proporciona un mayor potencial de fotogramas por segundo. Esta es la misma escena utilizando nuestra antigua API de física con ML y la nueva API de física en Havok. Incluso cuando estamos utilizando un mapa de altura como suelo, Havok sigue manteniendo su alto rendimiento.

Así que abramos un segundo ejemplo que quiero mostrar, que son nuestras funciones auxiliares de física, que forman parte de nuestro soporte básico de física. Estas funciones te permiten crear efectos especiales de física con facilidad. Tenemos efectos como vórtice, corriente ascendente, campo gravitacional y explosión radial. Se pueden activar utilizando una sola llamada de función en cualquier escena habilitada para física. En este ejemplo, puedes ver exactamente cómo usar esta función. El código está disponible a la derecha. También puedes habilitar el visor de depuración si quieres ver exactamente cómo funciona el motor de física. Puedes ver cómo mejora el rendimiento si estás utilizando instancias o un agregado.

El último ejemplo que quiero mostrar son las restricciones en Havok. Puedes usarlas directamente utilizando nuestra API de física, conectando dos o más cuerpos físicos entre sí. Todos estos ejemplos están en nuestro playground, que también incluye muchas otras demos. Puedes encontrar muchas más en nuestra página de documentación.

El renderizado de fluidos es una característica que nuestra comunidad ha estado solicitando durante mucho tiempo. En Babylon 6.0, hemos agregado el renderizado de fluidos en espacio de pantalla. Habilitar esta característica solo requiere una línea de código. Puedes habilitarlo en la escena y luego puedes renderizar nuestro sistema de partículas o partículas de GPU utilizando el renderizador de fluidos. La característica está completamente documentada, incluyendo muchas, muchas demos diferentes, y puedes comenzar de inmediato. Aquí puedes ver dos demos disponibles en nuestra página de documentación.

Hasta Babylon 6.0, hemos ofrecido reflexiones en espacio de pantalla, o SSR, utilizando un postproceso. Funcionaba bien, pero no era muy eficiente y era un poco difícil de configurar por completo. Como parte de hacer que Babylon sea más poderoso y fácil de usar, hemos descontinuado el postproceso y hemos agregado un pipeline de renderizado SSR que simplifica agregar reflexiones en espacio de pantalla a tu escena. Admite tanto WebGL 2 como WebGPU, y se puede habilitar con solo unas pocas líneas de código. Además, SSR tiene un modo de depuración que te permite ver cómo el pipeline de renderizado SSR ve la escena y te ayuda a comprender cómo funciona. Habilitar este modo es tan simple como activar una bandera en el pipeline de renderizado. Esta demo también está disponible en nuestro playground y en nuestra página de documentación.

Babylon ha agregado soporte de WebGPU en Babylon 5.0, un soporte que se mejoró enormemente en Babylon 6.0. Es totalmente compatible con versiones anteriores, asegurándose siempre de que incluso si la API de WebGPU cambia y lo hace, Babylon sigue manteniendo la misma API, y te ayuda a actualizar a un motor de renderizado mejor y más eficiente. También tenemos soporte completo para shaders de cómputo que te permiten utilizar completamente la GPU en tu escena. WebGPU ahora viene con diferentes modos de instantánea que pueden acelerar el renderizado de tu escena, dependiendo de cómo utilices el motor. WebGPU convive junto con WebGL 2, por lo que como desarrollador puedes decidir si utilizas el estable WebGL 2 que está disponible en todas partes, o el nuevo y más eficiente WebGPU. Nos aseguramos de que cada nueva característica agregada a Babylon se pruebe tanto en WebGL como en WebGPU. Todas las características están completamente documentadas, y el motor WebGPU también está integrado en nuestro playground si quieres experimentar con eso ahora mismo.

Otra característica que agregamos como parte de nuestra suite de optimización de escenas son los modos de prioridad de rendimiento. Con esta herramienta simple, puedes optimizar el proceso de renderizado de tu escena. El modo predeterminado, el que ves ahora mismo, es el que obtienes de serie. No hace suposiciones con respecto a tu escena y siempre funcionará correctamente. Los otros dos modos, intermedio y agresivo, harán ciertas suposiciones con respecto a tu escena y habilitarán o deshabilitarán ciertas características que pueden no ser necesarias. Dependiendo de las características que uses o no uses, puedes establecer el modo de prioridad seleccionado utilizando una sola llamada de función para obtener un impulso de rendimiento para tu experiencia en Babylon.

En este ejemplo, al renderizar 2,500 esferas con 50 materiales diferentes, puedes ver cómo al cambiar al modo agresivo, el que estamos viendo ahora mismo, se ha mejorado el rendimiento en más del 50%. Una característica emocionante y, en mi opinión, subestimada que hemos agregado en la versión 6.0 es el soporte de lector de pantalla accesible. Básicamente, es una forma de generar un árbol HTML a partir de tu escena. El árbol HTML puede ser leído por un lector de pantalla, lo que hace que tu escena sea accesible para personas con discapacidades. También admite completamente nuestra interfaz de usuario 2D. Cada elemento HTML está completamente configurado utilizando un objeto JS ubicado en los nodos o elementos de la interfaz de usuario de tu escena, por lo que puedes decidir cómo el lector de pantalla interpreta tu escena. También admite eventos de teclado utilizando nuestro Administrador de Acciones. Por ejemplo, puedes usar la tecla Tab para navegar por la escena y hacer que el lector de pantalla lea lo que estás señalando actualmente, y luego seleccionarlo con cualquier tecla que desees, por ejemplo, la tecla Enter o la tecla Espacio.

Babylon ha tenido soporte de decalcomanías de malla durante mucho tiempo. Las decalcomanías de malla agregan una malla encima de otra malla para pintar decalcomanías en el lugar correcto. Sin embargo, agregar demasiadas puede afectar el rendimiento de tu escena.

Para mejorar el rendimiento al usar decalcomanías, hemos agregado soporte de decalcomanías de textura en la versión 6.0. Al usar decalcomanías de textura, solo estás agregando una textura encima del material existente para renderizar las decalcomanías. El resultado es más rápido de generar y renderizar. Este ejemplo que ves está en nuestra página de documentación y se está ejecutando en nuestro Playground.

La versión 6.0 de Babylon fue un lanzamiento emocionante para el equipo. Además de las características que presenté, hemos solucionado muchos errores diferentes y hemos agregado cientos de mejoras y adiciones a nuestra API existente. Si deseas ver una lista completa de cambios, puedes consultar nuestro registro de cambios en el repositorio de GitHub.

Y ahora avanzamos desarrollando la próxima versión principal, la 7.0. Tiene una lista creciente de nuevas características. Permíteme compartir algunas de ellas contigo ahora mismo.

La primera característica es un nuevo editor que se agregó a nuestro arsenal. El Editor de Geometría de Nodos. Inspirado en el Nodo de Geometría de Blender, el NGE te permite generar mallas de forma procedural para tu experiencia en Babylon utilizando una interfaz de usuario muy simple agregando diferentes tipos de bloques a un gráfico unificado. Muy similar a la forma en que funciona el NME para los materiales. El uso de un proceso de construcción procedural en lugar de exportar una malla desde un editor 3D puede mejorar la descarga, el renderizado y el tiempo de inicio, y en general mejorar el rendimiento de tu escena. La versión inicial de NGE ya se ha implementado. Está disponible en NPM, nuestro CDN y también en nuestro playground. Si deseas visitar la versión independiente, la que acabamos de ver, puedes ir a NGE.BabylonJS.com y comenzar a experimentar con ella.

Otra característica que fue solicitada por nuestra comunidad durante mucho tiempo es lo que llamamos el Flow Graph. El Flow Graph es una forma de introducir interactividad programáticamente en tu escena, algo así como un administrador de acciones avanzado. Utilizando bloques de construcción predefinidos, podrás definir desencadenantes y acciones en tu escena utilizando la misma interfaz de usuario simple y conocida que utilizan el material de nodo y el editor de geometría de nodo. El Flow Graph será completamente compatible con la nueva extensión de interactividad de GLTF, que actualmente está en modo de borrador. Es un trabajo en progreso, y si deseas seguirlo y ver lo que estamos haciendo, puedes seguir nuestro repositorio de GitHub y el problema existente allí.

Otra nueva característica que llega a la versión 7.0 es el soporte experimental para módulos ES puros. Babylon actualmente se empaqueta de dos formas diferentes, UMD y ES6, y ambas tienen efectos secundarios. Tener efectos secundarios significa que el árbol de eliminación de código no es completamente compatible y requiere un poco de trabajo para lograrlo, y con UMD, la eliminación de código no es ni siquiera posible. La idea detrás de nuestro soporte ESM es proporcionar una API basada en funciones sin efectos secundarios que permita al desarrollador utilizar solo lo que necesita para la experiencia.

De esta manera, el desarrollador solo está utilizando lo mínimo necesario para renderizar su experiencia, minimizando el tamaño del paquete y la descarga, y evitando efectos secundarios. También se compilará con la última versión de JavaScript para permitirnos, a los desarrolladores de Babylon y a los desarrolladores que utilizan Babylon, utilizar JavaScript moderno.

Esto aún está en proceso. Primero proporcionaremos una API renovada para nuestros componentes base como los motores y la escena. Los paquetes actuales, los paquetes UMD y ES6, seguirán siendo publicados, por supuesto, y no se convertirán a ESM.

¿Qué más viene en Babylon 7.0? Mucho. Tenemos una larga lista de características que queremos implementar para la versión 7 y no podemos esperar a que la comunidad las pruebe. Desde nuevas características de WebXR hasta un motor de audio renovado, un sistema de entrada de dispositivos mejorado, nuevas capacidades de física y, por supuesto, características impulsadas por la comunidad que ya están desarrolladas, como el serializador USDZ y el material de línea engrasada. Babylon 7.0 será otro lanzamiento emocionante para nosotros y para nuestra comunidad.

Babylon 7.0 llegará el próximo año. Aproximadamente en abril. Antes de terminar, quiero compartir algunos enlaces para que comiences con BabylonJS. En primer lugar, nuestro repositorio mono en GitHub contiene todo nuestro código y problemas para 7.0 y futuras versiones, incluyendo todas nuestras herramientas. Nuestro sitio principal, babylonjs.com, puede brindarte una maravillosa visión general del motor y sus capacidades. Si tienes alguna pregunta sobre Babylon, solo puedo recomendarte que te unas a nuestro foro, forum.babylonjs.com, y formes parte de nuestra comunidad súper amigable. El equipo está allí todos los días para responder tus preguntas. Y la mejor manera de comenzar con Babylon es nuestra página de documentación que tiene muchos tutoriales y ejemplos de código integrados en la propia página de documentación. Y con eso, quiero agradecerte mucho por escuchar. Espero que hayas disfrutado esta presentación tanto como yo disfruté hacerla y darla. Si tienes alguna pregunta, quédate después para la sesión de preguntas y respuestas o contáctame a mí o al resto del equipo en nuestro foro o Twitter. Muchas gracias.