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

François Beaufort
François Beaufort
GitHub

整合 WebCodecs

WebGPU 會公開 API，以便從 HTMLVideoElement 透過 importExternalTexture() 建立不透明的「外部紋理」物件。您可以運用這些物件有效率地取樣視訊影格，直接從來源 YUV 色彩模型資料取樣，可能完全不需要複製。

不過，初始 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 拒絕的 Promise。請參閱問題 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 控制台會立即顯示緩衝區驗證錯誤訊息，開發人員不必將指令傳送至佇列。請參閱 change chromium:4597950。

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

黎明更新

「偵錯」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 155-156

Chrome 153-154

Chrome 151-152

Chrome 149-150

Chrome 147-148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

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