這一節我們通過動畫來實現頂點顏色的變化，首先對於顏色資料變化的實現，可以用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.TRIANGLES, 0, vertices.length / 2);

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

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


 

實現效果：