WebGPU の新機能(Chrome 113)

François Beaufort
François Beaufort

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

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

その他

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

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

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

機能を有効にする

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

アプリ訪問者がこの機能を利用できるようにするため、現在オリジン トライアルが進行中であり、Chrome 118(2023 年 12 月 8 日)で終了する予定です。トライアルに参加するには、登録し、HTML ヘッダーまたは HTTP ヘッダーのいずれかにオリジン トライアル トークンを持つ meta 要素を含めます。詳しくは、オリジン トライアルのスタートガイドの投稿をご覧ください。

サンプルコード

// 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 を使用した動画のアップロードの試験運用版のサンプルをご覧ください。

WebGPU の新機能

WebGPU の新機能」シリーズに記載されている全内容のリスト。

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113