WebGPU 新功能's (Chrome 約 121)

François Beaufort

支援 Android 上的 WebGPU

Chrome 團隊很高興宣布，在搭載 Qualcomm 和 ARM GPU 的 Android 12 以上版本裝置上，Chrome 121 會預設啟用 WebGPU。

支援範圍將逐步擴大，涵蓋更多 Android 裝置，包括近期內搭載 Android 11 的裝置。這項擴充功能將取決於進一步的測試和最佳化，以確保在更廣泛的硬體設定中提供流暢的體驗。請參閱 issue chromium:1497815。

在 Android 版 Chrome 上執行的 WebGPU 範例。

在 Windows 上使用 DXC 而非 FXC 進行著色器編譯

Chrome 現在會運用 DXC (DirectX 編譯器) 的強大功能，在配備 SM6 以上圖形硬體的 Windows D3D12 電腦上編譯著色器。先前，WebGPU 會在 Windows 上使用 FXC (FX 編譯器) 來編譯著色器。雖然 FXC 可正常運作，但缺少 DXC 提供的功能組合和效能最佳化。

初步測試顯示，相較於使用 FXC，使用 DXC 時的運算著色器編譯速度平均提高 20%。

在運算和算繪階段中執行時間戳記查詢

時間戳記查詢可讓 WebGPU 應用程式精確 (精確到奈秒) 評估 GPU 指令執行運算和算繪階段所需的時間。這些指標經常用於深入瞭解 GPU 工作負載的效能和行為。

當 GPUAdapter 提供 "timestamp-query" 功能時，您現在可以執行以下操作：

• 請求具有 "timestamp-query" 功能的 GPUDevice。
• 建立類型為 "timestamp" 的 GPUQuerySet。
• 使用 GPUComputePassDescriptor.timestampWrites 和 GPURenderPassDescriptor.timestampWrites 定義 GPUQuerySet 中時間戳記值的寫入位置。
• 使用 resolveQuerySet() 將時間戳記值解析為 GPUBuffer。
• 將結果從 GPUBuffer 複製到 CPU，藉此讀取時間戳記值。
• 將時間戳記值解碼為 BigInt64Array。

請參閱以下範例和 dawn:1800 問題。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("timestamp-query")) {
  throw new Error("Timestamp query feature is not available");
}
// Explicitly request timestamp query feature.
const device = await adapter.requestDevice({
  requiredFeatures: ["timestamp-query"],
});
const commandEncoder = device.createCommandEncoder();

// Create a GPUQuerySet which holds 2 timestamp query results: one for the
// beginning and one for the end of compute pass execution.
const querySet = device.createQuerySet({ type: "timestamp", count: 2 });
const timestampWrites = {
  querySet,
  beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins.
  endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
};
const passEncoder = commandEncoder.beginComputePass({ timestampWrites });
// TODO: Set pipeline, bind group, and dispatch work to be performed.
passEncoder.end();

// Resolve timestamps in nanoseconds as a 64-bit unsigned integer into a GPUBuffer.
const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
const resolveBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
});
commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0);

// Read GPUBuffer memory.
const resultBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});
commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, size);

// Submit commands to the GPU.
device.queue.submit([commandEncoder.finish()]);

// Log compute pass duration in nanoseconds.
await resultBuffer.mapAsync(GPUMapMode.READ);
const times = new BigInt64Array(resultBuffer.getMappedRange());
console.log(`Compute pass duration: ${Number(times[1] - times[0])}ns`);
resultBuffer.unmap();

基於時間攻擊的考量，我們以 100 微秒的精確度量化時間戳記查詢，在精確度和安全性之間取得良好平衡。在 Chrome 瀏覽器中，您可以在開發應用程式時，在 chrome://flags/#enable-webgpu-developer-features 啟用「WebGPU 開發人員功能」標記，藉此停用時間戳記量化。詳情請參閱「時間戳記查詢量化」。

由於 GPU 可能會不時重設時間戳記計數器，導致時間戳記之間出現負值差異等意外值，因此建議您查看git diff 變更，為下列 Compute Boids 範例新增時間戳記查詢支援功能。

Compute Boids 範例，其中包含時間戳記查詢。

著色器模組的預設進入點

為改善開發人員體驗，您現在可以在建立運算或算繪管道時省略著色器模組的 entryPoint。如果著色器程式碼中找不到著色器階段的不重複進入點，系統會觸發 GPUValidationError。請參閱以下範例和問題 dawn:2254。

const code = `
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
       const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
       return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
      return vec4f(1, 0, 0, 1);
    }`;
const module = myDevice.createShaderModule({ code });
const format = navigator.gpu.getPreferredCanvasFormat();
const pipeline = await myDevice.createRenderPipelineAsync({
  layout: "auto",
  vertex: { module, entryPoint: "vertexMain" },
  fragment: { module, entryPoint: "fragmentMain", targets: [{ format }] },
  vertex: { module },
  fragment: { module, targets: [{ format }] },
});

支援使用 display-p3 做為 GPUExternalTexture 色彩空間

您現在可以使用 importExternalTexture() 從 HDR 影片匯入 GPUExternalTexture 時，設定 "display-p3" 目的地色彩空間。請查看 WebGPU 如何處理色彩空間。請參閱以下範例和問題 chromium:1330250。

// Create texture from HDR video.
const video = document.querySelector("video");
const texture = myDevice.importExternalTexture({
  source: video,
  colorSpace: "display-p3",
});

記憶體堆積資訊

為了協助您在應用程式開發期間分配大量記憶體時預測記憶體限制，requestAdapterInfo() 現在會公開 memoryHeaps 資訊，例如適配器上可用的記憶體堆大小和類型。只有在 chrome://flags/#enable-webgpu-developer-features 啟用「WebGPU 開發人員功能」標記時，才能使用這項實驗功能。請參閱以下範例和問題 dawn:2249。

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

for (const { size, properties } of adapterInfo.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)   { /* ... */ }
}

https://webgpureport.org 顯示的轉譯器資訊記憶體堆積。

黎明更新

已新增 wgpu::Instance 上的 HasWGSLLanguageFeature 和 EnumerateWGSLLanguageFeatures 方法，用於處理 WGSL 語言功能。請參閱問題 dawn:2260。

非標準 wgpu::Feature::BufferMapExtendedUsages 功能可讓您使用 wgpu::BufferUsage::MapRead 或 wgpu::BufferUsage::MapWrite 和任何其他 wgpu::BufferUsage 建立 GPU 緩衝區。請參閱以下範例和問題 dawn:2204。

wgpu::BufferDescriptor descriptor = {
  .size = 128,
  .usage = wgpu::BufferUsage::MapWrite | wgpu::BufferUsage::Uniform
};
wgpu::Buffer uniformBuffer = device.CreateBuffer(&descriptor);

uniformBuffer.MapAsync(wgpu::MapMode::Write, 0, 128,
   [](WGPUBufferMapAsyncStatus status, void* userdata)
   {
      wgpu::Buffer* buffer = static_cast<wgpu::Buffer*>(userdata);
      memcpy(buffer->GetMappedRange(), data, sizeof(data));
   },
   &uniformBuffer);

我們已記錄下以下功能：ANGLE 紋理共用、D3D11 多執行緒保護、隱含裝置同步、Norm16 紋理格式、在傳送中查詢時間戳記、像素本機儲存空間、著色器功能和多平面格式。

Chrome 團隊已建立 Dawn 的官方 GitHub 存放區。

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

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 來源