WebGL自学教程——WebGL示例：4. 让三角形动起来

 

4. 让三角形动起来

　

    我们需要交互。但要交互，就首先要有交互的内容。下一章我们将实现一个用键盘控制三角形旋转的例子。但在这一章，我们先作一些准备工作：让三角形无交互地不停地自我旋转；并且，稍微组织了一下代码，让数据准备代码和绘图代码独立到不同的js函数中。

    我们原先定义的三角形，在旋转时，会超出[-1.0, +1.0]这个数值范围。因此，我把三角形缩小了一半。

    加载数据的js函数为LoadData()，绘图的js函数为RenderScene()。LoadData函数返回一个整数值，0表示加载成功，其他值表示遇到了某种错误。 RenderScene函数没有返回值。以后我们会不断地完善这两个函数。

    我们使用了一个定时器，每隔一定的时间就将三角形旋转的角度加10，然后根据这个角度重新绘制整个场景（调用RenderScene）。

    在RenderScene函数中，我们根据旋转的角度计算了转换矩阵，然后把该转换矩阵传递给顶点着色器的uniform变量。在顶点着色器内部，使用接收到uniform矩阵执行顶点转换。关于3D转换、矩阵和向量计算等相关的知识，请自行找资料学习（一般介绍3D编程的书（如OpenGL、DirectX）上都会有，更专业一点，就去看数学书吧）。

    计算转换矩阵需要js文件“glMatrix-0.9.5.js”的支持。它提供了几个向量和矩阵类，并封装了一些操作。各个类及其操作的说明，可参考我整理的《函数参考：glMatrix.js》。

    整合的源码如下：

    运行结果如下：

    它们的效果是，贴在三角形上图片看起来并不会跟着三角形一起旋转；即是说，在任何时刻，三角形看起来总是起到一个透明的作用，将其所在区域的图片的内容显示出来。如果你把顶点着色器中的这三行注释掉：

        vec4 v4pos = um4Rotate * vec4(v3Position, 1.0);
        v_texCoord = vec2((v4pos.x+1.0)/2.0, 1.0-(v4pos.y+1.0)/2.0);
        gl_Position = v4pos;

    而把下面的这两行取消注释：

        //v_texCoord = vec2((v3Position.x+1.0)/2.0, 1.0-(v3Position.y+1.0)/2.0);
        //gl_Position = um4Rotate * vec4(v3Position, 1.0);

    那么，你所看到的效果就是，三角形上的图像会随着三角形一起旋转：