WebGPU & Shaders: Next-Generation Real-Time Web Graphics — Complete Syllabus
Lập Trình WebGPU & Compute Shaders: Đồ Họa 3D Thế Hệ Mới — Lộ Trình Chi Tiết
The Dawn of Next-Gen Web Graphics
WebGPU is the brand new web standard that exposes modern GPU acceleration features—specifically Direct3D 12, Metal, and Vulkan APIs—to the web. Unlike WebGL, which was mapped to the aging OpenGL ES, WebGPU is designed from the ground up for modern graphics card architectures.
This course will take you from zero to expert in WebGPU, covering GPU architecture, GPUDevice setup, WGSL shaders programming, Uniform/Storage buffers memory alignment, lighting calculations, depth maps, Compute Shaders, physics simulations, and instanced rendering.
Note: This course is written in Vietnamese. Please switch the language toggle in the menu to read the full detailed lessons.
Kỷ nguyên đồ họa WebGPU và Lập trình song song
WebGPU là tiêu chuẩn API đồ họa thế hệ mới trên Web, thay thế cho chuẩn WebGL đã hơn 10 năm tuổi. WebGPU giao tiếp trực tiếp với các API đồ họa cấp thấp của hệ điều hành như Vulkan (Windows/Linux), Metal (macOS/iOS), và Direct3D 12 (Windows).
Lợi thế lớn nhất của WebGPU không chỉ dừng lại ở đồ họa 3D phức tạp mượt mà hơn, mà nằm ở việc khai thác sức mạnh tính toán song song khổng lồ của card đồ họa thông qua Compute Shader (GPGPU). Điều này mở ra cơ hội tối ưu các thuật toán Vật lý hạt, Mô phỏng chất lỏng và Trí tuệ nhân tạo (AI/Machine Learning) chạy cực nhanh ngay trên trình duyệt web của bạn.
Về Series này
Loạt bài viết được thiết kế theo phong cách trực quan (Visual-First). Với các Sân chơi tương tác (Interactive Sandboxes) viết bằng WebGPU thô và WGSL, bạn sẽ trực tiếp tùy biến cấu trúc luồng của Compute Shader, thay đổi cấu trúc đệm Uniform, và chiêm ngưỡng sức mạnh xử lý hàng vạn hạt song song.
3 Dịch chuyển Tư duy quan trọng (Mindset Shifts)
Để lập trình WebGPU hiệu quả, bạn cần chuyển đổi tư duy lập trình đồ họa cũ qua 3 điểm mấu chốt:
Bảng thuật ngữ nền tảng (Glossary)
Để dễ dàng theo dõi loạt bài viết, bạn cần ghi nhớ các định nghĩa kỹ thuật sau:
| Thuật ngữ (EN) | Dịch nghĩa (VI) | Định nghĩa ngắn gọn |
|---|---|---|
| GPU Adapter | Bộ thích ứng GPU | Mô tả phần cứng vật lý của card đồ họa (như NVIDIA, AMD, Apple GPU) đang có trên máy tính. |
| GPUDevice | Thiết bị logic GPU | Giao diện điều khiển logic thiết lập kênh truyền lệnh và cấp phát bộ nhớ trên GPU. |
| Command Encoder | Bộ ghi lệnh GPU | Ghi lại các tác vụ render/compute vào một buffer lệnh (Command Buffer) để gửi lên GPU thực thi hàng loạt. |
| Storage Buffer | Bộ đệm lưu trữ | Vùng nhớ đọc/ghi tự do kích thước lớn trên GPU, hỗ trợ giao tiếp dữ liệu mảng động. |
| WGSL | Ngôn ngữ Shader WebGPU | Ngôn ngữ lập trình shader chính thức của WebGPU với cú pháp tường minh và an toàn kiểu dữ liệu. |
| Compute Shader | Shader tính toán | Chương trình shader chạy độc lập không phụ thuộc vào quy trình vẽ đồ họa, chuyên dùng để tính toán song song. |
Lộ trình 10 bài học lập trình WebGPU chuyên sâu
Dưới đây là chi tiết lộ trình 10 bài viết thực chiến đưa bạn làm chủ đồ họa Web thế hệ mới:
Bài 1: Kiến trúc GPU & WebGPU Setup — Vẽ Tam Giác Đầu Tiên
Làm quen với luồng xử lý song song SIMT. Thiết lập adapter, GPUDevice và canvas swap chain. Khởi dựng Render Pipeline thô đầu tiên và vẽ hình tam giác cơ bản trên WebGPU.
Bài 2: Lập Trình Shaders Với WGSL — Biến Đổi Màu Sắc Dynamic
Học cú pháp ngôn ngữ WGSL. Cơ chế truyền cấu trúc đỉnh Vertex sang Fragment thông qua location bindings, builtin values và nội suy màu sắc động theo biến thời gian.
Bài 3: Uniform & Storage Buffers — Quy Tắc Căn Chỉnh Dữ Liệu
Phân biệt bộ đệm Uniform vs Storage. Luật căn chỉnh ô nhớ struct alignment (std140). Sử dụng BindGroups và BindGroupLayout để ánh xạ tài nguyên lên GPU vẽ mô hình 3D.
Bài 4: Pipeline State & Depth Testing — Khối Rubik 3D
Tìm hiểu rasterizer state và primitive topology. Cách thiết lập Depth buffer chống z-fighting khi vẽ 3D và thuật toán lọc khử răng cưa đa mẫu MSAA.
Bài 5: Phong Lighting & Shadow Maps — Bóng Đổ Động Thời Gian Thực
Xây dựng vector pháp tuyến chiếu sáng Phong (ambient/diffuse/specular). Kỹ thuật chiếu bóng đổ động sử dụng cấu hình Shadow Mapping FBO depth pass.
Bài 6: Compute Shader & Threading — Nhân Ma Trận Siêu Tốc Độ
Lập trình song song đa luồng GPGPU. Cơ chế chia nhóm công việc Workgroups, các ID điều hướng luồng. Đồng bộ hóa bộ nhớ trong bằng Barrier và đo tốc độ so với CPU.
Bài 7: Mô Phỏng 100k Hạt Trên GPU — Instanced Rendering Cực Đỉnh
Duy trì trạng thái hàng vạn hạt vật lý hoàn toàn trên bộ nhớ GPU Storage Buffer. Sử dụng Compute Shader cập nhật chuyển động và vẽ hạt bằng Instanced Rendering.
Bài 8: SPH Fluid Simulation — Mô Phỏng Chất Lỏng Động Học
Cài đặt thuật toán SPH (Smoothed Particle Hydrodynamics) mô phỏng dòng chảy của nước. Xây dựng Spatial Hashing tìm hạt lân cận nhanh chóng trực tiếp trên GPU.
Bài 9: glTF 3D Model Loading — Nạp Mô Hình Nhân Vật Thực Tế
Đọc cấu trúc file nhị phân mô hình 3D glTF/GLB thô. Đẩy dữ liệu đỉnh và liên kết hình ảnh kết cấu (Textures) trực tiếp lên GPU không dùng thư viện ngoài.
Bài 10: Dự Án: ColorQuarium 3D — Bể Cá 3D Hiệu Năng Vô Song
Tích hợp toàn bộ kỹ thuật của khóa học: Mô phỏng đàn cá bơi bằng compute shader, vẽ đàn cá qua instanced rendering, tạo hiệu ứng lọc màu ánh sáng dưới nước và tối ưu FPS.