Android OpenGL渐变色

在上一篇中我们花了很大力气通过OpenGL画上了一个矩形，我们也做了很多的准备工作，包括编写着色器和编译，以及把它们连接起来成为一个OpenGL的程序对象。

物体在现实世界中会因光线的变化而展现出不同的颜色和亮度，这些细微的差别是视觉感知的重要线索。艺术家利用这些视觉线索来创造视觉上的错觉，使作品看起来更加立体。而本篇我们将通过渐变色使上一篇我们画出来的矩形更加现实。

平滑着色

上一篇中我们了解到如何在一个uniform里用单一的颜色绘制形状。而且我们也已经知道，我们只能画点、直线以及三角形，并且所有物体都以它们为基础构建。既然受限于这三个基本的图元，我们怎样用许多不同的颜色和着色表达一个复杂的场景呢？

我们能使用的一个方法就是使用大量的小三角形，每个三角形都有一个不同的颜色。如果使用足够多的三角形，我们就能欺骗观察者，让他们看到一幅美丽的、复杂的、有丰富颜色变化的场景。尽管这在技术上是可行的，但是性能和内存的开销也是非常恐怖的。

如果在一个三角形的每个点上都有一个不同的颜色，并在三角形的表面上混合这些颜色，我们最终将得到一个平滑着色的三角形，是不是会更好。

效果如下图：

渐变色是在顶点之间完成的

OpenGL提供了一种方法，可以在直线或三角形表面上平滑地混合每个顶点的颜色。我要使用这种方法目的是使图形中心看起来更明亮，而边缘显得较暗，模拟的效果就像是有一盏灯挂在矩形中心上方。而在做这些之前我们需要更新矩形的结构。我们现在使用的是用两个三角形绘制的矩形，如图所示。

我们如何才能让矩形的中心显现的更加明亮呢？中心并没有点，因此我们不知道从哪里开始或者向哪里出发去混合颜色。我们需要在矩形中心添加一个点，这样，就可以在桌子中间和边缘之间混合颜色。新的结构如下图：

三角扇形

随着矩形中间的新点加入，现在我们有了四个三角形，而不是两个。我们把这个新点放在了中心，坐标为（0,0）。现在我们接着上篇的demo，更新顶点坐标如下：

    private var rectangleVertices  = floatArrayOf(
           0f ,    0f
        -0.5f , -0.5f,
         0.5f , -0.5f,
         0.5f ,  0.5f,
        -0.5f ,  0.5f,
        -0.5f , -0.5f,
    )

可能有同学会问，我们4个三角形，不应该是12个点吗，为什么只有6个，讲到这里，我们就要了解下什么是三角扇形了。

三角扇形（Triangle Fan）是一种在计算机图形学中用来构建多边形表面的图元组合方式。它是一种高效的方法，用于通过较少的顶点数据来定义复杂的多边形形状。

在三角扇形中，第一个顶点（通常称为中心顶点或起始顶点）是固定不变的。从这个中心顶点开始，后续的顶点与中心顶点以及前一个顶点一起形成一个三角形。这样，每个新顶点都会与中心顶点和它前面的顶点形成一个三角形，从而创建出一个扇形的形状。

其特点是，三角扇形使用较少的顶点来定义多边形，这可以减少数据传输和处理的需要，提高渲染效率。通过改变中心顶点或后续顶点的位置，可以轻松调整多边形的形状和大小。三角扇形适用于创建具有共同顶点的多边形，例如圆形、扇形区域或其他不规则多边形。

了解完什么是三角扇形，那么接下来我们更新代码，以画出这个三角扇形，在Renderer的onDrawFrame()中更新画三角形的方法：

 GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN,0,6)

这样就会让OpenGL使用我们已经定义过的6个新点绘制一个三角扇形。

给顶点添加颜色属性

我们已经更新了矩形的数据结构，接下来我们就可以为每个顶点添加上对应的颜色属性了，我们再次更新下顶点数组：

    private var rectangleVertices  = floatArrayOf(
           0f ,    0f ,   1f  ,   1f ,   1f ,
        -0.5f , -0.5f , 0.3f  , 0.3f , 0.3f ,
         0.5f , -0.5f , 0.3f  , 0.3f , 0.3f ,
         0.5f ,  0.5f , 0.3f  , 0.3f , 0.3f ,
        -0.5f ,  0.5f , 0.3f  , 0.3f , 0.3f ,