WebGPU — Kỷ Nguyên Mới Của GPU Computing Trên Trình Duyệt

1. WebGPU là gì và tại sao nó thay đổi cuộc chơi?

WebGPU là API đồ họa và tính toán thế hệ mới dành cho web, được thiết kế bởi W3C GPU for the Web Working Group với sự tham gia của Google, Mozilla, Apple và Microsoft. Khác với WebGL — vốn là lớp wrapper trên OpenGL ES đã ra đời từ hơn 15 năm trước — WebGPU được xây dựng từ đầu dựa trên kiến trúc của các API GPU hiện đại: Vulkan, Metal và Direct3D 12.

Điểm đột phá cốt lõi: WebGPU không chỉ là API render đồ họa, mà còn cung cấp compute pipeline hoàn chỉnh — cho phép chạy tính toán tổng quát (GPGPU) trực tiếp trên GPU thông qua trình duyệt. Điều này mở ra khả năng chạy machine learning inference, xử lý hình ảnh, mô phỏng vật lý, và phân tích dữ liệu lớn ngay trên client mà không cần server.

2. Từ WebGL đến WebGPU — 15 năm tiến hóa

Hành trình từ WebGL 1.0 đến WebGPU là câu chuyện về sự tiến hóa tất yếu khi nhu cầu tính toán trên web vượt xa khả năng của OpenGL ES.

3. Kiến trúc kỹ thuật của WebGPU

WebGPU được thiết kế theo mô hình low-level với explicit state management, cho phép developer kiểm soát chi tiết cách GPU xử lý dữ liệu.

graph TB
    subgraph Browser["Trình duyệt"]
        JS["JavaScript / WASM
Application Code"]
        API["WebGPU API
(navigator.gpu)"]
    end

    subgraph Abstraction["Abstraction Layer"]
        Dawn["Dawn (Chrome)
C++ implementation"]
        wgpu["wgpu (Firefox)
Rust implementation"]
        WebKit["WebKit GPU Process
(Safari)"]
    end

    subgraph Native["Native GPU APIs"]
        Vulkan["Vulkan
(Linux, Windows, Android)"]
        Metal["Metal
(macOS, iOS)"]
        D3D12["Direct3D 12
(Windows)"]
    end

    subgraph Hardware["Phần cứng"]
        GPU["GPU Hardware
NVIDIA / AMD / Intel / Apple"]
    end

    JS --> API
    API --> Dawn
    API --> wgpu
    API --> WebKit
    Dawn --> Vulkan
    Dawn --> D3D12
    Dawn --> Metal
    wgpu --> Vulkan
    wgpu --> Metal
    wgpu --> D3D12
    WebKit --> Metal
    Vulkan --> GPU
    Metal --> GPU
    D3D12 --> GPU

    style JS fill:#e94560,stroke:#fff,color:#fff
    style API fill:#e94560,stroke:#fff,color:#fff
    style Dawn fill:#2c3e50,stroke:#fff,color:#fff
    style wgpu fill:#2c3e50,stroke:#fff,color:#fff
    style WebKit fill:#2c3e50,stroke:#fff,color:#fff
    style Vulkan fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    style Metal fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    style D3D12 fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    style GPU fill:#4CAF50,stroke:#fff,color:#fff

3.1. Các thành phần cốt lõi

WebGPU API được tổ chức xung quanh một số khái niệm chính:

3.2. Command Buffer Model

Thay vì gửi lệnh trực tiếp như WebGL, WebGPU sử dụng mô hình record-then-submit:

sequenceDiagram
    participant App as JavaScript
    participant Enc as CommandEncoder
    participant Queue as GPUQueue
    participant GPU as GPU Hardware

    App->>Enc: createCommandEncoder()
    App->>Enc: beginRenderPass() / beginComputePass()
    App->>Enc: setPipeline(), setBindGroup()
    App->>Enc: draw() / dispatch()
    App->>Enc: end()
    Enc->>Enc: finish() → CommandBuffer
    App->>Queue: submit([commandBuffer])
    Queue->>GPU: Execute batch
    GPU-->>App: Kết quả (async)

4. WGSL — Ngôn ngữ Shader thế hệ mới

WebGPU Shading Language (WGSL) là ngôn ngữ shader mới được thiết kế riêng cho WebGPU, thay thế GLSL ES mà WebGL sử dụng. WGSL có cú pháp gần giống Rust, được biên dịch thành SPIR-V (Vulkan), MSL (Metal), hoặc HLSL (D3D12) tùy theo backend.

4.1. Cú pháp cơ bản

// Vertex Shader
struct VertexInput {
    @location(0) position: vec3f,
    @location(1) color: vec3f,
}

struct VertexOutput {
    @builtin(position) position: vec4f,
    @location(0) color: vec3f,
}

@group(0) @binding(0)
var<uniform> mvp: mat4x4f;

@vertex
fn vs_main(input: VertexInput) -> VertexOutput {
    var output: VertexOutput;
    output.position = mvp * vec4f(input.position, 1.0);
    output.color = input.color;
    return output;
}

// Fragment Shader
@fragment
fn fs_main(input: VertexOutput) -> @location(0) vec4f {
    return vec4f(input.color, 1.0);
}

4.2. Compute Shader

// Matrix multiplication trên GPU
@group(0) @binding(0) var<storage, read> matA: array<f32>;
@group(0) @binding(1) var<storage, read> matB: array<f32>;
@group(0) @binding(2) var<storage, read_write> matC: array<f32>;
@group(0) @binding(3) var<uniform> dims: vec3u; // M, N, K

@compute @workgroup_size(16, 16)
fn matmul(@builtin(global_invocation_id) gid: vec3u) {
    let row = gid.x;
    let col = gid.y;
    let M = dims.x;
    let N = dims.y;
    let K = dims.z;

    if (row >= M || col >= N) { return; }

    var sum: f32 = 0.0;
    for (var i: u32 = 0u; i < K; i = i + 1u) {
        sum = sum + matA[row * K + i] * matB[i * N + col];
    }
    matC[row * N + col] = sum;
}

5. Render Pipeline vs Compute Pipeline

WebGPU cung cấp hai loại pipeline hoàn toàn tách biệt, phục vụ hai mục đích khác nhau:

graph LR
    subgraph Render["Render Pipeline"]
        V["Vertex
Shader"] --> R["Rasterizer
(fixed)"] --> F["Fragment
Shader"] --> O["Output
Texture"]
    end

    subgraph Compute["Compute Pipeline"]
        I["Input
Buffers"] --> C["Compute
Shader"] --> OB["Output
Buffers"]
    end

    style V fill:#e94560,stroke:#fff,color:#fff
    style F fill:#e94560,stroke:#fff,color:#fff
    style R fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    style O fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    style C fill:#4CAF50,stroke:#fff,color:#fff
    style I fill:#f8f9fa,stroke:#4CAF50,color:#2c3e50
    style OB fill:#f8f9fa,stroke:#4CAF50,color:#2c3e50

5.1. Workgroup — Đơn vị tính toán song song

Compute shader trong WebGPU chạy trên một lưới 3D các workgroup. Mỗi workgroup chứa một số cố định thread (invocation), và các thread trong cùng workgroup có thể chia sẻ bộ nhớ nhanh var<workgroup>.

// Workgroup size 16x16 = 256 threads per workgroup
@compute @workgroup_size(16, 16, 1)
fn main(
    @builtin(global_invocation_id) global_id: vec3u,
    @builtin(local_invocation_id) local_id: vec3u,
    @builtin(workgroup_id) wg_id: vec3u
) {
    // global_id = wg_id * workgroup_size + local_id
    // Tổng threads = dispatch(nx, ny, nz) * workgroup_size(16,16,1)
}

6. Benchmark: WebGPU vs WebGL — Số liệu thực tế

Các benchmark thực tế năm 2026 cho thấy WebGPU vượt trội ở hầu hết mọi khía cạnh, đặc biệt khi workload tận dụng compute pipeline.

6.1. Tại sao WebGPU nhanh hơn?

Sự vượt trội không đến từ "GPU mạnh hơn" — cùng một GPU, cùng một trình duyệt. Lý do nằm ở kiến trúc API:

• Command buffer batching: WebGL gửi từng lệnh, CPU phải chờ. WebGPU batch hàng nghìn lệnh rồi submit một lần → giảm CPU overhead 10-50x.
• Compute pipeline thay vì hack fragment shader: WebGL phải encode matrix thành texture, chạy fragment shader để "tính toán", rồi readPixels kết quả. WebGPU dùng storage buffer — đọc/ghi trực tiếp, zero encoding overhead.
• Async by design: Mọi thao tác nặng (buffer mapping, shader compilation, pipeline creation) đều async — CPU không bao giờ bị block.
• Pipeline State Object: WebGL phải validate toàn bộ GL state trước mỗi draw call. WebGPU bake state vào pipeline object một lần, reuse mãi — zero validation overhead per draw.

7. AI/ML Inference ngay trên trình duyệt

Đây là use case gây chấn động nhất của WebGPU trong 2026. Trước đây, chạy LLM trên client gần như không thể — WebGL không có compute shader, WASM quá chậm cho matrix operations. WebGPU thay đổi hoàn toàn bức tranh này.

graph TB
    subgraph Client["Client Browser"]
        Model["ONNX / GGUF Model
(cached trong IndexedDB)"]
        RT["Runtime
Transformers.js v3 / WebLLM / ONNX Runtime Web"]
        WG["WebGPU Compute Pipeline
Matrix Multiply + Attention + Softmax"]
        Result["Kết quả inference"]
    end

    subgraph Server["Không cần Server"]
        S["❌ Không API call
❌ Không GPU server cost
❌ Không latency mạng"]
    end

    Model --> RT
    RT --> WG
    WG --> Result

    style Model fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    style RT fill:#e94560,stroke:#fff,color:#fff
    style WG fill:#4CAF50,stroke:#fff,color:#fff
    style Result fill:#f8f9fa,stroke:#4CAF50,color:#2c3e50
    style S fill:#f8f9fa,stroke:#e0e0e0,color:#888

7.1. Các framework hỗ trợ

7.2. Ví dụ: Chạy text inference với WebLLM

import { CreateMLCEngine } from "@mlc-ai/web-llm";

const engine = await CreateMLCEngine("Phi-3.5-mini-instruct-q4f16_1-MLC", {
  initProgressCallback: (progress) => {
    console.log(`Loading: ${progress.text}`);
  }
});

const response = await engine.chat.completions.create({
  messages: [
    { role: "system", content: "Bạn là trợ lý AI hữu ích." },
    { role: "user", content: "Giải thích WebGPU trong 3 câu." }
  ],
  temperature: 0.7,
  max_tokens: 256,
});

console.log(response.choices[0].message.content);

8. Data Visualization và Game Development

8.1. Data Visualization quy mô lớn

Render 1 triệu data point ở 60 FPS — một workload mà Canvas2D hoặc WebGL sẽ đơ hoàn toàn. WebGPU compute pipeline xử lý binning, aggregation và layout trực tiếp trên GPU, sau đó render pipeline vẽ kết quả.

// Compute pass: aggregate 1M points thành heatmap bins
const computePass = encoder.beginComputePass();
computePass.setPipeline(aggregatePipeline);
computePass.setBindGroup(0, bindGroup);
// 1,000,000 points / 256 threads per workgroup = 3907 workgroups
computePass.dispatchWorkgroups(3907);
computePass.end();

// Render pass: vẽ heatmap từ aggregated bins
const renderPass = encoder.beginRenderPass(renderPassDescriptor);
renderPass.setPipeline(renderPipeline);
renderPass.setBindGroup(0, renderBindGroup);
renderPass.draw(6, binCount); // Instanced drawing
renderPass.end();

device.queue.submit([encoder.finish()]);

8.2. Game Development

Với WebGPU, browser game đạt chất lượng gần console:

• Babylon.js 7+ — hỗ trợ WebGPU với PBR rendering, realtime shadows, post-processing pipeline.
• Three.js r171+ — WebGPU renderer tích hợp sẵn, auto-fallback WebGL 2.
• Unreal Engine 5 — đã thêm WebGPU backend (từ 04/2024).
• PlayCanvas — engine WebGPU-first, tối ưu cho mobile browser game.

9. Tích hợp với Framework phổ biến

9.1. Three.js — Chuyển đổi chỉ 2 dòng code

// Trước (WebGL)
import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ canvas });

// Sau (WebGPU) — chỉ đổi 2 dòng
import * as THREE from 'three';
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
const renderer = new WebGPURenderer({ canvas });
await renderer.init();

9.2. Babylon.js — Async initialization

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

// Tất cả API Babylon.js hoạt động bình thường
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("cam", 0, 0, 10, BABYLON.Vector3.Zero(), scene);

9.3. Vue.js + WebGPU — Component pattern

// composable: useWebGPU.ts
export function useWebGPU(canvasRef: Ref<HTMLCanvasElement | null>) {
  const device = shallowRef<GPUDevice | null>(null);
  const context = shallowRef<GPUCanvasContext | null>(null);

  onMounted(async () => {
    if (!navigator.gpu) {
      console.warn('WebGPU not supported, falling back to WebGL');
      return;
    }
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) return;

    device.value = await adapter.requestDevice();
    context.value = canvasRef.value!.getContext('webgpu')!;
    context.value.configure({
      device: device.value,
      format: navigator.gpu.getPreferredCanvasFormat(),
      alphaMode: 'premultiplied',
    });
  });

  onUnmounted(() => {
    device.value?.destroy();
  });

  return { device, context };
}

10. Hướng dẫn bắt đầu với WebGPU

10.1. Khởi tạo cơ bản

async function initWebGPU() {
  // 1. Kiểm tra hỗ trợ
  if (!navigator.gpu) {
    throw new Error('WebGPU is not supported in this browser');
  }

  // 2. Request adapter (GPU vật lý)
  const adapter = await navigator.gpu.requestAdapter({
    powerPreference: 'high-performance' // hoặc 'low-power'
  });
  if (!adapter) throw new Error('No GPU adapter found');

  // 3. Request device (kết nối logic)
  const device = await adapter.requestDevice({
    requiredFeatures: ['timestamp-query'], // optional features
    requiredLimits: {
      maxStorageBufferBindingSize: 256 * 1024 * 1024, // 256MB
    }
  });

  // 4. Handle device loss
  device.lost.then((info) => {
    console.error(`GPU device lost: ${info.reason} - ${info.message}`);
    if (info.reason !== 'destroyed') {
      initWebGPU(); // retry
    }
  });

  // 5. Configure canvas context
  const canvas = document.querySelector('canvas');
  const context = canvas.getContext('webgpu');
  const format = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format, alphaMode: 'premultiplied' });

  return { device, context, format };
}

10.2. Ví dụ hoàn chỉnh: Compute Pipeline

async function runCompute(device) {
  // Dữ liệu input
  const data = new Float32Array([1, 2, 3, 4, 5, 6, 7, 8]);

  // Tạo buffer
  const inputBuffer = device.createBuffer({
    size: data.byteLength,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
  });
  device.queue.writeBuffer(inputBuffer, 0, data);

  const outputBuffer = device.createBuffer({
    size: data.byteLength,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
  });

  const readBuffer = device.createBuffer({
    size: data.byteLength,
    usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
  });

  // Shader: nhân đôi mỗi phần tử
  const shaderModule = device.createShaderModule({
    code: `
      @group(0) @binding(0) var<storage, read> input: array<f32>;
      @group(0) @binding(1) var<storage, read_write> output: array<f32>;

      @compute @workgroup_size(64)
      fn main(@builtin(global_invocation_id) gid: vec3u) {
        if (gid.x < arrayLength(&input)) {
          output[gid.x] = input[gid.x] * 2.0;
        }
      }
    `
  });

  // Tạo pipeline
  const pipeline = device.createComputePipeline({
    layout: 'auto',
    compute: { module: shaderModule, entryPoint: 'main' }
  });

  // Bind group
  const bindGroup = device.createBindGroup({
    layout: pipeline.getBindGroupLayout(0),
    entries: [
      { binding: 0, resource: { buffer: inputBuffer } },
      { binding: 1, resource: { buffer: outputBuffer } },
    ]
  });

  // Encode và submit
  const encoder = device.createCommandEncoder();
  const pass = encoder.beginComputePass();
  pass.setPipeline(pipeline);
  pass.setBindGroup(0, bindGroup);
  pass.dispatchWorkgroups(Math.ceil(data.length / 64));
  pass.end();

  encoder.copyBufferToBuffer(outputBuffer, 0, readBuffer, 0, data.byteLength);
  device.queue.submit([encoder.finish()]);

  // Đọc kết quả
  await readBuffer.mapAsync(GPUMapMode.READ);
  const result = new Float32Array(readBuffer.getMappedRange());
  console.log('Result:', Array.from(result));
  // Output: [2, 4, 6, 8, 10, 12, 14, 16]
  readBuffer.unmap();
}

11. Thách thức và hướng đi tương lai

11.1. Thách thức hiện tại

11.2. WebGPU v2 — Đang phát triển

Nhóm W3C GPU for the Web đang thiết kế phiên bản tiếp theo với các tính năng quan trọng:

• Subgroup operations — cho phép thread trong cùng subgroup (warp/wavefront) communicate trực tiếp, tăng tốc reduction và scan operations 2-4x.
• Bindless resources — truy cập resource qua index thay vì bind group cố định, giảm overhead khi scene có nhiều material/texture.
• Multi-draw indirect — submit hàng nghìn draw call trong một lệnh duy nhất, GPU tự quyết định draw gì.
• Ray tracing — expose hardware RT cores cho real-time ray tracing trên web.
• 64-bit atomics — cần thiết cho các thuật toán scientific computing chính xác cao.

Nguồn tham khảo:

• W3C WebGPU Specification
• W3C WGSL Specification
• MDN Web Docs — WebGPU API
• WebGPU Fundamentals
• Google Codelabs — Your first WebGPU app
• WWDC25 — Unlock GPU computing with WebGPU
• WebGPU 2026: 70% Browser Support, 15x Performance Gains