[WebGPU] Significant performance drop and shadow quality regression in r182 vs WebGL r170

kang-Z-A · January 20, 2026, 5:44pm

I am exploring the migration of my project from WebGL (r170) to WebGPU (r182). I have observed unexpected performance degradation and rendering quality issues compared to the previous WebGL implementation.

Specifically, I encountered the following problems:

1. **Performance Regression:**

\*   The general frame rate when loading and interacting with models in WebGPU (r182) is noticeably lower than in WebGL (r170).

\*   **\*\*Post-processing Impact:\*\*** Enabling post-processing in WebGPU causes a severe drop in frame rate, performing much worse than the WebGL equivalent (which had shadows + anti-aliasing enabled).

2. **Shadow Quality:**

\*   **\*\*WebGL (r170):\*\*** Shadows were relatively soft and realistic.

\*   **\*\*WebGPU (r182):\*\*** Shadows appear "harder" and less realistic.

**Screenshots**

* **WebGL (r170) Result:**

* **WebGPU (r182) Result:**

**Reproduction**

I have created a reproduction sandbox here:

https://codesandbox.io/p/github/kang-Z-A/webgpu-example/main?import=true

**Steps to Reproduce**

1. Open the sandbox link above.

2. The scene loads with Three.js r182 (WebGPU).

3. Load the test model provided (`public/threejs/building.glb`) or observe the default scene.

4. Notice the frame rate (stats) and shadow appearance.

**Expected Behavior**

I expected the WebGPU renderer to provide performance comparable to or better than the WebGL renderer, and for the shadow quality to remain consistent or improve.

**Environment**

* **Three.js version:** r182.0 (WebGPU) compared to r170.0 (WebGL)

* **Device:** Desktop PC

* **CPU:** Intel Core i7-13700K

* **RAM:** 32GB

* **GPU:** NVIDIA GeForce RTX 4070 Ti

* **OS:** Windows 11

* **Browser:** Chrome 144.0.7559.60

**Question**

Is this performance gap expected at the current stage of the WebGPU renderer? Are there specific configurations or optimization strategies required in r182 to match the performance and visual quality of the standard WebGL renderer?

phil_crowther · January 20, 2026, 7:49pm

For one thing, I believe the ShadowBias is different for WebGL2 and WebGPU. For WebGPU, a good starting number to use is -0.0005.

manthrax · January 21, 2026, 3:30pm

WebGPU is still under active development. If you don’t require WebGPU specific features, you can just continue to use the WebGLRenderer.

If you see performance regressions with the WebGLRenderer then that is something worth investigating.

Comparing the two renderer types directly isn’t as useful at the present time, imo. The WebGLRenderer has had a decade of optimizations… WebGPURenderer is still very actively being developed.

Mugen87 · January 21, 2026, 4:44pm

We have fixed the performance regressions on dev so r183 should give you a noticeable performance boost compared to r182. Related issue:

github.com/mrdoob/three.js

WebGPURenderer: Potential performance regression starting with r176.

opened 09:11AM - 06 Jan 26 UTC

closed 09:28AM - 10 Jan 26 UTC

Jenychen1996

Regression

### Description Using WebGPURenderer, when comparing the R171 version with the …R178 and dev versions, it was found that the rendering frame rate of the dev version was lower than that of the R171 version for the same model. renderer.info.render: { "calls": 4960, "frameCalls": 2, "drawCalls": 4493, "triangles": 1347487, "points": 0, "lines": 0, "timestamp": 0, "previousFrameCalls": 2, "timestampCalls": 0 } Hardware Information: Processor: Intel(R) Xeon(R) W-2245 CPU @ 3.90GHz 3.91 GHz Memory: 64.0 GB (63.7 GB available) Graphics Card: NVIDIA RTX A4000 ### Reproduction steps 1. Using different versions of three.js 2. Loading models 3. Comparing frame rate performance ### Code ```js <html lang="en"> <head> <title>three.js webgl - animation retargeting</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link type="text/css" rel="stylesheet" href="main.css"> </head> <body> <div id="info"> <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation retargeting </div> <script type="importmap"> { "imports": { "three": "https://raw.githack.com/mrdoob/three.js/dev/build/three.webgpu.js", "three/webgpu": "https://raw.githack.com/mrdoob/three.js/dev/build/three.webgpu.js", "three/addons/": "https://raw.githack.com/mrdoob/three.js/dev/examples/jsm/" } } </script> <script type="module"> import * as THREE from 'three/webgpu'; import Stats from 'three/addons/libs/stats.module.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js"; let camera, scene, renderer, stats, controls; init(); function init() { renderer = new THREE.WebGPURenderer({ antialias: true, logarithmicDepthBuffer: true, powerPreference: "high-performance" }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(0x000000, 0.0); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setAnimationLoop(animate); document.body.appendChild(renderer.domElement); scene = new THREE.Scene(); scene.background = new THREE.Color(0xcccccc) camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100000); camera.position.set(1000, 1000, 1000); controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; stats = new Stats(); document.body.appendChild(stats.dom); window.scene = scene; window.renderer = renderer; window.camera = camera; const light = new THREE.HemisphereLight(0xe9c0a5, 0x0175ad, 5); scene.add(light); const dirLight = new THREE.DirectionalLight(0xfff9ea, 4); dirLight.position.set(2, 5, 2); scene.add(dirLight); const axesHelper = new THREE.AxesHelper(500); scene.add(axesHelper); window.addEventListener('resize', onWindowResize); onWindowResize(); loadGltf(); } function loadGltf() { // Note: Perhaps you need to switch to a corresponding model dataset. When we compared it with our own business data, the frame rate dropped by about 4 frames. The model below is for example const url = `https://threejs.org/examples/models/gltf/LittlestTokyo.glb`; const dracoPath = 'https://raw.githack.com/mrdoob/three.js/dev/examples/jsm/libs/draco/gltf/'; const gltfLoader = new GLTFLoader(); const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath(dracoPath); dracoLoader.preload(); gltfLoader.setDRACOLoader(dracoLoader); console.log('start load gltf'); console.time('load gltf'); let materialUUIDMap = new Map(); gltfLoader.load(url, function (data) { const mesh = data.scene; console.timeEnd('load gltf'); mesh.traverse(child => { if (child.isMesh) { let material = child.material; if (!materialUUIDMap.has(material.uuid)) { const { uuid, name, side, map, roughness, metalness } = material; const nodeMaterial = new THREE.MeshStandardNodeMaterial({ name, side, map, roughness, metalness, }); materialUUIDMap.set(uuid, nodeMaterial); } child.material = materialUUIDMap.get(material.uuid); child.material.needsUpdate = true; material.dispose(); material = undefined; } }) // gltfMesh = mesh; for (var i = 0; i < 15; i++) { let clonemesh = mesh.clone() scene.add(clonemesh); } // scene.add(mesh); materialUUIDMap.clear(); materialUUIDMap = undefined; }) } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { stats.update(); controls.update(); renderer.render(scene, camera); } </script> </body> </html> ``` ### Live example - ### Screenshots _No response_ ### Version r171,r178,dev ### Device Desktop ### Browser Chrome ### OS Windows

Topic		Replies	Views
WebGPU performance issue Questions performance , webgpu	3	362	November 6, 2025
WebGPU performance significantly slower (rendering non-instanced geometries) Questions performance , webgpu	7	2197	September 8, 2023
Why WebGPURenderer performance significantly lower than WebGLRenderer? Questions performance , webgl-renderer , webgpu , tsl	9	1222	February 19, 2025
WebGPU - Hardware Requirements? Questions hardware , webgpu	37	1309	September 6, 2024
Understanding about WebGPURenderer Questions webgpu , webgpu-renderer	7	340	September 5, 2025

[WebGPU] Significant performance drop and shadow quality regression in r182 vs WebGL r170

Related topics