WebGL 图形二维变换之平移、缩放、旋转

导语：

走进 WebGL 的图形世界，我们踏上了探索视觉表现的新征程。在上一章中，我们领略了颜色的魅力和纹理的质感。而今天，让我们开启一段关于图形二维变换的奇幻之旅，跟随 WebGL 的脚步，舞动平面上的点线面，让它们在屏幕上绽放出动态之美。

平移：时空穿梭

平移，顾名思义，就是将图形在平面上移动一定距离。就像我们在地图上移动指针，平移可以使图形从一个位置瞬间移动到另一个位置。在 WebGL 中，平移通过设置平移矩阵来实现，矩阵中的值代表图形移动的距离。

缩放：放大缩小

缩放，又称放缩，可以改变图形的大小。放大可以使图形放大，而缩小则可以使图形缩小。在 WebGL 中，缩放通过设置缩放矩阵来实现，矩阵中的值代表图形缩放的比例。

旋转：角度变幻

旋转，是指将图形围绕某个点或轴进行旋转。旋转可以改变图形的角度，从而产生动态变化。在 WebGL 中，旋转通过设置旋转矩阵来实现，矩阵中的值代表图形旋转的角度和轴向。

二维变换的组合

这三个基本变换可以组合使用，创造出更加复杂的图形效果。例如，我们可以先平移图形，然后再将其旋转，或者先缩放图形，然后再将其平移。

代码示例

// 平移
const translationMatrix = mat4.create();
mat4.translate(translationMatrix, translationMatrix, [1.0, 0.0, 0.0]); // x轴平移1.0单位

// 缩放
const scaleMatrix = mat4.create();
mat4.scale(scaleMatrix, scaleMatrix, [2.0, 1.0, 1.0]); // x轴缩放2.0倍

// 旋转
const rotationMatrix = mat4.create();
mat4.rotate(rotationMatrix, rotationMatrix, radians(45), [0.0, 1.0, 0.0]); // 绕y轴旋转45度

// 应用变换
mat4.multiply(modelMatrix, translationMatrix, modelMatrix);
mat4.multiply(modelMatrix, scaleMatrix, modelMatrix);
mat4.multiply(modelMatrix, rotationMatrix, modelMatrix);

结语

通过平移、缩放和旋转，我们可以赋予 WebGL 图形动态的生命力，让它们在屏幕上自由舞动。这些基本变换为我们提供了无穷的创作空间，让我们尽情探索图形的无限可能性。让我们继续前行，在 WebGL 的二维变换世界中挥洒创意的色彩，创造出令人惊叹的视觉盛宴！