Environment Map Issue with WebGLRenderer vs WebGPURenderer

Based on the information provided, this could be related to how environment maps are processed in WebGLRenderer versus WebGPURenderer. The issue might not necessarily be a bug, but could be related to how you're setting up the environment map.

Possible Cause

When using environment maps with MeshStandardMaterial in Three.js, the documentation specifically mentions:

For physically correct rendering, you should add an environment map that has been processed by the PMREMGenerator.

If your environment map is working in WebGPURenderer but not in WebGLRenderer, there are a few things to check:

1. PMREMGenerator Processing: Make sure your environment map is properly processed using PMREMGenerator when using WebGLRenderer.

2. Material Configuration: Check if your material's envMap property is correctly set.

Suggested Solution

Try modifying your code to ensure the environment map is properly processed:

JAVASCRIPTCopied
// Create the renderer
const renderer = new THREE.WebGLRenderer({
  // your renderer options
});

// Load your environment map
const envMapLoader = new THREE.RGBELoader();
envMapLoader.load('your_env_map.hdr', function(texture) {
  // Create a PMREMGenerator with the renderer
  const pmremGenerator = new THREE.PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();
  
  // Process the environment map
  const envMap = pmremGenerator.fromEquirectangular(texture).texture;
  
  // Set the environment map on your scene or material
  scene.environment = envMap;
  // Or for specific materials:
  // material.envMap = envMap;
  
  // Clean up
  pmremGenerator.dispose();
  texture.dispose();
});

If you're already doing this and still experiencing issues, it might be worth reporting as a potential bug on GitHub, but include your complete environment map setup code when doing so.

Additional Considerations

• Check if there are any console errors when using WebGLRenderer
• Verify that your Three.js version supports the features you're using in both renderers
• Make sure your graphics card and drivers properly support WebGL features you're using

If after checking these aspects the issue persists, it would be appropriate to report it as a potential bug on the Three.js GitHub repository.