从“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图形绘制的例子来证明该公式的正确性：

1. import turtle
3. # --- 1. 核心数学规则：透视投影 (来自博客公式) ---
4. def project(x, y, z):
5.     """
6.     本质公式：x' = x / z, y' = y / z
7.     我们乘上一个系数 400 (视距 d)，是为了让画面大一点，方便观察
8.     """
9.     d = 400
10.     x_2d = (x / z) * d
11.     y_2d = (y / z) * d
12.     return x_2d, y_2d
14. # --- 2. 定义 3D 数据 (8个顶点的 x, y, z) ---
15. # 我们让前四个点的 z=2 (近)，后四个点的 z=3 (远)
16. vertices = [
17.     # 前面的四个顶点 (z=2, 离眼睛近，看起来大)
18.     [-1, -1, 2], [1, -1, 2], [1, 1, 2], [-1, 1, 2],
19.     # 后面的四个顶点 (z=3, 离眼睛远，看起来小)
20.     [-1, -1, 3], [1, -1, 3], [1, 1, 3], [-1, 1, 3]
21. ]
23. # 定义哪些点需要连成线 (索引号)
24. edges = [
25.     (0,1), (1,2), (2,3), (3,0), # 连接前脸的4条边
26.     (4,5), (5,6), (6,7), (7,4), # 连接后脸的4条边
27.     (0,4), (1,5), (2,6), (3,7)  # 连接前后脸的4条纵向边
28. ]
30. # --- 3. 执行投影计算 ---
31. # 将 3D 坐标转换成 2D 坐标
32. points_2d = []
33. for v in vertices:
34.     p_2d = project(v[0], v[1], v[2])
35.     points_2d.append(p_2d)
37. # --- 4. 绘图部分 ---
38. screen = turtle.Screen()
39. screen.title("2D转3D本质演示：静态立方体")
40. t = turtle.Turtle()
41. t.pensize(2)
42. t.speed(1) # 慢速绘图，观察过程
44. for edge in edges:
45.     start_idx = edge[0]
46.     end_idx = edge[1]
47.    
48.     # 移动到起点
49.     t.up()
50.     t.goto(points_2d[start_idx])
51.     # 画线到终点
52.     t.down()
53.     t.goto(points_2d[end_idx])
55. t.hideturtle()
56. print("绘制完成！观察近处的面（z=2）是否比远处的面（z=3）大？")
57. turtle.done()

复制代码

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

1. import turtle
2. import math
3. import time
5. # --- 1. 核心数学规则：透视投影 ---
6. def project(x, y, z, fov, viewer_distance):
7.     """
8.     将 3D 坐标变换为 2D 坐标
9.     本质公式：x' = x / z, y' = y / z
10.     """
11.     # 这里的 z 需要加上 viewer_distance，防止物体就在眼睛上导致除以 0
12.     factor = fov / (viewer_distance + z)
13.     x_2d = x * factor
14.     y_2d = y * factor
15.     return x_2d, y_2d
17. # --- 2. 定义立方体的数据结构 ---
18. # 8个顶点 (x, y, z)
19. vertices = [
20.     [-1, -1,  1], [1, -1,  1], [1,  1,  1], [-1,  1,  1],
21.     [-1, -1, -1], [1, -1, -1], [1,  1, -1], [-1,  1, -1]
22. ]
24. # 12条棱 (连接顶点的索引)
25. edges = [
26.     (0,1), (1,2), (2,3), (3,0), # 前面
27.     (4,5), (5,6), (6,7), (7,4), # 后面
28.     (0,4), (1,5), (2,6), (3,7)  # 连接前后的线
29. ]
31. # --- 3. 设置画布 ---
32. screen = turtle.Screen()
33. screen.bgcolor("black")
34. screen.setup(width=600, height=600)
35. screen.tracer(0) # 关闭自动刷新，手动控制动画
37. t = turtle.Turtle()
38. t.ht() # 隐藏画笔图标
39. t.color("#00FF00") # 极客绿
40. t.pensize(2)
42. # --- 4. 动画循环 ---
43. angle = 0
44. while True:
45.     t.clear()
46.    
47.     # 存储投影后的 2D 点
48.     projected_points = []
49.    
50.     # 每一帧都旋转一下坐标，让它动起来
51.     angle += 0.02
52.    
53.     for v in vertices:
54.         # 旋转矩阵（简单的绕 Y 轴和 X 轴旋转数学）
55.         # 这一步是为了让数据“动”起来，不是投影的本质
56.         x, y, z = v
57.         # 绕 Y 轴转
58.         nx = x * math.cos(angle) - z * math.sin(angle)
59.         nz = x * math.sin(angle) + z * math.cos(angle)
60.         # 绕 X 轴转
61.         ny = y * math.cos(angle*0.7) - nz * math.sin(angle*0.7)
62.         nz = y * math.sin(angle*0.7) + nz * math.cos(angle*0.7)
63.         
64.         # --- 调用本质公式 ---
65.         # fov(视距)设为 400，viewer_distance(物体离眼睛距离)设为 4
66.         p2d = project(nx, ny, nz, 400, 4)
67.         projected_points.append(p2d)
69.     # 绘制棱
70.     for edge in edges:
71.         p1 = projected_points[edge[0]]
72.         p2 = projected_points[edge[1]]
73.         t.up()
74.         t.goto(p1)
75.         t.down()
76.         t.goto(p2)
78.     screen.update() # 刷新屏幕
79.     time.sleep(0.01)
81. turtle.done()

复制代码

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

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

\[y' = x \cdot \sin \beta + y \cdot \cos \beta\]
脑补维度：当这些点被连成线、贴上材质、加上光影，人类的大脑就会自动根据“近大远小”的视觉经验，帮我们“脑补”出那消失的第三个维度。
重塑数字世界的信心

从 WAV 文件的二进制流，到 3D 游戏的透视投影，我们能发现一个共同点：复杂的表象下，底层逻辑往往较为简单。

• 声音：是按采样率排列的数值。
  
• 空间：是坐标点除以深度的变换。
  

当我们不再把 3D 技术看作某种不可逾越的“黑盒”，而是看作一系列几何规则的组合时，你便拥有了重塑数字世界的能力。正如我们能手动拼出一个 WAV 文件一样，只要掌握了坐标变换的逻辑，你也能在代码的荒原上，徒手构建出一个属于你的三维宇宙。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

喜欢鼓捣这些软件，现在用得少，谢谢分享！

懂技术并乐意极积无私分享的人越来越少。珍惜

感谢发布原创作品，程序园因你更精彩

热心回复！

鼓励转贴优秀软件安全工具和文档！