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 info 屬性同步取得 GPUAdapterInfo,因此 GPUAdapter requestAdapterInfo() 非同步方法已不必要。因此,非標準 GPU Adapter requestAdapterInfo() 方法現已移除。請參閱意圖移除

黎明更新

tint_benchmark 可執行檔會評估將著色器從 WGSL 翻譯成各個後端語言的成本。詳情請參閱新的說明文件

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

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