不止为考试：用Python/WebGL复现图形学考点，深入理解光线追踪与物理模拟

不止为考试：用Python/WebGL复现图形学考点，深入理解光线追踪与物理模拟

当图形学课本上的公式变成屏幕上跳动的光线和波浪，抽象的理论突然有了生命。这不是魔法，而是用代码重现经典算法的魅力——我们不是在为考试死记硬背"前向差分法"的定义，而是在Python中实现一个插值动画；不是在纸上推导"光线与球面求交"的方程，而是在WebGL里看着光线真实地击中球体并反射。这种学习方式，让雅可比矩阵从考卷上的符号变成了控制机械臂运动的实际参数。

1. 从八叉树到三维可视化：空间分割的代码实践

八叉树常被简化为"将空间分成八个子立方体"的考点，但真正理解它需要看到分解过程如何影响渲染效率。用Python的Matplotlib可以构建一个交互式演示：

import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D class OctreeNode: def __init__(self, center, size): self.center = np.array(center) self.size = size self.children = [] def subdivide(self, threshold): if self.size <= threshold: return new_size = self.size / 2 for x in [-1, 1]: for y in [-1, 1]: for z in [-1, 1]: new_center = self.center + np.array([x,y,z]) * new_size/2 self.children.append(OctreeNode(new_center, new_size))

表：八叉树参数对渲染性能的影响

提示：实际项目中会采用混合策略——在空旷区域停止细分，在复杂几何体周围继续分解

通过这个案例，你会发现考试中的"八叉树优点"变得具体：

• 内存优化：只对非均质区域继续分割
• 加速求交：快速排除与光线无关的子树
• 动态细节：可根据视角动态调整细分深度

2. 动画原理的代码拆解：从正弦缓动到贝塞尔形变

关键帧动画的"易入易出"原则在Three.js中只需几行代码就能体验：

// 正弦缓动实现 function easeInOutSine(t) { return -(Math.cos(Math.PI * t) - 1) / 2; } // 应用缓动函数更新物体位置 function update() { const progress = easeInOutSine(clock.getElapsedTime() % 3 / 3); cube.position.x = progress * 10; requestAnimationFrame(update); }

而贝塞尔曲线控制的网格形变，可以用Python展示数学到视觉的转化：

def bezier_deformation(u, v, control_points): n = len(control_points)-1 m = len(control_points[0])-1 point = np.zeros(3) for i in range(n+1): for j in range(m+1): point += (comb(n,i) * (u**i) * ((1-u)**(n-i)) * comb(m,j) * (v**j) * ((1-v)**(m-j)) * control_points[i][j]) return point

常见动画技术对比

• 前向差分法
  • 优点：计算简单，适合实时系统
  • 缺点：累积误差需要超采样补偿
• 贝塞尔控制
  • 优点：精确控制变形轨迹
  • 缺点：控制点增多时计算量指数增长
• 物理模拟
  • 优点：运动自然真实
  • 缺点：参数调优复杂

3. 光线追踪实战：从求交算法到完整渲染管线

用WebGL实现简化版光线追踪器时，球面求交这个考点就变成了具体的着色器代码：

// 光线与球面求交 float intersectSphere(vec3 rayOrigin, vec3 rayDir, vec3 sphereCenter, float radius) { vec3 oc = rayOrigin - sphereCenter; float a = dot(rayDir, rayDir); float b = 2.0 * dot(oc, rayDir); float c = dot(oc, oc) - radius*radius; float discriminant = b*b - 4.0*a*c; if(discriminant < 0.0) return -1.0; return (-b - sqrt(discriminant)) / (2.0*a); }

构建完整管线时需要理解的要点：

1. 递归终止：实现考试中的三个停止条件
2. 包围盒优化：用空间分割减少75%的求交计算
3. 材质系统：区分漫反射与镜面反射的光照模型

注意：实际项目会采用BVH加速结构，而非简单的均匀网格分割

4. 物理模拟：从欧拉公式到Gerstner波浪

当课本上的欧拉公式变成水面波纹时，数值积分的选择直接影响模拟效果：

# 显式欧拉与半隐式欧拉对比 def explicit_euler(pos, vel, acc, dt): new_vel = vel + acc * dt new_pos = pos + vel * dt return new_pos, new_vel def semi_implicit_euler(pos, vel, acc, dt): new_vel = vel + acc * dt new_pos = pos + new_vel * dt # 使用更新后的速度 return new_pos, new_vel

Gerstner波的实现揭示了考试中法线计算的原理：

// Gerstner波法线计算 vec3 gerstnerNormal(vec2 pos, float time) { vec3 tangent = vec3(1, 0, 0); vec3 binormal = vec3(0, 1, 0); for(int i=0; i<4; i++) { float k = 2.0 * PI / wavelengths[i]; float a = steepness[i] / k; vec2 dir = normalize(directions[i]); float phase = k * dot(dir, pos.xz) - speeds[i] * time; tangent.x -= dir.x * dir.x * a * sin(phase); tangent.z -= dir.x * dir.y * a * sin(phase); tangent.y -= dir.x * a * cos(phase); // 类似处理binormal... } return normalize(cross(tangent, binormal)); }

在完成这些项目后，考试中的推导题不再是无意义的符号操作——你知道隐式欧拉的泰勒展开为什么能提高稳定性，因为你在模拟弹簧系统时亲眼见过显式方法的数值爆炸。