このページは 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 オブジェクトを作成することはできません。この機能は、すでに WebCodec を使用していて、動画処理パイプラインに 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 を使用した動画アップロードの試験運用版サンプルを試してみてください。