从“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 文件一样，只要把握了坐标变更的逻辑，你也能在代码的荒原上，徒手构建出一个属于你的三维宇宙。

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.