原生webgl学习（九） WebGL动画：不断改变顶点颜色

本专栏所有代码均可以在我的码云下载到：https://gitee.com/babyogl/learnWebGL，本节所有示例均在文件夹chapter-04下面；相信通过前面一节的学习，大家已经对简单的动画有所了解，如果还没看过，请阅读：原生webgl学习（八） WebGL实现动画：平移、缩放和旋转，如果读者对本博客专栏的编程方式还不是很了解，请阅读：原生 WebGL开发文章目录（持续更新）。

这一节我们通过动画来实现顶点颜色的变化，首先对于颜色数据变化的实现，可以用Math.random()来实现，如下函数：

 function randomColor() {
    return [
        1.0, 0.0, 0.0, 1.0,
        1.0, Math.sin(Math.random()), Math.cos(Math.random()), 1.0,
        Math.sin(Math.random()), Math.cos(Math.random()), 1.0, 1.0,
        0.0, 0.0, 1.0, 1.0
    ]
  }

这个颜色读者可以根据需求设置；

其次，动画的实现，我们利用requestAnimationFrame这个函数来实现对场景重复不断的渲染：

function render() {
     color = randomColor();//改变颜色
     drawScene(gl, program, color);//绘制
     requestAnimationFrame(render);//循环渲染
}

 最后，本文的示例分别实现了gl.TRIANGLES、gl.TRIANGLE_FAN、gl.TRIANGLE_STRIP绘制三角形，对于这三个绘制三角形的方法可参考：https://blog.csdn.net/qq_37338983/article/details/73742119的介绍，而对于gl.drawArrays和gl.drawElements可以阅读：第三节 WebGL中使用gl.drawArrays()和gl.drawElements()绘制图形来了解。实现这三个示例的代码分别是chapter-04中的change-vertex-color.html、change-vertex-color-fan.html和change-vertex-color-strip.html。详细代码读者可自行下载研究。最终几个例子不同的代码为：

gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);

gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length / 2);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length / 2);

实现效果：