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。
