WebGL-二

    通过WebGL实现是要先在WebGL内赋值，但是不实用，现是通过定义attribute和uniform存储限定符来将javascript中的数据传到webGL中，大致的流程是：

    1、在js中定义存储限定符

    2、在js中获取canvas 在js中获取隐藏浏览器兼容性的上下文环境

    3、将定义的带有存储限定符的参数和上下文环境通过初始化函数进行参数初始化

    4、在js中获取相应的定义了存储限定符的变量的存储位置并赋值给js变量

    5、通过webGL函数将webGL位置和数据作为参数然后完成赋值

    6、设置背景颜色

    7、清除颜色

    8、绘制图形（点，线，三角形、矩形）

    对于绘制多个点来说，要将大量数据放入缓冲区（创建、写数据、赋值、激活），然后将大量的点显示在canvas上完成点三角形和矩形的绘制。可以通过4*4矩阵来实现图形的旋转、平移缩放。关于矩阵式如何控制图形变换的且看如下数学公式。

1、

 

    (x,y)是原来的坐标点二(x',y')是经过旋转B度以后的坐标点r是斜边，A是原来与x轴的夹角有如下等式 ：1、x=r*cosA,y=r*sinA,而2、x'=r*cos(A+B) y'=r*sin(A+B)，

展开2 得3、x'=r*cosAcosB-r*sinA*sinB，y'=r*sinAcosB+r*cosAsinB 1、3削去r A得 x'=xcosB-y*sinB,y'=x*sinB+y*cosB 从而只要输入了角度B就能得到移动后的新坐标实现了旋转，但还不是矩阵变换矩阵书写不方便直接上结果 var a=new Float32Array([cosB,-sinB,0.0, sinB,cosB,0.0 ,0.0,0.0,1.0]);这就是3*3的旋转矩阵，同理加上平移后的矩阵为var a=new Float32Array([cosB,-sinB,0.0,tx, sinB,cosB,0.0,ty ,0,0.0,1.0,tz,0.0,0.0,0.0,1.0]);4*4矩阵那么放缩矩阵亦是同理。

  先看效果图。前后对比

 原图，基准

缩放

平移

旋转