Global Illumination thời gian thực trên WebGPU: Khi ánh sáng sống động ngay trên trình duyệt

Global Illumination thời gian thực trên WebGPU: Khi ánh sáng sống động ngay trên trình duyệt

Ánh sáng luôn là yếu tố cốt lõi của đồ họa máy tính, biến những mô hình 3D vô hồn thành những thế giới ảo sống động. Tuy nhiên, việc mô phỏng chính xác ánh sáng, đặc biệt là Global Illumination (GI - Chiếu sáng toàn cầu), luôn là một thách thức lớn đối với các nhà phát triển game và ứng dụng web. Gần đây, một kỹ thuật sử dụng "Surfel" kết hợp với sức mạnh của WebGPU đã mở ra khả năng mang lại hiệu ứng ánh sáng chất lượng cao ngay trên trình duyệt mà không cần phần cứng đắt đỏ.

Leonardo da Vinci và nghiên cứu về ánh sáng

Từ lịch sử đến kỹ thuật Path Tracing

Leonardo da Vinci từng quan sát và ghi chép rất kỹ về cách ánh sáng phản chiếu và thay đổi màu sắc khi va chạm với các bề mặt khác nhau. Ngày nay, các nhà khoa học máy tính áp dụng nguyên lý này thông qua kỹ thuật Path Tracing (dò tia). Phương pháp này mô phỏng hành trình của từng photon, tính toán màu sắc chính xác cho mỗi pixel.

Tuy nhiên, Path Tracing truyền thống đòi hỏi sức mạnh tính toán khổng lồ. Trong khi các engine kết xuất như Cycles có thể mất hàng giờ để tạo ra một hình ảnh hoàn hảo, các ứng dụng thời gian thực (như game) buộc phải hoàn tất việc xử lý trong vòng 16 mili-giây (tương đương 60 FPS). Đây là nơi kỹ thuật Surfel bước vào như một giải pháp tối ưu hóa đầy hứa hẹn.

Surfel là gì?

Surfel (viết tắt của Surface Element - Phần tử bề mặt) về cơ bản là một đĩa phẳng nhỏ trong không gian 3D, được định nghĩa bởi vị trí, hướng (normal) và bán kính. Khác với việc tính toán ánh sáng cho từng pixel trên màn hình, Surfel cho phép chúng ta tính toán ánh sáng cho các điểm trên bề mặt vật thể độc lập với độ phân giải màn hình.

Minh họa Surfel

Ưu điểm lớn nhất của Surfel là khả năng "tách rời" ánh sáng khỏi độ phân giải. Chúng ta có thể đổ bóng (shade) cho 50.000 surfel để lấy thông tin chiếu sáng toàn cầu, sau đó tái sử dụng thông tin đó cho hàng triệu pixel trên màn hình, giúp tiết kiệm tài nguyên tính toán đáng kể.

Quy trình kết xuất với Surfel trên WebGPU

Việc triển khai kỹ thuật này trên trình duyệt thông qua WebGPU là một kỳ tích kỹ thuật, bao gồm nhiều giai đoạn phức tạp:

1. Surfelization (Chuyển đổi hình học): Đây là quá trình chuyển đổi các mô hình 3D (thường được tạo từ các tam giác) thành một tập hợp các surfel. Hệ thống sử dụng G-buffer (chứa thông tin độ sâu và hướng bề mặt) để xác định vị trí và hướng của các surfel ứng viên. Một quá trình cạnh tranh song song sẽ quyết định surfel nào được giữ lại để đại diện cho một vùng bề mặt.

2. Cấu trúc lưới không gian (The Grid): Để tìm kiếm nhanh chóng các surfel lân cận, tác giả đã xây dựng một cấu trúc dữ liệu lưới 3D phân tầng (cascaded grid) xoay quanh camera. Lưới này giúp tối ưu hóa hiệu suất bằng cách chỉ so sánh các surfel trong cùng một ô không gian thay vì phải duyệt qua toàn bộ danh sách.

3. Tích hợp và Dò tia (Integration & Ray Tracing): WebGPU hiện tại chưa hỗ trợ Ray Tracing phần cứng, nên giải pháp thay thế là sử dụng thư viện three-mesh-bvh để mô phỏng dò tia qua Compute Shaders. Hệ thống bắn tia từ mỗi surfel để xác định lượng ánh sáng nhận được, kết hợp giữa ánh sáng trực tiếp và gián tiếp.

4. Hướng dẫn ánh sáng (Guiding the Light): Để giảm nhiễu, hệ thống sử dụng một lưới trọng số nhỏ trên bán cầu của mỗi surfel để ghi nhớ các hướng có nhiều ánh sáng. Theo thời gian, surfel sẽ "học" được cách bắn tia thông minh hơn vào các vùng sáng thay vì lãng phí tài nguyên vào các vùng tối.

Ánh xạ bán cầu để hướng dẫn ánh sáng

5. Ổn định thời gian (Temporal Stability): Sử dụng thuật toán ước tính trung bình đa quy mô (MSME), hệ thống kết hợp dữ liệu từ các khung hình trước để làm mượt hình ảnh, loại bỏ nhiễu (fireflies) mà không gây độ trễ quá lớn khi cảnh thay đổi.

6. Khắc phục rò rỉ ánh sáng (Light Leaks): Một vấn đề thường gặp của các kỹ thuật dựa trên surfel là ánh sáng có thể "thấm" qua tường. Giải pháp ở đây là sử dụng "Radial Depth Atlas" - một loại bản đồ độ sâu 360 độ nhỏ gắn liền với mỗi surfel, giúp chúng nhận biết sự che khuất và ngăn chặn ánh sáng chiếu qua các vật thể mỏng.

Kết quả và Tương lai

Mặc dù quy trình kết xuất này bao gồm hơn 13 compute passes mỗi khung hình, nhưng kết quả thực sự ấn tượng. Trên các GPU tầm trung, hệ thống có thể chạy mượt mà ở tốc độ 60 FPS cho các cảnh phức tạp. Thậm chí, nó còn hoạt động tốt trên iPhone 14 với Safari, chứng minh tiềm năng của WebGPU trên nền tảng di động.

Tất nhiên, vẫn còn những hạn chế. WebGPU hiện tại có giới hạn về số lượng storage buffer (tối đa 10 trên Chrome), gây khó khăn cho việc tối ưu hóa. Ngoài ra, việc thiếu hỗ trợ Ray Tracing phần cứng cũng là một trở ngại lớn.

Tuy nhiên, dự án này là minh chứng rõ ràng cho việc WebGPU đã mở ra cánh cửa mới cho kỹ thuật đồ họa trên web. Chúng ta không còn bị giới hạn bởi việc vẽ các tam giác đơn giản nữa; giờ đây chúng ta có thể xây dựng các pipeline đồ họa phức tạp, tính toán nặng mà trước đây chỉ có thể chạy trên các ứng dụng native.

Sương mù của kỷ nguyên đồ họa web đầu tiên đã tan biến, và các photon giờ đây tự do lan tỏa. Câu hỏi đặt ra là: Tiếp theo chúng ta sẽ xây dựng gì?