坐标的奇妙旅行：从世界到屏幕的深度之恋

在计算机图形学的世界里，每个点都像一位怀揣梦想的旅行者。它们从广阔的世界空间出发，历经层层关卡，最终在屏幕上找到自己的一席之地。而这场旅行中最浪漫的桥段，莫过于世界坐标与屏幕深度之间的双向奔赴。今天我们就来揭开这场爱情故事的神秘面纱，看看这些坐标是如何在图形流水线中跳着优雅的华尔兹。

世界空间：坐标的故乡

想象一下，当你在 3D 建模软件中创建一个立方体时，这个立方体的每个顶点都有自己的 "老家" 地址 ------ 这就是世界空间坐标。就像现实世界中我们用经纬度定位一样，3D 世界里通常用三个数字来描述一个点的位置：X 表示左右，Y 表示上下，Z 表示前后。

ini 复制代码

// 世界空间中的一个点：x=3，y=2，z=5
const worldPoint = { x: 3, y: 2, z: 5 };

这个点此时还不知道自己将来会在屏幕的哪个角落安家，它只是安静地待在世界空间里，等待着图形流水线的召唤。

视图变换：坐标的第一次转身

就像旅行需要确定目的地一样，我们的坐标旅行者首先要知道 "摄像机" 在哪里。视图变换就像是给这个点拍了张照片，记录下它相对于摄像机的位置。这一步就好比你在合影时调整位置，确保自己出现在镜头里合适的地方。

视图变换的核心是将世界坐标转换为观察坐标（也叫相机坐标）。想象你手持相机拍摄风景，远处的山峰在你视野中的位置取决于你站在哪里、朝哪个方向。这里我们需要三个关键参数：相机位置、观察目标和上方向。

scss 复制代码

// 简化的视图变换函数
function worldToView(worldPoint, camera) {
  // 计算相机的三个坐标轴（简化版）
  const forward = normalize(subtract(camera.target, camera.position));
  const right = normalize(cross(camera.up, forward));
  const up = cross(forward, right);
  
  // 计算点相对于相机的位置
  const delta = subtract(worldPoint, camera.position);
  
  // 投影到相机坐标系
  return {
    x: dot(delta, right),
    y: dot(delta, up),
    z: dot(delta, forward)
  };
}

这里的 dot 函数就像两个向量之间的默契度测试，结果越大说明它们越 "投缘"。cross 函数则像是两个向量生下的 "孩子"，方向垂直于父母向量组成的平面。

投影变换：压扁的艺术

经过视图变换后，点已经站在了相机的视角下，但它还处于 3D 空间中。投影变换要做的就是将这个 3D 点 "压扁" 到 2D 平面上，就像阳光将树的影子投射到地面一样。

正交投影和透视投影是两种常见的方式。正交投影就像工程图纸，无论物体远近都保持相同大小；透视投影则更符合人眼观察习惯，远处的物体看起来更小，就像铁轨会在远方交汇一样。

ini 复制代码

// 简化的透视投影函数
function viewToClip(viewPoint, fov, aspect, near, far) {
  // 计算透视投影的缩放因子
  const f = 1 / Math.tan(fov / 2 / 180 * Math.PI);
  const scaleX = f / aspect;
  const scaleY = f;
  
  // 计算透视除法的系数（Z值处理）
  const zScale = far / (far - near);
  const zOffset = (-far * near) / (far - near);
  
  // 返回裁剪空间坐标（齐次坐标）
  return {
    x: viewPoint.x * scaleX,
    y: viewPoint.y * scaleY,
    z: viewPoint.z * zScale + zOffset,
    w: -viewPoint.z // 透视除法的分母
  };
}

这里出现了一个新朋友：齐次坐标。它在 3D 坐标的基础上增加了第四个分量 w，就像是给坐标带上了一副特殊的眼镜，帮助我们完成透视效果。当我们把 x、y、z 分别除以 w 时，神奇的事情发生了 ------ 远处的点会自动缩小，就像被施了魔法一样。

视口变换：坐标的最终安家

裁剪空间的坐标还需要最后一步转换才能到达屏幕。视口变换就像是给坐标分配具体的座位，告诉它们在屏幕的哪个像素点安家。

想象一下电影院的座位表：裁剪空间中的 x 和 y 范围通常是 - 1 到 1，我们需要把这个范围映射到屏幕的宽度和高度上。比如屏幕宽度是 800 像素，高度是 600 像素，那么裁剪空间中 x=0 就对应屏幕 x=400，y=0 对应屏幕 y=300。

javascript 复制代码

// 视口变换：从裁剪空间到屏幕空间
function clipToScreen(clipPoint, viewport) {
  // 透视除法：将齐次坐标转换为标准化设备坐标
  const ndc = {
    x: clipPoint.x / clipPoint.w,
    y: clipPoint.y / clipPoint.w,
    z: clipPoint.z / clipPoint.w
  };
  
  // 将标准化设备坐标转换为屏幕坐标
  return {
    x: Math.round((ndc.x + 1) * viewport.width / 2 + viewport.x),
    y: Math.round((1 - ndc.y) * viewport.height / 2 + viewport.y),
    // 深度值通常范围是0到1
    depth: (ndc.z + 1) / 2
  };
}

这里的深度值就是屏幕空间深度，它代表了这个点在屏幕上的 "前后" 关系。就像剧院里的座位有前排后排，深度值越大，说明这个点离观众越近。

反向之旅：从屏幕深度到世界坐标

有去就有回，了解如何从屏幕深度反推世界坐标同样重要。这就像是根据照片上的人影，推测出实际物体的大小和位置。这个过程就像是把之前的变换步骤倒过来走一遍，有点像解谜游戏中的逆向思维。

arduino 复制代码

// 从屏幕坐标和深度值反推世界坐标
function screenToWorld(screenPoint, depth, viewport, camera, projection) {
  // 1. 屏幕坐标转标准化设备坐标
  const ndc = {
    x: (screenPoint.x - viewport.x) * 2 / viewport.width - 1,
    y: 1 - (screenPoint.y - viewport.y) * 2 / viewport.height,
    z: depth * 2 - 1
  };
  
  // 2. 标准化设备坐标转裁剪空间
  // 这里假设w为1，实际应用中可能需要更复杂的计算
  const clip = {
    x: ndc.x,
    y: ndc.y,
    z: ndc.z,
    w: 1
  };
  
  // 3. 裁剪空间转视图空间（简化版）
  const view = inverseProjection(clip, projection);
  
  // 4. 视图空间转世界空间
  return inverseView(view, camera);
}

这个过程就像是解开一个多层包裹的礼物，我们需要一层层剥开变换的外衣，才能看到最里面的世界坐标。值得注意的是，反推过程比正向变换要复杂一些，尤其是透视投影的逆变换，需要更多的数学技巧。

贯穿流水线的舞者

从世界坐标到屏幕深度，再从屏幕深度回到世界坐标，这个过程就像一对舞者在图形流水线的舞台上跳着圆舞曲。它们在各个变换阶段优雅地旋转、跳跃，却始终保持着某种神秘的联系。

在实时渲染中，这个双向转换无处不在：

当你在游戏中点击屏幕上的敌人时，程序需要将屏幕坐标转换为世界坐标来判断你点击了哪个物体

当处理阴影效果时，需要将世界坐标转换为光源的屏幕空间来计算哪些区域处于阴影中

当实现拾取功能时，更是离不开这对坐标舞者的密切配合

想象一下，当你在 3D 建模软件中拖动一个物体时，背后正在发生的是：屏幕坐标被转换为世界坐标，物体随之移动，然后新的世界坐标又被转换回屏幕坐标，让你看到物体在屏幕上的新位置。这一切发生在瞬间，就像一场精彩的魔术表演。

结语：坐标的永恒之恋

世界坐标与屏幕深度的相互转换，就像计算机图形学中的罗密欧与朱丽叶，它们的爱情故事贯穿了整个图形流水线。理解这个过程，不仅能帮助我们更好地掌握 3D 渲染的原理，更能让我们欣赏到数字世界中隐藏的数学之美。

下次当你在玩 3D 游戏或使用建模软件时，不妨想一想那些正在幕后忙碌的坐标点。它们从世界空间出发，经过视图变换、投影变换和视口变换的洗礼，最终在屏幕上绽放光彩。而当你与虚拟世界互动时，它们又会沿着原路返回，完成一次完美的往返旅行。

在这个由 0 和 1 构成的数字宇宙中，这些坐标点的旅行故事，正是计算机图形学最动人的诗篇。