THREE.WebGLRenderer (ThreeJS v110) crashing new versions of Safari desktop - fix without upgrade?

user_1767169 0
Viewed 1171

THREE.WebGLRenderer crashes new versions of safari in CDN version of three.js (v110)

Calling new THREE.WebGLRenderer() in a recent version of safari crashes the page which causes safari to immediately reload the page and show a warning at top of page saying "This webpage was reloaded because a problem occurred.".

screenshot

This only started happening recently, possibly only on very recent version of Safari (I am using Safari 15) and OSX (I am using Big Sur).

This is not a problem on Safari mobile (iOS v14.7.1)

Any suggestions on how to work around this issue without upgrading to the latest version of ThreeJS which would require major rework? (especially after the update to ES6)

To replicate, simply run this in new THREE.WebGLRenderer() in the Safari javascript console, it crashes even before it is used for creating a scene.

safari15 three.js safari webkit
2 Answers

Updating three.js to latest version wont fix the problem. This is a Safari 15's bug per the creator of three.js

you can report this from here, but it is already reported.

user_169302390

The simplest solution is to upgrade to the latest version of threejs. But, for those who may be looking for a quick code-based workaround to avoid needing to upgrade threejs version, this worked for me...

In WebGLRenderer constructor:

  1. Remove xrCompatible from contextAttributes
  2. Attempt to create context with _canvas.getContext( 'webgl2', contextAttributes ) and only if unsuccessful, fallback to _canvas.getContext( 'webgl', contextAttributes ) because the webgl2 version should succeed on Safari Desktop which avoids hitting the second call which is where the crash occurs (in my old version 110 of threejs)
user_17671690
Related