Safari中OffscreenCanvas与ThreeJS结合的异常问题求助

问题背景 #

在Safari浏览器中使用OffscreenCanvas在Web Worker里运行Three.js场景时，触发如下错误：

THREE.WebGLRenderer: Argument 1 ('contextType') to OffscreenCanvas.getContext must be one of: "2d", "webgl", "webgl2", "bitmaprenderer"

排查发现Three.js源码中const context = canvas.getContext( contextName, contextAttributes )返回null，但并未预先创建过任何上下文，且Three.js官方同类型Demo也存在完全相同的问题。

可行解决方案 #

1. 手动提前初始化WebGL上下文 #

在Worker中先手动创建WebGL上下文，再将其传入Three.js的WebGLRenderer，跳过Three.js内部的上下文创建逻辑：

function prepareWorld(data) {
  canvas = data.canvas;
  worldParams = data.worldParams;

  // 手动创建WebGL上下文
  const gl = canvas.getContext('webgl', {
    antialias: true,
    alpha: true,
    powerPreference: 'high-performance',
    precision: 'mediump'
  });

  // 传入已创建的上下文初始化Renderer
  renderer = new THREE.WebGLRenderer({
    canvas,
    context: gl, // 关键：指定已存在的上下文
    antialias: true,
    alpha: true,
    powerPreference: 'high-performance',
    precision: 'mediump',
  });

  canvasSize.width = data.canvasSize.width;
  canvasSize.height = data.canvasSize.height;
  // ... 后续场景初始化代码
}

2. Safari浏览器降级到主线程渲染 #

检测浏览器类型，在Safari环境下直接在主线程初始化Three.js，放弃Worker渲染以保证兼容性：

// 主线程代码
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
let canvasElm = g('avatar-canvas');

if (isSafari) {
  // 主线程直接渲染
  const renderer = new THREE.WebGLRenderer({
    canvas: canvasElm,
    antialias: true,
    alpha: true,
    powerPreference: 'high-performance',
    precision: 'mediump',
  });
  // ... 后续场景初始化逻辑
} else {
  // 原有Worker渲染流程
  const offscreen = canvasElm.transferControlToOffscreen();
  renderWorker = new Worker(new URL('workers/render-worker.js', import.meta.url), { type: 'module' });
  renderWorker.postMessage(
    {
      task: 'prepareWorld',
      canvas: offscreen,
      worldParams: worldParams,
      canvasSize: { width: container.offsetWidth, height: container.offsetHeight },
    },
    [offscreen],
  );
}

3. 升级Three.js到最新稳定版 #

部分旧版本Three.js对Safari OffscreenCanvas的支持存在缺陷，尝试升级到最新版本，大概率能修复这类兼容性问题。

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