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

GPUAdapter は環境の能力表、GPUDevice は実際の作業窓口です。WebGPU のほぼすべてのオブジェクトは Device から作ります。

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);

実行時は CommandEncoder に RenderPass を記録し、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 は時間、解像度、ポインターなど、全シェーダー呼び出しで共有する小さな値に向きます。3D SDF とレイマーチを組み合わせると、立体の法線、材質、glow を数式で制御できます。

let distance = sdSegment(uv, bladeStart, bladeEnd);
let core = 1.0 - smoothstep(0.008, 0.018, distance);
let glow = exp(-28.0 * distance);
let color = energyColor * (core * 2.0 + glow * 0.7);

フラグメントシェーダーが画素を担当するのに対し、コンピュートシェーダーは用途を限定しない並列計算です。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;
}