ThreeJS v110的THREE.WebGLRenderer在新版桌面Safari崩溃，不升级如何修复？

适配方案 #

该崩溃由Safari 15桌面端内核处理WEBGL_debug_renderer_info扩展查询的逻辑bug导致，ThreeJS r110版本的WebGLRenderer初始化时会默认查询该扩展，直接触发内核崩溃。不需要升级ThreeJS版本的可行适配方案如下：

• 方案1：全局拦截WebGL扩展查询（最优，无业务侵入）
  在引入ThreeJS资源之后、实例化THREE.WebGLRenderer之前执行以下补丁代码即可：

const originalGetExtension = WebGLRenderingContext.prototype.getExtension;
WebGLRenderingContext.prototype.getExtension = function (extName) {
  // 拦截触发崩溃的扩展查询，直接返回null
  if (extName === 'WEBGL_debug_renderer_info') return null;
  return originalGetExtension.call(this, extName);
};

该方案仅会导致ThreeJS无法读取显卡具体型号信息，不会影响任何渲染功能，适配成本最低。

• 方案2：修改ThreeJS源码后自行托管
  如果不想修改全局WebGL原型，可以下载r110版本的ThreeJS源码，找到内部查询WEBGL_debug_renderer_info的代码段直接注释，编译后将JS资源托管到自有静态资源服务替换原有CDN资源即可，无需修改业务侧的ThreeJS调用逻辑。
• 方案3：传入自定义canvas初始化
  实例化WebGLRenderer时主动传入提前创建的canvas元素，也可绕开崩溃逻辑，示例代码：

const customCanvas = document.createElement('canvas');
const renderer = new THREE.WebGLRenderer({
  canvas: customCanvas,
  // 可选补充参数，进一步提升兼容性
  antialias: true,
  powerPreference: 'high-performance'
});

内容的提问来源于stack exchange，提问作者pythonjsgeo