Horrible 3D/Three.js performance in latest Safari on macOS

I’m currently running Safari Version 14.1 (16611.1.21.161.6) on macOS 11.3.1 (20E241) and since about last week, our app (https://app.shadowmap.org) seems to run ridiculously slow on this config. I am pretty convinced it is caused by the latest update for Safari.

Other browsers including Brave and Firefox on the same machine/OS run still fine. Safari on iOS behaves as well as ever too.

Does anyone have infos about what happened to Safari? Maybe has an idea how to compensate/fix the performance drop?

Do you see this performance degradation with other WebGL apps, too? What about the official three.js examples? three.js examples

1 Like

Like @Mugen87 said you should try track down the cause of the performance drop, the easiest way is starting with the official examples and possibly specific features you use that are also showcased in them, if everything works fine you can start isolating the issue by disabling features, reducing what you render or process.

Did you measured the performance yet?

Very good point! I just tried some of the examples in Safari and – yes – they work significantly worse than some weeks ago. This even leads to the whole browser UI freezing, the machine becoming unresponsive. Again, same examples on the same machine in Firefox/Brave run perfectly smooth. Seems to be a bigger Safari issue.

A thought: renderer = new THREE.WebGLRenderer({ powerPreference: "high-performance" }); – maybe this isn’t activated or something?

It’s best if you report the issue right here: https://bugs.webkit.org/

Whether this problem is related to powerPreference or not is hard to tell. I mean you can try different renderer settings out and see if things improve. But it’s probably best if the devs from WebKit investigate the issue.