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)：傳回子群組中所有有效叫用 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;

這份文件僅涵蓋部分重點。請查看完整的修訂版本清單。

WebGPU 新功能

以下是「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