What's WebGPU 的新功能 (Chrome 適 129)

François Beaufort
François Beaufort
GitHub

支援 HDR，並提供畫布色調對應模式

網頁開發人員可用的 HDR 內容傳送選項有限，主要依賴 <img> 和 <video> 元素。不過，<canvas> 元素仍僅限於 SDR。在畫布中產生動態 HDR 內容時，必須先將內容編碼為 HDR 圖片，才能顯示 (如需範例，請參閱這項示範)。

WebGPU 畫布設定中的新 GPUCanvasToneMappingMode 參數現在可讓 WebGPU 繪製比白色 (#FFFFFF) 更亮的顏色。方法如下：

  • "standard"：預設行為會將內容限制在螢幕的 SDR 範圍內。這個模式的運作方式，是將螢幕色彩空間中的所有顏色值限制在 [0, 1] 間隔內。

  • "extended"：解鎖螢幕的完整 HDR 範圍。這個模式會比對畫面 [0, 1] 範圍內的 "standard"。系統會對螢幕的擴展動態範圍進行箝位或投影，但不會對 [0, 1] 進行這類作業。

下列程式碼片段顯示如何設定高動態範圍的畫布。

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

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

如要透過 WebGPU 探索 HDR，請查看「粒子 (HDR) 範例」和「WebGPU HDR 範例」，並參閱 chromestatus 項目。

筆記型電腦的 HDR 螢幕上顯示色彩鮮明的圖片。
在 HDR 螢幕上顯示的 Particles (HDR) 範例。

擴大支援子群組

繼子群組實驗公告後，子群組內建函式現已可在運算著色器和片段著色器中使用。不再僅限於運算著色器。請參閱問題 354738715。

請注意，subgroup_size 內建值目前在片段著色器中有錯誤。請暫時避免使用。

此外，還新增了下列子群組內建函式：

  • subgroupAdd(value)：傳回子群組中所有有效調用 value 的總和。
  • subgroupExclusiveAdd(value)：傳回子群組中所有有效調用 value 的專屬掃描總和。
  • subgroupMul(value)：傳回子群組中所有有效調用 value 的乘積。
  • subgroupExclusiveMul(value)：傳回子群組中所有有效調用的專屬掃描乘法 value。

  • subgroupAnd(value)：傳回子群組中所有有效調用的二進位 AND value。
  • subgroupOr(value)：傳回子群組中所有有效調用的二進位 OR value。
  • subgroupXor(value)：傳回子群組中所有有效調用的二進位 XOR value。

  • subgroupMin(value)：傳回子群組中所有有效調用 value 的最小值。
  • subgroupMax(value)：傳回子群組中所有有效叫用 value 的最大值。

  • subgroupAll(value)：如果子群組中所有有效呼叫的 value 都是 true，則傳回 true。
  • subgroupAny(value)：如果子群組中任何有效叫用的 value 為 true，則傳回 true。

  • subgroupElect()：如果這個呼叫在子群組的有效呼叫中具有最低的 subgroup_invocation_id，則傳回 true。
  • subgroupBroadcastFirst(value)：將子群組中 subgroup_invocation_id 最低的有效叫用項目中的 value 廣播至所有其他有效叫用項目。

  • subgroupShuffle(value, id)：從 subgroup_invocation_id 與 id 相符的有效叫用項目中傳回 value。
  • subgroupShuffleXor(value, mask)：從 subgroup_invocation_id 與 subgroup_invocation_id ^ mask 相符的有效叫用項目中傳回 value。mask 必須是動態一致。
  • subgroupShuffleUp(value, delta)：從 subgroup_invocation_id 與 subgroup_invocation_id - delta 相符的有效叫用項目中傳回 value。
  • subgroupShuffleDown(value, delta)：從 subgroup_invocation_id 與 subgroup_invocation_id + delta 相符的有效叫用中傳回 value。

  • quadBroadcast(value, id)：從 ID 等於 id 的四次呼叫中，廣播 value。id 必須是常數運算式。
  • quadSwapX(value)：在 X 方向的四邊形中，在呼叫之間交換 value。
  • quadSwapY(value)：在 Y 方向的四邊形中，於呼叫之間交換 value。
  • quadSwapDiagonal(value)：在四邊形中，於調用之間對角交換 value。

黎明更新

wgpu::PrimitiveState 結構體現在直接包含深度剪輯控制設定，因此不需要另外的 wgpu::PrimitiveDepthClipControl 結構體。詳情請參閱下列程式碼片段和 webgpu-headers PR。

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

這僅涵蓋部分重點。請參閱完整的提交清單。

WebGPU 最新消息

「WebGPU 最新消息」系列涵蓋的所有主題清單。

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