如何通过OffscreenCanvas在异步Worker线程中实现海量非结构化数据可视化

能实现，但关键在闭环：Worker需独立完成数据解析、GPU初始化、纹理加载、帧生成与回传；主线程仅移交OffscreenCanvas，不可参与渲染，且须用transfer list传递，WebGL上下文须同步创建并禁用preserveDrawingBuffer。

能实现，但关键不在“异步”而在“闭环”——Worker 必须独立完成数据解析、GPU 初始化、纹理加载、帧生成与结果回传整条链路，任何一步依赖主线程都会导致卡顿或白屏。

主线程只做移交，不参与渲染

OffscreenCanvas 实例不能在 Worker 中 new 出来。正确流程是：

• 主线程创建普通 <canvas> 元素
• 调用 canvas.transferControlToOffscreen() 获取 OffscreenCanvas 实例
• 通过 postMessage(data, [offscreen]) 将其连同 transfer list 一起发给 Worker（缺 transfer list 会深拷贝，直接失效）
• 移交后，原 canvas 不再可用 getContext，否则报错

Worker 内必须自洽初始化 WebGL

不能等收到消息再建上下文，必须在 Worker 入口同步完成：

• 立刻调用 offscreen.getContext('webgl2', { desynchronized: true, antialias: false, depth: true, preserveDrawingBuffer: false })
• antialias: false 省掉多重采样解析，高频渲染更稳
• preserveDrawingBuffer: false 是必须项，Safari 在 Worker 中对 true 支持极差；截图改用 gl.readPixels → createImageBitmap
• 着色器编译、VBO 分配、UBO 绑定、纹理上传全部在 Worker 内完成，不跨线程

非结构化数据需在 Worker 内解码并映射为 GPU 可读格式

海量数据（如点云、日志流、传感器原始帧）不能靠主线程预处理再传入。应：

• 用 fetch 或 postMessage 接收 ArrayBuffer 或压缩包（如 gzip）
• 在 Worker 中用 TextDecoder / JSON.parse / 自定义二进制解析器还原结构
• 将结果转为 Float32Array 或 Uint16Array，直接 gl.bufferData 上载到 GPU
• 图像类数据走 createImageBitmap(blob) → gl.texImage2D(..., bitmap)，禁用 new Image() 和 URL.createObjectURL()

结果回传要节制，避免传输反成瓶颈

每帧都 transferToImageBitmap() 会严重拖慢 Worker 帧率：

• 建议按视觉变化触发：例如位移/缩放/滤波参数变更时才截帧
• 或固定间隔（如每 3 帧一次），用 setTimeout 控制节奏（Worker 没有 requestAnimationFrame）
• 主线程收到 ImageBitmap 后，用 ctx.drawImage(bitmap, ...) 绘制到可见 canvas，不重绘 DOM
• 若追求更高吞吐，可让 Worker 持续渲染到同一 OffscreenCanvas，主线程用 requestAnimationFrame 轮询 drawImage(offscreen, ...) —— 此时无需传输，仅共享引用