WebGPU combat 3D e-commerce

For the past few years we have been writing new versions of the Babylon.js engine for WebGPU. As the next generation of Web 3D is about to release WebGPU 1.0 on Chrome 102~103, the excitement is growing day by day. In this blog post, I'll give a quick overview of this new Babylon.js WebGPU engine, and examine some of the performance improvements it can bring to 3D commerce experiences on the web.

insert image description here

Recommendation: Use NSDT Designer to quickly build programmable 3D scenes

1. WebGPU engine of Babylon.js

This journey started in 2019 with the first experiments with the forest demo's rendering package. Babylon.js is agnostic by design and backwards compatibility is critical, so from the start its implementation was designed to ensure no/minimal code changes for users.

Most of the engine was ported during 2020 (render targets, post-processing, shadows, compressed textures, stencil buffers, effect layers, etc.) first version. In 2021, start implementing new features such as fast paths and other optimizations supported by compute shaders and rendering packages. You can find more details in the WebGL+WebGPU meetup demo.

New Feature: Compute Shaders

Compute Shader is one of the flagship capabilities brought by WebGPU. Non-graphics parallel processing (e.g. blurring, computer vision, simulation) is now state-of-the-art. Check out this documentation page for more details and demos.
insert image description here

New Feature: Fast Path

Another promise of WebGPU is enabling high-performance 3D graphics, as it provides lower-level control over JavaScript's graphics resources. Multiple levels of optimization have been implemented in the new Babylon engine using the rendering package. Snapshot recording is the fastest mode, recording draw calls during one frame and replaying them in all subsequent frames. It is suitable for most static scenarios (no pipeline changes) such as e-commerce, and can bring up to 10x performance improvement.

insert image description here

2. Demonstration of 3D business room based on WebGPU

In online shopping, the use of 3D has accelerated over the past few years, as its virtual presence is often the best way for customers to discover and customize products at home. As 3D objects become more realistic even in real-time rendering, assembling a virtual room full of objects while maintaining performance is a trade-off for developers and 3D artists. In this blog post, I'm going to build my first WebGPU demo, trying to show how WebGPU can improve performance (10x in this case) and help push the limits of 3D business scenarios.

insert image description here

first step.

To start using the WebGPU engine, simply go to the Playground, and if your browser is supported by the WebGPU engine (currently Chrome/Edge Canary with the WebGPU flag enabled), you will be able to switch from WebGL to WebGPU via the dropdown in the upper right corner.
insert image description here

If there is no Playground, you just update the engine creation (the initialization of WebGPU is asynchronous).

//WebGL Engine creation
const engine = new BABYLON.Engine(canvas);

//WebGPU Engine creation
const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();

3D room demo.

We've built a simple room in Blender using this great tutorial on Polygon Runway. Once the room was equipped, I added to it Khronos glTF and some glTF sample objects used by the 3D Commerce workgroup to demonstrate the PBR extensions and KTX2. I made sure to pick some heavy stuff because the goal was to show the improvements that WebGPU can bring. Being able to switch from WebGL to WebGPU out of the box during development is very useful!
insert image description here

Snapshot Recording - Fast Mode.

The next step is to optimize the scene using the snapshot recording feature. It only takes a few lines of code.

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;
    }
};

Fans and dancing robot models no longer animate in quick mode of snapshot recording. To correct this, as explained in the last example of the docs ("Animation Bones"), I simply ensured that all assets needed to render the skeleton were constructed by calling the sculpture.prepare method. Note that this snapshot fast mode only works for most static scenes (no pipeline changes) and snapshots can be updated (when adding a mesh to an instance).

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);
    });
});

That's it! I actually spend far more time building and setting up 3D scenes than coding in playgrounds, but that's probably because I'm far from being a 3D artist (and even less of a technical artist!). Of course, this is just the early days of WebGPU, but I hope this will get you interested in trying it out.

3. Conclusion

Some useful links to learn more about WebGPU:

Full documentation for the WebGPU version of Babylon.js
Forums for providing feedback and getting help
Babylon.js WebGPU internals, dig into the implementation and contribute

Last but not least, a big thanks to Alexis (aka Egveni), the hero behind most of the WebGPU implementation in Babylon.js.

Original link: WebGPU 3D e-commerce experiment—BimAnt