注册 登录
主题 : 西蒙iphone-OpenGL ES 教程-09
级别: 侠客

UID: 1030
精华: 1
发帖: 52
可可豆: 1420 CB
威望: 1420 点
在线时间: 476(时)
注册时间: 2008-10-14
最后登录: 2016-07-21
楼主 : 发表于: 2009-08-19 17:27    发自: Web Page
来源于 3D图形 分类

西蒙iphone-OpenGL ES 教程-09   

OpenGL ES 09 –不使用Mr. Buzzy的混合色 1










请注意:我对我写这个教程时的状态不是很满意,所以如果你有些地方有疑惑,请不要在意。如果哪里错了,也别担心,我会在第2节里继续解释它。


谁是 Mr. Buzzy? 那是我的厨房搅拌机!(英文里搅拌机和混合色是同样的)我们当然不是在谈论我的厨房搅拌机或者混合3d软件,我们在说OpenGL的混合。然而,这个部分可能要说2,3个教程。影响混合的效果是一些很小的细节,这就需要很多的说明。在以后的教程中会有详细的说明。

我还记得我第一使用混合时候的代码。幸运的是,我没有写自己的代码,但效果真的很酷。那是一个SGL的显卡。非常强大的处理能力,比不上现在的苹果,但当时,真的是很壮观的。

最主要的原因是因为有一个激动人心的时刻,在当时,我们还没有人见过混合时执行纹理映射,同时还有灯光及坐标转换。


无论如何,让我们把学习融合。混合,是相结合的过程中两个图像一起,使图像显示的前端部分透明。例如,只说你有一块红色的有机玻璃,并期待通过。世界上会出现红色的,因为颜色的有机玻璃将改变颜色的所有对象,通过它您可以查看。

因此,使混合工作,我们需要一个对象在前台是部分透明的(即阿尔法值小于1.0的RGBA颜色定义)和一些背后的,将被“混合型”的对象。

这是混合的关键,你需要两个对象,前面的对象是透明的,透明的部分即刻看到后面的物体。

我应该告诉你们,混合的正式名称是“阿尔法合成”。 我不会要求可以认为(从来没有) ,但您可能会看到这个词了。计算机图形学上涨了很长的路,因为我研究过,但正式的时候,我学过这个,我认为,融合是一种形式的阿尔法合成和Alpha合成的一种方法是单一或联合起草的图像和Alpha通道。

使用入门
下载第7章的教程: AppleCoder-OpenGLES-07.zip

我们将使用这个工程,并使用纹理映射过的金字塔和立方体在背景上,为了显示混合的效果。打开Xcode。

在 OpenGL中的混合
为了混合在OpenGL中工作起来,我们需要改变OpenGL中的“状态”以让我们可以使用混合。我敢肯定你知道如何做到这点。

        glEnable(GL_BLEND);

添加到drawView函数,我们绘制之前,这样就可以使用半透明了,关闭这个状态使用glDisable()。

好了,混合接通(记得要关掉它,如果你不需要它) 。一个伟大的事情OpenGL的是,可以执行的混合使用不同的混合方法来产生不同的混合效果。这些所谓的混合功能。我就第一个节和讨论他们在下面详细说明。

好,回到drawView函数,我们要定义一个矩形,来放到我们两个物体之前。

    const GLfloat blendRectangle[] = {
        1.0, 1.0, -2.0,
        -1.0, 1.0, -2.0,
        -1.0, -1.0, -2.0,
        1.0, -1.0, -2.0
    };

我们想使两个。因此,在借鉴代码将使用glPushMatrix ( )和glPopMatrix ( )一对把它们独立。

向下,到绘制金字塔和立方体的方法那里。为了正确的显示混合效果,我们必须先绘制一个不透明的物体。然后在绘制透明的。就像一个老画家一样。

现在,考虑下OpenGL的当前状态。我们当前有纹理映射,我们要这个纹理去做图吗?不是的,所以我们要关闭纹理映射。

      glDisableClientState(GL_TEXTURE_COORD_ARRAY);

然后,开始混合:

    glEnable(GL_BLEND);
    glBlendFunc(GL_ONE, GL_ONE);

glEnable打开混合。光混合是不够的,我们要告诉OpenGL混合是如何工作的,否则默认状态下,不会做任何事情。 这就是glBlendFunc ( )发挥作用。不必担心这个,现在我要讨论的混合功能的详细阐述;现在,让我们刚刚得到的工作,然后我们可以实验。

恩,纹理关闭了,混合打开了,混合模式也提交给OpenGL了,现在是时候绘制两个矩形了。

    glPushMatrix();
    {
        glTranslatef(0.0, 1.0, -4.0);
        glVertexPointer(3, GL_FLOAT, 0, blendRectangle);
        glEnableClientState(GL_VERTEX_ARRAY);
        glColor4f(1.0, 0.0, 0.0, 0.4);
        glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    }
    glPopMatrix();
    
    glPushMatrix();
    {
        glTranslatef(0.0, -1.0, -4.0);
        glColor4f(1.0, 1.0, 0.0, 0.4);
        glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    }
    glPopMatrix();
    glDisable(GL_BLEND);    

除了调用glDisable ( )在结束时,没有什么新的这里。我们仅仅是我们的blendRectangle定义,定位它在显示器上,颜色,并提请它。然后,我们需要禁用OpenGL的融合,否则将结合我们的金字塔和立方体下次将使用此功能(您可以尝试以后如果你愿意的话) 。

那就是了,点击“Build and Go” :




注意颜色的金字塔和立方体的转变,他们跨越两个颜色的矩形?这是融合工作。颜色与两位前矩形是部分透明的( 40 %透明的) ,结合或混合的颜色的物体,以创建一个新的色彩。

因此,黄色的矩形看起来比红色的矩形亮。

如果你只得到了一个红色及黄色的矩形,那么有可能你绘制函数的地方插错了位置。我们需要绘制透明物体在不透明物体之后。或者你改变混合模式。

这是它最基本的混合。没有什么特别的,但是我们了解了混合的部分。

在继续之前的快速小结
因此,使用混合的时候,我们需要一个透明的对象在我们屏幕的前面。我们先绘制实心的对象,这时候我们可以调用glEnable(),使用glBlendFunc()来设置混合,最后从后到前得到我们转换过的对象。

现在我们需要进入混合真正复杂的地方。设置混合因子。

混合因子
我刚刚删除了我刚刚写的内容。这个可以决定像素的最终颜色,基本上是数学矩阵(尽管它并没有被提到)。不,我不认为是一个正确的事情。

对我来说是时候了,让你得到更多的创造性和使用性的东西,但是你需要第一个理论:混合是怎么工作的。

如我先前所说的,你需要一个半透明的物体,并且有个背景上的东西进行混合工作。你也可以简单的和背景混合,不过我们每次都使用glClear()来清除了背景,所以你可能什么都得不到。

所以,在显示器上得每个像素,OpenGL都找到两件事:

1.这是源像素。这是我们当前绘制得新像素,从部分透明得对象(在红色和黄色矩形)

2. 这是目标像素。这是我们当前显存中得像素。这个就是正在绘制得半透明物体。在我们例子里,这个是一个混合对象,包含了实心对象(金字塔及立方体)和背景。

3.这是源像素混合因子指示符。这个是glBlendFunc()的第一个参数。它告诉OpenGL如何处理这个新的像素。

4.这个是目标像素混合因子指示符。这个是glBlendFunc()的第二个参数,并且告诉OpenGL如何处理目标像素。

找到上述四个信息以后。OpenGL可以计算出新的源及目标的混合因子,进而放入目标内存中。简单的说,我只是删除了所有的垃圾。

钥匙是 glBlendFunc()中的两个参数。

在上面的例子里,我们使用了下面的代码设置混合功能:

   glBlendFunc(GL_ONE, GL_ONE);

这两个参数都是相同的: GL_ONE. 第一个参数表示了源或者传入像素的值,第二个参数表示了目标像素的值。

这里有一系列不同的混合因子说明符可以传入glBlendFunc()。这里需要你知道的是,它们单独并没有作用,必须要结合使用才可以表示我们的混合效果。

这是最重要的一点。我知道我有没有列出的选择,但是我需要你首先记住这一条理论。

如果你想获得最佳的混合效果,你需要明确你的想法,因为这里,新的颜色与部分透明的对象(我们的矩形)和原来的实心的对象是相互影响的。这是两者的结合混合因素控制而成的效果。

要明白这点,我们可以通过一些例子去了解。这两个参数到底表示什么意思并不重要!我想告诉你,当你改变参数的时候,发生了什么。

这个函数,默认打开了混合。
glEnable():

    glBlendFunc(GL_ONE, GL_ZERO);

我们将第二个参数改为 GL_ZERO. 记得吗,第二个参数是影响到我们在缓冲区的实心的物体的,而不是部分透明物体,它使我们有了如下的效果:



哦,我们的背景物体发生了什么?不要太多解释,你知道GL_ZERO是最重要的线索。

这不是因为“没有混合”,而是因为目标像素被乘以了RGBA颜色(0,0,0,0),导致没有任何渲染。这个源(两个矩形)因为是GL_ONE所以被乘以了(1,1,1,1).这个像素就被完全的显示出来。

如果你没有对glBlendFunc()做任何修改,这是和现在是相同的,因为这是默认的状态。

再次改变两个参数位下面:

    glBlendFunc(GL_ZERO, GL_ONE);

  


不用怀疑,那两个矩形消失的(这可是你做的,你把它们乘以了0)

好了,你已经知道了GL_ZERO和GL_ONE表示的是什么意思了。现在我们看看glBlendFunc()中支持的参数列表:

GL_ZERO
GL_ONE
GL_SRC_COLOR
GL_ONE_MINUS_SRC_COLOR
GL_DST_COLOR
GL_ONE_MINUS_DST_COLOR
GL_SRC_ALPHA
GL_ONE_MINUS_SRC_ALPHA
GL_DST_ALPHA
GL_ONE_MINUS_DST_ALPHA
GL_SRC_ALPHA_SATURATE

我会在之后的教程中详细的去解释它。感兴趣的朋友可以自己去网上查阅。

混合的例子
我也通过几个例子来说明这些参数。只是为了让你了解不同的混合效果。

    glBlendFunc(GL_SRC_ALPHA, GL_ONE);

  


请注意,前面的两个矩形更加的透明了?似乎实心的物体更亮了,而透明矩形更暗了,我们没做什么事情,是你的眼睛欺骗了你。

    glBlendFunc(GL_ONE_MINUS_DST_ALPHA, GL_ONE);




我们的矩形消失了?恩,不正确。它们的alpha是目标的-1。所以我们的目标的alpha原来是1.0 。所以 1.0 -1.0 = 0.0

需要注意的一件事是:这个背景颜色被glClearColor设置,alpha是1.0。那么我们修改clear颜色。

    glClearColor(0.0, 0.0, 0.0, 0.0);

只改变这行,我们看看效果:

  


你能看出这是怎么一回事吗?虽然看起来移动到了实心物体的背景,但这真的是混合在工作。从前面的例子知道,无论OpenGL在渲染那一个像素,其中只要有一个alpha为1.0,这个矩形就是100%透明了。现在背景有一个alpha为0.0,所以1.0-0.0=1.0。

让我们来看看有没有更接近的。

我们红色矩形的颜色定义是: (1.0, 0.0, 0.0, 0.4). 所以如果背景是0 alpha, 这个渲染或混合的颜色就是 (1.0, 0.0, 0.0, 0.4). 背景颜色是黑色是最简单的,让我们来把它改为蓝色。

    glClearColor(0.0, 0.0, 1.0, 0.0);

我们将得到如下的图片:




蓝色的背景是显然的。现在立方体及金字塔的混合如前一样。但是透明矩形已经发生了变化,看起来像是灰色的。

我将通过最后一个例子及计算。告诉大家如何得到最后的像素的。

    glBlendFunc(GL_SRC_ALPHA, GL_DST_ALPHA);

  


最后一个混合组合….
让我们看看什么是最常见的参数配对:

    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

在我们这的测试结果,看起来像如下:

  

添加额外的混合
你不需要为一个对象的每个像素设置混合。你可以在部分透明的物体上跌加几层。添加下面的函数,在绘制第二个矩形之后。

    glPushMatrix();
    {
        glTranslatef(0.0, 0.0, -3.0);
        glScalef(1.0, 0.3, 1.0);
        glColor4f(1.0, 1.0, 1.0, 0.6);
        glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    }
    glPopMatrix();

我们要做的是增加了第三个矩形,OpenGL将混合到一起

  


当然,我做了一个还没介绍的函数: glScalef().

Scaling – 一些我还没有介绍的东西!
Scaling 就是为对象进行放大缩小, 这里有三个参数: xscale, yscale, and zscale.

在上面的例子中, xscale 和 zscale 是1。所以保持原尺寸。大于1就是放大,小于1就是缩小。上面是0.3,那么就是缩小到原来的30%。立方体和金字塔就在双层混合后的结果。

很简单。它应该包括之前的处理。

原文位置:
http://web.me.com/smaurice/AppleCoder/iPhone_OpenGL/Entries/2009/4/21_OpenGL_ES_09
清空我的评分动态本帖最近评分记录: 共可可豆条评分记录
gagaga 贡献值 +5 2008-09-19
隐藏评分记录
级别: 侠客

UID: 1030
精华: 1
发帖: 52
可可豆: 1420 CB
威望: 1420 点
在线时间: 476(时)
注册时间: 2008-10-14
最后登录: 2016-07-21
沙发 : 发表于: 2009-08-19 17:31    发自: Web Page
看到自己的帖子被置顶了,感到兴奋的同时也有那么一些惶恐。
我的帖子居然和花生大大的帖子放到一个框框里面了。。。。。。

我会尽量将这个教程的原作者的东西翻译出来给大家看的,以回报大家。

08章空缺。。似乎是写的点和线的绘制,个人看过了似乎对于游戏的用处不大,暂时跳过,有时间会回头翻译的。
级别: 侠客
UID: 5950
精华: 0
发帖: 10
可可豆: 1750 CB
威望: 1750 点
在线时间: 213(时)
注册时间: 2009-05-24
最后登录: 2016-03-25
板凳 : 发表于: 2009-08-20 14:03    发自: Web Page
不得不顶!
级别: 新手上路
UID: 1068
精华: 0
发帖: 18
可可豆: 171 CB
威望: 171 点
在线时间: 8(时)
注册时间: 2008-10-17
最后登录: 2012-06-11
3 楼:  发表于: 2009-08-21 16:48    发自: Web Page
正在学习 感谢楼主分享
级别: 新手上路
UID: 3635
精华: 0
发帖: 4
可可豆: 110 CB
威望: 110 点
在线时间: 27(时)
注册时间: 2009-03-24
最后登录: 2010-01-29
4 楼:  发表于: 2009-08-22 03:53    发自: Web Page
有8和10吗?好期待!
级别: 论坛版主

状态: 未签到 - [143天]
UID: 491
精华: 6
发帖: 1729
可可豆: 112154 CB
威望: 112802 点
在线时间: 8521(时)
注册时间: 2008-08-19
最后登录: 2017-06-11
5 楼:  发表于: 2009-08-22 09:11    发自: Web Page
西蒙又来啦~~ O(∩_∩)O哈哈~
CC8年生快 | I'm  Developer
------------------------------------------------------------
Η αγάπη ποτέ δεν αποτυγχάνει.
愛是永不止息。
Love never fails.

    --《圣经.新约》哥林多前书第13章
级别: 骑士
UID: 17600
精华: 0
发帖: 195
可可豆: 1682 CB
威望: 1682 点
在线时间: 1356(时)
注册时间: 2010-04-15
最后登录: 2016-10-24
6 楼:  发表于: 2010-05-05 16:46    发自: Web Page
支持
级别: 骑士
UID: 10804
精华: 0
发帖: 171
可可豆: 1692 CB
威望: 1692 点
在线时间: 568(时)
注册时间: 2009-11-20
最后登录: 2015-09-21
7 楼:  发表于: 2010-05-05 16:56    发自: Web Page
我怎么下载不了附件啊?
级别: 新手上路
UID: 43879
精华: 0
发帖: 4
可可豆: 40 CB
威望: 40 点
在线时间: 10(时)
注册时间: 2010-12-23
最后登录: 2011-06-20
8 楼:  发表于: 2011-03-09 15:24    发自: Web Page
楼主很强大呀
级别: 新手上路
UID: 53922
精华: 0
发帖: 20
可可豆: 164 CB
威望: 164 点
在线时间: 170(时)
注册时间: 2011-02-28
最后登录: 2016-06-28
9 楼:  发表于: 2011-03-16 16:33    发自: Web Page
附件在哪里可以正确下载啊?
描述
快速回复

关注本帖(如果有新回复会站内信通知您)

验证问题:
苹果公司现任CEO是谁?2字 正确答案:库克

发帖、回帖都会得到可观的积分奖励。查看论坛积分规则

按"Ctrl+Enter"直接提交
    顶部