Dynamic Lights in WebGPU Renderer

Based on the information available in the Three.js documentation, I can provide some insights about your issue with dynamically adding and removing lights when using the WebGPU renderer.

Potential Issues and Solutions

The behavior you're experiencing appears to be related to how the WebGPU renderer handles dynamic scene changes compared to the WebGL renderer. While I don't have specific documentation on this exact issue, here are some potential solutions:

1. Explicitly Update the Renderer

When using WebGPU, you might need to explicitly notify the renderer that the lighting setup has changed. Try adding these lines after adding or removing lights:

JAVASCRIPTCopied
function addLight() {
  // existing code...
  initLights();
  
  // Force the renderer to update its internal state
  if (renderer.info && renderer.info.programs) {
    renderer.info.programs.forEach(p => p.usedTimes = 0);
  }
}

2. Dispose and Update Light Helpers

Make sure your light helpers are properly updated when removing lights:

JAVASCRIPTCopied
function removeLight() {
  const light = state.scene.getObjectByName("DirectionalLight");
  const lightHelper = state.scene.getObjectByName("DirectionalLightHelper");

  if (light) {
    state.scene.remove(light);
    // Ensure proper disposal of light resources
    if (light.dispose) light.dispose();
  }
  
  if (lightHelper) {
    state.scene.remove(lightHelper);
    if (lightHelper.dispose) lightHelper.dispose();
    if (lightHelper.geometry) lightHelper.geometry.dispose();
    if (lightHelper.material) lightHelper.material.dispose();
  }
}

3. Consider Using a Lights Manager

Instead of directly adding/removing lights, consider maintaining a collection of lights and updating them all at once:

JAVASCRIPTCopied
// Create a lights manager
const lightsManager = {
  lights: [],
  add(light) {
    this.lights.push(light);
    state.scene.add(light);
    // Update all related resources
  },
  remove(light) {
    const index = this.lights.indexOf(light);
    if (index !== -1) {
      this.lights.splice(index, 1);
      state.scene.remove(light);
      // Clean up resources
    }
  },
  update() {
    // Force update of all lights
  }
};

WebGPU Limitations

This behavior might be related to how WebGPU handles shader compilation and resource binding differently from WebGL. The WebGPU renderer in Three.js is still relatively new compared to the WebGL renderer, so there might be some limitations or bugs when it comes to dynamic scene modifications.

If you need to frequently add/remove lights in your application, you might consider pre-creating all potential lights at initialization and then toggling their visibility or intensity instead of adding/removing them from the scene.