What's WebGPU 的新功能 (Chrometain131)

François Beaufort

在 WGSL 中裁剪距離

您可以使用邊點階段的輸出內容，透過使用者定義的半空間限制基本圖形的裁剪音量。定義您自己的裁剪平面，可進一步控管 WebGPU 場景中顯示的內容。這項技術特別適用於 CAD 軟體等應用程式，因為在這些應用程式中，精確控制視覺效果至關重要。

當 GPUAdapter 提供 "clip-distances" 功能時，請要求具有此功能的 GPUDevice，以便在 WGSL 中取得裁剪距離支援功能，並使用 enable clip_distances; 在 WGSL 程式碼中明確啟用此擴充功能。啟用後，您就可以在頂點著色器中使用 clip_distances 內建陣列。這個陣列會保留與使用者定義的裁剪平面距離：

• 邊界距離為 0 表示頂點位於平面上。
• 正距離表示頂點位於剪輯半空間內 (您要保留的側邊)。
• 負距離表示頂點位於剪輯半空間 (您要捨棄的側邊) 之外。

請參閱以下程式碼片段、chromestatus 項目和問題 358408571。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("clip-distances")) {
  throw new Error("Clip distances support is not available");
}
// Explicitly request clip distances support.
const device = await adapter.requestDevice({
  requiredFeatures: ["clip-distances"],
});

const vertexShaderModule = device.createShaderModule({ code: `
  enable clip_distances;

  struct VertexOut {
    @builtin(clip_distances) my_clip_distances : array<f32, 1>,
    @builtin(position) my_position : vec4f,
  }
  @vertex fn main() -> VertexOut {
    var output : VertexOut;
    output.my_clip_distances[0] = 1;
    output.my_position = vec4f(0, 0, 0, 1);
    return output;
  }
`,
});

// Send the appropriate commands to the GPU...

GPUCanvasContext getConfiguration()

使用設定字典呼叫 GPUCanvasContext configure() 後，您可以使用 GPUCanvasContext getConfiguration() 方法檢查畫布內容設定。包括 device、format、usage、viewFormats、colorSpace、toneMapping 和 alphaMode 成員。這項功能可用於檢查瀏覽器是否支援 HDR 畫布，如 粒子 (HDR) 範例所示。請參閱以下程式碼片段、chromestatus 項目和問題 370109829。

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

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

// Configure the canvas for HDR.
context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

const configuration = context.getConfiguration();
if (configuration.toneMapping.mode === "extended") {
  // The browser supports HDR canvas.
  // Warning! The user still needs a HDR display to enjoy HDR content.
}

點和線圖元不得有深度偏差

如先前所宣布，WebGPU 規格現在會在轉譯管線的拓樸為線條或點類型時，將 depthBias、depthBiasSlopeScale 和 depthBiasClamp 設為非零值，並產生驗證錯誤。請參閱問題 352567424。

針對子群組的內建函式納入掃描功能

在子群組實驗中，我們已在 問題 361330160 中新增下列子群組內建函式：

• subgroupInclusiveAdd(value)：傳回子群組中所有有效叫用 value 的總和。
• subgroupInclusiveMul(value)：傳回子群組中所有有效叫用 value 的包函掃描乘積。

實驗性支援多重繪製間接功能

多重繪製間接 GPU 功能可讓您透過單一 GPU 指令發出多個繪製呼叫。在需要大量算繪物件 (例如粒子系統、例項化和大型場景) 的情況下，這項功能就特別實用。drawIndirect() 和 drawIndexedIndirect() GPURenderPassEncoder 方法只能從 GPU 緩衝區的特定區域一次發出一個繪圖呼叫。

在這項實驗功能標準化之前，請在 chrome://flags/#enable-unsafe-webgpu 中啟用「Unsafe WebGPU Support」標記，讓這項功能在 Chrome 中提供。

使用 GPUAdapter 提供的 "chromium-experimental-multi-draw-indirect" 非標準 GPU 功能，要求具有此功能的 GPUDevice。然後使用 GPUBufferUsage.INDIRECT 用法建立 GPUBuffer，以便儲存繪圖呼叫。您稍後可以在新的 multiDrawIndirect() 和 multiDrawIndexedIndirect() GPURenderPassEncoder 方法中使用此值，在轉譯通道內發出繪圖呼叫。請參閱以下程式碼片段和 問題 356461286。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("chromium-experimental-multi-draw-indirect")) {
  throw new Error("Experimental multi-draw indirect support is not available");
}
// Explicitly request experimental multi-draw indirect support.
const device = await adapter.requestDevice({
  requiredFeatures: ["chromium-experimental-multi-draw-indirect"],
});

// Draw call have vertexCount, instanceCount, firstVertex, and firstInstance parameters.
const drawData = new Uint32Array([
  3, 1, 0, 0, // First draw call
  3, 1, 3, 0, // Second draw call
]);
// Create a buffer to store the draw calls.
const drawBuffer = device.createBuffer({
  size: drawData.byteLength,
  usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(drawBuffer, 0, drawData);

// Create a render pipeline, a vertex buffer, and a render pass encoder...

// Inside a render pass, issue the draw calls.
myPassEncoder.setPipeline(myPipeline);
myPassEncoder.setVertexBuffer(0, myVertexBuffer);
myPassEncoder.multiDrawIndirect(drawBuffer, /*offset=*/ 0, /*maxDrawCount=*/ 2);
myPassEncoder.end();

著色器模組編譯選項：嚴格數學

我們已在 GPUShaderModuleDescriptor 中新增布林值 strictMath 開發人員選項，讓您在著色器模組編譯期間啟用或停用嚴格數學。這項功能位於 chrome://flags/#enable-webgpu-developer-features 的「WebGPU 開發人員功能」旗標後方，也就是說，這項功能僅供開發期間使用。請參閱問題 42241455。

目前 Metal 和 Direct3D 支援此選項。停用嚴格數學後，編譯器可能會透過以下方式最佳化著色器：

• 忽略 NaN 和 Infinity 值的可能性。
• 將 -0 視為 +0。
• 將除法替換為以相反數進行的快速乘法。
• 根據關聯和分配特性重新排列運算。

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

const code = `
  // Examines the bit pattern of the floating-point number to
  // determine if it represents a NaN according to the IEEE 754 standard.
  fn isNan(x : f32) -> bool {
    bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;
    bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;
    return ones_exp && non_zero_sig;
  }
  // ...
`;

// Enable strict math during shader compilation.
const shaderModule = device.createShaderModule({ code, strictMath: true });

移除 GPUAdapter requestAdapterInfo()

您可以使用 GPUAdapter info 屬性同步取得 GPUAdapterInfo，因此 GPUAdapter requestAdapterInfo() 非同步方法已不必要。因此，非標準的 GPUAdapter requestAdapterInfo() 方法現已移除。請參閱移除意圖。

黎明更新

tint_benchmark 可執行檔會評估將著色器從 WGSL 翻譯為各個後端語言的成本。如要進一步瞭解這項功能，請參閱新的說明文件。

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

WebGPU 新功能

以下是「WebGPU 最新消息」系列文章中涵蓋的所有內容。

Chrome 131

• WGSL 中的裁剪距離
• GPUCanvasContext getConfiguration()
• 點和線圖元不得有深度偏差
• 針對子群組的內建包容性掃描函式
• 實驗性支援多重繪製間接功能
• 著色器模組編譯選項嚴格數學
• 移除 GPUAdapter requestAdapterInfo()
• Dawn 更新

Chrome 130

• 雙重來源混合
• Metal 上的著色器編譯時間改善
• GPUAdapter requestAdapterInfo() 已淘汰
• Dawn 更新

Chrome 129

• 支援 HDR 和畫布色調對應模式
• 擴充子群組支援功能
• Dawn 更新

Chrome 128

• 嘗試使用子群組
• 已淘汰為線條和點設定深度偏差的功能
• 如果 preventDefault，則隱藏未擷取的錯誤開發人員工具警告
• WGSL 會先插補取樣，然後
• Dawn 更新

Chrome 127

• Android 上的 OpenGL ES 實驗性支援
• GPUAdapter 資訊屬性
• WebAssembly 互通性改善
• 改善指令編碼器錯誤
• Dawn 更新

Chrome 126

• 提高 maxTextureArrayLayers 限制
• 針對 Vulkan 後端最佳化的緩衝區上傳功能
• 著色器編譯時間改善
• 提交的指令緩衝區不得重複
• Dawn 更新

Chrome 125

• 子群組 (功能正在開發中)
• 算繪至 3D 紋理的切片
• Dawn 更新

Chrome 124

• 唯讀和讀寫儲存空間紋理
• 服務工作者和共用工作者支援
• 新轉接器資訊屬性
• 修正錯誤
• Dawn 更新

Chrome 123

• WGSL 支援 DP4a 內建函式
• WGSL 中的無限制指標參數
• WGSL 中用於解參照複合函式的語法糖果
• 為模板和深度層面提供不同的唯讀狀態
• Dawn 更新

Chrome 122

• 使用相容性模式擴大觸及範圍 (功能仍在開發中)
• 提高 maxVertexAttributes 上限
• Dawn 更新

Chrome 121

• 支援 Android 上的 WebGPU
• 在 Windows 上使用 DXC 而非 FXC 進行著色器編譯
• 在運算和算繪階段中執行時間戳記查詢
• 著色器模組的預設進入點
• 支援以顯示器-p3 做為 GPUExternalTexture 色彩空間
• 記憶體堆積資訊
• Dawn 更新

Chrome 120

• 支援 WGSL 中的 16 位元浮點值
• 挑戰極限
• 深度-底紋狀態的變更
• 轉接器資訊更新
• 時間戳記查詢量化
• 春季大掃除功能

Chrome 119

• 可篩選的 32 位元浮點紋理
• unorm10-10-10-2 頂點格式
• rgb10a2uint 紋理格式
• Dawn 更新

Chrome 118

• copyExternalImageToTexture() 中的 HTMLImageElement 和 ImageData 支援
• 支援讀寫和唯讀儲存空間紋理
• Dawn 更新

Chrome 117

• Unset 頂點緩衝區
• 取消設定繫結群組
• 在裝置遺失時，靜默處理非同步管道建立作業的錯誤
• SPIR-V 著色器模組建立功能更新
• 改善開發人員體驗
• 使用自動產生的版面配置快取管道
• Dawn 更新

Chrome 116

• WebCodecs 整合
• GPUAdapter requestDevice() 傳回的遺失裝置
• 如果呼叫 importExternalTexture()，請保持影片播放流暢
• 規格相容性
• 改善開發人員體驗
• Dawn 更新

Chrome 115

• 支援的 WGSL 語言擴充功能
• Direct3D 11 的實驗性支援
• 在 AC 電源下預設取得獨立 GPU
• 改善開發人員體驗
• Dawn 更新

Chrome 114

• 最佳化 JavaScript
• 在未設定的畫布上執行 getCurrentTexture() 會擲回 InvalidStateError
• WGSL 更新
• Dawn 更新

Chrome 113

• 在 importExternalTexture() 中使用 WebCodecs VideoFrame 來源