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

WebGPU の新機能（Chrome 113）

François Beaufort

長年の開発を経て、Chrome チームは、ChromeOS、macOS、Windows 版 Chrome で WebGPU の初回リリースがデフォルトで利用可能になったことを発表しました。詳しくは、Chrome ships 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 を使用した動画のアップロードの試験運用版サンプルで試してみてください。