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程序的基本编程。

时间: 2024-10-06 15:07:54

Android OpenGL ES(二)----平滑着色的相关文章

Android OpenGL ES(十二):三维坐标系及坐标变换初步 .

OpenGL ES图形库最终的结果是在二维平面上显示3D物体(常称作模型Model)这是因为目前的打部分显示器还只能显示二维图形.但我们在构造3D模型时必须要有空间现象能力,所有对模型的描述还是使用三维坐标.也就是使用3D建模,而有OpenGL ES库来完成从3D模型到二维屏幕上的显示. 这个过程可以分成三个部分: 坐标变换,坐标变换通过使用变换矩阵来描述,因此学习3D绘图需要了解一些空间几何,矩阵运算的知识.三维坐标通常使用齐次坐标来定义.变换矩阵操作可以分为视角(Viewing),模型(Mo

Android OpenGL ES零基础系列(一):理解GLSurfaceView,GLSurfaceView.Render的基本用法

转载请注明出处 前言 OpenGL ES是OpenGL的一个子集,是针对手机.PDA和游戏主机等嵌入式设备而设计的.该API由Khronos集团定义推广,Khronos是一个图形软硬件行业协会,该协会主要关注图形和多媒体方面的开放标准. 因此OpenGL ES作为第三方库被应用在android中. 到目前为止,OpenGL ES已经发展有了3个版本,OpenGL ES 1.0 , OpenGL ES 2.0 , OpenGL ES 3.0.其中OpenGL ES 1.0 是以OpenGL 1.3

Android OpenGL ES 开发教程 从入门到精通

From:http://blog.csdn.net/mapdigit/article/details/7526556 Android OpenGL ES 简明开发教程 Android OpenGL ES 简明开发教程一:概述 Android OpenGL ES 简明开发教程二:构造OpenGL ES View Android OpenGL ES 简明开发教程三:3D绘图基本概念 Android OpenGL ES 简明开发教程四:3D 坐标变换 Android OpenGL ES 简明开发教程五

Android OpenGL ES 画球体

最近因为兴趣所向,开始学习OpenGL绘图.本文以"画球体"为点,小结一下最近所学. > 初识OpenGL ES 接触OpenGL是从Android开始的.众所周知,Android View 是线程不安全的,于是只允许在主线程中对View进行操作.然而假如我们需要实现复杂的界面,特别是开发游戏,在主线程中画大量图像,会耗费比较长的时间,使得主线程没能及时响应用户输入,甚至出现ANR.于是Android提供了一个 SurfaceView类,通过双缓冲机制(两块画布?三块画布?),允

[转]Android OpenGL ES 开发教程 从入门到精通

本文转自:http://blog.csdn.net/mapdigit/article/details/7526556 Android OpenGL ES 简明开发教程 Android OpenGL ES 简明开发教程一:概述 Android OpenGL ES 简明开发教程二:构造OpenGL ES View Android OpenGL ES 简明开发教程三:3D绘图基本概念 Android OpenGL ES 简明开发教程四:3D 坐标变换 Android OpenGL ES 简明开发教程五

Android OpenGL ES零基础系列(三):OpenGL ES的渲染管道及VertexShader与FragmentShader

前言 在前2篇文章中,我们都说到着色器,且在第二篇中正式说到,这着色器只能用在OpenGL ES2.x等可编程管道里面,而在OpenGL ES1.x是不能用的.但我们一直没有说这是为什么,两者有什么区别.那这篇我们就一起来学习下OpenGL ES中的渲染管道. 正文 管道,英文名叫Pipeline,相信用过FaceBook图片加载库的同学对这个管道并不陌生,因为SimpleImageDrawee里面也是用的管道来对图片进行的一个处理.由于其底层也是C,因此我可以大胆的猜想,FaceBook图片加

Android OpenGL ES(十三)通用的矩阵变换指令 .

Android OpenGL ES 对于不同坐标系下坐标变换,大都使用矩阵运算的方法来定义和实现的.这里介绍对应指定的坐标系(比如viewmodel, projection或是viewport) Android OpenGL ES支持的一些矩阵运算及操作. OpenGL ES 中使用四个分量(x,y,z,w)来定义空间一个点,使用4个分量来描述3D坐标称为齐次坐标 :所谓齐次坐标就是将一个原本是n维的向量用一个n+1维向量来表示. 它有什么优点呢? 许多图形应用涉及到几何变换,主要包括平移.旋转

Android OpenGL ES(七)基本几何图形定义 .

在前面Android OpenGL ES(六):创建实例应用OpenGLDemos程序框架 我们创建了示例程序的基本框架,并提供了一个“Hello World”示例,将屏幕显示为红色. 本例介绍OpenGL ES 3D图形库支持的几种基本几何图形,通常二维图形库可以绘制点,线,多边形,圆弧,路径等等.OpenGL ES 支持绘制的基本几何图形分为三类:点,线段,三角形.也就是说OpenGL ES 只能绘制这三种基本几何图形.任何复杂的2D或是3D图形都是通过这三种几何图形构造而成的. 比如下图复

初学Android OpenGL ES之使用纹理 八十三

在网上发现这些讲纹理的文章,非常不错 android 游戏导引(4. 简单纹理贴图) http://www.cnblogs.com/shengdoushi/archive/2011/01/13/1934181.html Android OpenGL es 纹理坐标设定与贴图规则 http://blog.csdn.net/cjkwin/article/details/6016224 Android OpenGL | ES给立方体进行纹理映射 http://www.ourunix.org/andro