Vercel、AI エージェントシェーダー用 TypeScript WebGPU ライブラリ「vgpu」を公開

Web チームにとって、シェーダーを本番環境にデプロイするのは依然として最も難しい課題の一つです。WebGPU はハードウェアを提供しますが、ピクセルが動く前にアダプター、バインドグループレイアウト、パイプライン記述子を直接扱う必要があります。Vercel は vercel.com 上でシェーダーを実装する際、このコストを内部で負担してきましたが、その成果物をオープンソース化しました。

vgpu は、.wgsl ファイルをインポート可能なモジュールとして扱い、単一の Gpu コンテキストを公開します。これにより、ブラウザのキャンバス上でもヘッドレスな Node.js 環境でも、CI のスナップショットテストでも、同じシェーダーを動作させることが可能になります。

デプロイは可能でしょうか？

はい、vgpu は MIT ライセンスで npm に公開されています。pnpm add vgpu と実行するだけで導入が完了します。これはホスト型サービスではなくライブラリなので、アカウント作成や利用枠の制限、推論コストといった負担は一切ありません。

コンテキストは一つ、隠されたグローバル状態はありません

init() はアダプターとデバイスを取得し、単一の Gpu ハンドルを返します。他のすべての機能はこのハンドルに紐付きます。README に記載されているブラウザでのクイックスタートはたった 4 行です。

const gpu = await init();
const surface = gpu.surface(canvas, { dpr: [1, 2] });
const wave = gpu.effect(WAVE_WGSL, { set: { speed: 2 } });
gpu.frame.loop(() => { wave.set({ time: gpu.time }); wave.draw(); });

surface はキャンバスをラップし、デバイスピクセル比を 1 から 2 の範囲に制限します。effect は WGSL をコンパイルしてフルスクリーンのエフェクトを作成し、uniforms は set() メソッドを通じて WGSL で定義された名前でアクセス可能です。フレーム処理は明示的です。パス、クリア、描画はすべて呼び出しとして行われ、暗黙的なシーングラフの状態に依存しません。

WGSL をモジュールシステムとして扱う

差別化要因はシェーダーツールリングです。.wgsl ファイルは TypeScript モジュールのようにインポート・エクスポートが可能で、vgpu がビルド時にモジュールグラフの解決、バインディングの反映、未使用宣言の削除、そしてコンパクトなシェーダーソースの出力を行います。これにより、通常はシェーダーと同期がずれてしまう手動記述のバインディング宣言を不要にします。README によると、フルスクリーンエフェクト全体で gzip 圧縮後 25 KB に収まり、CI で予算厳守が保証されています。

3 つのランタイム、1 つの API

パッケージは vgpu、vgpu/node、vgpu/mock、vgpu/scene、vgpu/client、vgpu/core のサブパスエクスポートを公開しています。Node 版は Dawn ベースでオフスクリーンレンダリングを行います。

Copy CodeCopiedUse a different Browser

const target = gpu.target({ size: [256, 256], format: "rgba8unorm" });

const pixels = await target.read();

これが CI レンダリングを現実的なものにする理由です。pixelmatch と pngjs は公開パッケージの直接依存関係であり、シェーダーをコンパイルし、ヘッドレスフレームをレンダリしてスナップショットと比較するという文書化されたワークフローと整合しています。モックアダプターは決定論的であり、GPU に一切アクセスしないテスト用に用意されています。

The Agent Surface

Vercel はこのライブラリを「エージェントファースト」と位置付けており、パッケージ構成もその方針に沿っています。パッケージには vgpu バイナリが含まれており、グローバルインストールなしで npx vgpu docs、npx vgpu examples、npx vgpu check を実行できます。

また、vgpu.sh では agents.md や llms.txt の公開、ドキュメントの完全エクスポートに加え、OpenAPI 3.1 仕様に準拠したトークン不要な例題発見 API も提供しています。ホストされた読み取り専用 MCP サーバーは vgpu.sh/api/mcp で利用可能で、@modelcontextprotocol/server は直接依存関係として含まれています。さらに、リポジトリ内にはインストール可能なエージェントスキルも用意されています。

主なポイント:

• Vercel が vercel.com でシェーダーを配信するために開発した WebGPU ライブラリ「vgpu」をオープンソース化しました。
• 1 つの API サーフェスが、ブラウザ内、Dawn を介したヘッドレス Node.js 環境、そして決定論的なモック環境で動作します。
• .wgsl ファイルは TypeScript モジュールのようにインポート・エクスポートでき、バインディングやレイアウトに関するリフレクション機能も備えています。
• フルスクリーン効果の完全実装が gzip 圧縮後 25 KB で提供されており、これは CI が強制する予算枠内です。
• MIT ライセンスで npm に v0.3.1 として公開されています。CLI、llms.txt、ホストされた読み取り専用 MCP エンドポイントも利用可能です。