What's WebGPU 的新功能 (Chrometain131)

François Beaufort
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() 方法檢查畫布內容設定。包括 deviceformatusageviewFormatscolorSpacetoneMappingalphaMode 成員。這項功能有助於執行各種工作,例如檢查瀏覽器是否支援 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 規格現在會將 depthBiasdepthBiasSlopeScaledepthBiasClamp 設為非零值,當算繪管道的拓撲為線條或點類型時,就會發生驗證錯誤。請參閱問題 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 requestAdapterInfo() 非同步方法是多餘的,因為您可以使用 GPUAdapter info 屬性,以同步方式取得 GPUAdapterInfo。因此,非標準的 GPUAdapter requestAdapterInfo() 方法現已移除。請參閱移除意圖

黎明更新

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

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

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