13 WebGL移动、旋转和缩放的 旋转和缩放

案例查看地址：点击这里

相对于平移来说，WebGL的选择就复杂一些，能够旋转，首先你要指明：

1.旋转轴：你要指明通过哪个轴进行旋转

2.旋转方向：逆时针还是顺时针旋转

3.旋转的角度

如下图这种，逆时针选择通过z轴旋转，为正旋转。那我们怎么通过这些所知的内容，求出旋转后的顶点的坐标呢？

p和p'是老点的位置和新点的位置，r是距离原点的距离，α是p点距离x轴的角度，β是选中的角度。

1.首选求出p点和x相交的角度a，旋转后两个点距离旋转轴原点距离都是相同的，所以r的长度可以确定。

2.得知α的度数以后，就能得到旋转后的p'点和x轴的角度。

3.然后再通过三角函数计算出旋转后的p'点的x坐标和y坐标。

首先通过：

推理出来：

cos a = x/r;
sin a = y/r;
cos(a+b) = x'/r;
sin(a+b) = y'/r;

换个角度：

r = x/cos a;
r = y/sin a;
x' = r*cos(a+b);
y' = r*sin(a+b);

然后通过：

得到：

x' = r*(cos a * cos b - sin a * sin b);
y' = r*(sin a * cos b + cos a * sin b);

x' = r*cos a * cos b - r*sin a * sin b;
y' = r*sin a*cos b + r*cos a * sin b;

x' = x * cos b - y * sin b;
y' = y * cos b + x * sin b;

所以：通过公式，我们只要求出sin b和cos b，就能得到旋转后的x坐标和y坐标。

这一块的内容由于老长时间没学了，本人也忘的差不多了，算了，就写成这样吧，你们如果还不懂，就找到高中的课本。。。

由于正方形不好看效果，所以就改为了用三角形实现

 

    
    
    
    



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

上面的代码实现了图形的旋转。

 

缩放：

图形的缩放就简单的多多了，为什么？

我们在设置顶点着色器的时候，是不是有一个gl_Position.w得值，在之前介绍顶点着色器的时候，介绍过第四个值得作用，就是实际点的位置都是除以w以后的值。

默认都是1.0，就是不缩小也不放大，如果要放大一倍呢，那就把这个值设置成0.5好了。

效果呢，就会变成下面的：

个人感觉，还是缩放简单啊，下一节，我们将会将到矩阵，现在我反正还看不懂。