WebGPU の新機能(Chrome 116)

François Beaufort
François Beaufort

WebCodecs の統合

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

ただし、最初の WebGPU 仕様では、WebCodecs の VideoFrame オブジェクトから GPUExternalTexture オブジェクトを作成できませんでした。この機能は、すでに WebCodec を使用していて、動画処理パイプラインに WebGPU を統合したいと考えている高度な動画処理アプリで重要です。WebCodecs の統合により、GPUExternalTexture 呼び出しと copyExternalImageToTexture() 呼び出しのソースとして VideoFrame を使用するためのサポートが追加されました。次の例と chromestatus エントリをご覧ください。

// 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);

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

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

GPUAdapter requestDevice() によって返されたデバイスが見つかりません

GPUAdapterrequestDevice() メソッドが、すでに GPUDevice の作成に使用されているために失敗した場合、null で拒否するプロミスを返すのではなく、すぐに失われたとマークされた GPUDevice を返すようになりました。issue chromium:1234617 をご覧ください。

const adapter = await navigator.gpu.requestAdapter();
const device1 = await adapter.requestDevice();

// New! The promise is not rejected anymore with null.
const device2 = await adapter.requestDevice();
// And the device is immediately marked as lost.
const info = await device2.lost;

importExternalTexture() が呼び出された場合に動画再生をスムーズに維持

HTMLVideoElementimportExternalTexture() が呼び出されると、動画がビューポートに表示されていないときに、関連する動画の再生がスロットリングされなくなります。問題 chromium:1425252 をご覧ください。

仕様の適合性

GPUPipelineError() コンストラクタの message 引数は省略可能です。変更 chromium:4613967 をご覧ください。

WGSL ソース code\0 が含まれている場合、createShaderModule() を呼び出すときにエラーが発生します。問題 dawn:1345 をご覧ください。

createSampler() でテクスチャをサンプリングするときに使用されるデフォルトの最大詳細レベル(lodMaxClamp)は 32 です。変更 chromium:4608063 をご覧ください。

デベロッパー エクスペリエンスの向上

サポートされていないプラットフォームで WebGPU を使用している場合、デベロッパーに注意を促すメッセージが DevTools JavaScript コンソールに表示されます。chromium:4589369 の変更をご覧ください。

getMappedRange() が失敗した場合、デベロッパーがコマンドをキューに送信することなく、バッファ検証のエラー メッセージが DevTools JavaScript コンソールに即座に表示されます。chromium:4597950 の変更をご覧ください。

バッファ検証のエラー メッセージが表示されている DevTools JavaScript コンソールのスクリーンショット。
DevTools JavaScript コンソールのバッファ検証のエラー メッセージ。

Dawn の更新

disallow_unsafe_apis デバッグ切り替えボタンの名前を allow_unsafe_apis に変更し、デフォルトで無効にしました。この切り替えボタンをオンにすると、API エントリ ポイントまたはまだ安全と見なされていないパラメータの組み合わせの検証エラーが抑制されます。これはデバッグに役立ちます。問題 dawn:1685 をご覧ください。

wgpu::ShaderModuleWGSLDescriptor の非推奨の source 属性は削除され、code に置き換えられました。変更 dawn:130321 をご覧ください。

不足していた wgpu::RenderBundle::SetLabel() メソッドを実装しました。変更 dawn:134502 をご覧ください。

アプリは、wgpu::RequestAdapterOptionsBackendType オプションを使用してアダプターを取得するときに、特定のバックエンドをリクエストできます。以下の例と 問題 dawn:1875 をご覧ください。

wgpu::RequestAdapterOptionsBackendType backendTypeOptions = {};
backendTypeOptions.backendType = wgpu::BackendType::D3D12;

wgpu::RequestAdapterOptions options = {};
options.nextInChain = &backendTypeOptions;

// Request D3D12 adapter.
myInstance.RequestAdapter(&options, myCallback, myUserData);

新しい SwapChain::GetCurrentTexture() メソッドが追加され、スワップチェーン テクスチャの使用方法が追加されました。これにより、戻り値 wgpu::Texture をコピーで使用できるようになりました。下記の例と問題 dawn:1551 をご覧ください。

wgpu::SwapChain swapchain = myDevice.CreateSwapChain(mySurface, &myDesc);
swapchain.GetCurrentTexture();
swapchain.Present();

以下に、主なハイライトをいくつかご紹介します。コミットの一覧(すべて網羅)をご覧ください。

WebGPU の新機能

WebGPU の新機能シリーズで取り上げられたすべての内容のリスト。

Chrome 130

Chrome 129

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