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

はじめに

図1のように、「WebGPU」はその名の通り「GPU(Graphics Processing Unit)」を使って3DのWebアプリを表示するライブラリです。GPUとはNVIDIA社やAMD社やIntel社のハードウェア(グラフィックボード、ビデオカード)のことで、3Dグラフィックスを描画するデバイス(装置)です。3Dグラフィックスに特化していますが、3Dグラフィックスをパース(遠近法)をかけずに真正面から見た2Dグラフィックスも表現できます。

グラフィックスに関して言えば、GPUは主にシェーダーを計算したりジオメトリ(ポリゴンやラインや頂点)を描画するだけのデバイスです。そこにWebGPUで三次元情報を渡したり、3D計算をしたりしてGPUで描画します。他にも、GPUは現在「汎用計算(GPGPU)」にも広く使われており、物理演算、AI学習、映像のエンコードやデコードなど、非グラフィックス用途でも活用されています。

図1：WebGPUとハードウェア(GPU装置)の関係

WebGPUを初期化する

WebGPUを初期化する前に、パソコンのGPUがWebGPUに対応しているかをプログラムから調べる必要があります。現在のところ「Google Chrome」でなければ、パソコンのGPUが対応していてもWebGPUを使うことはできません。WebGPUに対応している場合は、図1の「Adapter」を取得します。

「initWebGPU」関数に「async」が、「navigator.gpu.requestAdapter」に「await」が付いているのは非同期処理のためで、止まることなくプログラムの処理を実行させるためです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>UltraMotion3D</title>
  </head>
  <body onload='initWebGPU("CanvasAnimation");'>
    <canvas id="CanvasAnimation" width="1000" height="900"></canvas>

    <script>
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.');
  }
}
    </script>
  </body>
</html>

【サンプルコードの解説】
よくあるHTML5文書を書きます。
<body>タグのonloadでDOMが全て読み込まれたらinitWebGPU関数を呼び出します。
initWebGPU関数でハードウェアがWebGPUに対応していなければ(!navigator.gpu)エラーを吐いて終了します。
「navigator.gpu.requestAdapter」関数でアダプター(Adapter)を取得します。

UltraMotion3D.jsファイルに分けて
ライブラリ開発を始める

それでは、ここからは.jsファイルに分けてオリジナルのWebGPUラッパー「UltraMotion3D」ライブラリを作っていきます。アダプターでデバイス(GPU装置)を取得し、<canvas>タグを取得し、そのWebGPUコンテキスト(文脈)を取得し、選び出したキャンバスのフォーマットを取得し、それらを元にコンテキストをセットします。

Google Chromeで「index.html」を実行すると、真っ白なクライアントのウィンドウが表示されます。真っ白なのは、まだ何も描画処理を行っていないためです。

図2：何も起こっていない真っ白な画面

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>UltraMotion3D</title>
    <script src="lib/UltraMotion3D.js"></script>
  </head>
  <body onload='initWebGPU("CanvasAnimation");'>
    <canvas id="CanvasAnimation" width="1000" height="900"></canvas>
  </body>
</html>

【サンプルコードの解説】
<script>タグで"lib/UltraMotion3D.js"ファイルを読み込みます。
<canvas>タグのIDをCanvasAnimationにして、initWebGPUで引数で渡します。

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',
  });
}

【サンプルコードの解説】
initWebGPU関数でAdapterからデバイスを取得して、「_device」変数に代入します。
引数のIDの<canvas>タグを取得して「_canvas」変数に代入します。
キャンバスの'webgpu'コンテキストを取得して「_context」変数に代入します。
選び出されたキャンバスのフォーマットを「_presentationFormat」変数に代入します。
コンテキストのコンフィギュレーションに_device変数と_presentationFormat変数とアルファチャンネル(半透明)を渡してセットします。