从“2D转3D”看计算机图形学的数学本质
<h1 id="从2d转3d看图形学的数学本质">从“2D转3D”看图形学的数学本质</h1><p>在上一篇《从 0 构建 WAV 文件》中，我们拆解了音频文件的底层：它不过是按规则排列的二进制采样点。当时我们得出了一个结论：<strong>计算机的世界没有魔法，只有朴素的规则。</strong></p>
<p>当你玩《黑神话：悟空》或《赛博朋克 2077》时，你是否好奇过：<strong>屏幕明明是一个平面，为什么我们能从中看出真实的3d效果？</strong> 那些复杂的 3D 游戏，其底层逻辑是否也像 WAV 文件一样，是由某个简单的“规则”构建的？</p>
<p>答案是肯定的。3D 视觉的本质，其实就是一个简单的数学除法。</p>
<h2 id="核心法则透视投影">核心法则：透视投影</h2>
<p>计算机之所以能“欺骗”我们的眼睛，靠的是<strong>透视（Perspective）</strong>。</p>
<p>在现实中，光线沿直线传播。远处的物体在视网膜上成像小，近处的成像大，即“近大远小”。计算机要实现 3D 效果，本质上就是要把空间中的 <strong>3D 坐标 (x, y, z)</strong>，通过某种规则变换成屏幕上的 <strong>2D 坐标 (x', y')</strong>。</p>
<h2 id="几何建模寻找相似三角形">几何建模：寻找相似三角形</h2>
<p>为了找到这个变换规则，我们可以构建一个极简的几何模型。想象你正坐在屏幕前：</p>
<ol>
<li><strong>观察点</strong>：你的眼睛。</li>
<li><strong>投影面</strong>：你面前的电脑屏幕（设中心为原点）。</li>
<li><strong>3D 物体</strong>：屏幕后方空间里的一个点，坐标为 <span class="math inline">\((x, y, z)\)</span>，其中 <span class="math inline">\(z\)</span> 是它距离你眼睛的深度。</li>
</ol>
<p>当光线从物体出发射向你的眼睛时，必然会穿过屏幕。<strong>这个交点，就是该物体在屏幕上显示的正确位置。</strong></p>
<p>如果我们从侧面观察这个模型，以眼睛、屏幕交点、物体真实位置为顶点，可以构建出<strong>两个相似三角形</strong>：</p>
<p><img src="https://i.postimg.cc/HsR3w925/xiang-shi-shi-yi-tu.png" alt="" loading="lazy"></p>
<h2 id="数学表达">数学表达：</h2>
<p>利用初中数学中“相似三角形对应边成比例”的原理，设眼睛到屏幕的距离为 <span class="math inline">\(d\)</span>（类似于相机的焦距），我们可以推导出屏幕坐标 <span class="math inline">\(x'\)</span> 与空间坐标 <span class="math inline">\(x, z\)</span> 的关系：</p>
<p></p><div class="math display">\[\frac{x'}{d} = \frac{x}{z} \implies x' = d \cdot \frac{x}{z}
\]</div><p></p><p>同理，对于 <span class="math inline">\(y\)</span> 轴：</p>
<p></p><div class="math display">\[y' = d \cdot \frac{y}{z}
\]</div><p></p><p><strong>这就是 3D 图形学的基本原理：3D 转 2D 的本质就是“除以 Z”。</strong></p>
<ul>
<li>当物体走远时，<span class="math inline">\(z\)</span> 变大，除出来的结果 <span class="math inline">\(x', y'\)</span> 就越小（向屏幕中心收缩）。</li>
<li>当物体靠近时，<span class="math inline">\(z\)</span> 变小，除出来的结果变大（向屏幕边缘扩张）。</li>
</ul>
<p>这就是为什么我们在走廊里往前走，两边的墙壁会向四周“散开”的原因。</p>
<h2 id="从数据到画面像构建-wav-一样构建-3d">从数据到画面：像构建 WAV 一样构建 3D</h2>
<p>我们可以通过几个运用先前给出的公式完成3d图形绘制的例子来证明该公式的正确性：</p>
<pre><code class="language-py">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],
# 后面的四个顶点 (z=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, v, v)
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
end_idx = edge
# 移动到起点
t.up()
t.goto(points_2d)
# 画线到终点
t.down()
t.goto(points_2d)
t.hideturtle()
print("绘制完成！观察近处的面（z=2）是否比远处的面（z=3）大？")
turtle.done()
</code></pre>
<p>这个例子演示了一个静态的立方体是如何绘制的，当然，有人会说只要打好点也能做到与程序类似的效果，那么我们在用一个动态的旋转立方体来证明公式的正确性：</p>
<pre><code class="language-py">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]
]
# 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]
p2 = projected_points]
t.up()
t.goto(p1)
t.down()
t.goto(p2)
screen.update() # 刷新屏幕
time.sleep(0.01)
turtle.done()
</code></pre>
<p>这个样例中，同样使用了刚才给出的公式，不过增加了一个新的公式，用于控制向量的旋转，即线条的旋转，以实现旋转的效果：</p>
<p></p><div class="math display">\[x' = x \cdot \cos \beta - y \cdot \sin \beta
\]</div><p></p><p></p><div class="math display">\[y' = x \cdot \sin \beta + y \cdot \cos \beta
\]</div><p></p><p><strong>脑补维度</strong>：当这些点被连成线、贴上材质、加上光影，人类的大脑就会自动根据“近大远小”的视觉经验，帮我们“脑补”出那消失的第三个维度。</p>
<h2 id="重塑数字世界的信心">重塑数字世界的信心</h2>
<p>从 WAV 文件的二进制流，到 3D 游戏的透视投影，我们能发现一个共同点：<strong>复杂的表象下，底层逻辑往往较为简单。</strong></p>
<ul>
<li><strong>声音</strong>：是按采样率排列的数值。</li>
<li><strong>空间</strong>：是坐标点除以深度的变换。</li>
</ul>
<p>当我们不再把 3D 技术看作某种不可逾越的“黑盒”，而是看作一系列几何规则的组合时，你便拥有了重塑数字世界的能力。正如我们能手动拼出一个 WAV 文件一样，只要掌握了坐标变换的逻辑，你也能在代码的荒原上，徒手构建出一个属于你的三维宇宙。</p><br><br>
来源：https://www.cnblogs.com/reasa/p/19525923
頁:
[1]