WebGPU không đơn thuần là “WebGL nhưng nhanh hơn”. Đây là một mô hình đồ họa và tính toán gần hơn với GPU hiện đại, cho phép ứng dụng web kiểm soát pipeline rõ ràng hơn và thực hiện công việc tính toán song song ngay trên GPU. Với Three.js, cánh cửa đi vào mô hình này là WebGPURenderer.

Điểm hấp dẫn nhất không nằm ở một con số FPS mặc định. Giá trị thực tế đến từ khả năng tổ chức render, compute và shader theo một kiến trúc phù hợp hơn với những cảnh 3D phức tạp. Đổi lại, đội ngũ phải chấp nhận một renderer còn experimental, thay đổi cách viết shader và kiểm thử trên nhiều backend.

WebGPURenderer thực sự thay đổi điều gì?

Theo hướng dẫn chính thức của Three.js, WebGPURenderer ưu tiên backend WebGPU và tự động fallback về WebGL 2 khi trình duyệt hoặc thiết bị không hỗ trợ. Điều này cho phép một codebase phục vụ cả thiết bị mới lẫn cũ, nhưng không có nghĩa mọi tính năng WebGPU đều hoạt động giống hệt trên fallback.

Khác biệt quan trọng nhất là renderer mới được xây dựng quanh node materials, Three.js Shading Language (TSL), post-processing hiện đại và khả năng phối hợp render với compute. Thay vì coi shader là những chuỗi GLSL gắn vào material, ứng dụng mô tả phép tính bằng graph JavaScript. Three.js có thể biên dịch graph đó sang WGSL cho WebGPU hoặc GLSL cho WebGL.

import * as THREE from 'three/webgpu';

const renderer = new THREE.WebGPURenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(() => renderer.render(scene, camera));
document.body.appendChild(renderer.domElement);

WebGPU được khởi tạo bất đồng bộ. setAnimationLoop() sẽ bảo đảm renderer sẵn sàng trước frame đầu tiên; nếu bạn tự quản lý vòng lặp bằng requestAnimationFrame(), hãy gọi await renderer.init() trước khi render.

TSL là phần quan trọng hơn cả việc đổi renderer

Migration thường khó ở lớp material. ShaderMaterial, RawShaderMaterial và các chỉnh sửa bằng onBeforeCompile() không được hỗ trợ trực tiếp trong WebGPURenderer. Những phần này cần được chuyển sang node materials và TSL.

TSL cho phép ghép các phép toán shader bằng JavaScript, tái sử dụng node và để compiler loại bỏ tính toán trùng lặp. Đây không chỉ là thay cú pháp GLSL bằng cú pháp mới: nó chuyển quyền quản lý phụ thuộc, kiểu dữ liệu và target backend cho hệ node của Three.js. Lợi ích lớn nhất là một graph shader có thể phục vụ cả WGSL và GLSL.

Compute shader mở ra những workload nào?

WebGPU hỗ trợ compute pipeline như một phần cốt lõi. Trong ứng dụng Three.js, điều này phù hợp với particle simulation, skinning hoặc biến đổi dữ liệu số lượng lớn, procedural generation và các bước tiền xử lý không cần chạy tuần tự trên CPU. Khi dữ liệu được tạo, cập nhật và tiêu thụ trên GPU, ứng dụng có thể giảm việc truyền dữ liệu qua lại giữa JavaScript và GPU.

Tuy nhiên, compute không tự động làm mọi thuật toán nhanh hơn. Một workload nhỏ, nhiều nhánh hoặc phải đọc kết quả về CPU liên tục có thể không có lợi. Hãy đo CPU frame time, GPU frame time, số lần upload buffer, bộ nhớ GPU và độ ổn định của frame thay vì chỉ nhìn FPS trung bình.

Khi nào chưa nên chuyển?

MDN hiện vẫn đánh dấu WebGPU là Limited availability và API chỉ hoạt động trong secure context qua HTTPS. Three.js cũng nói rõ WebGPURenderer vẫn experimental; một số cảnh có thể thiếu tính năng hoặc thậm chí chạy tốt hơn bằng WebGLRenderer.

• Giữ WebGLRenderer nếu sản phẩm phụ thuộc nặng vào ShaderMaterial, onBeforeCompile hoặc EffectComposer cũ.
• Chưa migration toàn bộ nếu phần lớn người dùng nằm trên thiết bị mà bạn chưa kiểm thử WebGPU/WebGL 2 fallback.
• Không hứa hẹn tăng hiệu năng trước khi benchmark đúng scene, đúng thiết bị và đúng chất lượng hình ảnh.

Lộ trình migration ít rủi ro

1. Chọn một cảnh đại diện có bottleneck đã đo được.
2. Đổi import sang three/webgpu và dựng WebGPURenderer mà chưa thay toàn bộ material.
3. Lập danh sách ShaderMaterial, onBeforeCompile và post-processing cần chuyển sang TSL.
4. So sánh WebGPU, WebGL 2 fallback và WebGLRenderer hiện tại bằng cùng camera, độ phân giải và nội dung.
5. Chỉ mở rộng migration khi frame time, bộ nhớ và độ phủ thiết bị đạt tiêu chí sản phẩm.

Kết luận

• WebGPURenderer là kiến trúc renderer thế hệ mới, không phải công tắc tăng FPS.
• TSL là nền tảng để shader và post-processing chạy qua nhiều backend.
• Compute có giá trị khi dữ liệu lớn được giữ và xử lý trên GPU.
• Fallback WebGL 2 giúp mở rộng độ phủ nhưng vẫn phải được kiểm thử như một target riêng.
• Một proof of concept có benchmark đáng tin hơn một cuộc migration toàn bộ dựa trên kỳ vọng.