本頁面由 Cloud Translation API 翻譯而成。

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

François Beaufort

使用畫布色調對應模式支援 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" },
});

查看 Particles (HDR) 範例和 WebGPU 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)：傳回子群組中所有有效叫用 value 的二進位 AND 運算結果。
subgroupOr(value)：傳回子群組中所有有效叫用 value 的二進位 OR。
subgroupXor(value)：傳回子群組中所有有效叫用 value 的二進位 XOR。
subgroupMin(value)：傳回子群組中所有有效叫用 value 的最低值。
subgroupMax(value)：傳回子群組中所有有效叫用 value 的最大值。
subgroupAll(value)：如果子群組中的所有有效叫用皆為 value，則傳回 true。
subgroupAny(value)：如果子群組中任何有效的叫用對應到 value，則會傳回 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;

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

使用畫布色調對應模式支援 HDR

擴大子群組支援

黎明更新

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