A WebGPU 3D Commerce Experiment

WebGPU 3D Room Demo (use Edge/Chrome Canary with WebGPU flag on)

Babylon.js WebGPU engine

The Journey started back in 2019, with a first experimentation of a Render Bundle Forest Demo. Babylon.js is agnostic by design and backward compatibility is paramount so, from the inception, the implementation was designed to ensure no/minimal code change for users.

Ocean Simulation — Compute Shaders Demo
  • What’s new: Fast Path. The other promise of WebGPU is to enable high-performance 3D graphic as it offers a lower-level control to the graphic resources from JavaScript. Several levels of optimization have been implemented in the new Babylon engine using Render Bundles. SnapShot Recording, the fastest mode, records draw calls during one frame and replays them for all subsequent frames. It works for mostly static scene (no pipeline change) such as e-commerce and can bring up to x10 performance increase.
Compatibility with existing WebGL code and performance with WebGPU engine

3D Commerce Room Demo

In online shopping, 3D usage has accelerated over the last few years as the virtual representation it brings is often the best way for customers to discover and customize products from home. With 3D objects becoming more and more photo-realistic even in real-time rendering, assembling a virtual room full of objects while maintaining performance is a trade-off exercise for developers and 3D artists. For this blog post, I set-up myself to build my first WebGPU demo, trying to show how WebGPU could increase performances (x10 in this example) and help push the envelope in a 3D Commerce scenario.

~10times performance improvement with WebGPU (Snapshot — Fast Mode) compared to WebGL
Switching Babylon.js Playground from WebGL to WebGPU
Difference Babylon.js in engine creation in WebGL and WebGPU
Sample 3D Room in Babylon.js Playground
Adding Snapshot Recording Modes
Bones animations in Snapshot Recording — Fast Mode

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Babylon.js

Babylon.js

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/