はじめての「WebGPU」で背景色を塗りつぶしてみよう

真っ黒な背景色で塗りつぶしてみよう

<canvas>タグが3Dを描画する矩形です。その背景色を黒色に設定すると、図3のように<canvas>タグ全体が真っ黒になります。次のサンプルコード「lib」→「UltraMotion3D.js」のように、背景色は色テクスチャに塗ります。それを<canvas>タグのビューに描いているわけです。

さらに、ポリゴンの前後関係を決める「Zバッファ」もデプステクスチャで作成します。Zバッファとはポリゴンの頂点を囲んでマテリアルを1ピクセルずつ塗っていくとき、そのピクセルの奥行き(Z座標)が以前に描いた他のポリゴンのピクセルより手前にあればZ座標を上書きしてピクセルを塗るものです。その値の型が'depth24plus'という深度24bitなわけです。Zバッファがないと奥のポリゴンが手前に描画されるなど、おかしな描画になったりします。

図3：真っ黒な<canvas>タグ

var _passEncoder = null;

async function initWebGPU(canvas) {
  if (!navigator.gpu) {
    throw Error('WebGPU not supported.');
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error('Could not request WebGPU adapter.');
  }
  _device = await adapter.requestDevice();
  _canvas = document.getElementById(canvas);
  _context = _canvas.getContext('webgpu');
  _presentationFormat = navigator.gpu.getPreferredCanvasFormat();
  _context.configure({
    device: _device,
    format: _presentationFormat,
    alphaMode: 'premultiplied',
  });
  resize();
  everyFrame();
}

function everyFrame() {
  _commandEncoder = _device.createCommandEncoder();
  const textureView = _context.getCurrentTexture().createView();
  _renderPassDescriptor = {
    colorAttachments: [
      {
        view: textureView,
        clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
        loadOp: 'clear',
        storeOp: 'store',
      },
    ],
    depthStencilAttachment: {
      view: _depthTexture.createView(),
      depthClearValue: 1.0,
      depthLoadOp: 'clear',
      depthStoreOp: 'store',
    },
  };
  _passEncoder = _commandEncoder.beginRenderPass(_renderPassDescriptor);
  _passEncoder.end();
  _device.queue.submit([_commandEncoder.finish()]);
}

function resize() {
  _depthTexture = _device.createTexture({
    size: [_canvas.width, _canvas.height],
    format: 'depth24plus',
    usage: GPUTextureUsage.RENDER_ATTACHMENT,
  });
}

【サンプルコードの解説】
「everyFrame」関数は毎フレーム呼ばれるためこのような名前を付けましたが、今回はまだ最初の1回しか呼ばれません。
GPUに送る命令形式に変換するコマンドエンコーダーを作成して「_commandEncoder」変数に代入します。
テクスチャを作成し「textureView」変数に代入します。
レンダリングの通過を記述する「_renderPassDescriptor」変数を色を塗る色テクスチャとZバッファのデプステクスチャで作成します。色テクスチャもデプステクスチャも単なるテクスチャデータです。
「beginRenderPass」メソッドでレンダリングの通過を開始します。
「end」メソッドでレンダリングの通過を終了します。つまり最初に背景を塗りつぶした他にはポリゴンなどジオメトリを何も描画していません。
デバイスのキュー(列)に「submit」メソッドで1コマが終了したコマンドエンコーダーを登録します。
「resize」関数でキャンバスと同じ幅と高さの、Zバッファ用のテクスチャを深度24bitで作成します。

おわりに

今回は、WebGPUの導入として<canvas>タグの背景色を真っ黒に塗りつぶしてみました。塗りつぶす以外には何も描画していません。そこで次回は、シェーダーを使って三角形を1個だけ描画するための実装を解説します。