Same car, three renderers
One car in three.js WebGL, three.js WebGPU and webgi. All three use the same model, HDR, camera, tone mapping, reflections, ambient occlusion, bloom and anti-aliasing. Open one, drag to orbit, and switch renderers at the top. The side panel counts every GPU pass of the frame in your browser.
Desktop Chrome or Edge works best. The three.js WebGPU tab needs WebGPU. Keep the tab visible.
three.js WebGL
r186 · EffectComposer + SSRPass, GTAOPass, UnrealBloomPass, SMAA
three.js WebGPU
r186 · RenderPipeline + TSL ssr(), ao(), bloom(), smaa()
webgi
threepipe 0.5.1 + webgi plugins · G-buffer, SSAO, SSR, bloom, TAAWhat we counted (one moving frame, 1920×1080)
| three.js WebGL | three.js WebGPU | webgi | |
|---|---|---|---|
| Scene renders (full + part) | 4 + 1 | 1 + 2 | 2 + 1 |
| Full-screen passes | 26 | 44 | 14 |
| Draw calls | 366 | 134 | 179 |
| Camera still | 366 every frame | 134 every frame | 32 frames, then 0 |
Apple M4 Pro, Chrome 153, real WebGPU on Metal. Counts, not timings. Full pass lists with names: passes-r186.json. 20 of the 44 WebGPU full-screen passes build mip chains for the glass (transmission).
Check it yourself
- Each page shows the passes of the last frame that drew, and marks them when they match our list. Reset view gives the measured camera. Draw calls change with the view, because meshes outside the camera are skipped.
- Needle Inspector shows the scene, materials and renderer of all three pages. Spector.js captures a WebGL frame (three.js WebGL, webgi). WebGPU Inspector captures a WebGPU frame.
- In the console:
scene,camera,renderer, andvieweron webgi. - How the counts are made: instrument.js wraps the WebGL2 and WebGPU calls, and group.js groups them into passes. A page can save its frame log as JSON; analyze.mjs prints it in node.
- The libraries load from unpkg: three 0.186.1, threepipe 0.5.1, @threepipe/webgi-plugins 0.6.4. View the page source for the full setup.
webgi plugins for threepipe go open source soon. Built on threepipe.