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() 時觸發錯誤。請參閱問題發生時間:1345。

使用 createSampler() 取樣紋理時，系統預設使用的最大細節程度 (lodMaxClamp) 為 32。請參閱變更 chromium:4608063。

改善開發人員體驗

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

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

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

黎明更新

disallow_unsafe_apis 偵錯切換按鈕已重新命名為 allow_unsafe_apis，並預設為停用。這個切換按鈕會隱藏非安全 API 進入點或參數組合的驗證錯誤。因此很適合用於偵錯。請參閱問題發生時間:1685。

移除 wgpu::ShaderModuleWGSLDescriptor 已淘汰的 source 屬性，並改用 code。請參閱變更 dawn:130321。

已實作缺少的 wgpu::RenderBundle::SetLabel() 方法。請參閱變更 dawn:134502。

應用程式使用 wgpu::RequestAdapterOptionsBackendType 選項取得轉接程式時，可以要求特定後端。請參考以下範例和問題發生時間：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 可在副本中使用。請參考以下範例和問題發生時間：1551。

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

這僅涵蓋部分重點功能。查看完整的修訂版本清單。

WebGPU 的新功能

「WebGPU 新功能」系列中已說明的所有功能清單。

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