WebGL / Three.js / Cesium 全栈知识体系 —— 从入门到进阶的完整学习路径

WebGL / Three.js / Cesium 全栈知识体系 —— 从入门到进阶的完整学习路径

作者按：本文基于 40+ 篇 CSDN 高质量技术文章的系统整理与提炼，覆盖图形学基础、WebGL 渲染管线、Three.js 实战、Cesium GIS 开发、性能优化、后处理特效、引擎选型等全链路知识体系。适合前端开发者向 3D/GIS 方向转型时系统学习，也可作为团队技术分享的内部参考资料。

📑 目录

一、知识体系总览

1.1 三层架构关系

WebGL、Three.js、Cesium.js 三者之间存在清晰的逐层封装关系：

┌─────────────────────────────────────────────────────────┐
│ Cesium.js (GIS 应用层) │
│ 专注：地理空间可视化、3D地球、地形影像、空间数据分析 │
│ 特有：Entity/Primitive、3D Tiles、CZML、坐标系转换 │
├─────────────────────────────────────────────────────────┤
│ Three.js (通用 3D 层) │
│ 专注：通用3D场景、动画交互、模型渲染 │
│ 特有：场景图管理、丰富材质系统、后处理管线、模型加载器 │
├─────────────────────────────────────────────────────────┤
│ WebGL (图形底层) │
│ 专注：GPU图形渲染、着色器编程 │
│ 特有：渲染管线、GLSL、缓冲对象、纹理操作、帧缓冲 │
└─────────────────────────────────────────────────────────┘

1.2 知识模块全景图

1.3 文章分类索引

以下将 40+ 篇文章按知识层级归类，读者可按需跳转学习：

第一部分：图形学基础与数学准备

1.1 坐标系统 —— 一切的基石

理解坐标系统是进入 3D 开发的第一道门槛。整个渲染过程涉及 5 个坐标空间 的转换：

局部空间 (Local) ──[Model Matrix]──→ 世界空间 (World)
世界空间 (World) ──[View Matrix]───→ 观察空间 (View)
观察空间 (View) ──[Projection]────→ 裁剪空间 (Clip)
裁剪空间 (Clip) ──[透视除法]──────→ NDC 标准化设备坐标
NDC 坐标 ──[视口变换]──────→ 屏幕坐标 (Screen)

关键公式：gl_Position = Projection × View × Model × vertexPosition

⚠️ 常见陷阱：矩阵乘法不满足交换律，顺序必须严格按 MVP 来。

1.2 Three.js 与 Cesium 坐标系统差异

Three.js 中 NDC 坐标转换陷阱：

// 屏幕坐标 → NDC（注意 Y 轴反转！）
const mouse = {

x: 0, y: 0 };
mouse.x = (event.clientX / window.innerWidth) * 2 – 1;
mouse.y = –(event.clientY / window.innerHeight) * 2 + 1; // ⚠️ Y轴取反

1.3 Delaunay 三角剖分与构网

在 GIS 领域中，Delaunay 三角剖分是构建 TIN（不规则三角网）地形模型的基础算法：

• 核心特性：最大化最小角，避免出现\”瘦长\”三角形
• GIS 应用：地形建模、等高线生成、三维表面重建
• 前端实现：可借助 d3-delaunay、earcut 等库

1.4 光照模型

Blinn-Phong 模型是实时渲染中最经典的光照模型，以较低计算成本实现真实感：

进阶方向：PBR（基于物理的渲染），包括金属度/粗糙度工作流、IBL（基于图像的光照）、HDR 环境贴图。

第二部分：WebGL 核心原理

2.1 渲染管线 —— 理解一切 3D 渲染的基石

WebGL 渲染管线分为 6 个核心阶段：

顶点数据 → ①顶点着色器 → ②图元装配 → ③光栅化 → ④片段着色器 → ⑤测试与混合 → ⑥帧缓冲区

2.2 GPU 数据传输机制

从 CPU（JavaScript）向 GPU（着色器）传递数据有三种核心通道：

完整数据传递流程：

// 1. 获取 WebGL 上下文
const gl = canvas.getContext(\’webgl\’);

// 2. 编译着色器 + 链接程序
const program = createProgram(gl, vertexShaderSrc, fragmentShaderSrc);

// 3. 创建缓冲区并上传顶点数据
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 4. 绑定 attribute
const posLoc = gl.getAttribLocation(program, \’a_position\’);
gl.enableVertexAttribArray(posLoc);
gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

// 5. 设置 uniform
const matrixLoc = gl.getUniformLocation(program, \’u_matrix\’);
gl.uniformMatrix4fv(matrixLoc, false, mvpMatrix);

// 6. 执行绘制
gl.drawArrays(gl.TRIANGLES, 0, vertexCount);

2.3 Z-Buffer（深度缓冲）

Z-Buffer 是解决 3D 场景中遮挡关系的核心机制：

• 原理：为每个像素存储深度值（离相机距离），渲染时比较新片元深度与已有深度
• 深度测试：gl.enable(gl.DEPTH_TEST)，默认 gl.LESS（仅通过更近的片元）
• 常见问题 —— Z-Fighting（深度冲突）：
  • 原因：深度缓冲区精度不足，两个面距离过近时交替显示
  • 解决：使用 highp 精度、调整近远平面比例、增大面间距离

2.4 Shadow Mapping（阴影映射）

在 WebGL 中实现实时阴影的标准技术：

① 从光源视角渲染场景 → 生成深度图（Shadow Map）
② 从相机视角正常渲染场景
③ 在片段着色器中，将当前片元变换到光源空间，比较深度值
④ 深度值更大 → 在阴影中；更小 → 被照亮

关键优化：

• PCF（百分比渐近滤波）：多次采样取平均，柔化阴影边缘
• CSM（级联阴影映射）：按距离分段使用不同分辨率的阴影图
• Bias 偏移：避免\”阴影痤疮\”（shadow acne）现象

2.5 纹理系统