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] 範圍。螢幕的擴展動態範圍會經過箝位或投影，但 [0, 1] 不會。"standard"

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

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 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