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 requestAdapterInfo()
非同步方法是多餘的,因為您可以使用 GPUAdapter info
屬性,以同步方式取得 GPUAdapterInfo。因此,非標準的 GPUAdapter requestAdapterInfo()
方法現已移除。請參閱移除意圖。
黎明更新
tint_benchmark
可執行檔會測量將著色器從 WGSL 翻譯成各後端語言的成本。如要進一步瞭解這項功能,請參閱新的說明文件。
這僅涵蓋部分重點。請參閱完整的提交清單。
WebGPU 最新消息
「WebGPU 最新消息」系列涵蓋的所有主題清單。
Chrome 140
- 裝置要求會耗用轉接程式
- 使用紋理檢視畫面時,可使用紋理的簡短形式
- WGSL textureSampleLevel 支援 1D 紋理
- 淘汰 bgra8unorm 唯讀儲存空間紋理用法
- 移除 GPUAdapter isFallbackAdapter 屬性
- Dawn 更新
Chrome 139
Chrome 138
Chrome 137
- 使用紋理檢視區塊進行 externalTexture 繫結
- 複製緩衝區,但不指定位移和大小
- WGSL 工作群組 UniformLoad,使用指標指向原子
- GPUAdapterInfo powerPreference 屬性
- 移除 GPURequestAdapterOptions compatibilityMode 屬性
- Dawn 更新
Chrome 136
Chrome 135
- 允許使用空值繫結群組版面配置建立管道版面配置
- 允許檢視區塊超出算繪目標的邊界
- 在 Android 上更輕鬆存取實驗性相容模式
- 移除 maxInterStageShaderComponents 限制
- Dawn 更新
Chrome 134
Chrome 133
- 額外的 unorm8x4-bgra 和 1 元件頂點格式
- 允許使用未定義的值要求不明限制
- WGSL 對齊規則變更
- 使用 discard 提升 WGSL 效能
- 針對外部紋理使用 VideoFrame displaySize
- 使用 copyExternalImageToTexture 處理方向非預設的圖片
- 提升開發人員體驗
- 使用 featureLevel 啟用相容模式
- 清除實驗性子群組功能
- 淘汰 maxInterStageShaderComponents 限制
- Dawn 更新
Chrome 132
- 紋理檢視畫面使用方式
- 32 位元浮點紋理混合
- GPUDevice adapterInfo 屬性
- 以無效格式設定畫布內容時,會擲回 JavaScript 錯誤
- 紋理的篩選取樣器限制
- 擴大子群組實驗
- 提升開發人員體驗
- 實驗性支援 16 位元標準化紋理格式
- Dawn 更新
Chrome 131
- 在 WGSL 中裁剪距離
- GPUCanvasContext getConfiguration()
- 點和線條圖元不得有深度偏差
- 子群組的內建包容性掃描功能
- 實驗性支援多重繪圖間接
- 著色器模組編譯選項「嚴格的數學」
- 移除 GPUAdapter requestAdapterInfo()
- Dawn 更新
Chrome 130
Chrome 129
Chrome 128
Chrome 127
Chrome 126
Chrome 125
Chrome 124
Chrome 123
Chrome 122
Chrome 121
- 在 Android 上支援 WebGPU
- 在 Windows 上使用 DXC 取代 FXC,編譯著色器
- 運算和算繪傳遞中的時間戳記查詢
- 著色器模組的預設進入點
- 支援將 display-p3 做為 GPUExternalTexture 色彩空間
- 記憶體堆積資訊
- Dawn 更新
Chrome 120
Chrome 119
Chrome 118
copyExternalImageToTexture()
支援 HTMLImageElement 和 ImageData- 實驗性支援讀寫和唯讀儲存空間紋理
- Dawn 更新
Chrome 117
Chrome 116
- 整合 WebCodecs
- GPUAdapter
requestDevice()
傳回的遺失裝置 - 如果呼叫
importExternalTexture()
,請確保影片播放流暢 - 規格一致性
- 提升開發人員體驗
- Dawn 更新
Chrome 115
Chrome 114
Chrome 113
- 在
importExternalTexture()
中使用 WebCodecs VideoFrame 來源