WebGPU Lab / GPU の力を Web に解き放つ

GPUAdapter はブラウザが選んだ GPU と、利用できる機能・上限を表します。そこから GPUDevice を取得し、バッファやパイプラインを作成して GPU へコマンドを送ります。

const canvas = document.querySelector<HTMLCanvasElement>("#gpu-canvas");
if (!canvas) throw new Error("Canvas が見つかりません");

const adapter: GPUAdapter | null = await navigator.gpu.requestAdapter();
if (!adapter) throw new Error("GPU が見つかりません");

const device: GPUDevice = await adapter.requestDevice();
const context = canvas.getContext("webgpu");
if (!context) throw new Error("WebGPU context を作成できません");

const format: GPUTextureFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format } satisfies GPUCanvasConfiguration);

頂点シェーダーは頂点の位置を決め、フラグメントシェーダーは各ピクセルの色を返します。描画パイプラインには、使用するシェーダーと Canvas へ出力する色の形式などを設定します。

const module: GPUShaderModule = device.createShaderModule({ code: wgsl });
const descriptor = {
  layout: "auto",
  vertex: { module, entryPoint: "vs" },
  fragment: {
    module, entryPoint: "fs",
    targets: [{ format }],
  },
} satisfies GPURenderPipelineDescriptor;

const pipeline: GPURenderPipeline = device.createRenderPipeline(descriptor);

実行時は GPUCommandEncoder で Render Pass のコマンドを記録し、device.queue.submit() で GPU へ送ります。

画面全体を使うエフェクトでは、頂点を3つだけ生成して Canvas を覆う方法が定番です。フラグメントシェーダーは全ピクセルで並列実行されます。

@vertex fn vs(@builtin(vertex_index) i: u32) -> Out {
  var p = array<vec2f, 3>(
    vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3)
  );
  return Out(vec4f(p[i], 0, 1));
}

@fragment fn fs(@builtin(position) p: vec4f)
  -> @location(0) vec4f {
  return vec4f(0.8, 0.03, 0.08, 1.0);
}

Uniform Buffer は、時間、解像度、ポインター位置などの小さな値を各シェーダー呼び出しへ渡すために使います。TypeScript 側で値を更新すると、次の描画でシェーダーから参照できます。

struct Globals {
  time: f32,
  resolution: vec2f,
};

@group(0) @binding(0)
var<uniform> globals: Globals;

let pulse = 0.5 + 0.5 * sin(globals.time * 2.0);

フラグメントシェーダーが画素を担当するのに対し、コンピュートシェーダーは用途を限定しない並列計算です。global_invocation_id を使って各要素の担当を決めます。

@compute @workgroup_size(256)
fn update(@builtin(global_invocation_id) id: vec3u) {
  if (id.x >= particleCount) { return; }
  particles[id.x].position += particles[id.x].velocity;
}