当前位置：首页 > news >正文

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

news 2025/7/15 6:46:21

vec3、vec4 和齐次坐标总结

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

分量访问：
- 使用分量名：
  - 位置表示： 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)
```

下标访问：

示例：

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

分量重组（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)

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

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

当 $\neq 0$ 时，可以还原为笛卡尔坐标：
$\begin{cases} x' = \frac{x}{w} \\ y' = \frac{y}{w} \\ z' = \frac{z}{w} \end{cases}$

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

统一几何变换：
- 在笛卡尔坐标中，平移无法通过矩阵乘法实现。
- 在齐次坐标中，所有变换（平移、旋转、缩放、投影）都可以通过矩阵乘法实现。
透视投影：
- 齐次坐标的 $w$ 分量用于描述透视投影的深度缩放关系。
- 投影变换后需要归一化处理，结果由 $(x / w, y / w, z / w)$ 确定。
表示无穷远点：
- 当 $w = 0$ 时，齐次坐标表示无穷远点，可用于方向向量表示。

从笛卡尔坐标到齐次坐标：
$\rightarrow (x, y, z, 1)$
从齐次坐标到笛卡尔坐标：
$\rightarrow \left( \frac{x}{w}, \frac{y}{w}, \frac{z}{w} \right)$
齐次坐标变换示例（平移）：
笛卡尔坐标的平移：
$(x^{'}, y^{'}, z^{'}) = (x + t x, y + t y, z + t z)$

齐次坐标的平移：
$\begin{bmatrix} x' \\ y' \\ z' \\ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix}$

平移变换：

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

齐次坐标计算：
$\begin{bmatrix} 1 & 2 & 3 & 1 \end{bmatrix} \times \begin{bmatrix} 1 & 0 & 0 & 1 \\ 0 & 1 & 0 & 1 \\ 0 & 0 & 1 & 1 \\ 0 & 0 & 0 & 1 \end{bmatrix}$

结果： $[2, 3, 4, 1]$
透视投影:
投影点 $(2, 4, 6)$ 到二维平面：

投影矩阵：
$\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & -1/d \\ 0 & 0 & 0 & 1 \end{bmatrix}$