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

简介: Android OpenGL ES(二)----平滑着色

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


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


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


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


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


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


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


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


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


5.png


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


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%缩减,所有按比例缩减的颜色合在一起就得到了最后的颜色。


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


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


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

6.png


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


与直线一样,这些权重之和也总是等于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程序的基本编程。

相关文章
|
7月前
|
Java Android开发
Android开发之使用OpenGL实现翻书动画
本文讲述了如何使用OpenGL实现更平滑、逼真的电子书翻页动画,以解决传统贝塞尔曲线方法存在的卡顿和阴影问题。作者分享了一个改造后的外国代码示例,提供了从前往后和从后往前的翻页效果动图。文章附带了`GlTurnActivity`的Java代码片段,展示如何加载和显示书籍图片。完整工程代码可在作者的GitHub找到:https://github.com/aqi00/note/tree/master/ExmOpenGL。
171 1
|
7月前
|
Android开发 开发者
Android开发之OpenGL的画笔工具GL10
这篇文章简述了OpenGL通过GL10进行三维图形绘制,强调颜色取值范围为0.0到1.0,背景和画笔颜色设置方法;介绍了三维坐标系及与之相关的旋转、平移和缩放操作;最后探讨了坐标矩阵变换,包括设置绘图区域、调整镜头参数和改变观测方位。示例代码展示了如何使用这些方法创建简单的三维立方体。
91 1
Android开发之OpenGL的画笔工具GL10
|
7月前
|
前端开发 API vr&ar
Android开发之OpenGL绘制三维图形的流程
即将连载的系列文章将探索Android上的OpenGL开发,这是一种用于创建3D图形和动画的技术。OpenGL是跨平台的图形库,Android已集成其API。文章以2D绘图为例,解释了OpenGL的3个核心元素:GLSurfaceView(对应View)、GLSurfaceView.Renderer(类似Canvas)和GL10(类似Paint)。通过将这些结合,Android能实现3D图形渲染。文章介绍了Renderer接口的三个方法,分别对应2D绘图的构造、测量布局和绘制过程。示例代码展示了如何在布局中添加GLSurfaceView并注册渲染器。
223 1
Android开发之OpenGL绘制三维图形的流程
|
7月前
|
XML 前端开发 Java
【Android App】三维处理中三维投影OpenGL功能的讲解及实战(附源码和演示 超详细必看)
【Android App】三维处理中三维投影OpenGL功能的讲解及实战(附源码和演示 超详细必看)
120 1
|
7月前
|
XML Java Android开发
Android App开发中OpenGL三维投影的讲解及实现(附源码和演示 简单易懂)
Android App开发中OpenGL三维投影的讲解及实现(附源码和演示 简单易懂)
129 1
|
7月前
|
XML Java Android开发
Android App开发动画特效之利用滚动器实现平滑翻页(附源码和演示 简单易懂)
Android App开发动画特效之利用滚动器实现平滑翻页(附源码和演示 简单易懂)
115 0
Android App开发动画特效之利用滚动器实现平滑翻页(附源码和演示 简单易懂)
|
7月前
|
XML 小程序 Java
【Android App】三维投影OpenGL ES的讲解及着色器实现(附源码和演示 超详细)
【Android App】三维投影OpenGL ES的讲解及着色器实现(附源码和演示 超详细)
145 0
|
7月前
|
XML Java Android开发
Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战(附源码 简单易懂 可直接使用)
Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战(附源码 简单易懂 可直接使用)
430 0
|
存储 编解码 算法
Opengl ES之LUT滤镜(上)
Opengl ES之连载系列
472 0
|
数据安全/隐私保护 开发者
OpenGL ES 多目标渲染(MRT)
Opengl ES连载系列
332 0