🎨 WebGL & Three.js 学习中心

从底层原理到高级应用，系统掌握 3D 图形编程

32
总课程数
31
已完成
97%
完成进度
Phase 0-5 完成 · Phase 6 进行中（97%）
🏗️ Phase 0: WebGL 底层心智模型 ✓ 已完成 ▼
Phase 0.1
GPU 与 CPU 的分工
通过餐厅类比理解串行 vs 并行计算
基础概念 可视化
Phase 0.2
WebGL 渲染管线
理解 7 个管线阶段，2 个可编程工位
渲染管线 着色器
Phase 0.3
WebGL 状态机
掌握 Bind → Config → Draw 三部曲
状态机 核心概念
Phase 0.4
第一个 WebGL 程序
从零开始渲染彩色三角形
实战 着色器
Phase 0.5
缓冲区与属性
理解顶点数据的存储和传递
缓冲区 优化
Phase 0.6
坐标系统（简化版）
用拍照类比理解 3D 到 2D 的转换
坐标系 MVP
🎮 Phase 1: Three.js 世界构建 ✓ 已完成 ▼
Phase 1.1
你好，Three.js！
Scene + Camera + Renderer 三大件
入门 核心概念
Phase 1.2
内置几何体大全
快速创建各种 3D 形状
几何体 实战
Phase 1.3
材质系统完整版
四种基础材质：Basic、Lambert、Phong、Standard
材质 光照 PBR
Phase 1.4
正交相机 vs 透视相机
理解两种相机的区别和使用场景
相机 对比
Phase 1.5
Object3D 基类
position、rotation、scale 与父子关系
核心概念 变换 太阳系
Phase 1.6
坐标系与空间变换
右手坐标系、变换三要素、局部与世界坐标
坐标系 变换 矩阵
Phase 1.7
光照系统详解
四种基础光源：Ambient、Directional、Point、Spot
光照 阴影 实战
🖼️ Phase 2: 纹理与视觉细节 ✓ 已完成 ▼
Phase 2.1
纹理加载基础
TextureLoader、纹理属性、过滤模式
纹理 贴图 实战
Phase 2.2
环境贴图与反射
CubeTextureLoader、envMap、金属反射效果
环境贴图 反射 PBR
Phase 2.3
纹理动画
UV 动画、视频纹理、Canvas 动画
动画 视频 Canvas
Phase 2.4
纹理贴图通道详解
PBR 材质的 8 种贴图通道：颜色、法线、粗糙度、金属度、AO、位移、自发光、透明度
纹理通道 PBR 材质
🎬 Phase 3: 动画与交互 ✓ 已完成 ▼
Phase 3.1
物体动画与变换
position、rotation、scale 动画
动画 变换 实战
Phase 3.2
Three.js 动画系统
AnimationMixer、AnimationClip、KeyframeTrack
动画系统 关键帧 专业
Phase 3.3
其他相机控制器
FlyControls、FirstPerson、PointerLock、Trackball
控制器 飞行 第一人称
Phase 3.4
Raycasting 鼠标拾取
射线检测、点击选择、悬停高亮、物体删除
Raycasting 交互 鼠标事件
Phase 3.5
GLTFLoader 模型加载
加载外部 3D 模型、模型处理、动画播放
GLTFLoader 模型 glTF
Phase 3.6
粒子系统
Points、PointsMaterial、波浪效果、鼠标交互
粒子 Points 特效
Phase 3.7
GSAP 补间动画
to/from/fromTo、Timeline、Easing、Stagger
GSAP 动画 补间
Phase 3.9
场景图与 Group
层级结构、变换继承、太阳系模型
Scene Graph Group 层级
✨ Phase 4: 自定义着色器 GLSL ✓ 已完成 ▼
Phase 4.1
GLSL 语法基础
数据类型、变量限定符、内置函数
着色器 GLSL 基础
Phase 4.2
顶点着色器实战
波浪、扭曲、粒子、地形生成
顶点着色器 动画 实战
Phase 4.3
片元着色器实战
渐变、图案、发光、扫描线特效
片元着色器 特效 实战
Phase 4.4
着色器高级技巧
光照模型、Fresnel、全息、能量护盾
高级 光照 特效
Phase 4.7
常用 GLSL 图形算法库
数学工具、噪声、SDF、颜色、变换函数集合
工具库 算法 实用
🎨 Phase 5: 数学与美学 ✅ 完成 ▼
Phase 5.0
后期处理基础
WebGLRenderTarget、自定义着色器通道、多效果组合
后处理 特效 实战
Phase 5.1
造型函数深入
缓动函数、三角函数、阶跃函数、曲线可视化
数学 函数 动画
Phase 5.2
噪声函数
Random、Value Noise、Perlin Noise、Simplex Noise
噪声 程序化 纹理
Phase 5.3
FBM（分形布朗运动）
叠加多频率噪声：云朵、木纹、大理石、湍流、山脊
FBM 分形 程序化
Phase 5.4
SDF（有向距离场）
数学函数描述几何：圆、矩形、多边形、布尔运算、平滑混合
SDF 矢量 运算
Phase 5.5
Raymarching（光线步进）
Sphere Tracing、3D SDF、Phong 光照、软阴影、AO
Raymarching 3D 光照
Phase 5.6
高级后处理效果
Bloom（辉光）、DOF（景深）、SSAO（环境遮蔽）
Bloom DOF SSAO
⚡ Phase 6: 性能优化与工程化 ⚡ 进行中 ▼
Phase 6.1
性能监控与调试工具
Stats.js、renderer.info、Chrome DevTools、自定义监控
性能 监控 调试