00-WebGL 完整学习路线大纲

WebGL 完整学习路线大纲第一阶段前置基础必须先掌握1. JavaScript 核心ES6 语法箭头函数、解构、模块化类型数组TypedArrayFloat32Array、Uint16Array 等异步编程Promise、async/await事件处理机制2. 计算机图形学数学基础向量数学加减乘除、点积、叉积、归一化矩阵运算平移、旋转、缩放矩阵、矩阵乘法坐标空间模型空间 → 世界空间 → 视图空间 → 裁剪空间 → NDC → 屏幕坐标三角函数正弦、余弦、弧度制线性插值lerp、slerp四元数进阶万向锁问题、平滑旋转3. HTML/CSS 基础Canvas 元素理解事件坐标系统第二阶段WebGL 核心概念4. 渲染管线理解顶点数据 → 顶点着色器 → 图元装配 → 光栅化 → 片元着色器 → 深度/模板测试 → 混合 → 帧缓冲每个阶段的作用可编程阶段 vs 固定功能阶段GPU 并行处理原理5. WebGL 上下文与基础获取 WebGL 上下文getContext(webgl)或webgl2视口设置viewport清除缓冲区颜色、深度、模板状态机概念WebGL 是状态机6. 缓冲区对象BufferObject创建缓冲区createBuffer绑定缓冲区bindBuffer传递数据bufferData类型ARRAY_BUFFER、ELEMENT_ARRAY_BUFFER第三阶段着色器编程核心难点7. GLSL 语言基础数据类型float、int、bool、vec2/3/4、mat2/3/4、sampler2D限定符attribute、uniform、varyingWebGL 1.0WebGL 2.0in、out、uniform内置变量顶点gl_Position、gl_PointSize片元gl_FragColor、gl_FragCoord函数与控制流if/else、for、while、自定义函数内置函数三角函数sin、cos、tan数学函数pow、sqrt、abs、clamp、mix、step、smoothstep向量函数length、dot、cross、normalize、reflect、refract8. 顶点着色器顶点变换MVP 矩阵Model-View-Projection传递数据到片元着色器varying/out逐顶点光照计算Gouraud 着色顶点动画波浪、旗帜飘动9. 片元着色器像素颜色输出纹理采样texture2D/texture逐像素光照计算Phong、Blinn-Phong程序化生成噪声、条纹、棋盘格第四阶段纹理与贴图10. 纹理基础创建纹理createTexture绑定与配置bindTexture、texParameteri加载图像数据texImage2D纹理坐标UV0-1 范围Mipmap 生成generateMipmap11. 纹理参数过滤方式NEARESTvsLINEAR、Mipmap 链环绕方式CLAMP_TO_EDGE、REPEAT、MIRRORED_REPEAT各向异性过滤EXT_texture_filter_anisotropic12. 高级纹理多纹理混合多层贴图立方体纹理天空盒、环境映射数据纹理texImage2D用 TypedArray渲染到纹理帧缓冲对象 Framebuffer Object第五阶段光照与材质13. 光照模型原理环境光照Ambient基础亮度漫反射光照DiffuseLambert 余弦定律镜面高光SpecularPhong / Blinn-Phong光照计算公式Color Ambient Diffuse Specular光源类型平行光、点光源、聚光灯14. 法线贴图与凹凸贴图切线空间转换法线贴图采样与解码normal normal * 2.0 - 1.0第六阶段3D 数学与矩阵系统15. 矩阵栈与变换模型矩阵位置/旋转/缩放视图矩阵相机位置与朝向投影矩阵透视投影 vs 正交投影矩阵乘法顺序MVP Projection * View * Model16. 相机系统第一人称相机欧拉角轨道相机围绕目标点旋转相机的lookAt矩阵构造视图矩阵的逆矩阵计算第七阶段高级渲染技术17. 帧缓冲对象FBO离屏渲染后期处理特效泛光、模糊、颜色校正阴影映射Shadow Mapping反射/折射渲染18. 多渲染目标MRTWebGL 2.0一次渲染写入多张纹理G 缓冲区延迟渲染 Deferred Rendering19. 实例化渲染Instanced Rendering大量重复物体的高效渲染drawArraysInstanced/drawElementsInstancedgl_InstanceID内置变量第八阶段WebGL 2.0 新特性20. 核心改进3D 纹理TEXTURE_3D采样器对象Sampler Object统一缓冲区对象Uniform Buffer ObjectUBO顶点数组对象Vertex Array ObjectVAO变换反馈Transform Feedback直接状态访问无需频繁bind第九阶段性能优化21. 渲染优化减少状态切换批次合并 Batch视锥体裁剪Frustum Culling遮挡剔除Occlusion Culling绘制调用最小化Draw Call Batching22. 内存优化纹理压缩S3TC、PVRTC、ASTC顶点数据压缩量化资源复用与池化23. 着色器优化避免动态分支减少复杂计算预计算使用低精度mediump、lowp第十阶段调试与工具24. 调试工具浏览器开发者工具Performance、MemorySpector.jsWebGL 调用捕获与回放RenderDoc帧调试器WebGL Inspector25. 常见问题排查黑屏/白屏检查着色器编译、矩阵、视口纹理不显示检查图像加载、纹理坐标、Mipmap性能瓶颈定位Draw Call 数量、纹理内存第十一阶段框架与实战26. 辅助库学习TWGL减少 WebGL 样板代码Three.js理解其封装原理Regl函数式 WebGL27. 实战项目路径简单三角形→ 理解管线流程彩色立方体→ 顶点颜色插值纹理贴图立方体→ 纹理采样光照球体→ 逐顶点/逐像素光照模型加载OBJ/GLTF→ 复杂网格渲染粒子系统→ 大量物体实例化后期特效→ 帧缓冲 着色器简单游戏引擎→ 整合所有知识学习路线图建议顺序阶段1-2: JS 数学基础2-4周 ↓ 阶段3-4: WebGL 上下文 第一个三角形1周 ↓ 阶段5: 着色器基础 变换2周 ↓ 阶段6: 纹理与颜色1-2周 ↓ 阶段7: 3D 空间与相机2周 ↓ 阶段8: 光照模型2-3周 ↓ 阶段9: 帧缓冲与后期2周 ↓ 阶段10: 高级特性按需学习 ↓ 阶段11: 性能优化持续 ↓ 阶段12: 实战项目4-8周推荐学习资源书籍《WebGL 编程指南》入门圣经虽然版本老但原理扎实《OpenGL ES 3.0 编程指南》《Real-Time Rendering》进阶在线资源Learn WebGLhttps://learnwebgl.brown37.netWebGL Fundamentalshttps://webglfundamentals.orgThe Book of Shadershttps://thebookofshaders.comShaderToy学习片元着色器神器练习平台CodePen / JSFiddle快速原型ShaderToy仅片元着色器自己搭建本地服务器避免跨域问题关键提醒不要一上来就学 Three.jsThree.js 封装了太多细节跳过底层会让你遇到性能问题时无从下手。着色器是最核心的障碍先写顶点着色器画一个三角形再写片元着色器改颜色慢慢增加复杂度。数学不能跳过矩阵乘法、向量点积叉积是基本功不然后面光照和相机看不懂。调试会比 JS 痛苦着色器编译错误信息不友好准备好用 Spector.js 和浏览器开发者工具。先 WebGL 1.0 再 2.0兼容性考虑1.0 的 Attribute/Uniform 限制会让你理解底层机制。结构如下workspace/webgl-learning/ ├── README.md # 总览导航 ├── 01-前置基础 ├── 02-WebGL 核心概念 ├── 03-着色器编程 ├── 04-纹理与贴图 ├── 05-光照与材质 ├── 06-3D 数学与矩阵 ├── 07-高级渲染技术 ├── 08-WebGL 2.0 新特性 ├── 09-性能优化 ├── 10- 调试与工具 └── 11-实战项目与资源