WebGPU Renderer Lighting Issue - Objects Not Lit

Questions
,
1

Hi everyone, I’m facing an issue while trying to use Three.js with the WebGPU renderer. When switching from the WebGL renderer to WebGPU, the lights in the scene seem to have no effect on the objects. However, everything works fine with the WebGL renderer. Below is the key code:

import * as THREE from "three";
import WebGPURenderer from "three/src/renderers/webgpu/WebGPURenderer.js";
import WebGPU from "three/examples/jsm/capabilities/WebGPU";

const isWebGPU = ref(WebGPU.isAvailable());

async function initRenderer() {
  if (isWebGPU.value) {
    state.renderer = new WebGPURenderer();
    await state.renderer.init();
  } else {
    state.renderer = new THREE.WebGLRenderer();
  }

  state.renderer.setPixelRatio(window.devicePixelRatio);
  state.renderer.setSize(window.innerWidth, window.innerHeight);
  container.value.appendChild(state.renderer.domElement);
}

function initLights() {
  state.scene.add(new THREE.AmbientLight(0xaaaaaa, 0.8));

  const light = new THREE.DirectionalLight(0xddffdd, 3);
  light.position.set(5, 5, 5);
  light.castShadow = true;
  state.scene.add(light);
}

WebGL
WebGL1016×1404 39.6 KB

WebGPU
WebGPU1034×1402 9.78 KB

My code：
GPULight.vue (3.0 KB)

Problem Details:

• Using the WebGL renderer, the scene is properly lit, and shadows render as expected.

• Switching to the WebGPU renderer results in the objects appearing as if no lighting is applied (default material appearance).

What I’ve Tried:

• Confirmed that the WebGPU environment is available.

• Ensured the objects are using MeshStandardMaterial.

• Adjusted light intensity and positions, but the issue persists.

Questions:

  1. Does the WebGPU renderer require special light configuration?

  2. Are there specific material requirements or additional initialization steps for lighting in WebGPU?

  3. Has anyone else experienced similar issues and found a solution?

Thanks in advance for your help! :pray:

1 Like
2

I have also encountered this issue, Threejs has upgraded to the latest version 170!

3

Yes, I also use 170.

4

I think this is fixed in 171