WebGPU の新機能（Chrome 113）

François Beaufort

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

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

他にもあります。

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

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

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

機能を有効にする

デフォルトでは、この機能は Chrome で有効になっていませんが、機能を明示的に有効にすることで Chrome 113 で試すことができます。chrome://flags/#enable-webgpu-developer-features で "WebGPU Developer Features" [flag] を有効にすると、ローカルで有効にできます。

アプリのすべての訪問者に対して有効にするため、現在オリジントライアルが実施されており、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 を使用した動画のアップロードの試験運用版サンプルをご覧ください。