Skip to main content

WebGL 数学要求指南：到底需要多少数学？

🤔 常见误解​

❌ 误解 1：需要数学专业背景​

真相： 不需要！大多数 WebGL 开发者都不是数学专业。

❌ 误解 2：需要精通高等数学​

真相： 不需要微积分、线性代数理论，只需要会用！

❌ 误解 3：数学不好就学不会​

真相： 数学是工具，边学边用，不需要一开始就全部掌握。

📊 数学要求真实评估​

必须掌握的数学（20%）​

这些是必须的，但都很基础：

1. 向量基础（必须）​

需要掌握：

  • 向量的加法和减法
  • 向量的点积（Dot Product）。衡量方向的同向性，求夹角、判断朝向、背面判断、光照漫反射等
  • 向量的叉积（Cross Product）。得到一个同时垂直于 a、b 的向量；对顺序敏感；求三角形面法线等
  • 向量的归一化（Normalize）。让长度变 1、只保留方向

实际使用：

// 项目中的实际代码
const lineVector = new THREE.Vector2(points[0].x, points[0].y);
const carVector = new THREE.Vector2(carPosition.x, carPosition.y);
const distance = carVector.distanceTo(lineVector); // 计算距离

学习时间： 1-2 天就能掌握

难度： ⭐⭐ (简单)

2. 矩阵基础（必须）​

需要掌握：

  • 理解矩阵是什么（4x4 矩阵）。4x4 矩阵 = 一个“坐标变换器”，它把物体从模型空间一路变到最终用于渲染的位置空间。
  • 矩阵乘法（不需要手算，Three.js 帮你算）
  • 理解矩阵的作用（旋转、缩放、平移）
  • 认识 MVP 矩阵：即 Model（模型）、View（视图）、Projection（投影）矩阵的组合，这是图形学最核心的坐标流水线（面试常考）。

实际使用：

// 着色器中，Three.js 已经提供了矩阵
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
// 你只需要知道：这是坐标变换，不需要手算！

学习时间： 2-3 天理解概念

难度： ⭐⭐⭐ (中等，但 Three.js 帮你做了大部分)

3. 坐标系（必须）​

需要掌握：

  • 理解 3D 坐标系（X、Y、Z 轴）。右手坐标系
  • 理解坐标变换（模型空间 → 世界空间 → 视图空间 → 屏幕空间）。归一化设备坐标 NDC
  • 理解齐次坐标（Homogeneous Coordinates）。把 3D 的点 (x, y, z) 变成 4D 的 (x, y, z, w)，目的是让“旋转/缩放/平移（以及透视）”都能用同一种矩阵乘法做完

实际使用：

// 项目中的坐标变换
const { position, rotation } = correctDZPosition(
  { x: origionPosition.x, y: origionPosition.y },
  this.scene_.userData.carMatrix,
);

学习时间： 3-5 天理解概念

难度： ⭐⭐⭐ (需要理解，但不需要计算)

可以边学边用的数学（30%）​

这些不需要一开始就掌握，遇到时再学：

1. 三角函数​

什么时候需要：

  • 实现旋转动画
  • 计算角度
  • 实现波浪效果

实际使用：

// 着色器中的使用
pos.y += sin(time + position.x) * 0.2; // 波浪效果

学习建议： 遇到时再学，Three.js 提供了很多工具函数

难度： ⭐⭐ (简单，主要是 sin、cos)

2. 插值与平滑函数​

什么时候需要：

  • 颜色渐变与动画过渡（mix 线性插值）
  • 平滑边缘、抗锯齿（smoothstep 平滑阶跃）
  • 限制数值范围（clamp）

实际使用：

// GLSL 中的内置函数
vec3 color = mix(colorA, colorB, t); // t 在 0-1 之间
float alpha = smoothstep(0.0, 0.1, distance); // 平滑过渡，常用于抗锯齿

学习建议： 理解概念即可，GLSL 提供了强大的内置函数（mix, smoothstep, clamp）

难度： ⭐⭐ (比较简单)

3. 距离计算​

什么时候需要：

  • 碰撞检测
  • 视锥剔除
  • 光照计算

实际使用：

// 项目中的距离计算
const distance = carVector.distanceTo(lineVector);
// Three.js 已经提供了 distanceTo() 方法

学习建议： Three.js 提供了所有需要的函数

难度： ⭐ (非常简单)

4. 噪声与曲线 (Noise & Curves)​

什么时候需要：

  • 噪声 (Perlin/Simplex Noise)：生成自然的波浪、大理石纹理、火焰、云雾等（比纯 sin 函数自然得多）。
  • 贝塞尔曲线 (Bezier)：相机的平滑漫游、绘制平滑的线段。

学习建议： 了解概念即可。Three.js 内置了完整的曲线工具类，着色器中也可以直接引入别人写好的噪声函数库。

难度： ⭐⭐⭐ (概念略抽象，但主要是使用现成算法)

高级数学（50%，可选）​

这些是高级功能才需要，大多数项目不需要：

1. 四元数（Quaternion）​

  • 用途： 复杂旋转
  • 需要程度： 高级功能才需要
  • Three.js 支持： ✅ 完全支持，不需要手算

2. 法向量计算​

  • 用途： 光照计算
  • 需要程度： 实现光照时才需要
  • Three.js 支持： ✅ 自动计算

3. 视锥剔除算法​

  • 用途： 性能优化
  • 需要程度： 高级优化才需要
  • Three.js 支持： ✅ 内置支持

4. 碰撞检测算法​

  • 用途： 物理交互
  • 需要程度： 游戏开发才需要
  • 库支持： 有专门的物理引擎（Cannon.js、Ammo.js）

🎯 实际项目中的数学使用​

项目中的数学使用分析​

让我们看看项目实际用了多少数学：

1. LineRender.ts 中的数学​

// 1. 向量运算（Three.js 封装）
const lineVector = new THREE.Vector2(points[0].x, points[0].y);
const carVector = new THREE.Vector2(carPosition.x, carPosition.y);
const distance = carVector.distanceTo(lineVector);
// 难度：⭐ (Three.js 帮你算)

// 2. 坐标变换（Three.js 封装）
const { position, rotation } = correctDZPosition(
  { x: origionPosition.x, y: origionPosition.y },
  this.scene_.userData.carMatrix,
);
// 难度：⭐⭐ (理解概念即可)

// 3. 颜色计算（简单数学）
const color = {
  r: 42 / 255, // 除法
  g: 114 / 255,
  b: 109 / 255,
};
// 难度：⭐ (小学数学)

结论： 项目中的数学都很基础，Three.js 帮你做了大部分！

2. 着色器中的数学​

// 1. 向量运算（GLSL 内置）
vec3 pointPos = position.xyz + vec3(lineNormal * thickness / 2.0 * lineMiter, 0.0);
// 难度：⭐⭐ (向量加法和乘法)

// 2. 矩阵乘法（GLSL 内置）
gl_Position = projectionMatrix * modelViewMatrix * vec4(pointPos, 1.0);
// 难度：⭐⭐ (理解概念，不需要手算)

// 3. 条件判断（简单逻辑）
float mask = step(0.5, select);
vec3 ccc = mix(diffuse, cColor, mask);
// 难度：⭐ (简单逻辑)

结论： 着色器中的数学主要是向量和矩阵运算，GLSL 提供了所有函数！

💡 实用建议​

1. 不要被数学吓到​

真相：

  • 大多数 WebGL 开发者数学水平一般
  • Three.js 帮你做了 90% 的数学计算
  • 你只需要理解概念，不需要手算

2. 边学边用​

策略：

  • 先学基础（向量、矩阵、坐标系）
  • 遇到问题时再深入学习
  • 使用库和工具，不要手算

3. 使用工具和库​

推荐：

  • Three.js - 提供了所有数学工具
  • gl-matrix - 如果需要更底层的数学库
  • 在线计算器 - 复杂计算时使用

4. 理解概念 > 计算能力​

重点：

  • 理解向量是什么，比会计算向量更重要
  • 理解矩阵的作用，比会手算矩阵更重要
  • 理解坐标变换，比会推导公式更重要

📖 推荐学习资源（数学部分）​

在线课程（免费）​

  1. Khan Academy - 线性代数

  2. 3Blue1Brown - 线性代数的本质

书籍（可选）​

  1. 《3D Math Primer for Graphics and Game Development》

    • 难度：⭐⭐⭐
    • 适合：想深入理解的人

  2. 《Essential Mathematics for Games and Interactive Applications》

    • 难度：⭐⭐⭐⭐
    • 适合：想做游戏开发的人

实用工具​

  1. Three.js 文档

  2. WebGL Fundamentals

✅ 总结​

数学要求真实评估​

数学类型需要程度难度学习时间
向量基础必须⭐⭐2-3 小时
矩阵基础必须⭐⭐⭐3-4 小时
坐标系必须⭐⭐⭐4-5 小时
三角函数可选⭐⭐遇到时学
高级数学可选⭐⭐⭐⭐高级功能才需要

关键结论​

  1. 不需要数学专业背景 - 大多数 WebGL 开发者都不是数学专业
  2. Three.js 帮你做 90% - 你只需要理解概念，不需要手算
  3. 边学边用 - 遇到问题时再深入学习
  4. 理解 > 计算 - 理解概念比会计算更重要

实际建议​

如果你：

  • ✅ 会加减乘除
  • ✅ 理解坐标（X、Y、Z）
  • ✅ 会使用计算器

那你就可以开始学习 WebGL！

数学不是障碍，是工具。边学边用，遇到问题时再深入学习。 🚀

🎯 最后的话​

不要被数学吓到！

  • WebGL 开发 ≠ 数学研究
  • 大多数数学计算都有工具帮你做
  • 理解概念比会计算更重要
  • 边学边用，循序渐进

记住：Three.js 和 GLSL 已经帮你做了大部分数学工作，你只需要理解它们的作用！ 💪