WebGPU 開發人員功能

François Beaufort
François Beaufort
GitHub

發布日期：2025 年 6 月 3 日

Chrome 的 WebGPU API 實作項目包含專供開發和測試的功能。這些功能不屬於標準 WebGPU 規格，不得用於實際工作環境。

本文件詳細說明如何啟用 WebGPU 開發人員功能，並提供完整清單。

修課條件

如要在 Chrome 中啟用 WebGPU 開發人員功能，請按照下列步驟操作：

  1. 在 chrome://flags/#enable-webgpu-developer-features 中啟用「WebGPU 開發人員功能」旗標。
  2. 重新啟動 Chrome 瀏覽器。

停用時間戳記查詢量化

時間戳記查詢可讓 WebGPU 應用程式在運算和算繪階段中，準確測量 GPU 指令的執行時間 (精確到奈秒)。這些查詢對於分析 GPU 工作負載效能和行為至關重要。詳情請參閱「在運算和算繪階段中執行時間戳記查詢」。

基於時間攻擊的考量，我們以 100 微秒的精確度量化時間戳記查詢，在精確度和安全性之間取得良好平衡。啟用「WebGPU 開發人員功能」標記後，系統會自動停用此量化功能。

擴充轉接器資訊

如要進一步瞭解所使用的轉接程式，GPUAdapterInfo 會公開下列屬性：

  • device 屬性 (已標準化) 是供應商專屬的轉接器 ID。
  • description 屬性 (已標準化) 是使用者可讀的字串，可提供轉接器詳細資料。
  • driver 屬性 (非標準化) 是使用者可讀的驅動程式說明字串。
  • backend 屬性 (非標準化) 會指出圖像後端，例如 "WebGPU"、"D3D11"、"D3D12"、"metal"、"vulkan"、"openGL"、"openGLES" 或 "null"。
  • type 屬性 (非標準化) 可識別 GPU 類型："discrete GPU"、"integrated GPU"、"CPU" 或 "unknown"。
  • d3dShaderModel 屬性 (非標準化) 會指定支援的 D3D 著色器模型編號上限，例如 62 表示支援 HLSL SM 6.2。
  • vkDriverVersion 屬性 (非標準化) 是供應商指定的 Vulkan 驅動程式版本。
  • powerPreference 屬性 (非標準化) 是 "low-power" 或 "high-performance"，取決於 GPURequestAdapterOptions 中的 GPUPowerPreference。

為了在開發應用程式時預先因應記憶體限制，在分配大量記憶體時，GPUAdapterInfo 會公開 memoryHeaps 非標準化資訊，例如適合在轉接器上使用的記憶體堆積大小和類型。

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

for (const { size, properties } of adapter.info.memoryHeaps) {
  console.log(size); // memory heap size in bytes
  if (properties & GPUHeapProperty.DEVICE_LOCAL)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_VISIBLE)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_COHERENT) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_UNCACHED) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_CACHED)   { /* ... */ }
}

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

GPUShaderModuleDescriptor 包含 strictMath 非標準化布林值選項，可在著色器模組編譯期間啟用或停用嚴格的數學精確度。Metal 和 Direct3D 支援此選項。啟用 strictMath 後，編譯器會遵循精確的數學規則。反之，停用此選項可讓編譯器透過以下方式最佳化著色器：

  • 忽略 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 });

使用零複製匯入影片

GPUExternalTexture isZeroCopy 非標準布林值屬性可讓您瞭解，使用 importExternalTexture() 匯入的影片是否已由 GPU 直接存取，而不需要中繼副本。

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

const video = document.querySelector('video');
const externalTexture = device.importExternalTexture({ source: video });

if (externalTexture.isZeroCopy) {
  console.log('Video frame was accessed directly by the GPU');
}