このページは Cloud Translation API によって翻訳されました。

WebGPU の新機能（Chrome 113）

François Beaufort

長年の開発を経て、Chrome チームは、WebGPU の最初のリリースが ChromeOS、macOS、Windows 版 Chrome でデフォルトで利用可能になったことを発表しました。詳しくは、Chrome に WebGPU を搭載をご覧ください。

MDN に WebGPU の包括的なドキュメントも追加しました。

その他

`importExternalTexture()` で WebCodecs `VideoFrame` ソースを使用する

WebGPU は、HTMLVideoElement～importExternalTexture() の不透明な「外部テクスチャ」オブジェクトを作成する API を公開します。これらのオブジェクトを使用すると、ソース YUV データから直接コピーなしで、動画フレームを効率的にサンプリングできます。

ただし、最初の WebGPU 仕様では、WebCodecs の VideoFrame オブジェクトから GPUExternalTexture オブジェクトを作成することはできません。この機能は、すでに WebCodecs を使用しており、WebGPU を動画処理パイプラインに統合する高度な動画処理アプリにとって重要です。現在、gpuweb/gpuweb#1380 の問題について議論中です。

機能を有効にする

この機能はデフォルトでは Chrome で有効になっていませんが、機能を明示的に有効にすることで、Chrome 113 でテストできます。ローカルで有効にするには、chrome://flags/#enable-webgpu-developer-features で「WebGPU デベロッパー機能」フラグを有効にします。

アプリのすべての訪問者にこの機能を有効にするため、現在オリジントライアルが実施されており、Chrome 118（2023 年 12 月 8 日）に終了する予定です。トライアルに参加するには、登録して、オリジントライアルトークンを含むメタ要素を HTML または HTTP ヘッダーのいずれかに含めます。詳細については、オリジントライアルの開始に関する投稿をご覧ください。

サンプルコード

// Access the GPU device.
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Create VideoFrame from HTMLVideoElement.
const video = document.querySelector("video");
const videoFrame = new VideoFrame(video);

const texture = device.importExternalTexture({ source: videoFrame });
// TODO: Use texture in bind group creation.

WebCodecs を使用した動画アップロードの試験運用版サンプルを試してみてください。