WebGPU là một giao diện lập trình web cho phép JavaScript sử dụng trực tiếp GPU của máy người dùng, cả để dựng hình lẫn để tính toán song song. Nó là kế nhiếp của WebGL, đồng thời bổ sung những năng lực mà WebGL thiếu: ngôn ngữ shader WGSL, pipeline tính toán hạng nhất và một mô hình xác thực chặt chẽ hơn. Bài viết này đi vào kiến trúc, ngôn ngữ, mô hình bảo mật và trạng thái hỗ trợ thực tế.
Vì sao cần WebGPU khi đã có WebGL
WebGL ra đời từ một thời điểm khác. Nó phản ánh OpenGL ES 2.0, một API sinh ra cho thiết bị di động gọn nhẹ, và chỉ hỗ trợ dựng hình. Khi bạn muốn chạy mô hình học máy trong trình duyệt, bộ lọc ảnh nặng hay thuật toán xử lý văn bản, bạn buộc phải hack mọi thứ qua texture và shader phân đoạn, rồi ghi kết quả trở lại texture. Cách đó chậm và giòn.
WebGPU bám sát các API gốc hiện đại như D3D12, Metal và Vulkan, nên cùng một mã nguồn chạy được trên Windows, macOS và Android. Ngoài phần dựng hình với pipeline vertex cùng fragment, WebGPU thêm pipeline tính toán với một giai đoạn shader duy nhất, chạy trên hàng nghìn workgroup cùng lúc trên các buffer tuỳ ý. Không còn trở ngại về lý thuyết nữa, một trang web có thể suy luận mô hình ngôn ngữ hoặc mô phỏng vật lý ngay trong máy người dùng.
| Tiêu chí | WebGL | WebGPU |
|---|---|---|
| Ngôn ngữ shader | GLSL | WGSL |
| Phạm vi | Dựng hình | Dựng hình và tính toán |
| API gốc tương ứng | OpenGL ES 2.0 | D3D12, Metal, Vulkan |
| Mô hình xác thực | Nhẹ, ít kiểm tra | Nghiêm ngặt, kiểm tra trước khi chạy |
| Yêu cầu bối cảnh | Không bắt buộc HTTPS | Bắt buộc HTTPS |
| Đối tượng GPU | Bật/tắt theo trang | Mỗi ứng dụng một thiết bị logic riêng |
Mô hình lập trình: từ adapter đến device
Toàn bộ API WebGPU chỉ khả dụng trong bối cảnh bảo mật, tức trang HTTPS hoặc localhost. Trên Windows, chỉ có một nối GPU thực sự cho từng lần duyệt, buộc các ứng dụng trong một tab hoặc nhiều tab phải chia sẻ tài nguyên.
Điểm khởi đầu là navigator.gpu, bạn gọi requestAdapter() để xin một adapter, truyền kèm gợi ý như high-performance hoặc low-energy nếu muốn. Từ adapter, bạn gọi requestDevice() để nhận đối tượng GPUDevice, và mọi thao tác tạo buffer, tạo shader module hay tạo pipeline đều đi qua thiết bị này. Mỗi ứng dụng web có một thiết bị logic riêng, được ghép nối đa kênh với các ứng dụng và tiến trình khác cùng chia sẻ GPU vật lý.
WGSL: ngôn ngữ shader của WebGPU
Shader WebGPU viết bằng WGSL, cú pháp gần với Rust với hệ thống kiểu tĩnh. Mã được đưa vào qua createShaderModule với trường code và kiểu MIME text/wgsl. Mỗi shader gắn với một giai đoạn được khai báo bằng thuộc tính như @vertex, @fragment hoặc @compute.
Điểm khác biệt về mô hình lỗi nằm ở việc kiểm tra diễn ra khi bạn yêu cầu tạo pipeline, không phải lúc shader chạy. Gọi createRenderPipelineAsync trả về một Promise, nếu mã sai bạn nhận thông báo lỗi chi tiết kèm chỉ số dòng; còn nếu sai thì pipeline tạo ra bị vô hiệu hoá và các lệnh gửi vào nó trở thành lỗi im lặng.
Mô hình bảo mật có chủ đích
Khác với WebGL, đặc tả WebGPU có một chương riêng về các khả năng lạm dụng, liệt kê từ hành vi không xác định trên CPU lẫn GPU, dữ liệu chưa khởi tạo, truy cập ngoài biên trong shader, tấn công kênh thời gian, hàng hóa hỏng bộ nhớ, từ chối dịch vụ, nhận dạng tải làm việc và lạm dụng tài nguyên. Ngoài ra còn các rủi ro riêng tư: đặc điểm phần cứng, mẫu vân tay hiệu năng, và định danh adapter.
Có một chi tiết đáng lưu ý. Xác thực của WebGPU có thể bảo đảm đúng kiểu dữ liệu và quyền dùng, nhưng không ngăn được hoàn toàn việc đọc ra ngoài biên khi phần cứng texture tham gia vào. Vì vậy các trình triển khai có thể bật cơ chế truy cập buffer bền vững ở tầng driver, để shader không chạm được vào vùng nhớ mà ứng dụng không sở hữu. Đây là lớp cô lập mà WebGL không có.
Tính toán trên GPU thay thế thế nào
Một ví dụ kinh điển là mô phỏng đàn chim. Dữ liệu vị trí của hàng nghìn hạt được lưu trong hai buffer trao đổi, và một compute shader chạy song song cập nhật vị trí của toàn bộ hạt trong một bước. Sau đó dữ liệu được dùng để vẽ các hạt bằng instancing. Cùng cách đó dùng cho cull vật thể, biến đổi mô hình có khung xương, hạt nhiễu và hậu kỳ hình ảnh như làm sắc nét hay tạo hiệu ứng độ sâu trường ảnh.
Một số ngành cũng dùng pipeline tính toán tích hợp của WebGPU, ví dụ TensorFlow.js với backend WebGPU cho suy luận mô hình ngay trong trình duyệt. Chrome khi ra mắt tính năng cho biết khối lượng JavaScript cho cùng một tác vụ đồ hoạ giảm mạnh và tốc độ suy luận mô hình học máy cải thiện hơn ba lần so với đường đi qua WebGL.
Trạng thái triển khai và hỗ trợ trình duyệt
WebGPU được Chrome và Edge hỗ trợ từ phiên bản 113 vào tháng 4 năm 2023 trên Windows, macOS và ChromeOS, sau đó mở rộng lên Android ở Chrome 121, Opera 99 và Samsung Internet 24. Safari bắt đầu bật mặc định ở bản 26 vào khoảng giữa năm 2025 trên macOS Tahoe dùng chip Apple. Firefox đưa vào bản 141 khoảng giữa năm 2025 với mức hỗ trợ mặc định còn hạn chế theo nền tảng. Ở đặc tả, WebGPU hiện ở trạng thái Candidate Recommendation Draft, tức bản dự thảo gần hoàn thiện nhưng chưa phải khuyến nghị cuối cùng, và bản dự thảo không đồng nghĩa với sự bảo trợ chính thức từ W3C.
Hệ sinh thái cũng đang hình thành theo hướng bổ trợ chứ không thay thế hoàn toàn: WebGPU cho bước tính toán và phần chuẩn bị dữ liệu, WebGL 2 vẫn giữ vai trò ở những nơi cần tương thích rộng hơn, còn WebAssembly thường đóng vai trò kết nối khi thuật toán cần viết bằng ngôn ngữ khác để đóng gói vào web.
Lỗi thường gặp khi dùng WebGPU
- Quên kiểm tra khả dụng của navigator.gpu. Trên HTTP và trình duyệt cũ, đối tượng này là undefined, cần kiểm tra trước khi gọi bất kỳ hàm nào.
- Dùng await sai chỗ. requestAdapter và requestDevice đều bất đồng bộ, phải await cả hai trước khi tạo buffer.
- Bỏ qua kết quả trả về null. requestAdapter trả về null nếu không tìm được GPU phù hợp hoặc người dùng từ chối, cần xử lý nhánh này.
- Tạo shader không kiểm tra lỗi biên dịch. Lỗi WGSL chỉ lộ ra khi tạo pipeline, nên bắt lỗi createRenderPipelineAsync.
- Chuyển dữ liệu không kiểm soát thời điểm. Buffer đã được ánh xạ bằng mapAsync không được ghi đè cho tới khi unmap.
- Không kiểm tra giới hạn thiết bị. Số luồng tính toán, kích thước buffer và số bind group đều có trần cứng, cần hỏi adapter trước.
Nguồn tham khảo: tài liệu WebGPU trên MDN, đặc tả WebGPU trong Editor’s Draft, đặc tả ngôn ngữ WGSL, bài giới thiệu WebGPU của nhóm Chrome, bảng hỗ trợ trình duyệt và mục WebGPU trên Wikipedia.
