在上一篇中我们花了很大力气通过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 ,