Featured image of post 從 WebGL 過渡到 WebGPU 以獲得更快的圖形速度Featured image of post 從 WebGL 過渡到 WebGPU 以獲得更快的圖形速度
Web

從 WebGL 過渡到 WebGPU 以獲得更快的圖形速度

討論由 WebGPU 支援的現代畫布渲染管道，改進舊版 WebGL 的處理能力。

  1. 首頁
  2. Webs
  3. 從 WebGL 過渡到 WebGPU 以獲得更快的圖形速度

從 WebGL 過渡到 WebGPU 以獲得更快的圖形速度

十多年來，WebGL 一直是瀏覽器中硬體加速 3D 圖形的唯一標準。它基於 OpenGL ES 構建，公開了一個在其時代運行良好的狀態機 API，但會帶來大量 CPU 開銷，並且缺乏對現代 GPU 功能的直接存取。輸入 WebGPU — 專為現代 GPU 架構全新設計的新一代圖形與運算 API。

WebGPU 不僅僅是「WebGL 3.0」。它是一個低階的明確 API，使開發人員能夠對 GPU 資源、著色器編譯和命令調度進行細粒度控制。其設計反映了 Vulkan、Metal 和 DirectX 12，使其功能強大且可跨所有主要平台移植。

關鍵概念：適配器、裝置、佇列和著色器

WebGPU 引進了四個基本物件來取代 WebGL 的隱式狀態機：

概念目的
適配器表示實體 GPU（整合或離散）。枚舉適配器以選擇最佳硬體。
設備適配器的邏輯句柄。所有 GPU 資源（緩衝區、紋理、管道）都是從裝置創建的。
佇列將編碼指令提交給 GPU。 WebGPU 使用單一佇列來處理圖形和運算工作。
著色器用WGSL（WebGPU 著色語言）編寫，在管道創建時編譯。
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const queue = device.queue;

這種顯式模型消除了隱藏的驅動程式啟發法，從而提供可預測的效能和更低的開銷。

WGSL：WebGPU 著色語言

WGSL 是一種現代著色器語言，具有類似 Rust 的語法，專為安全且高效的 GPU 程式設計。與 GLSL（由 WebGL 使用）不同，WGSL 強制執行嚴格的類型、明確記憶體佈局和內建安全檢查。

@vertex
fn vs_main(@builtin(vertex_index) in_vertex_index: u32) -> @builtin(position) vec4f {
    let positions = array(vec2f(0.0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5));
    return vec4f(positions[in_vertex_index], 0.0, 1.0);
}

@fragment
fn fs_main() -> @location(0) vec4f {
    return vec4f(1.0, 0.0, 0.0, 1.0);
}

WGSL 直接編譯為 GPU 的中間表示（Vulkan 上的 SPIR-V、Apple 上的 Metal IR），從而消除了運行時著色器編譯開銷。

計算著色器：超越圖形

WebGPU 最具變革性的功能之一是原生運算著色器支援。與純粹以圖形為導向的WebGL不同，WebGPU可以直接在瀏覽器中執行通用GPU（GPGPU）運算。

計算著色器啟用：

  • 物理模擬 — 粒子系統、布料模擬
  • 影像處理 — 即時濾鏡、色彩分級
  • 機器學習推理 — 透過 ONNX 執行時間執行小型模型
  • 資料解析 — JSON/CSV 平行處理
@compute @workgroup_size(64)
fn cs_main(@builtin(global_invocation_id) id: vec3u) {
    let idx = id.x;
    output_buffer[idx] = input_buffer[idx] * 2.0;
}

這為以前需要本機應用程式的基於瀏覽器的科學計算打開了大門。

渲染管線：顯式且高效

WebGPU 的渲染管道遵循現代綁定群組模型。所有資源（緩衝區、紋理、取樣器）都收集到不可變的綁定群組中，並且管道使用固定配置進行編譯。

const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: shaderModule,
    entryPoint: 'vs_main',
    buffers: [vertexBufferLayout]
  },
  fragment: {
    module: shaderModule,
    entryPoint: 'fs_main',
    targets: [{ format: 'bgra8unorm' }]
  },
  primitive: { topology: 'triangle-list' }
});

這消除了困擾 WebGL 的昂貴的狀態更改，在這種情況下，切換著色器或緩衝區佈局會導致驅動程式重新編譯。

相對於 WebGL 的效能優勢

基準測試一致顯示，在繪製呼叫較多的場景中，WebGPU 的效能優於 WebGL 2-5×。主要改進包括：

  • 降低 CPU 開銷 — 明確資源管理減少了驅動程式工作
  • 降低繪圖呼叫成本 - 現代管道模型批次效率更高
  • 非同步計算 - 重疊計算和圖形工作負載
  • 無需著色器重新編譯 — 預先編譯的 WGSL 消除了 JIT 攤販
  • 記憶體控制 — 明確緩衝區映射與對齊

對於具有 10,000 多個繪製呼叫的場景，WebGPU 保持穩定的幀速率，而 WebGL 會下降到個位數。

瀏覽器和庫支持

截至 2026 年，WebGPU 在 Chrome、Edge、Firefox 和 Safari 中保持穩定（透過 WebGPU 實驗標誌）。所有主要 3D 庫都已採用或正在遷移到 WebGPU：

  • Three.js — 透過 WebGPURenderer 的 WebGPU 渲染器（來自 r160+）
  • Babylon.js — WebGPU 作為 v7.0+ 中的預設後端
  • PlayCanvas — WebGPU 實驗渲染器
  • wgpu-native — 本機應用程式的 Rust 實現
// Three.js WebGPU example
import { WebGPURenderer } from 'three/examples/jsm/renderers/webgpu/WebGPURenderer.js';
const renderer = new WebGPURenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

WebGL 的遷移策略

對於現有的 WebGL 程式碼庫，建議逐步遷移：

  1. 分析渲染 — 辨識 WebGL 瓶頸
  2. 採用函式庫 — Three.js 或 Babylon.js 抽象 API 更改
  3. 原型運算通道 — 為繁重的模擬工作添加 WebGPU 運算
  4. 使用後備 - 功能檢測 WebGPU，秋季在不支援的裝置上返回 WebGL
if (typeof navigator.gpu !== 'undefined') {
  // Use WebGPU renderer
} else {
  // Fall back to WebGL
}

##結論

WebGPU 代表了瀏覽器圖形的典範轉移。其低階、明確的設計可提供本機級效能，同時保持跨裝置的便攜性。對於建立 3D 體驗、資料視覺化或基於瀏覽器的運算應用程式的開發人員來說，遷移到 WebGPU 不僅僅關乎速度，還關乎存取現代 GPU 的全部功能。

從 WebGL 的過渡正在順利進行，支援庫已經成熟，瀏覽器覆蓋範圍也接近普及。現在是時候為您的下一個圖形密集型 Web 專案採用 WebGPU 了。

©2022 - 2026 Commentary of Takao