webGL入门教程_04vec3、vec4 和齐次坐标总结

vec3、vec4 和齐次坐标总结

1. vec3 和 vec4

1.1 什么是 vec3 和 vec4？

• vec3：
  • GLSL 中的三维向量类型，包含 3 个浮点数：(x, y, z)。
  • 常用于表示三维坐标、RGB 颜色、法线、方向等。
• vec4：
  • GLSL 中的四维向量类型，包含 4 个浮点数：(x, y, z, w)。
  • 在三维空间中扩展了一个 w 分量，常用于齐次坐标或 RGBA 颜色。

1.2 vec3 和 vec4 的常见用途

1.3 vec3 和 vec4 的访问方式

1. 分量访问：

   • 使用分量名：
     • 位置表示： x, y, z, w
     • 颜色表示： r, g, b, a
     • 纹理坐标： s, t, p, q
   • 示例：

     vec3 position = vec3(1.0, 2.0, 3.0);
     float x = position.x;  // 1.0
     float g = position.g;  // 2.0 (等价于 y)
     

2. 下标访问：

   • 通过 [0], [1], [2] 访问分量。
   • 示例：

     vec4 color = vec4(1.0, 0.5, 0.2, 0.8);
     float alpha = color[3];  // 0.8
     

3. 分量重组（Swizzling）：

   • 支持重新排列分量或构造新的向量。
   • 示例：

     vec3 position = vec3(1.0, 2.0, 3.0);
     vec2 xy = position.xy;      // (1.0, 2.0)
     vec4 rgba = vec4(position, 1.0); // (1.0, 2.0, 3.0, 1.0)
     

1.4 vec3 和 vec4 的底层实现

• 内存存储：
  • vec3 和 vec4 是连续存储的浮点数，分别占用 3 和 4 个浮点数的存储空间。
• 无固定语义：
  • 它们只是浮点数的容器，含义由程序上下文决定。
  • 例如，vec3 可以表示位置 (x, y, z)，也可以表示颜色 (r, g, b)。

2. 齐次坐标（Homogeneous Coordinates）

2.1 什么是齐次坐标？

齐次坐标是笛卡尔坐标的扩展形式，通过增加一个额外的维度 w，使坐标表示为：

• 二维齐次坐标： (x, y, w)
• 三维齐次坐标： (x, y, z, w)

当 $w\ne 0$ 时，可以还原为笛卡尔坐标：
$$\{\begin{array}{l}{x}^{\prime }=\frac{x}{w}\\ y^{\prime }=\frac{y}{w}\\ z^{\prime }=\frac{z}{w}\end{array}$$

当 $w=1$ 时，齐次坐标与笛卡尔坐标一致。

2.2 为什么需要齐次坐标？

1. 统一几何变换：

   • 在笛卡尔坐标中，平移无法通过矩阵乘法实现。
   • 在齐次坐标中，所有变换（平移、旋转、缩放、投影）都可以通过矩阵乘法实现。

2. 透视投影：

   • 齐次坐标的 $w$ 分量用于描述透视投影的深度缩放关系。
   • 投影变换后需要归一化处理，结果由 $(x/w,y/w,z/w)$ 确定。

3. 表示无穷远点：

   • 当 $w=0$ 时，齐次坐标表示无穷远点，可用于方向向量表示。

2.3 数学特性

1. 从笛卡尔坐标到齐次坐标：
   $$(x,y,z)\to (x,y,z,1)$$

2. 从齐次坐标到笛卡尔坐标：
   $$(x,y,z,w)\to \left(\frac{x}{w},\frac{y}{w},\frac{z}{w}\right)$$

3. 齐次坐标变换示例（平移）：
   笛卡尔坐标的平移：
   $$(x^{\prime },y^{\prime },z^{\prime })=(x+tx,y+ty,z+tz)$$

   齐次坐标的平移：
   $$\left[\begin{array}{c}{x}^{\prime }\\ y^{\prime }\\ z^{\prime }\\ 1\end{array}\right]=\left[\begin{array}{cccc}1& 0& 0& tx\\ 0& 1& 0& ty\\ 0& 0& 1& tz\\ 0& 0& 0& 1\end{array}\right]\left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]$$

2.4 齐次坐标的应用

1. 几何变换：

   • 统一表示平移、旋转、缩放和投影变换。

2. 透视投影：

   • 处理近大远小的效果，将 3D 场景投影到 2D 平面。

3. 无穷远点：

   • 描述方向向量（如光线方向、法线等），表示为 $(x,y,z,0)$。

2.5 示例：齐次坐标在图形学中的使用

1. 平移变换：

   点 $(1,2,3)$ 平移 $(1,1,1)$：

   齐次坐标计算：
   $$[x^{\prime },y^{\prime },z^{\prime },1]=\left[\begin{array}{cccc}1& 2& 3& 1\end{array}\right]\times \left[\begin{array}{cccc}1& 0& 0& 1\\ 0& 1& 0& 1\\ 0& 0& 1& 1\\ 0& 0& 0& 1\end{array}\right]$$

   结果：$[2,3,4,1]$

2. 透视投影:
   投影点 $(2,4,6)$ 到二维平面：

   投影矩阵：
   $$\left[\begin{array}{cccc}1& 0& 0& 0\\ 0& 1& 0& 0\\ 0& 0& 1& -1/d\\ 0& 0& 0& 1\end{array}\right]$$