three-gpu-pathtracer icon indicating copy to clipboard operation
three-gpu-pathtracer copied to clipboard

Transmission Looks Dark in Safari and Edge on MacOS

Open AntonPalmqvist opened this issue 9 months ago • 1 comments

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 Image

Safari Image

Edge Image

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]

AntonPalmqvist avatar Apr 04 '25 03:04 AntonPalmqvist

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.

gkjohnson avatar Apr 04 '25 04:04 gkjohnson