OffscreenCanvas 可在 Worker 中创建 WebGL 上下文，需用 new OffscreenCanvas(width, height) 实例调用 getContext('webgl')，不可复用主线程 canvas 或传入 document；Chrome/Edge 支持 WebGL2，Firefox 仅 WebGL1 且需开启标志；资源由主线程传入或 Worker 自行 fetch；渲染结果通过 transferToImageBitmap() 回传；常见黑屏因上下文未就绪或未检查 gl 是否为 null。
OffscreenCanvas 能不能直接在 Worker 里创建 WebGL 上下文
可以，但必须用 OffscreenCanvas 实例调用 getContext('webgl') 或 getContext('webgl2')，不能复用主线程的 canvas 元素。Worker 中没有 DOM，所以传入 document.createElement('canvas') 会报 ReferenceError: document is not defined。
常见错误是试图把主线程的 canvas 通过 postMessage 传进 Worker——这会失败，因为 HTMLCanvasElement 不可序列化，且不支持跨线程转移。
- 正确做法：在 Worker 内部用
new OffscreenCanvas(width, height)创建实例 - 必须在调用
getContext前设置尺寸，否则返回null（WebGL 规范要求） - Chrome 和 Edge 支持完整 WebGL2；Firefox 目前仅支持 WebGL1（截至 v128），且需开启
gfx.offscreencanvas.enabled标志
Worker 里如何加载着色器、上传纹理、渲染一帧
所有资源（GLSL 源码、图像数据、几何体）都得由主线程准备并传入 Worker，或由 Worker 自行 fetch 后解析。WebGL 上下文本身不能跨线程共享，但 OffscreenCanvas 的 transferToImageBitmap() 可用于高效回传渲染结果。
典型流程是：Worker 加载着色器 → 编译链接程序 → 绑定缓冲区 → 上传纹理（用 texImage2D 配合 ImageBitmap 或 TypedArray）→ 执行 drawArrays → 调用 commit()（仅当 Canvas 在页面中可见时才需要）。
-
texImage2D接收ImageBitmap时性能最好，避免主线程解码阻塞；可用createImageBitmap(blob)在主线程预处理后 transfer 进 Worker - 不要在 Worker 里频繁调用
readPixels——它会强制同步，严重拖慢帧率；如需读取，改用getBufferSubData+TransformFeedback（WebGL2）异步采集 - 每次渲染后记得调用
gl.flush()，尤其在长时间计算后，防止驱动延迟提交命令
主线程如何安全接收并显示 Worker 渲染的画面
不能直接把 OffscreenCanvas 的 getContext 结果传回主线程，但可以将渲染结果转为 ImageBitmap 并用 transferToImageBitmap() 高效传递。主线程拿到后，用 ctx.drawImage() 或 CSS background-image 显示。
关键限制：OffscreenCanvas 本身不可 transfer，但它的渲染输出可以。所以 Worker 不负责显示，只负责“画完交图”。
- Worker 端：调用
offscreenCanvas.transferToImageBitmap()，然后postMessage(bitmap, [bitmap])（必须带 transfer list） - 主线程端：监听
message，用createImageBitmap()转换（如果需要缩放或格式转换）或直接ctx.drawImage(bitmap, ...) - 注意帧率匹配：若 Worker 渲染速度远高于主线程绘制能力，需加简单节流（如用
requestIdleCallback控制绘制频率），否则产生大量未消费的ImageBitmap导致内存上涨
为什么有时 Worker 渲染黑屏或报 GL_INVALID_OPERATION
多数情况不是代码逻辑错，而是上下文生命周期或状态管理疏漏。WebGL 上下文在 Worker 中是“惰性初始化”的：首次调用 getContext 才真正创建 GPU 资源，若此时设备被挂起（如标签页隐藏）、显存不足或权限受限（如 iframe sandbox 未加 allow-same-origin），就会静默失败。
- 务必检查
gl是否为null，而不是跳过判断直接调用方法 - 在 Worker 中使用
console.log(gl.getParameter(gl.VERSION))验证上下文是否就绪（注意：部分浏览器对 Worker 中的console有延迟或截断） - 避免在多个 Worker 中复用同一个
OffscreenCanvas实例——它不可跨 Worker 共享，transfer 后原 Worker 失去所有权 - 移动端尤其要注意：Safari 完全不支持 Worker 中的
OffscreenCanvas+ WebGL；iOS WebKit 至今未实现该组合
真正棘手的是调试：Worker 中的 WebGL 错误不会触发主线程的 webglerror 事件，只能靠主动轮询 gl.getError() 或封装一层错误捕获逻辑。这点容易被忽略，导致黑屏却无提示。
