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 引數為選用引數。請參閱 change chromium:4613967。

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

使用 createSampler() 取樣紋理時，預設的細節層級上限 (lodMaxClamp) 為 32。請參閱 變更 chromium:4608063。

改善開發人員使用體驗

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

當 getMappedRange() 失敗時，開發人員不必將指令傳送至佇列，開發人員工具 JavaScript 主控台就會立即顯示緩衝區驗證錯誤訊息。請參閱 change 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() 方法，並為 Swapchain 紋理的其他用途提供額外支援，以便在副本中使用傳回的 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