第四节 WebGL中的图形变换:旋转、平移和缩放

时间:2021-10-23 03:59:37

在WebGL中,如果我们想实现更高级的动态场景,或者是对物体进行坐标变换,那么旋转、平移和缩放必不可少。这些变换所涉及的是一些矩阵运算,先从二维平面讲起,再推导至三维空间。下面分别对这几种变换进行一个讲解:

1 旋转变换

试想一下,如果当一个场景只是静态的,没有动画,那将是多么令人乏味的画面,而旋转变换的加入将会使场景的动画效果更具观赏性。如下图所示,表示点(x, y)绕原点旋转一定角度后到达新的位置,假设原点到想(x, y)半径为R。可参考我另一篇博客的完整示例,绘制一个旋转的彩色立方体:点击打开链接
第四节 WebGL中的图形变换:旋转、平移和缩放

图中的关系可由系列式子计算:

第四节 WebGL中的图形变换:旋转、平移和缩放 
由上面的公式,上述坐标的矩阵表达形式为: 
第四节 WebGL中的图形变换:旋转、平移和缩放 
将其推广至三维空间,并用其次坐标表示出来,称为旋转矩阵: 
绕x轴旋转: 
第四节 WebGL中的图形变换:旋转、平移和缩放 
绕y轴旋转: 
第四节 WebGL中的图形变换:旋转、平移和缩放 
绕z轴旋转 
第四节 WebGL中的图形变换:旋转、平移和缩放

2 平移变换

平移是将点沿着指定的方向移动一段距离,即在原有坐标的基础上,再分别给x,y,z加上Tx,Ty,Tz;其示意图如下所示: 
第四节 WebGL中的图形变换:旋转、平移和缩放

平移矩阵如下: 
第四节 WebGL中的图形变换:旋转、平移和缩放

3 缩放变换

顾名思义,缩放即对图形的放大缩小,其示意图如下所示: 
第四节 WebGL中的图形变换:旋转、平移和缩放 
缩放的原理是在原有坐标的基础上乘一个缩放因子: 
第四节 WebGL中的图形变换:旋转、平移和缩放 
其缩放矩阵如下: 
第四节 WebGL中的图形变换:旋转、平移和缩放

以上就是WebGL中常用的三种变换,具体的代码实现在我的另一篇微薄上:点击打开链接。 
里面实现了一个可用键盘和鼠标交互的可旋转立方体。