WebGPU 來臨：70% 瀏覽器支援，15x 效能提升

WebGL 自 2011 年誕生以來，一直是瀏覽器圖形處理的標準。但 WebGL 的設計包袱——過度封裝、無法高效支援現代 GPU 功能、無法做通用計算——讓它在某些場景下開始力不從心。WebGPU 是 W3C 設計的新一代瀏覽器圖形 API，2026 年的瀏覽器支援率達到了約 70%。這不是「未來技術」了，這是現在就該關注的技術。

---

為什麼 WebGPU 是前端工程師該關心的技術

過去，前端工程師對瀏覽器裡的「高效能圖形處理」只有一個選擇：WebGL。多數時候，這隱藏在 Three.js、MapboxGL、Babylon.js 這類函式庫的背後，你不需要直接操作 WebGL。

但 WebGPU 不只是另一個 WebGL。WebGPU 的設計目標是：讓瀏覽器應用能夠像原生應用一樣，直接控制 GPU 的所有能力。

這個目標帶來的變化：

• AI 推論：在瀏覽器裡跑 TensorFlow.js 模型，速度比以前快 15-30x
• 3A 級遊戲：Unreal Engine 和 Unity 已經開始實驗 WebGPU 輸出
• 科學視覺化：大量的資料計算可以在 GPU 上直接完成

---

2026 年瀏覽器支援現況

瀏覽器	WebGPU 支援	版本
Chrome	✅ 全面支援	113+
Edge	✅ 全面支援	113+
Safari	✅ 全面支援（包括 iOS）	16.4+
Firefox	⚠️ 部分支援	141+（Windows）/ 145+（macOS ARM）

Firefox 是目前最落後的瀏覽器，但正在追趕：

# Firefox 141+：Windows 支援
# Firefox 145+：macOS Apple Silicon 支援
# Firefox 147+：AMD GPU zero-copy video 支援

70% 覆蓋率的意義

70% 的數字不是精確的市場佔有率，而是「你的用戶有多大機率用到 WebGPU」：

• 桌面用戶：覆蓋率約 80-85%（主要是 Windows/macOS，Linux 取決於 GPU 驅動）
• 行動用戶：iOS Safari 完全支援，Android Chrome 大部分支援
• 企業用戶：Firefox 份額較高的企業環境可能仍有相容性問題

---

WebGPU vs WebGL：技術差異

架構上的根本差異

WebGL 的設計繼承了 OpenGL ES，一個為嵌入式系統設計的 API。WebGPU 的設計則借鑑了 Vulkan、Metal、DirectX 12——現代 GPU API 的標準。

// WebGL：狀態機模型
const gl = canvas.getContext('webgl');
gl.viewport(0, 0, width, height);
gl.clearColor(1, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 所有操作都是對全域狀態的修改

// WebGPU：命令隊列模型
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const commandEncoder = device.createCommandEncoder();
commandEncoder.beginRenderPass({ ... });
commandEncoder.endRenderPass();
device.queue.submit([commandEncoder.finish()]);
// 明確的、物件導向的資源管理

Compute Shaders：WebGPU 獨有的能力

WebGL 只能用 GPU 處理圖形。WebGPU 支援 Compute Shaders——讓 GPU 做任何通用計算：

// WebGPU Compute Shader：GPU 加速的數據處理
const computeShader = `
  @group(0) @binding(0) var<storage, read_write> data: array<f32>;

  @compute @workgroup_size(64)
  fn main(@builtin(global_invocation_id) id: vec3u) {
    data[id.x] = data[id.x] * 2.0;
  }
`;

// 在 GPU 上執行：處理 100 萬個元素
const buffer = device.createBuffer({
  size: 1000000 * 4,  // 100 萬個 f32
  usage: GPUBufferUsage.STORAGE,
});

這個能力對於瀏覽器端 AI 推論特別重要：TensorFlow.js 在 2026 年已經能夠利用 WebGPU 加速模型推論，速度達到原生效能的 80%。

效能對比

場景	WebGL	WebGPU	提升
簡單三角形渲染	基準	差不多	—
複雜光照渲染	慢	快	2-3x
GPU 通用計算	❌ 不支援	✅ 支援	15-30x
AI 推論	慢	快	10-20x

---

Three.js 與 WebGPU：現在就可以用

Three.js 的 WebGPU 支援

Three.js 從 2024 年開始實驗性支援 WebGPU，到 2026 年已經是穩定功能：

import * as THREE from 'three';

// 請求 WebGPU 渲染器，如果不可用則回退到 WebGL
const renderer = new THREE.WebGPURenderer({
  canvas: document.getElementById('canvas'),
  antialias: true,
});

// 如果瀏覽器不支援 WebGPU
if (renderer.capabilities.isWebGPUAvailable === false) {
  // 回退到 WebGL
  const glRenderer = new THREE.WebGLRenderer({ canvas });
}

// 渲染場景
function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

Three.js 的目標是：開發者不需要關心底層 API，自動選擇最適合的渲染路徑。

Babylon.js 的 WebGPU 支援

Babylon.js 對 WebGPU 的支援更激進，提供了更完整的 API 對應：

import * as BABYLON from '@babylonjs/core';

const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();

// 直接使用 WebGPU 的低層 API
const shaderModule = await engine.createShaderModuleAsync({
  code: `
    @vertex fn vertexMain(...) -> ... { }
    @fragment fn fragmentMain(...) -> ... { }
  `,
});

---

實際應用場景

1. 3D 遊戲

WebGPU 讓瀏覽器遊戲達到了主機遊戲的渲染能力：

// Unreal Engine 5 已經可以編譯到 WebGPU
// Fortnite 的瀏覽器版本在 2025 年已經上線

對於前端工程師來說，這意味著：

• 可以在瀏覽器裡跑 3A 級渲染
• 不需要 Unity 或 Unreal Engine 經驗
• Three.js 生態系讓 WebGPU 門檻大幅降低

2. AI 推論

TensorFlow.js 在 WebGPU 上的效能：

import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-backend-webgpu';

// 設定 WebGPU 後端
await tf.setBackend('webgpu');
await tf.ready();

// 執行推論
const model = await tf.loadLayersModel('model.json');
const prediction = model.predict(tf.randomNormal([1, 224, 224, 3]));
console.log(prediction.dataSync());

速度提升可達 10-20x，接近原生效能。

3. 數據視覺化

處理百萬級別的數據點時，WebGPU 的 Compute Shaders 可以直接在 GPU 上完成數據處理：

// 百萬級別數據的即時渲染
async function processLargeDataset(data) {
  const buffer = device.createBuffer({
    size: data.byteLength,
    usage: GPUBufferUsage.STORAGE,
  });
  
  // 將數據上傳到 GPU
  device.queue.writeBuffer(buffer, 0, data);
  
  // 在 GPU 上處理（不需要回到 CPU）
  // 結果直接用於渲染
}

---

瀏覽器不支援時的 Progressive Enhancement

// 檢查 WebGPU 支援
async function getRenderer() {
  if ('gpu' in navigator) {
    try {
      const adapter = await navigator.gpu.requestAdapter();
      if (adapter) {
        return new THREE.WebGPURenderer();
      }
    } catch (e) {
      console.log('WebGPU unavailable, falling back');
    }
  }
  
  // 回退到 WebGL
  return new THREE.WebGLRenderer();
}

---

結語：現在是學習 WebGPU 的時機

WebGPU 在 2026 年已經從「emerging technology」跨入了「production-ready」的範疇。70% 的瀏覽器覆蓋率，對於多數面向消費者的應用，已經是可以考慮使用的數字。

對於前端工程師來說，WebGPU 的價值有兩個層面：

1. 工具層面：Three.js、Babylon.js 這類函式庫，會讓 WebGPU 的使用越來越不需要直接操作低層 API
2. 視野層面：理解 WebGPU 的能力，讓你知道「瀏覽器能做到什麼」

AI 推論、3A 遊戲、科學視覺化——這些在 WebGL 時代需要極大代價才能實現的事情，在 WebGPU 時代正在變得觸手可及。

---

延伸閱讀

• Chrome DevTools AI — AI 輔助開發工具
• View Transitions API 實戰 — CSS 動畫新技術

本文是「2026 前端技術前沿」系列文章之一。