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

川长思鸟来 2022-05-06 06:30 452阅读 0赞

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

### **1.平移矩阵** ###

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

![\\LARGE \\begin\{pmatrix\} 1 & 0 & 0\\\\ 0 & 1 & 0\\\\ tx & ty &1 \\end\{pmatrix\}\[\\begin\{smallmatrix\} x &y &1 \\end\{smallmatrix\}\]= \[\\begin\{matrix\} x+tx&y+ty &1 \\end\{matrix\}\]][LARGE _begin_pmatrix_ 1 _ 0 _ 0_ 0 _ 1 _ 0_ tx _ ty _1 _end_pmatrix_begin_smallmatrix_ x _y _1 _end_smallmatrix_ _begin_matrix_ x_tx_y_ty _1 _end_matrix]

###  2.旋转矩阵 ###

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

![è¿éåå¾çæè¿°][SouthEast]

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

![è¿éåå¾çæè¿°][SouthEast 1]

将其表示为矩阵形式：

![70][]

###  3.缩放变换 ###

图形的缩放，无非就是顶点的缩放，假设存在系数**s,**对顶点**v**进行缩放变换后的坐标是(sx, sy),以矩阵的形式表达如下：

![\\LARGE \\begin\{pmatrix\} s & 0 & 0\\\\ 0 & s & 0\\\\ 0\} & 0 &1 \\end\{pmatrix\}\[\\begin\{smallmatrix\} x &y &1 \\end\{smallmatrix\}\]=\[\\begin\{matrix\} sx&sy &1 \\end\{matrix\}\]][LARGE _begin_pmatrix_ s _ 0 _ 0_ 0 _ s _ 0_ 0_ _ 0 _1 _end_pmatrix_begin_smallmatrix_ x _y _1 _end_smallmatrix_begin_matrix_ sx_sy _1 _end_matrix]

**几种变换可以组合到一起运算，让平移矩阵、旋转矩阵和缩放矩阵相乘后再乘以顶点坐标即可。在下面笔者将带领大家实现一个带菜单栏工具的实时交互demo，界面如下图：**

![70 1][]

如果大家想更进一步了解三维空间中的平移、旋转和缩放变换可以参考：[ WebGL中的图形变换：旋转、平移和缩放][WebGL]，里面有更详细的介绍。

说了这么多理论的东西，接下来我们将它们变成代码吧，如果是刚学WebGL入门的，建议先参考：[原生webgl学习（二） 用WebGL绘制一个三角形][webgl_ _WebGL]，学会构建整个页面后再学习本节的内容，会更容易上手。

我们首先构建点点着色器和片元着色器：

我们创建一个canvas画布，并将相关的文件引用进来，同时给gui菜单开辟一块div，菜单栏工具主要使用dat.gui.min.js这个库来构建:

下面是主要的功能实现代码：

读者一定要仔细去体会JavaScript代码向着色器传送各种各样的数据的方法，这才是WebGL的核心灵魂所在，一旦搞懂了这个机制，那恭喜你，你可以随心所欲地用自己的数据去构建和渲染你想要的图形，笔者正在往这条道上前进，希望我们共同努力，共同进步！加上本节，我们已经画了两次三角形了，下从下一节开始，我将带领大家画出一个矩形。

[https_gitee.com_babyogl_learnWebGL]: https://gitee.com/babyogl/learnWebGL
[webgl_ _WebGL]: https://blog.csdn.net/qq_37338983/article/details/83003322
[LARGE _begin_pmatrix_ 1 _ 0 _ 0_ 0 _ 1 _ 0_ tx _ ty _1 _end_pmatrix_begin_smallmatrix_ x _y _1 _end_smallmatrix_ _begin_matrix_ x_tx_y_ty _1 _end_matrix]: https://private.codecogs.com/gif.latex?%5Cfn_cm%20%5CLARGE%20%5Cbegin%7Bpmatrix%7D%201%20%26%200%20%26%200%5C%5C%200%20%26%201%20%26%200%5C%5C%20tx%20%26%20ty%20%261%20%5Cend%7Bpmatrix%7D%5B%5Cbegin%7Bsmallmatrix%7D%20x%20%26y%20%261%20%5Cend%7Bsmallmatrix%7D%5D%3D%20%5B%5Cbegin%7Bmatrix%7D%20x&plus;tx%26y&plus;ty%20%261%20%5Cend%7Bmatrix%7D%5D
[SouthEast]: /images/20220506/dc13ede1953e4147a848710d6ccb9f56.png
[SouthEast 1]: /images/20220506/87c7093b97014b6488a00023793c4aee.png
[70]: /images/20220506/0fab9be944774da4a42da9e1333f18a6.png
[LARGE _begin_pmatrix_ s _ 0 _ 0_ 0 _ s _ 0_ 0_ _ 0 _1 _end_pmatrix_begin_smallmatrix_ x _y _1 _end_smallmatrix_begin_matrix_ sx_sy _1 _end_matrix]: https://private.codecogs.com/gif.latex?%5Cfn_cm%20%5CLARGE%20%5Cbegin%7Bpmatrix%7D%20s%20%26%200%20%26%200%5C%5C%200%20%26%20s%20%26%200%5C%5C%200%7D%20%26%200%20%261%20%5Cend%7Bpmatrix%7D%5B%5Cbegin%7Bsmallmatrix%7D%20x%20%26y%20%261%20%5Cend%7Bsmallmatrix%7D%5D%3D%5B%5Cbegin%7Bmatrix%7D%20sx%26sy%20%261%20%5Cend%7Bmatrix%7D%5D
[70 1]: /images/20220506/27ede9ff73d845d089136dffc975921c.png
[WebGL]: https://blog.csdn.net/qq_37338983/article/details/78556107