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

ゝ一纸荒年。 2022-05-15 15:47 275阅读 0赞

本专栏所有代码均可以在我的码云下载到：[https://gitee.com/babyogl/learnWebGL][https_gitee.com_babyogl_learnWebGL]，本节所有示例均在文件夹chapter-04下面；相信通过前面一节的学习，大家已经对简单的动画有所了解，如果还没看过，请阅读：[原生webgl学习（八） WebGL实现动画：平移、缩放和旋转][webgl_ 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][https_blog.csdn.net_qq_37338983_article_details_73742119]的介绍，而对于gl.drawArrays和gl.drawElements可以阅读：[第三节 WebGL中使用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);

实现效果：

![20181030162754631.gif][]       ![20181030162816906.gif][]

[https_gitee.com_babyogl_learnWebGL]: https://gitee.com/babyogl/learnWebGL
[webgl_ WebGL]: https://blog.csdn.net/qq_37338983/article/details/83096403
[WebGL]: https://blog.csdn.net/qq_37338983/article/details/83096215
[https_blog.csdn.net_qq_37338983_article_details_73742119]: https://blog.csdn.net/qq_37338983/article/details/73742119
[WebGL_gl.drawArrays_gl.drawElements]: https://blog.csdn.net/qq_37338983/article/details/78556091
[20181030162754631.gif]: https://img-blog.csdnimg.cn/20181030162754631.gif
[20181030162816906.gif]: /images/20220503/9921ce666a0e4afe96d0debc399d20ed.png