14 WebGL 使用矩阵实现图形 旋转+平移并解释一下缩放

具体操作,wasd键控制缩放,上下左右键控制图形的位置,图形自动旋转。

案例查看地址:点击这里




    
    
    
    Document
    



    你的浏览器不支持WebGL,请更换新的浏览器







简单的变换,我们可以用数学表达式实现。但是,情形复杂的情况下,数学表达式就不是一种很好的选择了,好在我们可以使用另一个数学工具——变换矩阵(Transformation matrix)来完成工作。

在上面的代码中,32行,我们先uniform声明了一个mat4矩阵类型的变量u_xformMatrix,

在34行,将代码修改成了<新坐标>=<变换矩阵>x<旧坐标>,并且矩阵变量一定要写在前面。

14 WebGL 使用矩阵实现图形 旋转+平移并解释一下缩放_第1张图片

在gl.drawArrays()方法运行的时候,就会将34行的代码,按照上面的情况来运行,依次计算出新的坐标

(1)前面制作的旋转的sin b 和 cos b 在现在代码里面就是 a b e f的值


(2)影响平移的就是第四列,平移的修改为d h l 位置


(3)而影响缩放的呢,就是每一行与之相关的轴的值,根据变换时的计算得出,就是 a f k 三个位置的值



然后再main()方法的69行,获取到u_xformMatrix的存储位置。

14 WebGL 使用矩阵实现图形 旋转+平移并解释一下缩放_第2张图片

由于WebGL和OpenGL一样,矩阵元素是按列主序在数组中的。所以,我们声明 Float32Array的时候,每个值代表的是:[a,e,i,m,b,f,j,n,c,g,k,o,d,n,l,p]

通过调用run()方法80行,声明了一个4x4的矩阵,并在88行,将值赋值给了变量。

14 WebGL 使用矩阵实现图形 旋转+平移并解释一下缩放_第3张图片

最后,在95行,绘制的时候,gl.drawArrays()会对每一个顶点进行矩阵转换。


你可能感兴趣的:(WebGL)