What's WebGPU 新功能 (Chrome 116 以上版本)

François Beaufort
François Beaufort
GitHub

WebCodecs 整合

WebGPU 會公開 API，以便透過 HTMLVideoElement 和 importExternalTexture() 建立不透明的「外部紋理」物件。您可以使用這些物件，以有效率的方式取樣影片影格，甚至可以直接從來源 YUV 色彩模型資料，以 0 複製的方式取樣。

不過，最初的 WebGPU 規格不允許從 WebCodecs VideoFrame 物件建立 GPUExternalTexture 物件。對於已使用 WebCodecs 且想在影片處理管道中整合 WebGPU 的進階影片處理應用程式而言，這項功能非常重要。WebCodecs 整合功能新增了支援功能，可將 VideoFrame 用作 GPUExternalTexture 和 copyExternalImageToTexture() 呼叫的來源。請參閱以下範例和 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() 傳回的遺失裝置

如果 GPUAdapter 上的 requestDevice() 方法已用於建立 GPUDevice，則會立即標示為遺失的 GPUDevice 來完成，而不是傳回使用 null 拒絕的承諾。請參閱 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() 時，確保影片播放流暢

使用 HTMLVideoElement 呼叫 importExternalTexture() 時，當影片在可視區域中未顯示影片時，相關聯的影片播放就不會受到限制。請參閱 chromium 問題：1425252。

規格符合

GPUPipelineError() 建構函式中的 message 引數為選用引數。請參閱變更 chromium:4613967。

如果 WGSL 來源 code 包含 \0，會觸發 createShaderModule() 錯誤。請參閱問題 dawn:1345。

使用 createSampler() 對紋理取樣時，系統會使用的預設最高細節層級 (lodMaxClamp) 為 32。請參閱變更 chromium:4608063。

改善開發人員使用體驗

開發人員在未支援的平台上使用 WebGPU 時，開發人員工具 JavaScript 主控台會顯示訊息提醒。請參閱 change chromium:4589369。

如果 getMappedRange() 失敗，開發人員工具 JavaScript 控制台就會立即顯示緩衝區驗證錯誤訊息，而不必強制開發人員傳送指令至佇列。請參閱變更 chromium:4597950。

開發人員工具 JavaScript 控制台的螢幕截圖，顯示緩衝區驗證錯誤訊息。
開發人員工具 JavaScript 控制台中的緩衝區驗證錯誤訊息。

日出最新消息

disallow_unsafe_apis 偵錯切換鈕已重新命名為 allow_unsafe_apis，且預設為停用。這個切換鈕會抑制 API 進入點或尚未視為安全的參數組合中的驗證錯誤。偵錯功能非常實用。請參閱問題 dawn:1685。

wgpu::ShaderModuleWGSLDescriptor 淘汰的 source 屬性已移除，改用 code。請參閱 change 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 131

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