Durante los últimos años hemos estado escribiendo nuevas versiones del motor Babylon.js para WebGPU. A medida que la próxima generación de Web 3D está a punto de lanzar WebGPU 1.0 en Chrome 102~103, la emoción crece día a día. En esta publicación de blog, daré una descripción general rápida de este nuevo motor WebGPU de Babylon.js y examinaré algunas de las mejoras de rendimiento que puede aportar a las experiencias de comercio 3D en la web.
Recomendación: use NSDT Designer para crear rápidamente escenas 3D programables
1. Motor WebGPU de Babylon.js
Este viaje comenzó en 2019 con los primeros experimentos con el paquete de renderizado de la demostración del bosque. Babylon.js es agnóstico por diseño y la compatibilidad con versiones anteriores es fundamental, por lo que desde el principio su implementación se diseñó para garantizar que los usuarios no realicen cambios de código o que sean mínimos.
La mayor parte del motor se portó durante la primera versión de 2020 (objetivos de procesamiento, posprocesamiento, sombras, texturas comprimidas, búferes de plantilla, capas de efectos, etc.). En 2021, comience a implementar nuevas funciones, como rutas rápidas y otras optimizaciones compatibles con sombreadores de cómputo y paquetes de renderizado. Puede encontrar más detalles en la demostración de reunión de WebGL+WebGPU.
- Nueva función: Compute Shaders
Compute Shader es una de las capacidades emblemáticas que ofrece WebGPU. El procesamiento paralelo no gráfico (por ejemplo, desenfoque, visión por computadora, simulación) ahora es lo último en tecnología. Consulte esta página de documentación para obtener más detalles y demostraciones.
- Nueva función: ruta rápida
Otra promesa de WebGPU es habilitar gráficos 3D de alto rendimiento, ya que proporciona un control de nivel inferior sobre los recursos gráficos de JavaScript. Se han implementado múltiples niveles de optimización en el nuevo motor de Babylon utilizando el paquete de renderizado. La grabación de instantáneas es el modo más rápido, graba llamadas de sorteo durante un cuadro y las reproduce en todos los cuadros posteriores. Es adecuado para la mayoría de los escenarios estáticos (sin cambios en la canalización), como el comercio electrónico, y puede generar una mejora del rendimiento de hasta 10 veces.
2. Demostración de sala de negocios 3D basada en WebGPU
En las compras en línea, el uso de 3D se ha acelerado en los últimos años, ya que su presencia virtual suele ser la mejor manera para que los clientes descubran y personalicen productos en casa. A medida que los objetos 3D se vuelven más realistas incluso en el renderizado en tiempo real, ensamblar una sala virtual llena de objetos mientras se mantiene el rendimiento es una compensación para los desarrolladores y artistas 3D. En esta publicación de blog, voy a crear mi primera demostración de WebGPU, tratando de mostrar cómo WebGPU puede mejorar el rendimiento (10 veces en este caso) y ayudar a superar los límites de los escenarios comerciales 3D.
primer paso.
Para comenzar a usar el motor WebGPU, simplemente vaya a Playground y, si su navegador es compatible con el motor WebGPU (actualmente, Chrome/Edge Canary con la marca WebGPU habilitada), podrá cambiar de WebGL a WebGPU a través del menú desplegable en la esquina superior derecha.
Si no hay Playground, solo actualiza la creación del motor (la inicialización de WebGPU es asíncrona).
//WebGL Engine creation
const engine = new BABYLON.Engine(canvas);
//WebGPU Engine creation
const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();
Demostración de sala 3D.
Hemos construido una habitación simple en Blender usando este gran tutorial sobre Polygon Runway. Una vez que la sala estuvo equipada, le agregué Khronos glTF y algunos objetos de muestra de glTF utilizados por el grupo de trabajo de 3D Commerce para demostrar las extensiones PBR y KTX2. Me aseguré de elegir algunas cosas pesadas porque el objetivo era mostrar las mejoras que puede aportar WebGPU. ¡Poder cambiar de WebGL a WebGPU de forma inmediata durante el desarrollo es muy útil!
Grabación de instantáneas: modo rápido.
El siguiente paso es optimizar la escena utilizando la función de grabación de instantáneas. Solo se necesitan unas pocas líneas de código.
const setSnapshotMode = (mode) => {
switch(mode) {
case "disabled":
engine.snapshotRendering = false;
break;
case "standard":
engine.snapshotRenderingMode = BABYLON.Constants.SNAPSHOTRENDERING_STANDARD;
engine.snapshotRendering = true;
break;
case "fast":
engine.snapshotRenderingMode = BABYLON.Constants.SNAPSHOTRENDERING_FAST;
engine.snapshotRendering = true;
break;
}
};
Los fanáticos y los modelos de robots bailarines ya no se animan en el modo rápido de grabación de instantáneas. Para corregir esto, como se explica en el último ejemplo de los documentos ("Animation Bones"), simplemente me aseguré de que todos los activos necesarios para renderizar el esqueleto se construyeran llamando al método sculpture.prepare. Tenga en cuenta que este modo rápido de instantánea solo funciona para la mayoría de las escenas estáticas (sin cambios en la canalización) y las instantáneas se pueden actualizar (al agregar una malla a una instancia).
return new Promise((resolve) => {
scene.executeWhenReady(() => {
engine.snapshotRendering = false;
scene.onBeforeRenderObservable.add(() => {
//Build all resources required to render skeletons
scene.skeletons.forEach((skeleton) => skeleton.prepare());
});
resolve(scene);
engine.hideLoadingUI();
const gui = makeGUI(IsWebGPUMode, scene, sceneInstrumentation);
});
});
¡Eso es todo! De hecho, paso mucho más tiempo construyendo y configurando escenas 3D que programando en parques infantiles, pero eso probablemente se deba a que estoy lejos de ser un artista 3D (¡y mucho menos un artista técnico!). Por supuesto, esto es solo los primeros días de WebGPU, pero espero que te interese probarlo.
3. Conclusión
Algunos enlaces útiles para obtener más información sobre WebGPU:
- Documentación completa para la versión WebGPU de Babylon.js
- Foros para proporcionar comentarios y obtener ayuda
- Funciones internas de Babylon.js WebGPU, profundice en la implementación y contribuya
Por último, pero no menos importante, muchas gracias a Alexis (también conocido como Egveni), el héroe detrás de la mayor parte de la implementación de WebGPU en Babylon.js.
Enlace original: Experimento de comercio electrónico 3D WebGPU—BimAnt