WebGPU là gì?
WebGPU là API đồ họa hiện đại cho trình duyệt web, được W3C chuẩn hóa với mục tiêu thay thế WebGL bằng cách tiếp cận gần hơn với các API native như Vulkan, Metal và Direct3D 12. WebGPU cung cấp quyền truy cập trực tiếp vào GPU, cho phép thực thi compute shader và rendering với hiệu năng cao hơn đáng kể so với WebGL.
Khác với WebGL dựa trên OpenGL ES 2.0/3.0, WebGPU được thiết kế từ đầu cho kiến trúc GPU hiện đại. Nó hỗ trợ compute pipeline riêng biệt, cho phép chạy các tác vụ tính toán tổng quát (GPGPU) không chỉ giới hạn ở đồ họa. Đây là bước tiến quan trọng đưa web application lên ngang hàng với native app về hiệu năng đồ họa.
Tại sao WebGPU quan trọng?
Hiệu năng cao hơn đáng kể
WebGPU giảm overhead của trình duyệt bằng cách cung cấp API gần với hardware. Theo benchmark từ các nhà phát triển, WebGPU có thể đạt hiệu năng gấp 2-3 lần WebGL trong các tác vụ phức tạp. Đối với compute workload, khoảng cách có thể lên đến 10x nhờ khả năng sử dụng compute shader trực tiếp.
Lý do chính là WebGPU loại bỏ lớp trừu tượng không cần thiết của OpenGL. API tiếp cận GPU theo kiểu “explicit” — bạn chỉ định resource layout, synchronization và memory barrier rõ ràng. Trình duyệt có thể tối ưu hóa command buffer tốt hơn thay vì phải suy luận intent từ lệnh OpenGL.
Compute Shader cho AI và Machine Learning
Một trong những ứng dụng thú vị nhất của WebGPU là chạy mô hình AI trực tiếp trên trình duyệt. Compute shader cho phép thực thi tensor operation, matrix multiplication và convolution — những thao tác nền tảng của deep learning — trên GPU.
Các framework như webgpu/ml và TensorFlow.js WebGPU backend đã tận dụng tính năng này để chạy LLM và mô hình computer vision trực tiếp trong browser. Điều này mở ra khả năng AI inference offline mà không cần server hay WebAssembly fallback chậm hơn.
Cách WebGPU hoạt động
WebGPU được tổ chức thành các thành phần chính:
- Adapter: Đại diện cho GPU vật lý, chứa thông tin capabilities như memory size, feature support.
- Device: Logical connection đến GPU, dùng để tạo buffer, texture, pipeline.
- Queue: Đối tượng để submit command buffer lên GPU thực thi.
- Pipeline: Shader program đã được compiled, bao gồm render pipeline hoặc compute pipeline.
- Bind Group: Liên kết resource (buffer, texture) với shader thông qua layout binding.
Đối với developer quen thuộc với Vulkan hoặc Metal, WebGPU sẽ rất quen thuộc. Workflow cơ bản: tạo device → tạo buffer → viết shader (WGSL) → tạo pipeline → submit command → present.
So sánh WebGPU với WebGL
| Tiêu chí | WebGL | WebGPU |
|---|---|---|
| API style | Immediate/retained mode | Explicit command buffer |
| Compute shader | Không (transform feedback) | Có (native) |
| Multi-threading | Hạn chế | Hỗ trợ tốt |
| Shader language | GLSL | WGSL |
| Memory control | Tự động | Tùy chỉnh |
| Browser support | 100% | Chrome/Edge/Firefox (đang rollout) |
Ví dụ code WebGPU cơ bản
Dưới đây là ví dụ render một tam giác đơn giản bằng WebGPU:
// Khởi tạo adapter và device
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
// Tạo shader module (WGSL)
const shaderModule = device.createShaderModule({
code: `
@vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
return array(vec2f(0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5))[i];
}
@fragment fn fs() -> @location(0) vec4f { return vec4f(1, 0, 0, 1); }
`
});
// Tạo pipeline và render
const pipeline = device.createRenderPipeline({ layout: 'auto', vertex: { module: shaderModule }, fragment: { module: shaderModule, targets: [{ format: 'bgra8unorm' }] } });
const commandEncoder = device.createCommandEncoder();
commandEncoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(), loadOp: 'clear', storeOp: 'store' }] }).setPipeline(pipeline).draw(3).end();
device.queue.submit([commandEncoder.finish()]);Ví dụ này cho thấy WebGPU API rất tối giản và trực tiếp. Bạn chỉ cần vài dòng để khởi tạo device, định nghĩa shader và render một tam giác — không cần shader compilation phức tạp hay state management như WebGL.
Ứng dụng thực tế của WebGPU
WebGPU đã được áp dụng trong nhiều lĩnh vực:
- Game 3D trong browser: Các engine như Three.js và PlayCanvas đã tích hợp WebGPU backend.
- AI inference: Chạy LLM, Stable Diffusion và mô hình computer vision trực tiếp trên GPU browser.
- Scientific visualization: Render dữ liệu khoa học lớn với hiệu năng cao mà không cần plugin.
- Video processing: Encode/decode video, áp dụng filter phức tạp bằng compute shader.
- CAD và 3D modeling: Các công cụ thiết kế kỹ thuật chạy hoàn toàn trên web.
Hỗ trợ trình duyệt
WebGPU đã được triển khai trên Chrome 113+, Edge 113+ và Firefox Nightly. Safari cũng đang phát triển hỗ trợ. Bạn có thể kiểm tra hỗ trợ bằng đoạn code:
if ('gpu' in navigator) {
console.log('WebGPU supported');
const adapter = await navigator.gpu.requestAdapter();
console.log('GPU:', await adapter.requestAdapterInfo());
} else {
console.log('WebGPU not supported');
}Kết luận
WebGPU đại diện cho thế hệ API đồ họa web tiếp theo, mang lại hiệu năng gần native và khả năng compute tổng quát. Đối với developer muốn xây dựng ứng dụng 3D, AI inference hay scientific visualization trên web, WebGPU là công cụ không thể bỏ qua trong tương lai gần.
Nếu bạn đang phát triển ứng dụng đồ họa hoặc AI trên web, đã đến lúc bắt đầu học WebGPU — không chỉ để tận dụng hiệu năng, mà còn để chuẩn bị cho sự chuyển dịch toàn diện từ WebGL sang API mới này.
