从“2D转3D”看计算机图形学的数学本质-育师

从“2D转3D”看图形学的数学本质

在上一篇《从 0 构建 WAV 文件》中，我们拆解了音频文件的底层：它不过是按规则排列的二进制采样点。当时我们得出了一个结论：计算机的世界没有魔法，只有朴素的规则。

当你玩《黑神话：悟空》或《赛博朋克 2077》时，你是否好奇过：屏幕明明是一个平面，为什么我们能从中看出真实的3d效果？那些复杂的 3D 游戏，其底层逻辑是否也像 WAV 文件一样，是由某个简单的“规则”构建的？

答案是肯定的。3D 视觉的本质，其实就是一个简单的数学除法。

核心法则：透视投影

计算机之所以能“欺骗”我们的眼睛，靠的是透视（Perspective）。

在现实中，光线沿直线传播。远处的物体在视网膜上成像小，近处的成像大，即“近大远小”。计算机要实现 3D 效果，本质上就是要把空间中的3D 坐标 (x, y, z)，通过某种规则变换成屏幕上的2D 坐标 (x', y')。

几何建模：寻找相似三角形

为了找到这个变换规则，我们可以构建一个极简的几何模型。想象你正坐在屏幕前：

观察点：你的眼睛。
投影面：你面前的电脑屏幕（设中心为原点）。
3D 物体：屏幕后方空间里的一个点，坐标为\((x, y, z)\)，其中\(z\)是它距离你眼睛的深度。

当光线从物体出发射向你的眼睛时，必然会穿过屏幕。这个交点，就是该物体在屏幕上显示的正确位置。

如果我们从侧面观察这个模型，以眼睛、屏幕交点、物体真实位置为顶点，可以构建出两个相似三角形：

数学表达：神奇的 “除以 Z”

利用初中数学中“相似三角形对应边成比例”的原理，设眼睛到屏幕的距离为\(d\)（类似于相机的焦距），我们可以推导出屏幕坐标\(x'\)与空间坐标\(x, z\)的关系：

\[\frac{x'}{d} = \frac{x}{z} \implies x' = d \cdot \frac{x}{z} \]

同理，对于\(y\)轴：

\[y' = d \cdot \frac{y}{z} \]

这就是 3D 图形学的基本原理：3D 转 2D 的本质就是“除以 Z”。

当物体走远时，\(z\)变大，除出来的结果\(x', y'\)就越小（向屏幕中心收缩）。
当物体靠近时，\(z\)变小，除出来的结果变大（向屏幕边缘扩张）。

这就是为什么我们在走廊里往前走，两边的墙壁会向四周“散开”的原因。

从数据到画面：像构建 WAV 一样构建 3D

我们可以通过几个运用先前给出的公式完成3d图形绘制的例子来证明该公式的正确性：

/* by 01022.hk - online tools website : 01022.hk/zh/imagetotif.html */ import turtle # --- 1. 核心数学规则：透视投影 (来自博客公式) --- def project(x, y, z): """ 本质公式：x' = x / z, y' = y / z 我们乘上一个系数 400 (视距 d)，是为了让画面大一点，方便观察 """ d = 400 x_2d = (x / z) * d y_2d = (y / z) * d return x_2d, y_2d # --- 2. 定义 3D 数据 (8个顶点的 x, y, z) --- # 我们让前四个点的 z=2 (近)，后四个点的 z=3 (远) vertices = [ # 前面的四个顶点 (z=2, 离眼睛近，看起来大) [-1, -1, 2], [1, -1, 2], [1, 1, 2], [-1, 1, 2], # 后面的四个顶点 (z=3, 离眼睛远，看起来小) [-1, -1, 3], [1, -1, 3], [1, 1, 3], [-1, 1, 3] ] # 定义哪些点需要连成线 (索引号) edges = [ (0,1), (1,2), (2,3), (3,0), # 连接前脸的4条边 (4,5), (5,6), (6,7), (7,4), # 连接后脸的4条边 (0,4), (1,5), (2,6), (3,7) # 连接前后脸的4条纵向边 ] # --- 3. 执行投影计算 --- # 将 3D 坐标转换成 2D 坐标 points_2d = [] for v in vertices: p_2d = project(v[0], v[1], v[2]) points_2d.append(p_2d) # --- 4. 绘图部分 --- screen = turtle.Screen() screen.title("2D转3D本质演示：静态立方体") t = turtle.Turtle() t.pensize(2) t.speed(1) # 慢速绘图，观察过程 for edge in edges: start_idx = edge[0] end_idx = edge[1] # 移动到起点 t.up() t.goto(points_2d[start_idx]) # 画线到终点 t.down() t.goto(points_2d[end_idx]) t.hideturtle() print("绘制完成！观察近处的面（z=2）是否比远处的面（z=3）大？") turtle.done()

这个例子演示了一个静态的立方体是如何绘制的，当然，有人会说只要打好点也能做到与程序类似的效果，那么我们在用一个动态的旋转立方体来证明公式的正确性：

/* by 01022.hk - online tools website : 01022.hk/zh/imagetotif.html */ import turtle import math import time # --- 1. 核心数学规则：透视投影 --- def project(x, y, z, fov, viewer_distance): """ 将 3D 坐标变换为 2D 坐标 本质公式：x' = x / z, y' = y / z """ # 这里的 z 需要加上 viewer_distance，防止物体就在眼睛上导致除以 0 factor = fov / (viewer_distance + z) x_2d = x * factor y_2d = y * factor return x_2d, y_2d # --- 2. 定义立方体的数据结构 --- # 8个顶点 (x, y, z) vertices = [ [-1, -1, 1], [1, -1, 1], [1, 1, 1], [-1, 1, 1], [-1, -1, -1], [1, -1, -1], [1, 1, -1], [-1, 1, -1] ] # 12条棱 (连接顶点的索引) edges = [ (0,1), (1,2), (2,3), (3,0), # 前面 (4,5), (5,6), (6,7), (7,4), # 后面 (0,4), (1,5), (2,6), (3,7) # 连接前后的线 ] # --- 3. 设置画布 --- screen = turtle.Screen() screen.bgcolor("black") screen.setup(width=600, height=600) screen.tracer(0) # 关闭自动刷新，手动控制动画 t = turtle.Turtle() t.ht() # 隐藏画笔图标 t.color("#00FF00") # 极客绿 t.pensize(2) # --- 4. 动画循环 --- angle = 0 while True: t.clear() # 存储投影后的 2D 点 projected_points = [] # 每一帧都旋转一下坐标，让它动起来 angle += 0.02 for v in vertices: # 旋转矩阵（简单的绕 Y 轴和 X 轴旋转数学） # 这一步是为了让数据“动”起来，不是投影的本质 x, y, z = v # 绕 Y 轴转 nx = x * math.cos(angle) - z * math.sin(angle) nz = x * math.sin(angle) + z * math.cos(angle) # 绕 X 轴转 ny = y * math.cos(angle*0.7) - nz * math.sin(angle*0.7) nz = y * math.sin(angle*0.7) + nz * math.cos(angle*0.7) # --- 调用本质公式 --- # fov(视距)设为 400，viewer_distance(物体离眼睛距离)设为 4 p2d = project(nx, ny, nz, 400, 4) projected_points.append(p2d) # 绘制棱 for edge in edges: p1 = projected_points[edge[0]] p2 = projected_points[edge[1]] t.up() t.goto(p1) t.down() t.goto(p2) screen.update() # 刷新屏幕 time.sleep(0.01) turtle.done()

这个样例中，同样使用了刚才给出的公式，不过增加了一个新的公式，用于控制向量的旋转，即线条的旋转，以实现旋转的效果：

\[x' = x \cdot \cos \beta - y \cdot \sin \beta \]

\[y' = x \cdot \sin \beta + y \cdot \cos \beta \]

脑补维度：当这些点被连成线、贴上材质、加上光影，人类的大脑就会自动根据“近大远小”的视觉经验，帮我们“脑补”出那消失的第三个维度。