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 的常见用途

用途	vec3	vec4
位置坐标	用于描述 3D 空间中的点 (x, y, z)	齐次坐标 (x, y, z, w)（用于投影变换）
颜色表示	描述 RGB 颜色 (r, g, b)	描述 RGBA 颜色 (r, g, b, a)（带透明度）
法线与方向	表示法线向量或方向向量 (nx, ny, nz)	较少用于法线，可能用于特殊数学场景
纹理坐标	描述 3D 纹理坐标 (s, t, p)	可扩展到 (s, t, p, q)
光照计算	用于存储法线、光线方向、光照计算结果等	较少用于直接计算，通常扩展到更高维场景

---

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]$$