WebGPU Compute: Chạy GPU Trên Trình Duyệt Cho AI và Đồ Họa

WebGPU là chuẩn W3C mới, cho phép JavaScript và WebAssembly giao tiếp trực tiếp với GPU qua API nhiều nền tảng. Khác với WebGL chỉ dành cho đồ họa 3D, WebGPU hỗ trợ cả compute shaders — tính toán song song trên hàng ngàn lõi GPU. Điều này mở ra khả năng chạy inference mô hình nhỏ ngay trong trình duyệt, xử lý video theo thời gian thực, hoặc mã hóa dữ liệu với tốc độ vượt trội.

Kiến Trúc Compute Pipeline

WebGPU compute pipeline hoạt động theo ba bước:

1. Shader module: mã GLSL/HLSL/WGSL biên dịch thành bytecode GPU
2. Pipeline: cấu hình compute shader, workgroup size, số lượng lượt
3. Command encoder: tạo lệnh dispatch, gửi vào GPU queue

Workgroup là nhóm lượt xử lý đồng thời. Mỗi workgroup chứa nhiều invocation (lượt tính). Ví dụ với workgroup size 64, xử lý 1024 phần tử cần 16 workgroup. Các workgroup chạy độc lập, chia sẻ bộ nhớ qua workgroupStorage.

WebGPU vs WebGL Compute

WGSL — Ngôn Ngữ Shader Mới

WebGPU giới thiệu WGSL (WebGPU Shading Language), ngôn ngữ shader an toàn kiểu được thiết kế riêng cho web. WGSL cú pháp tương tự Rust, có kiểm tra kiểu tại compile-time, không có undefined behavior như GLSL. Ví dụ compute shader cộng hai vector:

@group(0) @binding(0) var a: array;
@group(0) @binding(1) var b: array;
@group(0) @binding(2) var result: array;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3) {
    let i = id.x;
    if (i < arrayLength(&result)) {
        result[i] = a[i] + b[i];
    }
}

WGSL hỗ trợ generic, cấu trúc dữ liệu, control flow hiện đại — làm giảm bug so với GLSL truyền thống. WGSL cũng hỗ trợ atomic operations cho atomic counters, barrier() cho đồng bộ hóa workgroup, và subgroup operations cho SIMD lanes trong workgroup.

Binding Model: Bind Group & Layout

WebGPU dùng bind group model thay vì binding points rời rạc của WebGL. Pipeline layout định nghĩa các bind group layout — mỗi layout là tập hợp các binding (buffer, texture, sampler). Tại runtime, bạn tạo bind group thực tế từ layout và gán resource. Mô hình này cho phép:

• Pipeline layout reusable — một layout dùng cho nhiều pipeline
• Bind group thay đổi nhanh giữa các draw/dispatch call
• Validation tại create-time thay vì draw-time — bắt lỗi sớm

Ví dụ tạo buffer và bind group cho compute shader:

const bufferA = device.createBuffer({
  size: 1024 * 4, // 1024 f32
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
});
const bufferB = device.createBuffer({ /* same */ });
const resultBuffer = device.createBuffer({
  size: 1024 * 4,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
});

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [
    {binding: 0, resource: {buffer: bufferA}},
    {binding: 1, resource: {buffer: bufferB}},
    {binding: 2, resource: {buffer: resultBuffer}},
  ]
});

Ứng Dụng Thực Tế

AI inference trong trình duyệt: Mô hình như Transformers.js hoặc ONNX Runtime Web dùng WebGPU để tăng 3–5× tốc độ inference so với CPU. Các phép tính ma trận nặng (GEMM) rất mượt vì GPU xử lý hàng trăm lượt đồng thời. Các mô hình nhỏ như BERT-base, DistilBERT, Whisper tiny đều chạy mượt trên GPU tích hợp. Thư viện onnxruntime-web hỗ trợ WebGPU execution provider từ phiên bản 1.16.

Mã hóa video: Các thư viện như WebCodecs + WebGPU cho phép thực hiện mã hóa H.264/H.265 trên GPU, giảm tải CPU lên đến 70% trong livestream. FFmpeg.wasm kết hợp WebGPU cho encoding nhanh hơn 10× so với phiên bản WebAssembly thuần.

Khoa học tính toán: Mô phỏng vật lý (fluid dynamics, particle systems), xử lý ảnh lớn (convolution, FFT), và giải phương trình vi phân đều tăng tốc đáng kể. Thư viện gpuweb cung cấp các primitive compute cho các tác vụ này.

Browser Hỗ Trợ

Hiện nay WebGPU đã ổn định trên Chrome 113+, Edge 113+, Safari 16+ (macOS 14/iOS 17). Firefox đang phát triển (bật qua dom.webgpu.enabled trong about:config). Trước khi dùng, luôn kiểm tra navigator.gpu tồn tại.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const module = device.createShaderModule({code: computeShaderWGSL});
const pipeline = device.createComputePipeline({layout: 'auto', compute: {module, entryPoint: 'main'}});
const bindGroup = device.createBindGroup({pipeline, entries: [...]});
const encoder = device.createCommandEncoder();
encoder.dispatchWorkgroups(16);
device.queue.submit([encoder.finish()]);

Tương Lai: WebGPU và WebAssembly

Kết hợp WebGPU với WebAssembly (WasmGC, SIMD 128-bit) cho phép port toàn bộ stack ML (PyTorch, TensorFlow Lite) vào trình duyệt. WebGPU cho WebAssembly đang được thảo luận để Wasm module gọi GPU trực tiếp mà không qua JavaScript glue. Điều này mở ra khả năng chạy LLM nhỏ (1-3B tham số) hoàn toàn cục bộ trong tab trình duyệt.

WebGPU đại diện cho bước chuyển đổi lớn: từ “trình duyệt chỉ hiển thị” sang “trình duyệt tính toán”. Khi Khronos Group tiếp tục mở rộng API, chúng ta sẽ thấy AI inference, mã hóa, và cả game AAA chạy mượt ngay trong mỗi tab trình duyệt.