1
const N = 100_000_000;
2
const data = new Float64Array(new SharedArrayBuffer(N * 8));
3
for (let i = 0; i < N; i++) data[i] = Math.random();
4

5
const result = new Float64Array(new SharedArrayBuffer(8));  // 单个结果槽
6
result[0] = 0;
7

8
const WORKERS = 4;
9
const chunk = Math.ceil(N / WORKERS);
10
const workers = [];
11

12
for (let w = 0; w < WORKERS; w++) {
13
  const start = w * chunk;
14
  const end = Math.min(start + chunk, N);
15
  const wkr = new Worker('./sum-worker.js');
16
  workers.push(wkr);
17

18
  // 把同一份 data + result 都"分享"给 Worker
19
  wkr.postMessage({ data, result, start, end });
20
}
21

22
Promise.all(workers.map(w => new Promise(r => w.onmessage = r)))
23
  .then(() => {
24
    console.log('总和 =', result[0].toFixed(4));
25
    workers.forEach(w => w.terminate());
26
  });

1
const TOTAL = 10_000_000;
2
const data = new Float32Array(new SharedArrayBuffer(TOTAL * 4));
3
for (let i = 0; i < TOTAL; i++) data[i] = Math.random();
4

5
const progress = new Int32Array(new SharedArrayBuffer(4));   // 已完成 Worker 数
6
const result   = new Float32Array(new SharedArrayBuffer(8)); // 共享结果
7

8
const N_WORKERS = navigator.hardwareConcurrency || 4;
9
const chunk = Math.ceil(TOTAL / N_WORKERS);
10
const workers = [];
11

12
for (let w = 0; w < N_WORKERS; w++) {
13
  const start = w * chunk;
14
  const end   = Math.min(start + chunk, TOTAL);
15
  const wk = new Worker('./stats-worker.js');
16
  workers.push(wk);
17
  wk.postMessage({ data, result, progress, start, end });
18
}
19

20
// 主线程轮询进度（不阻塞 UI）
21
const timer = setInterval(() => {
22
  const done = Atomics.load(progress, 0);
23
  console.log(`进度：${done}/${N_WORKERS}`);
24
  if (done === N_WORKERS) {
25
    clearInterval(timer);
26
    console.log('总和 =', result[0].toFixed(2));
27
    workers.forEach(w => w.terminate());
28
  }
29
}, 100);

1
const video = document.querySelector('#cam');
2
const canvas = document.querySelector('#out');
3
const ctx = canvas.getContext('2d');
4

5
const W = 1920, H = 1080;
6
const frameSize = W * H * 4;
7

8
// 共享内存：当前帧 + 上一帧的输出
9
const frameBuf = new Uint8ClampedArray(new SharedArrayBuffer(frameSize));
10
const outBuf   = new Uint8ClampedArray(new SharedArrayBuffer(frameSize));
11

12
// 控制 Worker 的开关
13
const ready = new Int32Array(new SharedArrayBuffer(4));
14
Atomics.store(ready, 0, 0);
15

16
const workers = [];
17
for (let i = 0; i < 4; i++) {
18
  const wk = new Worker('./filter-worker.js');
19
  wk.postMessage({ frameBuf, outBuf, W, H, quadrant: i });
20
  workers.push(wk);
21
}
22

23
function processFrame() {
24
  // 1. 把摄像头帧画到 OffscreenCanvas
25
  const off = new OffscreenCanvas(W, H);
26
  off.getContext('2d').drawImage(video, 0, 0, W, H);
27
  const imageData = off.getContext('2d').getImageData(0, 0, W, H);
28

29
  // 2. 拷贝到共享内存（一次性）
30
  frameBuf.set(imageData.data);
31

32
  // 3. 通知所有 Worker 开始处理
33
  Atomics.store(ready, 0, 1);
34
  Atomics.notify(ready, 0);
35

36
  // 4. 等所有 Worker 完成（用 Atomics.wait 在主线程外做轻量轮询）
37
  // ... 此处省略，用主线程 setTimeout 模拟
38
  ctx.putImageData(new ImageData(outBuf, W, H), 0, 0);
39
  requestAnimationFrame(processFrame);
40
}
41

42
video.play().then(() => requestAnimationFrame(processFrame));

1
self.onmessage = (e) => {
2
  const { frameBuf, outBuf, W, H, quadrant } = e.data;
3
  const [qx, qy] = [[0, 0], [1, 0], [0, 1], [1, 1]][quadrant];
4
  const halfW = W / 2, halfH = H / 2;
5
  const x0 = qx * halfW, y0 = qy * halfH;
6

7
  // 等待主线程写入新帧
8
  Atomics.wait(ready, 0, 0);
9

10
  for (let y = y0; y < y0 + halfH; y++) {
11
    for (let x = x0; x < x0 + halfW; x++) {
12
      const idx = (y * W + x) * 4;
13
      const r = frameBuf[idx], g = frameBuf[idx + 1], b = frameBuf[idx + 2];
14
      // ITU-R BT.601 灰度公式
15
      const gray = (r * 299 + g * 587 + b * 114) / 1000;
16
      outBuf[idx] = outBuf[idx + 1] = outBuf[idx + 2] = gray;
17
      outBuf[idx + 3] = 255;
18
    }
19
  }
20

21
  self.postMessage('done');
22
};