WebGL 仿射变换：扭曲世界的秘密武器

2024-02-13 01:59:58

在我们的WebGL之旅中，我们已经探索了如何使用顶点数据和着色器来创建3D图形。然而，仅仅创建3D图形还不够，我们还需要能够对这些图形进行变换，使它们能够在三维空间中移动、旋转和缩放。在这一篇中，我们将深入研究仿射变换，了解如何使用代码扭曲世界，掌握图像变形艺术。

仿射变换是一种线性变换，它可以将一个二维或三维空间中的点映射到另一个二维或三维空间中的点。仿射变换可以用于各种图形处理操作，包括平移、旋转、缩放、剪切和倾斜。

在WebGL中，仿射变换可以通过使用变换矩阵来实现。变换矩阵是一个4x4的矩阵，它可以将一个点从一个坐标系变换到另一个坐标系。

要使用仿射变换，我们需要先创建一个变换矩阵。我们可以使用JavaScript中的Matrix4类来创建变换矩阵。Matrix4类提供了各种方法来创建平移、旋转、缩放、剪切和倾斜变换矩阵。

一旦我们创建了变换矩阵，我们就可以使用它来变换顶点数据。我们可以使用WebGL中的uniform变量来将变换矩阵传递给顶点着色器。在顶点着色器中，我们可以使用变换矩阵来将顶点数据从模型空间变换到世界空间。

通过使用仿射变换，我们可以对WebGL中的3D图形进行各种各样的变形。我们可以平移图形，使它们在三维空间中移动。我们可以旋转图形，使它们在三维空间中旋转。我们可以缩放图形，使它们在三维空间中变大或变小。我们可以剪切图形，使它们在三维空间中变形。我们可以倾斜图形，使它们在三维空间中倾斜。

仿射变换是一种非常强大的工具，它可以用于创建各种各样的视觉效果。在游戏、动画和模拟等领域，仿射变换被广泛使用。

让我们通过一个例子来演示如何使用仿射变换。在下面的代码中，我们创建了一个立方体，并使用仿射变换将其旋转45度。

// 创建立方体顶点数据
const cubeVertices = [
  -1, -1, -1,
  1, -1, -1,
  1,  1, -1,
  -1,  1, -1,
  -1, -1,  1,
  1, -1,  1,
  1,  1,  1,
  -1,  1,  1
];

// 创建立方体索引数据
const cubeIndices = [
  0, 1, 2, 0, 2, 3,
  4, 5, 6, 4, 6, 7,
  0, 4, 5, 0, 5, 1,
  1, 5, 6, 1, 6, 2,
  2, 6, 7, 2, 7, 3,
  3, 7, 4, 3, 4, 0
];

// 创建WebGL程序
const program = createProgram();

// 查找顶点着色器中的属性变量
const positionAttributeLocation = gl.getAttribLocation(program, "position");

// 创建顶点缓冲区对象
const positionBuffer = gl.createBuffer();

// 绑定顶点缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 将顶点数据写入顶点缓冲区对象
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeVertices), gl.STATIC_DRAW);

// 启用顶点属性变量
gl.enableVertexAttribArray(positionAttributeLocation);

// 将顶点属性变量绑定到顶点缓冲区对象
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 创建索引缓冲区对象
const indexBuffer = gl.createBuffer();

// 绑定索引缓冲区对象
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

// 将索引数据写入索引缓冲区对象
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeIndices), gl.STATIC_DRAW);

// 创建变换矩阵
const modelMatrix = new Matrix4();

// 将变换矩阵传递给顶点着色器
const modelMatrixUniformLocation = gl.getUniformLocation(program, "modelMatrix");

// 清除颜色缓冲区
gl.clearColor(0.0, 0.0, 0.0, 1.0);

// 清除深度缓冲区
gl.clearDepth(1.0);

// 启用深度测试
gl.enable(gl.DEPTH_TEST);

// 启用背面剔除
gl.enable(gl.CULL_FACE);

// 绘制立方体
gl.drawElements(gl.TRIANGLES, cubeIndices.length, gl.UNSIGNED_SHORT, 0);