原生webgl学习（三） WebGL中的矩阵运算：平移、旋转和缩放

本专栏所有文章示例代码均可在我的git码云上获取，读者可自行下载：https://gitee.com/babyogl/learnWebGL,本文示例代码在chapter-02的color-triangle-01,引用文件都在libs文件夹下；在上一节中，笔者介绍了如何用WebGL绘制一个三角形：原生webgl学习（二） 用WebGL绘制一个三角形，那我们会想，画一个三角形有什么了不起的？的确，画一个三角形的确很一般，所以我们要最求更加高大上的骚操作，这就涉及到接下来笔者要讲的矩阵运算；可能学过计算机图形学的同学都知道，在计算机图形学中，一切运算皆矩阵，图形的平移、旋转和缩放都可以表示为图形顶点坐标与相关矩阵的运算。我们先假设在二维空间进行上述的变换操作，假设某个顶点v的坐标为(x, y, 1)；那为什么二位的坐标看起来确实三维的？那是由于我们在进行平移运算的时候，坐标必须是其次坐标，否则容易出现错误；同理，如果是三维空间的坐标，在进行平移变换时，应写为(x, y, z, 1)。三维的情况本文先不涉及，先掌握二维，自然而然地就可以很容易扩展到三维空间。

1.平移矩阵

直观的理解，假设点v平移了在x方向平移看了tx，在y方向平移了ty， 则平移后v点的坐标可以表示(x+tx, y+ty)，用矩阵表示这个运算过程如下：

 2.旋转矩阵

如下图所示，旋转只需要用到和旋转角对应的正弦值和余弦值：

由上图得到旋转后的坐标：

 将其表示为矩阵形式：

 3.缩放变换

图形的缩放，无非就是顶点的缩放&#x