Hi everyone, I’m encountering a problem with WebGPU in Three.js (version 171). When I try to dynamically add or remove lights in the scene, the changes are reflected in the scene.children when I inspect it, but they have no visible effect on the rendered canvas. Lights only seem to work correctly when initialized. Below is the core code:
Lights initialized with initLights() at the beginning work as expected.
Clicking to dynamically add or remove lights updates the scene (confirmed via inspecting scene.children), but there are no visible changes in the WebGPU-rendered canvas.
This issue only occurs with WebGPU. Switching to WebGL resolves the issue.
Questions:
• Is this a limitation or a bug in WebGPU support for Three.js (version 171)?
• Do I need to explicitly update the renderer or scene after adding/removing lights?
• Has anyone encountered similar issues or knows a workaround for dynamically managing lights with WebGPU?
Thank you for your reply! I’ve checked the post you mentioned, but unfortunately, it didn’t solve my issue.
I tried the following code to update all materials after removing the lights:
state.scene.traverse((object) => {
if (object instanceof THREE.Mesh) {
if (object.material instanceof THREE.MeshStandardMaterial) {
object.material.needsUpdate = true;
}
}
});
However, this didn’t have any effect. The issue persists when using the WebGPU renderer. Once I switch back to WebGL, everything works perfectly, including the ability to add and remove lights dynamically.
Do you know how to completely remove lights in a WebGPU environment? Is there any additional step required to update the renderer or scene after modifying the lights?
@GitHubDragonFly Thank you for your response! I reviewed your code, and it indeed works for rendering correctly. However, it doesn’t address my specific need, and I realize I might not have described my issue clearly enough.
What I need is to dynamically add and remove lights in the scene. Currently, this functionality is not working as expected. I tried modifying your code to achieve this, but unfortunately, I couldn’t get it to work. When I call add or remove, the scene visually doesn’t reflect any changes, even though the scene’s object structure updates as expected.
Here’s the modified version of your code that I attempted:
Despite these updates, the scene remains visually unchanged after adding or removing lights. Could you help me identify why the scene doesn’t update when I dynamically modify the lights? I’d really appreciate your help!
@GitHubDragonFly Thank you for your input!
I understand that the WebGPU renderer is still under development and may not fully support all functionalities yet. My main concern is whether this is a limitation of the current WebGPU implementation or if I’m approaching it incorrectly.
My comment from 2018 about adding/removing lights does not reflect how recent three.js versions work. In WebGLRenderer, adding and removing lights does not require a manual needsUpdate=true for all materials in the scene anymore since the change of the lighting state is automatically detected by the renderer, see: three.js dev template - module - JSFiddle - Code Playground