如何利用 OffscreenCanvas 在 Worker 线程中实现复杂的 WebGL 渲染

OffscreenCanvas必须由主线程transferControlToOffscreen()创建并转移，Worker中直接new会报错；WebGL上下文在Worker中初始化失败主因是浏览器支持度与标志位限制，非代码错误。

不能直接在普通 Worker 里 new OffscreenCanvas()，必须由主线程转移控制权；WebGL 上下文能否在 Worker 中初始化，取决于浏览器和标志位，不是代码写错就是环境不支持。

OffscreenCanvas 实例必须从主线程 transferControlToOffscreen()

普通 Worker 没有 DOM，new OffscreenCanvas(100, 100) 会报 TypeError: Illegal constructor。你看到的“Worker 中创建 OffscreenCanvas”其实是假象——真正路径只有一条：

• 主线程先有一个真实 <canvas id="gl-canvas"></canvas>
• 调用 canvas.transferControlToOffscreen() 得到一个 OffscreenCanvas 实例
• postMessage(offscreencanvas, [offscreencanvas])，注意必须把实例放进 transfer list（第二个参数）
• Worker 收到后才能安全调用 getContext('webgl2')

漏掉 transfer list，对象会被序列化成空壳，getContext 静默返回 null，不会抛异常。

WebGL 上下文在 Worker 中初始化失败的常见原因

即使 transfer 成功，offscreen.getContext('webgl2') 仍可能为 null。这不是你 shader 写错了，而是环境限制：

• Chrome / Edge：支持 WebGL2，开箱即用
• Firefox（v128）：仅支持 WebGL2，且需手动开启 dom.workers.offscreen-canvas.enabled 标志（about:config）
• Safari：截至 2026 年 4 月，完全不支持 OffscreenCanvas + WebGL 组合

验证方式很简单：console.log(offscreen.getContext('webgl2') !== null)，别等渲染时报错才排查。

资源加载和纹理上传必须绕过 DOM 元素

Worker 里没有 HTMLImageElement、fetch 返回的 Blob 也不能直接丢给 texImage2D。常见错误是：

• 主线程传 <img src="a.png"> 进 Worker → drawImage(img, ...) → 触发同步回读，卡死主线程
• Worker 里 fetch('tex.png').then(res => res.blob()).then(blob => gl.texImage2D(...)) → texImage2D 不接受 Blob，会静默失败

正确做法：

• 主线程用 createImageBitmap(blob) 预解码，再 postMessage(imageBitmap, [imageBitmap])
• Worker 中直接 gl.texImage2D(..., imageBitmap)，零拷贝、GPU 友好
• 着色器源码、顶点数据等纯 JS 数据，可直接 JSON 序列化传递

渲染后回传画面要避免 readPixels 同步阻塞

想把渲染结果拿回主线程显示？别用 readPixels —— 它强制 GPU 同步，一帧卡几百毫秒。正确路径是：

• Worker 渲染完调用 offscreenCanvas.transferToImageBitmap()
• postMessage(bitmap, [bitmap])，同样必须进 transfer list
• 主线程拿到 ImageBitmap 后，用 ctx.drawImage(bitmap, ...) 或设为 background-image

注意：transferToImageBitmap() 是零拷贝操作；而 readPixels + createImageBitmap(new Uint8Array(...)) 是双重内存拷贝，性能灾难。如果真需要像素数据做分析，改用 WebGL2 的 TransformFeedback 异步采集，别碰 readPixels。