大图像数据场景下的Workers与多线程问题

既然你只是把Texture当作像素数据仓库而非用于渲染，完全没必要传递OffScreenCanvas或Texture对象本身，以下是几种高效的共享方案：

方案1：提取像素到SharedArrayBuffer共享内存（通用方案） #

这是最直接的思路，先在主线程把Texture的像素数据提取到CPU内存的共享缓冲区，再让所有Worker线程直接访问同一块内存，完全无副本：

1. 主线程步骤：

   • 用Canvas（或OffScreenCanvas）的getImageData()方法把Texture的像素数据读出来，得到ImageData对象，其data属性是Uint8ClampedArray。
   • 将该数组的底层缓冲区转换为SharedArrayBuffer（如果不需要写入，也可以直接传递ArrayBuffer，但SharedArrayBuffer是真正的共享内存，无复制开销）。
   • 把SharedArrayBuffer和纹理的宽高信息发给每个Worker线程。

   示例代码：

   // 主线程：假设已拥有加载好Texture的canvas
   const canvas = document.getElementById('texture-canvas');
   const ctx = canvas.getContext('2d');
   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   // 创建SharedArrayBuffer并复制像素数据
   const sharedUint8 = new Uint8ClampedArray(new SharedArrayBuffer(imageData.data.byteLength));
   sharedUint8.set(imageData.data);
   
   // 给Worker线程传递数据（Transferable方式无复制）
   const worker1 = new Worker('worker.js');
   worker1.postMessage({
     buffer: sharedUint8.buffer,
     width: canvas.width,
     height: canvas.height
   }, [sharedUint8.buffer]);
   

2. Worker线程步骤：

   • 接收SharedArrayBuffer，包装成对应类型的TypedArray。
   • 根据宽高计算像素索引，直接读取数据进行拓扑计算。

   示例代码：

   // worker.js
   self.onmessage = (e) => {
     const { buffer, width, height } = e.data;
     const pixelData = new Uint8ClampedArray(buffer);
     // 获取(x,y)位置的RGBA像素值
     const getPixel = (x, y) => {
       const index = (y * width + x) * 4;
       return {
         r: pixelData[index],
         g: pixelData[index+1],
         b: pixelData[index+2],
         a: pixelData[index+3]
       };
     };
     // 执行拓扑计算逻辑
   };
   

方案2：WebGL2直接写入SharedArrayBuffer（GPU到共享内存，更高效） #

如果你的Texture是WebGL/Three.js等GPU纹理，可以跳过CPU中转，直接用WebGL2的像素缓冲区把纹理数据写入SharedArrayBuffer：

1. 主线程步骤：

   • 创建SharedArrayBuffer和对应的WebGL像素缓冲区（PIXEL_PACK_BUFFER）。
   • 将Texture绑定到帧缓冲，用readPixels把纹理数据直接写入共享缓冲区。
   • 把共享缓冲区发给Worker线程。

   示例代码：

   // 主线程WebGL2代码
   const gl = canvas.getContext('webgl2');
   const { width, height } = canvas;
   const sharedBuffer = new SharedArrayBuffer(width * height * 4); // RGBA格式
   const pixelBuffer = gl.createBuffer();
   gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pixelBuffer);
   gl.bufferData(gl.PIXEL_PACK_BUFFER, sharedBuffer, gl.STREAM_READ);
   // 绑定包含目标Texture的帧缓冲
   gl.bindFramebuffer(gl.FRAMEBUFFER, framebufferWithTexture);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, 0);
   // 解绑缓冲区
   gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
   // 发送给Worker
   worker.postMessage({ buffer: sharedBuffer, width, height }, [sharedBuffer]);
   

关键注意事项 #

• SharedArrayBuffer的跨源要求：使用SharedArrayBuffer需要服务器设置跨源隔离头：Cross-Origin-Opener-Policy: same-origin和Cross-Origin-Embedder-Policy: require-corp，否则浏览器会禁用该特性。
• 只读访问无需锁：如果所有线程只是读取像素数据，不需要同步锁；如果有写入操作，必须用Atomics对象进行原子操作，避免数据竞争。
• 数据格式匹配：根据你的Texture格式选择对应的TypedArray，比如浮点纹理用Float32Array，单通道灰度用Uint8Array等，减少内存占用和转换开销。

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