Transmission Looks Dark in Safari and Edge on MacOS

[AntonPalmqvist]

Describe the bug

On MacOS, materials with transmission set to 1 doesn't let through light, even if bounces are set high. This happens in Safari and Edge, but not in Firefox. Same goes for iOS.
It works as expected on Windows in all browsers.

Expected behavior

Light should get through the material and get refracted.

Screenshots and Repro Model

You can test this with the Transmission Preset Orb by opening in Firefox, Safari, and Edge respectively, on MacOS.

Firefox

Safari

Edge

Platform:

• Device: [Mac M4, Iphone 15 Pro]
• OS: [MacOS, iOS]
• GPU: [Apple Silicon]
• Browser: [Safari, Edge]
• Browser Version: [Safari 18.3.1, Edge 134]
• Three.js version: [r175]

[gkjohnson]

Intersting - I'm seeing the same black behavior with Chrome. This must be a browser regression but it's still surprising to see it behaving differently on the same hardware. There must be something about how the WebGL backend is transforming the shader and unfortunately chasing down these regressions and browser / hardware quirks is particularly time consuming and difficult.

Maybe someday using WebGPU and compute shaders will help alleviate some of these issues but obviously that's a much bigger rewrite.