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 ,
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值