Android OpenGL ES(二)----平滑着色

直线或者三角形上的每个片段混合后的颜色可以用一个varying生成。我们不仅能混合颜色，还可以给varying传递任何值，OpenGL会选择属于那条直线的两个值，或者属于那个三角形的三个值，并平滑地在那个基本图元上混合这些值，每个片段都会有一个不同的值。这种混合是使用线性插值实现的。要了解它是怎么工作的，让我们首先以一条直线为例开始讲解。

1.沿着一条直线做线性插值

假设有一条直线，它有一个红色顶点和一个绿色顶点，我们要从一个向另外一个混合颜色。

在这条直线的左边，每个片段的颜色更多地呈红色；随着向右边前进，那些片段的红色分量逐渐减少，在中间处，它们处于红色和绿色之间；随着与绿色顶点越来越近，片段也就变得越来越绿了。

我们可以看到每种颜色分量都随着直线长度线性缩放。因为这条线段的左侧顶点是红色，而右侧顶点是绿色，它的左端就是100%红色，中间是50%红色，而右端是0%的红色。

绿色的变化也是一样的。因为左侧顶点是红色，而右侧顶点是绿色的，这个线段的左端就是0%绿色，中间是50%绿色，而右端就是100%绿色。

一旦我们把这两个颜色叠加在一起，最终就得到一条混合后的直线。

这就是线性插值的基本解释。每种颜色的强度依赖于每个片段与包含那个颜色的顶点的距离。

为也计算这些，我们可以用顶点0和顶点1的值计算出当前片段对应的距离比。距离比仅仅是0到100之间的百分比，0%是左边的顶点，而100%就是右边的顶点。当我们从左向右移动，这个距离比例也会从0%向100%线性增加。这是几个距离比的例子：

要使用线性插值计算实际混合后的值，我们可以使用下面的公式：

Blended_value=(vertex_0_value*(100%-distance_radio))+(vertex_1_value*distance_radio)

这个计算公式是应用于每个分量的，因此，如果我们处理颜色值，这个计算就会分别应用在红色，绿色，蓝色和阿尔法分量上，计算的结果合并成一个新的颜色值。

让我们用这条直线的例子验证一下这个公式。设vertex_0_value为红色，它的RGB值是（1，0，0），设vertex_1_value为绿色，它的RGB值是（0，1，0）。计算一下这条线段上几个位置的颜色。 

表4-1 线性插值公式

               位置

        距离比

                公式

最左端

0%

（vertex_0_value*(1-distance_radio)）+(vertex_1_value*distance_radio)=((1,0,0)*(100%-0%)+(0,1,0)*0%)=((1,0,0)*100%)=(1,0,0)(红色)

 

直线的四分之一处

25%

（vertex_0_value*(1-distance_radio)）+(vertex_1_value*distance_radio)=((1,0,0)*(100%-25%)+(0,1,0)*25%)=（（1，0，0）*75%）+（（0，1，0）*25%）=（0.75，0，0）+（0，0.25，0）=(0.75,0.25,0)(大红)

中间

50%

（vertex_0_value*(1-distance_radio)）+(vertex_1_value*distance_radio)=((1,0,0)*(100%-50%)+(0,1,0)*50%)=（（1，0，0）*50%）+（（0，1，0）*50%）=（0.5，0，0）+（0，0.5，0）=(0.5,0.5,0)(半红半绿)

直线的四分之三处

75%

（vertex_0_value*(1-distance_radio)）+(vertex_1_value*distance_radio)=((1,0,0)*(100%-75%)+(0,1,0)*75%)=（（1，0，0）*25%）+（（0，1，0）*75%）=（0.25，0，0）+（0，0.75，0）=(0.25,0.75,0)(大绿)

最右端

100%

（vertex_0_value*(1-distance_radio)）+(vertex_1_value*distance_radio)=((1,0,0)*(100%-100%)+(0,1,0)*100%)=（（1，0，0）*0%）+（（0，1，0）*100%）=(0,1,0)(绿色)

 

要注意到，任何时候两个颜色的权重加起来都是100%。如果红色是100%，绿色就是0%；如果红色是50%，那绿色就是50%。

使用一个varying，我们就可以把任何两种颜色混合在一起。当然，这不只限于颜色；任何其他属性也可以应用插值技术。

 

2.在一个三角形表面混合

当我们只处理两个点的时候，阐明线性插值是怎么工作的并不困难；我们知道，从某个颜色的一个顶点到另一个顶点，其比例是从100%到0%缩减，所有按比例缩减的颜色合在一起就得到了最后的颜色。

在一个三角形上的线性插值也是一样的工作原理，但是现在需要处理三个点和三种颜色。让我们看一个直观的例子：

 

这个三角形与三种颜色有关联：顶端顶点是青色，左端顶点是红色，右端定点是黄色。让我们把这个三角形按每个顶点衍生出来的颜色进行分解：

就像那条直线一样，每个颜色在接近它的顶点处都是最强的，向其他顶点移动就会变暗。我们同样用比例确定每种颜色的相对权重，但这次要使用的面积的比例，而不是长度。

 

对于这个三角形内任何给定的点，从那个点向每个顶点所对应的点画一条直线就可以生成三个内部三角形。这三个内部三角形的面积比例决定了那个点上每种颜色的权重。比如，那个点上黄色的强度就取决黄色顶点相对的那个内部三角形的面积。距离黄色顶点越金的点，它的相对三角形越大，在那个点的片段就越黄。

与直线一样，这些权重之和也总是等于100%。可以使用下面的公司计算三角形内任何一个点的颜色分量：

Blended_value=(vertex_0_value*vertex_0_weight)+(vertex_1_value*vertex_1_weight)+(vertex_2_value*(100%-vertex_0_weight-vertex_1_weight))

我们已经理解了它在直线上是怎么工作的，在这种情况下，我们就不需要为此举出具体的例子了。原理是一样的，只是这次要处理三个点而不是两个。

看不懂向量算法的可以先看看线性代数，当然两个公式相对来说很简单。要深入学习OpenGL ES涉及到两门课程，开始讲解可能不明显，后面的应用越来越多的时候涉及的课程的知识会越来越多。当然计算更多的是在线性代数，而后面空间的构思会涉及离散数学的图论里面的知识。

下一篇讲解OpenGL程序的基本编程。