nbcoder.com地址:http://nbcoders.com/webgl-chu-xue-xi-lie-zhi-wu-ai.html
最近把WebGL做的相关Demo已经放在
http://www.nbcoders.com 上了,这样就可以直观的进行看效果。
本文旋转平移缩放Demo的地址:
http://lab.nbcoders.com/ixshells/Html/ScaleRotateTranslate.html
好吧,回到本文。从Demo中我们可以看出,这里画出了三个三角形,也就是三个模型。让后对这三个模型分别进行旋转,平移,缩放。所以,在从上几篇文章的内容来看,这里增加了多模型操作和旋转,平移,缩放操作。所以,文章从以下的步骤进行总结讲解:
1. 初步了解矩阵操作(因为多模型和平移旋转缩放操作都需要用到矩阵操作,矩阵操作很重要,在WebGL中用处相当大)。
2. 建立多个模型。
3. 进行旋转,平移,缩放操作。
1 : 了解矩阵的基本操作
矩阵的计算,其实也不复杂。在WebGL中重要的不是具体的计算方法,而是使用方法,在WebGL中最关心的是矩阵操作中最后所得到的结果。这里为了让自己印象深刻一些,还是简单的介绍一下对于WebGL相关的矩阵计算操作,。
因为我们在后面不会直接用到矩阵计算相关,所以这里就简单举一个平移的例子,如果要了解更多矩阵计算的相关操作,可以去看看线性代数相关内容。平移是说的对象的每一个顶点都移动一个相同的距离。平移矩阵和某点p的表示如下:
这里将平移矩阵和点p的矩阵矩阵相乘,结果如下:
矩阵的计算已经知道了,但是在WebGL中,我们并不是关心的矩阵计算的过程。 所以矩阵计算的操作用了
glMatrix-0.9.5.js,它提供了矩阵向量和矩阵类,封装了一些矩阵和相关的一些操作。具体