WebGPU? ??? GPU ??? ??? ?? ???? ?? ?? ??? ???? ?? ??? ???? ??? ???? ??? ?????.

?? ??? WebGL? ????? ??? ??? ??? ???? ???? ?? ??? ?????.

WGSL(WebGPU ???/??? ??)? Rust ? GLSL? ?? ??? ?? ??? ?????.

WebGPU ???? ???? ???? ? ?? ??? ??????. ??? ???? ???? ??? ? ????? ???? ???? ???? ??? ???? ?? ?????.

? ????? ?? ??? ?? ?? ?? HTML? http://m.miracleart.cn/link/2e5281ee978b78d6f5728aad8f28fedb?? ?? ? ????. ??? ??? ?? ?????.

??? ? ????? ???? ? HTML? ?? ? ?? ?? ?????. http://m.miracleart.cn/link/bed827b4857bf056d05980661990ccdc Chrome ?? Edge? ?? WebGPU ?? ???? http://m.miracleart.cn/link/bae00fb8b4115786ba5dbbb67b9b177a).

?? ??

??? ?? ????????. ??? ??? ?? ?? ??? ?? ?????.

??? JS/CPU?? ???? (??) ????? GPU? ?????.

?? ???? ???? GPU?? ?????. CPU? ?? ???????? ???? ???? ?? ?? ??? ? ????. ???? ?? CPU? ?? ?? ????? ? ??????? ?????.

? ??? ??? ? ??? ?? ?? ??? ??? ?????? ?????? ??? ?? ? ??? ??? ???? ??? ????(???? GPU? ?? ?? ??????. ?? ?? ??? ?? ?? ? ????). ??? ???? ??? ?? ?? ?? ?? ?? ?? ?).

???

CPU? GPU ?? ??? ??? ?? WebGPU? ???? ????? ??????. JS ??(?: Float32Array)? WebGPU ??? ???? WGSL? ??? ??? "???"? ? ????. WGSL ??? ??? ? ?? ??, ? ?? ??? ??? ??? ?????.

??? ?? ??? ???? ??? ???? ?? ??? ?? ???? ? ?? ??? ???? ?????.

?? - ??

??? ???(http://m.miracleart.cn/link/2e5281ee978b78d6f5728aad8f28fedb#L43) ? ??? ???? ??? ??? ?????. (http://m.miracleart.cn/link/2e5281ee978b78d6f5728aad8f28fedb#L69) ?? - ??? ???? ??? ????, ??? ???? ??? ?? ??? ???????.

??? ????? ???? JS ? WGSL? ??? ??? ???????.

<code>const computeBindGroup = device.createBindGroup({
  /*
    參見 computePipeline 定義，網(wǎng)址為
    http://m.miracleart.cn/link/2e5281ee978b78d6f5728aad8f28fedb#L102

    它允許將 JS 字符串與 WGSL 代碼鏈接到 WebGPU
  */
  layout: computePipeline.getBindGroupLayout(0), // 組號 0
  entries: [{
    // 時間綁定在綁定號 0
    binding: 0,
    resource: {
      /*
      作為參考，緩沖區(qū)聲明為：

      const timeBuffer = device.createBuffer({
        size: Float32Array.BYTES_PER_ELEMENT,
        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST})
      })

      http://m.miracleart.cn/link/2e5281ee978b78d6f5728aad8f28fedb#L129
      */
      buffer: timeBuffer
    }
  },
  {
    // 粒子位置數(shù)據(jù)在綁定號 1（仍在組 0）
    binding: 1,
    resource: {
      buffer: particleBuffer
    }
  }]
});</code>

? ??? ???? ?? ??

<code>// 來自計算著色器 - 頂點著色器中也有類似的聲明
@group(0) @binding(0) var<uniform> t: f32;
@group(0) @binding(1) var<storage read_write=""> particles : array<particle>;
</particle></storage></uniform></code>

????, JS? WGSL? ?? ??? ??? ??? ???? JS ?? timeBuffer? WGSL? ??????.

?? ?? JS?? ?? ?? ??? ? ????.

<code>/* 數(shù)組中只需要 1 個元素，因為時間是單個浮點值 */
const timeJs = new Float32Array(1)
let t = 5.3
/* 純 JS，只需設置值 */
timeJs.set([t], 0)
/* 將數(shù)據(jù)從 CPU/JS 傳遞到 GPU/WGSL */
device.queue.writeBuffer(timeBuffer, 0, timeJs);</code>

?? ?? - WGSL ??

??? GPU ??? ?? ???? ?? ??? ?? ???? ??????? GPU? ??? ?? ?? ????? ???? ??? ????? ? ????.

???? ??? ???? ??? ?? ?? ??? ???? ?????.

<code>@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) global_id : vec3<u32>) {
  // ...
}
</u32></code>

@builtin(global_invocation_id) global_id : vec3 ? ?? ??? ???? ?????.

??? ??? global_invocation_id = workgroup_id * workgroup_size local_invocation_id - ?? ?? ???? ??? ? ??? ?????.

?? ?? 10,000?? ???? ?? workgroup_size? 64? ?? Math.ceil(10000/64) ?? ??? ???? ???. JS?? ??? ??? ???? ??? GPU? ? ???? ????? ????? ?????.

<code>computePass.dispatchWorkgroups(Math.ceil(PARTICLE_COUNT / WORKGROUP_SIZE));</code>

PARTICLE_COUNT == 10000?? WORKGROUP_SIZE == 64? ?? 157?? ?? ??(10000/64 = 156.25)? ???? ? ?? ??? ??? local_invocation_id ??? 0~63???(workgroup_id? ??? 0~157???). ). 157 * 64 = 1048??? ?? ???? ?? ? ?? ??? ???? ???. ??? ??? ???? ????? ?????.

?? ??? ??? ? ???? ??? ?? ??? ??? ????.

<code>@compute @workgroup_size(${WORKGROUP_SIZE})
fn main(@builtin(global_invocation_id) global_id : vec3<u32>) {
  let index = global_id.x;
  // 由于工作組網(wǎng)格未對齊，因此丟棄額外的計算
  if (index >= arrayLength(&particles)) {
    return;
  }
  /* 將整數(shù)索引轉(zhuǎn)換為浮點數(shù)，以便我們可以根據(jù)索引（和時間）計算位置更新 */
  let fi = f32(index);
  particles[index].position = vec2<f32>(
    /* 公式背后沒有宏偉的意圖 - 只不過是用時間+索引的例子 */
    cos(fi * 0.11) * 0.8 + sin((t + fi)/100)/10,
    sin(fi * 0.11) * 0.8 + cos((t + fi)/100)/10
  );
}
</f32></u32></code>

??? ?? ??? ???? ??? ??? ?? ?? ?? ??? ?? ?????.

??? ???? ??? ????? ?? ?? ??

??? ????? ?? ???? ?? ??? ???? ?? ?? ?? ?????. ??? ???? ????? ? ? ?? ?????.

??? WGSL? ??? ?????.

<code>@group(0) @binding(0) var<uniform> t: f32;
@group(0) @binding(1) var<storage> particles : array<vec2>>;
/*
或等效：

@group(0) @binding(1) var<storage read=""> particles : array<vec2>>;
*/
</vec2></storage></vec2></storage></uniform></code>

??? ????? ??? ??_?? ???? ?????? ?? ??? ?????.

<code>var with 'storage' address space and 'read_write' access mode cannot be used by vertex pipeline stage</code>

?? ???? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ???? ??? ?? ???? ???? ???.

<code>const renderBindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [{
    binding: 0,
    resource: {
      buffer: timeBuffer
    }
  },
  {
    binding: 1,
    resource: {
      buffer: particleBuffer
    }
  }]
});</code>

GitHub ?? ???? ???:2? ??????. http://m.miracleart.cn/link/2e5281ee978b78d6f5728aad8f28fedb#L70 - WebGPU? ?? ??? ??? ??? ???? ??

??? ????? ??

?? ??? ???? ???? ? ??? ??? JS?? ?????.

<code>/* 從 t = 0 開始模擬 */
let t = 0
function frame() {
  /*
    為簡單起見，使用恒定整數(shù)時間步 - 無論幀速率如何，都會一致渲染。
  */
  t += 1
  timeJs.set([t], 0)
  device.queue.writeBuffer(timeBuffer, 0, timeJs);

  // 計算傳遞以更新粒子位置
  const computePassEncoder = device.createCommandEncoder();
  const computePass = computePassEncoder.beginComputePass();
  computePass.setPipeline(computePipeline);
  computePass.setBindGroup(0, computeBindGroup);
  // 重要的是要調(diào)度正確數(shù)量的工作組以處理所有粒子
  computePass.dispatchWorkgroups(Math.ceil(PARTICLE_COUNT / WORKGROUP_SIZE));
  computePass.end();
  device.queue.submit([computePassEncoder.finish()]);

  // 渲染傳遞
  const commandEncoder = device.createCommandEncoder();
  const passEncoder = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: context.getCurrentTexture().createView(),
      clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
      loadOp: 'clear',
      storeOp: 'store',
    }]
  });
  passEncoder.setPipeline(pipeline);
  passEncoder.setBindGroup(0, renderBindGroup);
  passEncoder.draw(PARTICLE_COUNT);
  passEncoder.end();
  device.queue.submit([commandEncoder.finish()]);

  requestAnimationFrame(frame);
}
frame();</code>

??

WebGPU? ?????? ??? ?? GPU ???? ??? ?????.

??? ?????. ? ???? ??? ???(CPU ???? GPU ??? ???)? ?? ?????? ?? ???? ?? ??? ????.

??? ????? ???? ?? ??? ?? ?? ????? ??? ? ????.

?? ??? ??? ????? ??? ?? ???/?? ???? WebGL? ?? ?? ??? ?? ?? ?????? ?????. ??? ? ???? ??? GPU ???? ??? ?? ???? ???? ???.

? ??? WebGPU ????: ?? ???, ?? ? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!