WebPhysics: Triển khai mô phỏng vật lý WebGPU với thuật toán AVBD

WebPhysics là một dự án mã nguồn mở thử nghiệm, tập trung vào việc xây dựng một engine vật lý rigid-body (thân cứng) và soft-body (thân mềm) chạy trực tiếp trên trình duyệt thông qua API WebGPU. Dự án này đặc biệt thú vị vì nó triển khai thuật toán giải quyết AVBD (Augmented Vertex Block Descent) được giới thiệu trong một bài báo học thuật gần đây của Giles và cộng sự (2025).

Đây là một bước tiến thú vị trong lĩnh vực đồ họa web, cho phép các nhà phát triển tận dụng sức mạnh của GPU để mô phỏng các tương tác vật lý phức tạp mà không cần phụ thuộc vào các plugin hay phần mềm cài đặt ngoài.

Quy trình xử lý AVBD

Engine vật lý này tuân theo cấu trúc của Thuật toán 1 từ bài báo gốc về AVBD, bao gồm một chuỗi các bước xử lý chặt chẽ để đảm bảo tính chính xác và hiệu quả:

Phát hiện va chạm

Quy trình bắt đầu với việc phát hiện va chạm từ vị trí hiện tại của các vật thể trước khi bắt đầu các vòng lặp giải quyết. Hệ thống sử dụng cấu trúc dữ liệu LBVH (Linear Bounding Volume Hierarchy) để tối ưu hóa việc tìm kiếm các cặp vật thể tiềm năng trong giai đoạn "broad phase" (giai đoạn rộng). Sau đó, "narrow phase" (giai đoạn hẹp) sẽ tạo ra các tiếp điểm manifold cụ thể và lưu trữ trạng thái để hỗ trợ tính năng warm-start (khởi động nóng) và xử lý ma sát.

Tô màu và xử lý song song

Một trong những điểm sáng của thuật toán AVBD là kỹ thuật "greedy coloring" (tô màu tham lam). Bằng cách gán màu cho các vật thể, engine có thể xử lý song song tất cả các vật thể có cùng màu trong bước nguyên thủy (primal step), giúp tận dụng tối đa kiến trúc tính toán song song của GPU.

Vòng lặp giải quyết chính

Trong mỗi lần lặp, engine sẽ tích lũy các đóng góp từ quán tính và ràng buộc cho từng vật thể, lắp đặt hệ thống cục bộ và áp dụng cập nhật nguyên thủy của AVBD. Sau đó, các biến số kép (dual variables) và độ cứng được cập nhật song song dựa trên các quy tắc augmented-Lagrangian.

Tình trạng hiện tại và Hạn chế

Hiện tại, WebPhysics vẫn ở giai đoạn "proof of concept" (bằng chứng khái niệm). Dự án chưa phải là một module "plug-and-play" và hỗ trợ trình duyệt còn hạn chế (chỉ hoạt động trên Chrome hiện tại do yêu cầu về WebGPU).

Tác giả cũng lưu ý rằng có một sự khác biệt nhỏ trong triển khai so với bài báo gốc: trong khi bài báo mô tả việc cập nhật vị trí double-buffered (bộ đệm kép) để xử lý xung đột hiếm gặp giữa các vật thể cùng màu, thì phiên bản hiện tại vẫn sử dụng phương pháp giải quyết vật thể theo màu tại chỗ (in-place).

Cách cài đặt và chạy

Các nhà phát triển quan tâm có thể thử nghiệm dự án này thông qua npm:

npm install
npm run dev

Để build cho môi trường production:

npm run build

Dự án này là một ví dụ điển hình cho thấy tiềm năng của WebGPU trong việc mang các thuật toán đồ họa và tính toán nặng nề từ máy tính để bàn sang môi trường web một cách mượt mà.