深入浅出 WebGL —— 第 3 章：仿射变换

2023-12-24 20:36:30

仿射变换：WebGL 中操纵对象的魔法

从几何到图形学的桥梁

想像一下一张橡皮布，上面有许多标记点。当我们拉伸、扭曲或移动橡皮布时，标记点也会随之改变。在计算机图形学中，仿射变换 就是这张神奇的橡皮布，允许我们对对象进行缩放、旋转、平移和剪切等变形操作。

在 WebGL 中，仿射变换由一个称为 仿射矩阵 的 4x4 矩阵表示。这个矩阵就像橡皮布的控制面板，让我们可以精确地指定对象的变形方式。

理解仿射矩阵

仿射矩阵包含 16 个元素，分为三个 3x3 矩阵和一个平移向量：

[ a11, a12, a13, a14 ]
[ a21, a22, a23, a24 ]
[ a31, a32, a33, a34 ]
[ a41, a42, a43, a44 ]

前三个矩阵形成3x3 仿射矩阵 ，负责对象的实际变形，而最后一行是平移向量 ，指定对象的平移量。

仿射变换的应用

仿射变换在 WebGL 中有着广泛的应用：

变形对象： 缩放、旋转、平移和剪切
透视投影： 创建具有 3D 深度的场景
动画： 创建逼真的物体运动效果
扭曲和变形： 改变对象的形状

WebGL 中使用仿射变换

在 WebGL 中，我们可以使用 gl.uniformMatrix4fv() 函数应用仿射矩阵。它需要两个参数：矩阵的位置（在着色器中定义的 uniform 变量）和矩阵数据。

实例：旋转一个立方体

让我们以旋转立方体为例来说明仿射变换的应用。

const rotateX = Math.PI / 4; // 旋转角度（弧度）
const rotateY = Math.PI / 8;

const cosX = Math.cos(rotateX);
const sinX = Math.sin(rotateX);
const cosY = Math.cos(rotateY);
const sinY = Math.sin(rotateY);

const rotationMatrix = new Float32Array([
  cosY, 0, sinY, 0,
  0, 1, 0, 0,
  -sinY, 0, cosY, 0,
  0, 0, 0, 1
]);

// 在片元着色器中设置仿射矩阵
uniform mat4 u_rotationMatrix;

void main() {
  vec4 transformedPosition = u_rotationMatrix * vec4(a_position, 1.0);
}