WebGPU導入ガイド: 環境設定と基本構成

WebGPU導入前の環境確認と基本設定

WebGPUを活用するには、開発環境の準備が不可欠です。特にセキュリティ上の制限により、COOP/COEPヘッダの正しく設定がないと実行できない場合があります。また2023年のブラウザ対応状況も確認しておく必要があります。

COOP/COEPヘッダの設定手順

WebGPUは安全性を確保するため、Cross-Origin-Opener-Policy (COOP) と Cross-Origin-Embedder-Policy (COEP) のヘッダが必要です。これらを正しく設定しないと、セキュリティ制限によりWebGPUが動かなくなる可能性があります。

以下に設定方法を記載します：

1. サーバーコンフィギュレーションでCross-Origin-Opener-Policy: same-originを指定
2. Cross-Origin-Embedder-Policy: require-corpを追加
3. ブラウザ側でPermissions-Policy: webgpu=(self)を有効化

注意：COOP/COEPの設定は、ローカル開発環境でも必要です。http-serverやlive-serverなどのツールではデフォルトで対応していないため、手動でヘッダを設定してください。

最新ブラウザ対応状況チェック

2023年の現時点では、以下が主なWebGPU対応ブラウザです：

テスト環境は、ChromeかEdgeが最も安定しています。Safariではまだ一部のシェーダー機能が未実装のため、開発初期段階には避けたほうが良い場合もあります。

Vite+TypeScript環境でWebGPUプロジェクトを構築

ViteとTypeScriptを使ってWebGPUプロジェクトを作成するには、以下のような手順が必要です。特にTypeScript宣言ファイルの導入が重要です。

vite.config.tsの設定例

vite.config.tsに以下の内容を記述します：

また、package.jsonに以下の依存関係を追加します：

TypeScript宣言ファイルの準備

TypeScriptでWebGPUを使用するには、型定義ファイルを準備する必要があります。以下のようなwebgpu.d.tsを作成してください：

npm経由で導入する場合、以下を実行：

このファイルをプロジェクトルートに配置することで、IDEが型情報を認識できるようになります。

WebGPU APIのライフサイクルと基本構造

WebGPUのAPIは、Adapter → Device → CommandEncoder → RenderPipelineという流れで動作します。それぞれのステップでエラー処理を行うことが重要です。

AdapterとDeviceの取得フロー

1. AdapterFactoryからAdapterを取得：
   ts
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) throw new Error('WebGPU not supported');

2. Deviceの生成：
   ts
const device = await adapter.requestDevice();

3. CommandEncoderを作成：
   ts
const commandEncoder = device.createCommandEncoder();

CommandEncoderの使い方

CommandEncoderは、描画コマンドを収集するためのオブジェクトです。以下のように使用します：

1. RenderPassEncoderの作成：
   ts
const passEncoder = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
loadOp: 'clear',
clearValue: { r: 0, g: 0, b: 0, a: 1 },
storeOp: 'store'
}]
});

2. 頂点バッファの作成と描画：
   ts
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3, 1, 0, 0);

3. コマンドを実行：
   ts
device.queue.submit([commandEncoder.finish()]);

ポイント：CommandEncoderは一度に複数の描画コマンドをバッチ処理できるため、パフォーマンス向上に寄与します。

シェーダーの書き方と実際の描画処理

WebGPUで使用するシェーダー言語はWGSL（WebGPU Shading Language）です。基本構文を理解し、三角形描画サンプルを作成してみましょう。

WGSLの基本構文

WGSLはC++やGLSLに近い構文を持ちます。以下の例は頂点シェーダーとフラグメントシェーダーです：

キャンバスへの描画手順

以下は、三角形を描画するための全体的なフローです：

1. 頂点データを初期化：
   ts
const vertexData = new Float32Array([
0, 0,
-1, 1,
1, 1
]);

2. バッファの作成とアタッチメント設定：
   ts
const vertexBuffer = device.createBuffer({
size: vertexData.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
});
device.queue.writeBuffer(vertexBuffer, 0, vertexData.buffer, 0, vertexData.byteLength);

3. 描画パイプラインの作成と実行：
   ts
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {
module: device.createShaderModule({ code: vsCode }),
entryPoint: 'vs_main',
buffers: [{
arrayStride: 2 * 4,
attributes: [{
shaderLocation: 0,
offset: 0,
format: 'float32x2'
}]
}]
},
fragment: {
module: device.createShaderModule({ code: fsCode }),
entryPoint: 'fs_main',
targets: [{ format: context.format }]
}
});

Three.jsとWebGPUの連携実装例

Three.jsで作成したシーンをWebGPUに対応させるには、RendererとMaterialの置き換えが鍵となります。

既存プロジェクトへのWebGPU移行

Three.jsのWebGLRendererはWebGPU対応していないため、以下のように置き換えます：

1. WebGPU Rendererの導入：
   ts
import { WebGLRenderer } from 'three';
// ⇒
import { WebGPURenderer } from '@threedotjs/webgpu-renderer'; // 仮想パッケージとして記載（現状では非公式）

2. Materialタイプの変更：
   ShaderMaterialやMeshStandardMaterialはWebGPU対応版に置き換える必要があります。

シーン描画のカスタマイズ方法

Three.jsのSceneをWebGPUで描画するには、以下の手順が必要です：

1. WebGPURendererの初期化：
   ts
const renderer = new WebGPURenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. MaterialのWebGPU版に変更：
   ts
const material = new WebGPUMeshStandardMaterial({ color: 0xff0000 });

3. 描画ループの実装：
   ts
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();

即時実践！サンプルコードの確認と実行

以下は、記事内で紹介したすべてのコードを含む実行可能なプロジェクトです。

コピー＆ペースト可能なコードブロック

以下のコードをindex.htmlに貼り付け、ブラウザで開いてください：

ブラウザでの動作確認チェックリスト

よくあるエラー例：navigator.gpu is not definedは、ブラウザのWebGPUサポートがない場合に発生します。対応ブラウザで再実行してください。