Core WebGL & 3D Graphics Course: From Zero to Shaders Master
Tự Học Lập Trình WebGL & Đồ Họa 3D Cốt Lõi: Lộ Trình Toàn Diện
Welcome to our WebGL and 3D Graphics self-study series. This course is designed to guide you through the mathematical foundations (Vectors, Matrices, MVP projection), GLSL shaders, camera controls, light models, and GPU memory optimizations.
This programming guide is only available in Vietnamese. Please switch the language toggle to Vietnamese to start learning.
Chào mừng bạn đến với chuỗi bài học tự học lập trình WebGL và đồ học 3D cốt lõi (Core WebGL & 3D Graphics) theo chuẩn hiện đại. WebGL cho phép chúng ta khai thác trực tiếp sức mạnh xử lý song song cực đại của GPU ngay trong trình duyệt mà không cần cài đặt plugin.
Hiểu sâu về cơ chế dựng hình (rasterization), toán học đồ họa 3D và ngôn ngữ GLSL Shaders sẽ giúp bạn làm chủ từ các hiệu ứng hoạt họa 3D mượt mà cho đến việc tự phát triển các thư viện đồ họa của riêng mình.
Dưới đây là lộ trình 18 bài học được thiết kế chi tiết từ nền tảng đến chuyên sâu — mỗi bài học đều được tích hợp các giải thích kỹ lưỡng, ví dụ mã nguồn, câu hỏi trắc nghiệm ôn tập và demo tương tác trực tiếp trên trình duyệt:
Bài 1: Khởi Đầu Với WebGL & Đồ Họa Rasterization
CPU vs GPU, vòng đời Graphics Pipeline, State Machine của WebGL, thiết lập Context và vẽ tam giác màu đầu tiên qua Buffer & Shaders. Demo tam giác nội suy tương tác.
Bài 2: Toán Học Đồ Họa 3D — Vector, Matrix & Phép Biến Đổi
Hệ tọa độ 3D, NDC, Clip Space; ma trận tịnh tiến/quay/tỉ lệ; ma trận chiếu phối cảnh và ma trận MVP (Model-View-Projection). Demo khối lập phương 3D.
Bài 3: Ngôn Ngữ Shaders GLSL & Giao Tiếp Dữ Liệu
Cú pháp GLSL ES: vec/mat, swizzling, clamp/mix/smoothstep; attributes, uniforms, varyings và nội suy pixel. Demo trình soạn thảo Fragment Shader trực tiếp.
Bài 4: Quản Lý Buffers & Vertex Array Objects (VAO)
Index Buffer (gl.drawElements) tránh lặp đỉnh; ArrayBuffer, ElementArrayBuffer; tổ chức attribute qua Vertex Array Objects (VAO) trong WebGL 2.
Bài 5: Mô Hình Chiếu Sáng — Phong & Blinn-Phong
Vector pháp tuyến; ánh sáng Ambient, Diffuse, Specular; so sánh Phong vs Blinn-Phong. Demo quả cầu chiếu sáng tương tác.
Bài 6: Textures & Kỹ Thuật Bản Đồ UV
Nạp ảnh lên GPU, ánh xạ UV; Texture Filtering (Nearest/Linear/Mipmapping), Wrapping (Repeat/Clamp); Multi-texturing. Demo texture tương tác.
Bài 7: Normal Mapping, Bump & Parallax Mapping
Thêm chi tiết bề mặt không tăng đa giác; không gian tiếp tuyến & ma trận TBN; giải mã normal map; so sánh Bump/Parallax. Demo bật/tắt normal map.
Bài 8: Camera Đồ Họa & Hệ Thống Camera LookAt
View Matrix, thuật toán LookAt từ đầu; xây dựng Orbit Controls cho phép xoay, thu phóng camera quanh tiêu điểm. Demo điều khiển camera.
Bài 9: Nạp Mô Hình 3D — OBJ & glTF
Định dạng Wavefront OBJ & glTF 2.0 (accessors/bufferViews); parse mesh thật, tính normals & indexing. Demo parse OBJ nhúng + wireframe.
Bài 10: Độ Trong Suốt, Alpha Blending & Sắp Xếp Độ Sâu
gl.blendFunc & phương trình pha trộn; depth write với vật trong suốt; sắp xếp back-to-front; giới thiệu OIT. Demo blend modes tương tác.
Bài 11: Framebuffer & Kỹ Thuật Hậu Kỳ (Post-processing)
Render to Texture; cấu hình Framebuffer Object (FBO); hiệu ứng không gian màn hình (vignette, blur, color grading) qua Convolution Kernels. Demo post-processing.
Bài 12: Đổ Bóng Real-time (Shadow Mapping)
Two-pass rendering: render depth map từ góc nhìn nguồn sáng, so sánh độ sâu tô bóng; khử Shadow Acne, Peter Panning, PCF. Demo bóng đổ thời gian thực.
Bài 13: Kết Xuất Dựa Trên Vật Lý (PBR) & Cook-Torrance
Lý thuyết microfacet, BRDF Cook-Torrance (D, F, G); quy trình Metallic-Roughness, Fresnel, tone mapping & gamma. Demo quả cầu PBR tương tác.
Bài 14: Environment Mapping, Skybox & IBL
Cubemap 6 mặt, vẽ Skybox, phản chiếu/khúc xạ môi trường; giới thiệu Image-Based Lighting (IBL). Demo quả cầu phản chiếu cubemap thủ tục.
Bài 15: Hoạt Họa Xương & Skinning
Bone hierarchy, Joint & Inverse Bind Matrix; Linear Blend Skinning trong vertex shader; candy-wrapper artifact, blending. Demo chi thể skinned uốn cong.
Bài 16: Đồ Họa Thủ Tục (Procedural) & SDFs/Raymarching
Sinh họa tiết thủ tục (Value/Perlin Noise, fBm); dựng hình không cần lưới bằng Signed Distance Fields (SDF) & Raymarching. Demo raymarching tương tác.
Bài 17: Tối Ưu Hóa Hiệu Năng Đồ Họa WebGL
Giảm draw calls bằng Instanced Rendering; nén Texture; tối thiểu hóa state changes; quản lý bộ nhớ GPU và thắt nút cổ chai CPU-GPU. Demo instancing.
Bài 18: Giới Thiệu WebGPU — Tương Lai Sau WebGL
Giới hạn WebGL; kiến trúc WebGPU (Adapter/Device/Pipeline/BindGroup); ngôn ngữ WGSL; Compute Shaders & GPGPU. Demo WebGPU (có fallback).