坐标系系统 ​

3D 图形学中的坐标系系统是构建虚拟世界的数学基础，它定义了物体在空间中的位置、方向和变换关系。在 Web 3D 开发中，理解不同的坐标系及其转换过程至关重要，这直接影响着场景的渲染效果和交互逻辑。

坐标系基础 ​

坐标系是用于描述空间中点位置的参考系统，由原点、坐标轴和度量单位构成。3D 图形学使用笛卡尔坐标系，通过三个相互垂直的轴 (X、Y、Z) 来定位点。

特点：

• 提供统一的数学框架进行空间计算
• 支持向量和矩阵运算
• 便于实现几何变换和投影

示意图 (3D 笛卡尔坐标系)：

      Y
      |
      |
      +--- X
     /
    /
   Z

局部坐标系 ​

局部坐标系 (模型坐标系) 是相对于单个模型自身的坐标系，原点通常位于模型的中心或特定锚点。每个模型都有自己独立的局部坐标系。

特点：

• 简化模型创建和编辑过程
• 便于实现相对变换和动画
• 模型数据通常在此坐标系中定义

示意图 (立方体的局部坐标系)：

    Y
    |
    +--- X
   /
  Z
  
  立方体顶点：
  (-1,-1,-1) 到 (1,1,1)

世界坐标系 ​

世界坐标系是场景的全局参考系，所有对象都通过变换矩阵放置到这个统一的坐标系中。它定义了场景中所有物体的绝对位置和方向。

特点：

• 提供统一的全局参考框架
• 便于计算物体间的空间关系
• 支持场景管理和碰撞检测

示意图 (多个物体在世界坐标系中)：

世界坐标系：
      Y
      |
   A  |  B
  []  |  []
------+------ X
     /
    /
   Z   C
      /\

物体 A、B、C 在世界坐标系中有各自的绝对位置。

视图坐标系 ​

视图坐标系 (相机坐标系) 以相机为参考点，Z 轴通常指向相机的观察方向。在这个坐标系中，相机位于原点，便于进行投影计算。

特点：

• 相机位于原点，简化投影计算
• Z 坐标表示深度信息
• 便于实现视锥体裁剪

示意图 (视图坐标系)：

视图坐标系：
      Y
      |
      |  Z（观察方向）
      | /
      |/
      +--- X
      
相机位于原点 (0,0,0)

投影坐标系 ​

投影坐标系通过投影矩阵将视图坐标系中的 3D 坐标转换为标准化设备坐标。这个坐标系用于确定哪些部分在可视范围内。

特点：

• 坐标范围标准化 (通常 -1 到 1)
• 便于后续的视口变换
• 支持透视校正

示意图 (透视投影)：

视图空间：       投影后：
   Y              Y
   |              |
   |   Z          |   
   | /            | 
   |/             |
   +--- X         +--- X
   
3D 坐标转换为标准化坐标

裁剪坐标系 ​

裁剪坐标系在投影之后、透视除法之前，用于确定哪些图元在视锥体内。超出定义范围的几何体会被裁剪掉。

特点：

• 使用齐次坐标 (x,y,z,w)
• 定义可见区域边界
• 提高渲染效率

示意图 (裁剪空间)：

裁剪立方体：
    +--------+
   /        /|
  /        / |
 +--------+  |
 |        |  |
 |        |  +
 |        | /
 |        |/
 +--------+
 
坐标范围：-w ≤ x,y,z ≤ w

标准化设备坐标系 ​

标准化设备坐标系 (NDC) 通过透视除法得到，坐标范围在所有轴上都是 [-1,1]。这个坐标系与具体设备无关。

特点：

• 坐标范围标准化
• 设备无关的表示
• 便于后续的视口映射

示意图 (NDC 空间)：

NDC 立方体：
    Y
    |
 -1 +---+ 1
  / |  /|
 /  | / |
+---+---+ X
|   |   |
|   +---+
|  /   /
| /   /
Z    /
-1  1

屏幕坐标系 ​

屏幕坐标系是最终的 2D 坐标系统，将标准化设备坐标映射到具体的像素位置。原点通常位于左上角或左下角。

特点：

• 以像素为单位
• 与具体显示设备相关
• 用于最终的光栅化

示意图 (屏幕坐标系)：

屏幕坐标系（原点在左上角）：
(0,0)------- +X
 |
 |
 |
+Y
 
视口映射：NDC → 屏幕像素

坐标系变换流程 ​

3D 图形渲染涉及一系列坐标系变换，从局部坐标到最终的屏幕坐标。这个过程通过矩阵乘法实现。

变换流程：

局部坐标 → 世界坐标 → 视图坐标 → 投影坐标 → 裁剪坐标 → 标准化设备坐标 → 屏幕坐标

示意图 (变换链条)：

模型矩阵     视图矩阵     投影矩阵     视口变换
局部坐标 → 世界坐标 → 视图坐标 → 裁剪坐标 → NDC → 屏幕坐标
      M        V           P          视口

每个变换阶段都有对应的变换矩阵，这些矩阵在渲染管线中依次应用。

右手坐标系与左手坐标系 ​

3D 图形学使用两种手性坐标系：右手坐标系和左手坐标系。区别在于 Z 轴的方向确定方式。

特点：

• 右手坐标系：Z 轴由右手定则确定
• 左手坐标系：Z 轴由左手定则确定
• WebGL 通常使用右手坐标系

示意图 (右手定则)：

右手坐标系：
    Y
    |   
    | 
    +--- X
   /
  /
 Z（拇指指向 Z，手指从 X 转向 Y）

齐次坐标 ​

齐次坐标使用四个分量 (x,y,z,w) 表示 3D 点，便于用统一的矩阵形式表示所有变换。

特点：

• 支持平移、旋转、缩放的统一矩阵表示
• w 分量用于透视投影
• 便于实现投影变换

示意图 (齐次坐标变换)：

3D 点 (x,y,z) → 齐次坐标 (x,y,z,1)

变换矩阵：
[ a b c d ]   [ x ]   [ x' ]
[ e f g h ] × [ y ] = [ y' ]
[ i j k l ]   [ z ]   [ z' ]
[ m n o p ]   [ 1 ]   [ w' ]

标准化： (x'/w', y'/w', z'/w')