01. GLSL 简介与环境搭建
WebGL 渲染管线概览,搭建基于原生 Three.js 与 RawShaderMaterial 的 Shader 开发环境
WebGL 渲染管线概览,搭建基于原生 Three.js 与 RawShaderMaterial 的 Shader 开发环境
纯原生 WebGL API 实现:脱离 Three.js,彻底理解渲染管线底层
GLSL 系统化课程,从语法基础、向量矩阵、光照模型,到 Shader 实战、后期处理与 Three.js 源码级解析,基于原生 Three.js + RawShaderMaterial 深入 WebGL 渲染管线底层
掌握 WebGL GPGPU 编程范式,使用纹理与 FBO 进行通用 GPU 计算,实现基于 GPU 的粒子系统。
掌握 WebGL Uniform 变量的使用、渲染循环与时间驱动的动画,对比 Three.js 的动画系统。
深入 WebGL 光照模型,掌握 Lambert 漫反射与 Phong 镜面高光的实现原理,对比 Three.js 光照系统。
通过 WebGL 片段着色器实现图像处理,掌握卷积运算原理,实现模糊、锐化、边缘检测等滤镜效果。
掌握 WebGL 离屏渲染技术,理解 FBO 颜色/深度/模板附件,实现后处理效果。
深入 WebGL 性能瓶颈,掌握 Draw Call 优化、Shader 优化、纹理优化等工业级性能调优手段。
深入理解 WebGL 的底层运行机制:状态机模型、渲染管线五大阶段以及 MVP 坐标变换链路。
深入 WebGL Shader 编译流程、错误处理与调试技巧,理解 Program 链接过程及 Three.js Material 的封装机制。
深入 MVP 矩阵的数学原理与乘法顺序,掌握旋转、缩放、平移变换,对比 Three.js 矩阵系统。
掌握 WebGL 顶点缓冲区的创建与配置,理解 vertexAttribPointer 五大参数及 Three.js BufferGeometry 的封装原理。
掌握 WebGL 纹理的加载、绑定与 UV 坐标系统,理解采样、过滤与 wrap 模式。
综合运用 WebGL 全栈知识构建完整 3D 场景,对比原生 WebGL 与 Three.js 的工程化实现。