safari artifact issue

[DusanMilko]

Description

Seeing artifacts in safari 17.2.1

Live Demo

https://modelviewer.dev/editor/

Version

Latest

Browser Affected

• [ ] Chrome, version: xx.x.xxxx.xx
• [ ] Edge
• [ ] Firefox
• [ ] IE
• [x] Safari

OS

• [ ] Android
• [ ] iOS
• [ ] Linux
• [x] MacOS
• [ ] Windows

AR

• [ ] WebXR
• [ ] SceneViewer
• [ ] QuickLook

[elalish]

Looking fine here on Safari on MacOS 14.4.1, with an M1 Macbook Pro. Can you give us your system details?

[elalish]

Oh, I'm on Safari 17.4.1 - does updating help? Might just be a driver bug.

[DusanMilko]

@elalish This is only happening in Safari on Intel Macs. I think it may be related to texture2DGradEXT in three.js.

define texture2DGradEXT textureGrad

[elalish]

Would you mind filing a bug on WebKit then?

[cpiggott]

@elalish

I'm having the same issue on the latest version of Chrome(128.0.6613.113) on MacOS Sonoma(14.6.1). I don't see the issue happening in older version of ModelViewer though.

Intel based MBP from 2019. AMD Radeon Pro 5500M(4GB) and Intel UHD 630.

Video is attached as well as PC specs.

https://github.com/user-attachments/assets/117fb748-1a9c-4fcc-a5bc-11c2701015bf

[elalish]

FYI @mrdoob @mugen Looks like there was a regression in a Three.js shader sometime between r160 and r163 for Intel/AMD Macbook pros. Maybe related to texture2DGradEXT - I'd look into it, but I don't have a machine that can repro it. Can anyone else repro? Ideally also in some of the Three.js glTF examples?

[mrdoob]

Is there a live demo to test?

[elalish]

@mrdoob Yes, the screenshots above are from https://modelviewer.dev/editor/ using Damaged Helmet or Boom Box from the select model drop-down.

[elalish]

As best we can tell this is a GPU driver bug on older Macs that would only be resolvable by making some kind of shader work-around in three.js. This does not appear to be a wide-spread enough issue to warrant that kind of effort. I'm going to close this for now; if someone really wants to follow up, I'd recommend filing an issue on Three.js with a minimal repro - ideally one of the Three.js glTF examples.

[mrdoob]

This should be reported to Apple and not to Three.js 🙏

[cpiggott]

@mrdoob @elalish Would you mind pointing me in the direction of where to report to Apple.

We've had multiple people report this issue now to us directly. We were able to repro with r157.