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

GPUAdapter はブラウザが選んだ GPU と、利用できる機能・上限を表します。そこから GPUDevice を取得し、GPU で使うデータや描画手順を作成してコマンドを送ります。

// WebGPU の描画先にする Canvas を HTML から探す
const canvas = document.querySelector<HTMLCanvasElement>("#gpu-canvas");
if (!canvas) throw new Error("Canvas が見つかりません");

// ブラウザに、この環境で利用する GPU を選んでもらう
const adapter: GPUAdapter | null = await navigator.gpu.requestAdapter();
if (!adapter) throw new Error("GPU が見つかりません");

// GPU で使うデータや描画手順を作り、命令するための Device を取得する
const device: GPUDevice = await adapter.requestDevice();
// Canvas へ WebGPU で描画するための Context を取得する
const context = canvas.getContext("webgpu");
if (!context) throw new Error("WebGPU context を作成できません");

// この環境の Canvas が効率よく表示できる色形式を選ぶ
const format: GPUTextureFormat = navigator.gpu.getPreferredCanvasFormat();
// 使用する Device と色形式を、Canvas の Context へ設定する
context.configure({ device, format } satisfies GPUCanvasConfiguration);

描画パイプラインは、描画命令を受けたときに GPU が呼ぶ関数を決めます。vertex.entryPoint で頂点シェーダー、fragment.entryPoint でフラグメントシェーダーの入口を選び、targets[0] を WGSL の @location(0) と結びます。

// WGSL のソース文字列を、GPU が扱う ShaderModule にする
const module: GPUShaderModule = device.createShaderModule({ code: wgsl });

// 描画に使うシェーダーの入口と、色の出力形式をまとめる
const descriptor = {
  // シェーダーが使う Buffer の接続方法を WebGPU に推論させる
  layout: "auto",
  // 描画命令を受けたら、@vertex の付いた vs 関数を頂点ごとに呼ぶ
  vertex: { module, entryPoint: "vs" },
  fragment: {
    // 三角形内の画素候補ごとに、@fragment の付いた fs 関数を呼ぶ
    module, entryPoint: "fs",
    // fs の @location(0) を、Canvas と同じ色形式の 0 番の出力先へ結ぶ
    targets: [{ format }],
  },
} satisfies GPURenderPipelineDescriptor;

// 設定をもとに、描画処理をまとめた RenderPipeline を作る
const pipeline: GPURenderPipeline = device.createRenderPipeline(descriptor);

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

この章を完了

頂点は、三角形の角になる点です。TypeScript が draw(3) を命令すると、GPU は @vertex の付いた vs を 3 回呼び、vertex_index に 0、1、2 を順番に渡します。

次のコードは、その番号を使って配列から座標を 1 つずつ取り出します。できた三角形が Canvas 全体を覆うため、フラグメントシェーダーが画面の各画素の色を計算できます。

// 頂点シェーダーから GPU へ返す、画面上の位置
struct Out {
  @builtin(position) position: vec4f,
};

// @vertex は、描画する頂点ごとに GPU が呼ぶ入口を示す
// i は GPU から渡される、今回処理する頂点の番号（0、1、2）
@vertex fn vs(@builtin(vertex_index) i: u32) -> Out {
  // 三角形を構成する 3 つの座標
  var p = array<vec2f, 3>(
    vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3)
  );
  // i 番目の 2D 座標へ、奥行き 0 と同次座標 1 を加えて返す
  return Out(vec4f(p[i], 0, 1));
}

// GPU が三角形内の画素候補ごとに fs を呼ぶ
@fragment fn fs() -> @location(0) vec4f {
  // この return が、0 番の色出力へ不透明な暗い赤を書き込む
  return vec4f(0.8, 0.03, 0.08, 1.0);
}

ここまでの色や座標は WGSL のコード内へ直接書いていました。アニメーションに使う経過時間や、画面ごとに異なる Canvas の大きさは TypeScript 側で求めるため、GPU へ値を渡す場所が必要です。

Bufferは、その受け渡しに使う GPU 上のメモリ領域です。TypeScript が値を書き、シェーダーが読みます。Uniform Bufferは、1 回の描画中にすべての画素が同じ値を読む場合に使う Buffer です。

まず TypeScript で 16 バイトの Uniform Buffer を作り、経過秒数、位置合わせ用の空き、Canvas の幅、高さを順番に書きます。

// f32 4 個分の、GPU へ値を渡すメモリ領域を作る
const uniformBuffer = device.createBuffer({
  size: 16,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});

// 次の WGSL コードと同じ順序で 4 個の数値を並べる
const values = new Float32Array([
  elapsedSeconds, // time：ページを開いてからの経過秒数
  0,              // _padding：データの位置をそろえる空き
  canvas.width,   // resolution.x：Canvas の幅
  canvas.height,  // resolution.y：Canvas の高さ
]);

// 並べた数値を Uniform Buffer の先頭から書き込む
device.queue.writeBuffer(uniformBuffer, 0, values);

// Uniform Buffer を、WGSL が読む binding 0 へ接続する
const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [{ binding: 0, resource: { buffer: uniformBuffer } }],
});

Globals には、時間や Canvas の大きさなど、シェーダー全体で共有する値をまとめます。そのため「全体の値」という意味の名前を付けています。項目は TypeScript が書き込む順番に並べます。

// GPU へ渡した 4 個の値に、WGSL で使う名前と型を付ける
struct Globals {
  time: f32,         // ページを開いてからの経過秒数
  _padding: f32,     // 次の vec2f を正しい位置へそろえる空き領域
  resolution: vec2f, // Canvas の幅と高さ
};

// TypeScript が接続した 0 番の Buffer を globals として読む
@group(0) @binding(0)
var<uniform> globals: Globals;

// GPU が画素ごとにこの関数を呼び、同じ time から各画素の色を作る
@fragment fn animatedColor() -> @location(0) vec4f {
  let pulse = 0.5 + 0.5 * sin(globals.time * 2.0);
  // 計算した RGBA を 0 番の色出力へ書く
  return vec4f(pulse, 0.03, 0.08, 1.0);
}

Storage Bufferは、粒子の位置のような大量のデータをシェーダーから読み書きするための Buffer です。小さな共有値を渡す Uniform Buffer と役割が異なります。

フラグメントシェーダーが画素を担当するのに対し、コンピュートシェーダーは用途を限定しない並列計算です。TypeScript が Compute Pass で dispatchWorkgroups() を命令すると、GPU が @compute の付いた関数を指定数だけ呼びます。各呼び出しには global_invocation_id が渡され、この例では粒子の担当番号として使います。

// 1 粒子が持つ、2D の位置と 1 回ごとの移動量
struct Particle {
  position: vec2f,
  velocity: vec2f,
};

// 全粒子を置いた Storage Buffer。GPU から読み書きできる
@group(0) @binding(0)
var<storage, read_write> particles: array<Particle>;

// @compute は、この関数を計算処理の入口として GPU へ示す
// 1 Workgroup につき 256 回 update を並列実行する
@compute @workgroup_size(256)
fn update(@builtin(global_invocation_id) id: vec3u) {
  // id.x は、この処理が担当する粒子の番号
  // 粒子数を超えた余分な処理は、Buffer を読まずに終了する
  if (id.x >= arrayLength(&particles)) { return; }
  // 現在位置へ速度を足し、次のフレームの位置へ更新する
  particles[id.x].position += particles[id.x].velocity;
}