Test00

Mon, 01 Jan 0001 00:00:00 +0000

学習用にAgentCodingで生成したデモです

WebGPUの初期化と、最小限の描画パイプラインを確認する。下のボタンでGPUを取得し、WGSLの頂点シェーダーとフラグメントシェーダーで三角形を描画します。

描画は一度だけ実行します。未対応や初期化失敗の場合は、状態欄に理由を表示します。

コードの解説

以下は実装の抜粋です。DirectX 12との対応は役割の比較であり、APIの一対一対応ではありません。全文は末尾の「ソース」から確認できます。

HTMLの描画先とモジュール

<canvas id="gpu-canvas" width="960" height="540" ...></canvas>
<script type="module" src=".../main.js"></script>

canvasはHTML内の描画領域です。widthとheightは内部の描画解像度で、CSSの表示サイズとは別です。ウィンドウと表示サーフェスを用意する役割に近いものです。

type="module"でJavaScriptをモジュールとして読み込みます。このコードはブラウザのCPU側で動き、WGSLだけがGPUで実行されます。...は抜粋のための省略です。

HTML要素の取得とクリック処理

const button = document.querySelector('#gpu-start');
const canvas = document.querySelector('#gpu-canvas');
button.addEventListener('click', async () => {

documentはブラウザが用意するHTML文書のオブジェクトです。querySelectorはCSSセレクターで要素を探し、#はidを指定します。取得したbuttonへクリックのコールバックを登録します。

async関数内のawaitは非同期処理の結果を待ちます。UIスレッドを同期的にブロックする待ちではなく、処理を中断して結果が届いたら続きを実行します。

アダプターとデバイス

if (!navigator.gpu) throw new Error('このブラウザ環境ではWebGPUを利用できません');
const adapter = await navigator.gpu.requestAdapter();
const currentDevice = await adapter.requestDevice();

navigator.gpuはブラウザ組み込みのWebGPU APIの入口です。役割として、アダプター取得とD3D12デバイス作成に近い順序です。実装ではadapterがnullの場合も確認しています。deviceからリソースやパイプラインを作ります。

Canvasを表示先として設定

context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format, alphaMode: 'opaque' });

CanvasのWebGPUコンテキストを取得し、デバイスと表示用フォーマットを関連付けます。swap chainの設定に近い役割ですが、DXGIのswap chainを直接操作するものではありません。opaqueはCanvasの表示を不透明として扱う指定です。

WGSLファイルの取得

const shaderResponse = await fetch(new URL('./triangle.wgsl', import.meta.url));
const shader = device.createShaderModule({ code: await shaderResponse.text() });

fetchはURLからファイルを取得するブラウザAPIです。import.meta.urlは実行中のmain.jsのURLなので、そこを基準に同じフォルダのWGSLを解決します。OSのファイルパスを開いているわけではありません。

Test01

Mon, 01 Jan 0001 00:00:00 +0000

学習用にAgentCodingで生成したデモです

Uniform BufferでCPU側から角度を渡し、頂点シェーダーで三角形を回転させる。初期化から描画まで、このTest内で独立して実装します。

操作

「開始」でGPUを初期化して回転を開始します。「停止」で回転を止めます。停止中でも角度スライダーで描画を更新できます。「再開」でその角度から回転を再開します。回転速度は毎秒45度です。別タブへ移ると自動で停止します。

コードの解説

Test00で説明したデバイス・Canvas・Shader Module・基本のDraw処理は省略し、追加した部分を抜粋します。実装自体はTest00のコードを参照せず、このTestだけで完結しています。

HTMLの角度入力

<input id="gpu-angle" type="range" min="0" max="360" step="1" value="0" disabled>

ブラウザ標準のスライダーです。0～360度を1度刻みで入力します。初期化成功後にdisabledを解除します。HTMLの入力値は文字列なので、JavaScriptで数値へ変換します。

slider.addEventListener('input', () => {
 angle = Number(slider.value);

inputは値を変更している途中にも届くイベントです。停止中もこのイベントからdrawを1回呼び、CPU→GPUの値の更新を確認できます。

CPU側のデータとGPUBuffer

const uniformData = new Float32Array(4);
uniformBuffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });

Float32Arrayは32ビットfloatを連続配置するJavaScriptのTyped Arrayです。GPU用のメモリそのものではなく、CPU側の転送元です。4要素・16バイトを確保します。GPUBufferにはuniform用途と書き込み先用途を指定します。

WGSLの定数バッファ

struct Uniforms {
 rotation: vec4f,
};
@group(0) @binding(0) var<uniform> uniforms: Uniforms;

HLSLのcbufferに近い宣言です。4成分の内容は角度・アスペクト比・未使用・未使用です。group/bindingはWebGPUのバインド番号で、HLSLのregisterやspaceの番号へ直接対応するわけではありません。

リソースのレイアウト

binding: 0, visibility: GPUShaderStage.VERTEX,
buffer: { type: 'uniform', minBindingSize: 16 },

createBindGroupLayoutのentryです。binding 0がuniform bufferで、頂点ステージから読み、少なくとも16バイトを必要とする契約を定義します。Root Signatureでリソースの種類・位置・Shader Visibilityを記述する役割に近いものです。

入門 on ながむしメモ

Test00

コードの解説

HTMLの描画先とモジュール

HTML要素の取得とクリック処理

アダプターとデバイス

Canvasを表示先として設定

WGSLファイルの取得

Test01

操作

コードの解説

HTMLの角度入力

CPU側のデータとGPUBuffer

WGSLの定数バッファ

リソースのレイアウト