Skip to main content

WebGL

🎯 教程特色​

本教程采用对比学习法，每一节都包含：

  1. 原生 WebGL 实现：直接使用 WebGL API，理解底层原理
  2. Three.js 对比实现：用 Three.js 实现相同效果，理解框架封装
  3. 原理对比分析：理解 Three.js 如何封装 WebGL API
  4. 实战作业：每节末尾都有配套作业，巩固所学知识

📚 为什么需要对比学习？​

  • 理解底层：原生 WebGL 让你知道 GPU 真正在做什么
  • 提高效率：Three.js 让你快速开发，但知其所以然
  • 面试加分：理解框架封装原理，面试时能说出底层实现
  • 问题排查：遇到性能问题时，知道如何优化底层

🗺️ 课程大纲​

本教程共 12 节，从基础到实战，覆盖高级 Web 3D 工程师所需的核心技能。

第一阶段：WebGL 基础入门（第 1-4 节）​

第 1 节：WebGL 渲染管线与坐标系统​

  • 原生 WebGL：理解渲染管线的 5 个阶段
  • Three.js 对比：Scene、Camera、Renderer 如何映射到管线
  • 作业：绘制一个简单的点，理解顶点着色器的作用

第 2 节：第一个三角形（顶点数据与缓冲区）​

  • 原生 WebGL：手动创建 Buffer、设置 vertexAttribPointer
  • Three.js 对比：BufferGeometry 如何封装这些操作
  • 作业：用原生 WebGL 绘制彩色三角形，然后用 Three.js 实现相同效果

第 3 节：着色器编译与程序链接​

  • 原生 WebGL：createShader、compileShader、linkProgram 的完整流程
  • Three.js 对比：Material 系统如何管理 Shader
  • 作业：手动编译一个简单的 Shader，理解编译错误处理

第 4 节：Uniform 变量与动画​

  • 原生 WebGL：使用 uniform1f、uniform3f 传递数据
  • Three.js 对比：Material.uniforms 如何封装
  • 作业：实现一个随时间变化的颜色动画

第二阶段：核心技能（第 5-7 节）​

第 5 节：矩阵变换（MVP）​

  • 原生 WebGL：手动计算 MVP 矩阵，使用 uniformMatrix4fv
  • Three.js 对比：Object3D 的矩阵自动更新机制
  • 作业：实现一个旋转的立方体，理解矩阵乘法顺序

第 6 节：纹理映射​

  • 原生 WebGL：createTexture、texImage2D、sampler2D，纹理过滤与 Mipmap
  • Three.js 对比：TextureLoader 和 Texture 类
  • 作业：给立方体贴图，理解 UV 坐标

第 7 节：图像处理基础与卷积​

  • 原生 WebGL：将纹理用作图像数据源，计算 UV 跨度，在片段着色器中实现 3x3 卷积核运算
  • Three.js 对比：通过 ShaderMaterial 实现自定义图像滤镜
  • 作业：实现基于卷积的滤镜下拉切换（如高斯模糊、边缘检测等）

第 8 节：光照模型​

  • 原生 WebGL：实现 Lambert 和 Blinn-Phong 光照模型
  • Three.js 对比：MeshStandardMaterial 的实现
  • 作业：实现一个受光照的球体

第三阶段：高级特性（第 9-11 节）​

第 9 节：帧缓冲与后处理​

  • 原生 WebGL：createFramebuffer、framebufferTexture2D
  • Three.js 对比：RenderTarget 和 EffectComposer
  • 作业：实现灰度、模糊等后处理效果

第 10 节：性能优化​

  • 原生 WebGL：减少 Draw Call、优化 Shader、纹理压缩
  • Three.js 对比：InstancedMesh、Geometry Merging、LOD
  • 作业：性能对比测试和优化实践

第 11 节：GPGPU 基础与应用​

  • 原生 WebGL：使用纹理进行数据计算（Data Textures）、Ping-Pong 缓冲技术
  • Three.js 对比：使用 GPUComputationRenderer 构建计算图
  • 作业：实现基于 GPU 的粒子系统或生命游戏

第四阶段：综合实战（第 12 节）​

第 12 节：综合实战​

  • 项目：创建一个完整的 3D 场景
  • 要求：使用原生 WebGL 和 Three.js 两种方式实现
  • 包含：场景管理、相机控制、光照系统、后处理、性能优化、GPGPU 粒子效果
  • 对比：性能、代码量、开发效率

📝 作业系统​

作业格式​

每节作业包含：

  1. 基础作业（⭐）：按照教程实现基本功能
  2. 进阶作业（⭐⭐）：添加改进和优化
  3. 挑战作业（⭐⭐⭐）：综合应用，需要创新

作业提交​

  • 每个作业创建独立的 HTML 文件
  • 包含原生 WebGL 和 Three.js 两个版本
  • 添加注释说明关键步骤
  • 提供效果截图或 GIF

🎓 学习建议​

  1. 循序渐进：不要跳节，每节都完成作业
  2. 对比理解：先写原生 WebGL，再写 Three.js，对比差异
  3. 动手实践：只看不练等于没学，必须写代码
  4. 调试技巧：学会使用浏览器调试工具
  5. 性能意识：理解 Draw Call、纹理大小、Shader 复杂度

📚 参考资源​

官方文档​

学习网站​

社区资源​