OpenGL核心技术之混合技术

http://blog.csdn.net/jxw167/article/details/54927665

笔者介绍：姜雪伟，IT公司技术合伙人，IT高级讲师，CSDN社区专家，特邀编辑，畅销书作者，国家专利发明人;已出版书籍：《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。

CSDN视频网址：http://edu.csdn.net/lecturer/144

本章给读者介绍关于混合技术的实现，混合在游戏中经常使用，它在引擎中的实现主要是分为三种：透明，半透明，次序无关透明度，本篇博文主要是围绕它们进行。

在OpenGL中，物体透明技术通常被叫做混合(Blending)。一个物体的透明度，被定义为它的颜色的alpha值。alpha颜色值是一个颜色
向量的第四个元素。美术在制作的游戏图片颜色，主要是由rgba四位组成的，颜色的最后一位就是我们说的alpha通道，它主要是决定材质
的透明度的。
先说透明的材质处理，做过3D游戏的开发者都比较熟悉，在3D场景编辑器中经常需要在地面上刷一些草，这些草的图片制作是带有
alpha通道的，效果如下所示：

程序的处理方式就是把背景去掉，把草显示出来，所以，当向场景中添加像这样的纹理时，我们不希望看到一个方块图像，
而是只显示实际的纹理像素，剩下的部分可以被看穿。我们要忽略(丢弃)纹理透明部分的像素，不必将这些片段储存到颜色
缓冲中。接下来要做的事情就是加载带有Alpha通道的纹理图片，在这里我们使用了SOIL库， SOIL 是一个用于向OpenGL中
加载纹理的小型C语言库。下载地址：http://www.lonesock.net/soil.html，SOIL库提供的加载函数如下：

[cpp] view plain copy

 

1. unsigned char * image = SOIL_load_image(path, &width, &height, 0, SOIL_LOAD_RGBA);  

不要忘记还要改变OpenGL生成的纹理：

[cpp] view plain copy

 

1. glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, image);  

保证你在片段着色器中获取了纹理的所有4个颜色元素，而不仅仅是RGB元素：

[cpp] view plain copy

 

1. void main()  
2. {  
3.     // color = vec4(vec3(texture(texture1, TexCoords)), 1.0);  
4.     color = texture(texture1, TexCoords);  
5. }  

透明材质就加载完成了，接下来就是对草进行摆放了，代码段如下所示：

[cpp] view plain copy

 

1. vector<glm::vec3> vegetation;  
2. vegetation.push_back(glm::vec3(-1.5f,  0.0f, -0.48f));  
3. vegetation.push_back(glm::vec3( 1.5f,  0.0f,  0.51f));  
4. vegetation.push_back(glm::vec3( 0.0f,  0.0f,  0.7f));  
5. vegetation.push_back(glm::vec3(-0.3f,  0.0f, -2.3f));  
6. vegetation.push_back(glm::vec3( 0.5f,  0.0f, -0.6f));  

一个单独的四边形被贴上草的纹理，这并不能完美的表现出真实的草，但是比起加载复杂的模型还是要高效很多，利用一些小技巧，


比如在同一个地方添加多个不同朝向的草，还是能获得比较好的效果的。


由于草纹理被添加到四边形物体上，我们需要再次创建另一个VAO，向里面填充VBO，以及设置合理的顶点属性指针。


在我们绘制完地面和两个立方体后，我们就来绘制草叶：

[cpp] view plain copy

 

1. glBindVertexArray(vegetationVAO);  
2. glBindTexture(GL_TEXTURE_2D, grassTexture);    
3. for(GLuint i = 0; i < vegetation.size(); i++)  
4. {  
5.     model = glm::mat4();  
6.     model = glm::translate(model, vegetation[i]);  
7.     glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));  
8.     glDrawArrays(GL_TRIANGLES, 0, 6);  
9. }    
10. glBindVertexArray(0);  

运行程序得到的效果如下所示：

出现这种情况是因为OpenGL默认是不知道如何处理alpha值的，不知道何时忽略(丢弃)它们。我们不得不手动做这件事。
幸运的是这很简单，感谢着色器，GLSL为我们提供了discard命令，它保证了片段不会被进一步处理，这样就不会进入颜色缓冲。
有了这个命令我们就可以在片段着色器中检查一个片段是否有在一定的阈限下的alpha值，如果有，那么丢弃这个片段，就好像
它不存在一样：

[cpp] view plain copy

 

1. #version 330 core  
2. in vec2 TexCoords;  
3.   
4. out vec4 color;  
5.   
6. uniform sampler2D texture1;  
7.   
8. void main()  
9. {  
10.     vec4 texColor = texture(texture1, TexCoords);  
11.     if(texColor.a < 0.1)  
12.         discard;  
13.     color = texColor;  
14. }  

在这儿我们检查被采样纹理颜色包含着一个低于0.1这个阈限的alpha值，如果有，就丢弃这个片段。这个片段着色器能够保证我们只渲染哪些不是完全透明的片段。现在我们来看看效果：

下面把Shader脚本的顶点着色器给读者展示如下：

[cpp] view plain copy

 

1. #version 330 core  
2. layout (location = 0) in vec3 position;  
3. layout (location = 1) in vec2 texCoords;  
4.   
5. out vec2 TexCoords;  
6.   
7. uniform mat4 model;  
8. uniform mat4 view;  
9. uniform mat4 projection;  
10.   
11. void main()  
12. {  
13.     gl_Position = projection * view * model * vec4(position, 1.0f);  
14.     TexCoords = texCoords;  
15. }  

片段着色器代码如下所示：

[cpp] view plain copy

 

1. #version 330 core  
2. in vec2 TexCoords;  
3.   
4. out vec4 color;  
5.   
6. uniform sampler2D texture1;  
7.   
8. void main()  
9. {               
10.     vec4 texColor = texture(texture1, TexCoords);  
11.     if(texColor.a < 0.1)  
12.         discard;  
13.     color = texColor;  
14. }  

其次介绍半透明处理，以上Shader完成了透明材质的渲染，其实这种方法在材质渲染中经常使用，可以把不需要的颜色放弃掉，这种方式不适合渲染半透明的图片，也没有用到Blend混合模式。为了渲染出不同的透明度级别，需要开启混合（Blending），开启混合功能函数如下：

[cpp] view plain copy

 

1. glEnable(GL_BLEND);  

开启混合后，我们还需要告诉OpenGL它该如何混合。

OpenGL以下面的方程进行混合：

• C¯source：源颜色向量。这是来自纹理的本来的颜色向量。
• C¯destination：目标颜色向量。这是储存在颜色缓冲中当前位置的颜色向量。
• Fsource：源因子。设置了对源颜色的alpha值影响。
• Fdestination：目标因子。设置了对目标颜色的alpha影响。

片段着色器运行完成并且所有的测试都通过以后，混合方程才能自由执行片段的颜色输出，当前它在颜色缓冲中（前面片段的颜色在当前片段之前储存）。源和目标颜色会自动被OpenGL设置，而源和目标因子可以让我们自由设置。我们来看一个简单的例子：

我们有两个方块，我们希望在红色方块上绘制绿色方块。红色方块会成为目标颜色（它会先进入颜色缓冲），我们将在红色方块上绘制绿色方块。


那么问题来了：我们怎样来设置因子呢？我们起码要把绿色方块乘以它的alpha值，所以我们打算把FsrcFsrc设置为源颜色向量的alpha值：0.6。接着，让目标方块的浓度等于剩下的alpha值。如果最终的颜色中绿色方块的浓度为60%，我们就把红色的浓度设为40%（1.0 – 0.6）。所以我们把Fdestination 设置为1减去源颜色向量的alpha值。方程将变成：

最终方块结合部分包含了60%的绿色和40%的红色，得到一种脏兮兮的颜色：

最后的颜色被储存到颜色缓冲中，取代先前的颜色。

这个方案不错，但我们怎样告诉OpenGL来使用这样的因子呢？恰好有一个叫做glBlendFunc的函数。

void glBlendFunc(GLenum sfactor, GLenum dfactor)接收两个参数，来设置源（source）和目标（destination）因子。OpenGL为

我们定义了很多选项，我们把最常用的列在下面。注意，颜色常数向量C¯constant可以用glBlendColor函数分开来设置。

为从两个方块获得混合结果，我们打算把源颜色的alphaalpha给源因子，1−alpha1−alpha给目标因子，调整到glBlendFunc之

后就像这样：

[cpp] view plain copy

 

1. glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);  

也可以为RGB和alpha通道各自设置不同的选项，使用glBlendFuncSeperate：

[cpp] view plain copy

 

1. glBlendFuncSeperate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA,GL_ONE, GL_ZERO);  

这个方程就像我们之前设置的那样，设置了RGB元素，但是只让最终的alpha元素被源alpha值影响到。

OpenGL给了我们更多的自由，我们可以改变方程源和目标部分的操作符。现在，源和目标元素已经相加了。如果我们愿意的话，

我们还可以把它们相减。

void glBlendEquation(GLenum mode)允许我们设置这个操作，有3种可行的选项：

• GL_FUNC_ADD：默认的，彼此元素相加：
  
• GL_FUNC_SUBTRACT：彼此元素相减： 
  
• GL_FUNC_REVERSE_SUBTRACT：彼此元素相减，但顺序相反：
  

通常我们可以简单地省略glBlendEquation因为GL_FUNC_ADD在大多数时候就是我们想要的，但是如果你如果你真想尝试

努力打破主流常规，其他的方程或许符合你的要求。现在我们知道OpenGL如何处理混合，是时候把我们的知识运用起来了，

我们来添加几个半透明窗子。首先，初始化时我们需要开启混合，设置合适和混合方程：

[cpp] view plain copy

 

1. glEnable(GL_BLEND);  
2. glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);  

由于我们开启了混合，就不需要丢弃片段了，所以我们把片段着色器设置为原来的那个版本：

[cpp] view plain copy

 

1. #version 330 core  
2. in vec2 TexCoords;  
3.   
4. out vec4 color;  
5.   
6. uniform sampler2D texture1;  
7.   
8. void main()  
9. {  
10.     color = texture(texture1, TexCoords);  
11. }  

它根据alpha值，把当前片段的颜色和颜色缓冲中的颜色进行混合。因为窗子的玻璃部分的纹理是半透明的，我们应该可以

透过玻璃看到整个场景。

如果你仔细看看，就会注意到有些不对劲。前面的窗子透明部分阻塞了后面的。为什么会这样？

原因是深度测试在与混合的一同工作时出现了点状况。当写入深度缓冲的时候，深度测试不关心片段是否有透明度，

所以透明部分被写入深度缓冲，就和其他值没什么区别。结果是整个四边形的窗子被检查时都忽视了透明度。即便透明部

分应该显示出后面的窗子，深度缓冲还是丢弃了它们。

所以我们不能简简单单地去渲染窗子，我们期待着深度缓冲为我们解决这所有问题；这也正是混合之处代码不怎么好

看的原因。为保证前面窗子显示了它后面的窗子，我们必须首先绘制后面的窗子。这意味着我们必须手工调整窗子的顺序，

从远到近地逐个渲染。

这里要注意：对于全透明物体，比如草叶，我们选择简单的丢弃透明像素而不是混合，这样就减少了令我们头疼的问题（没有深度测试题）。

下面介绍如何按照顺序渲染物体，要让混合在多物体上有效，我们必须先绘制最远的物体，最后绘制最近的物体。

普通的无混合物体仍然可以使用深度缓冲正常绘制，所以不必给它们排序。我们一定要保证它们在透明物体前绘制好。

当无透明度物体和透明物体一起绘制的时候，通常要遵循以下原则：

先绘制所有不透明物体。 为所有透明物体排序。 按顺序绘制透明物体。 一种排序透明物体的方式是，获取一个物体

到观察者透视图的距离。这可以通过获取摄像机的位置向量和物体的位置向量来得到。接着我们就可以把它和相应的位置

向量一起储存到一个map数据结构（STL库）中。map会自动基于它的键排序它的值，所以当我们把它们的距离作为键添

加到所有位置中后，它们就自动按照距离值排序了：

[cpp] view plain copy

 

1. std::map<float, glm::vec3> sorted;  
2. for (GLuint i = 0; i < windows.size(); i++) // windows contains all window positions  
3. {  
4.     GLfloat distance = glm::length(camera.Position - windows[i]);  
5.     sorted[distance] = windows[i];  
6. }  

最后产生了一个容器对象，基于它们距离从低到高储存了每个窗子的位置。

随后当渲染的时候，我们逆序获取到每个map的值（从远到近），然后以正确的绘制相应的窗子：

[cpp] view plain copy

 

1. for(std::map<float,glm::vec3>::reverse_iterator it = sorted.rbegin(); it != sorted.rend(); ++it)  
2. {  
3.     model = glm::mat4();  
4.     model = glm::translate(model, it->second);  
5.     glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));  
6.     glDrawArrays(GL_TRIANGLES, 0, 6);  
7. }  

我们从map得来一个逆序的迭代器，迭代出每个逆序的条目，然后把每个窗子的四边形平移到相应的位置。这个相对

简单的方法对透明物体进行了排序，修正了前面的问题，现在场景看起来像这样：

虽然这个按照它们的距离对物体进行排序的方法在这个特定的场景中能够良好工作，但它不能进行旋转、缩放或者

进行其他的变换，奇怪形状的物体需要一种不同的方式，而不能简单的使用位置向量。

在场景中排序物体是个有难度的技术，它很大程度上取决于你场景的类型，更不必说会耗费额外的处理能力了。

完美地渲染带有透明和不透明的物体的场景并不那么容易。

接下介绍技术次序无关透明度，为了解决上述提到的问题，我们使用更高级的更高级的技术更高级的技术次序无关

透明度。下面介绍该技术的实现，我们的渲染主要分两步：

第一步：渲染填充链表；

第二步：渲染排序+blend；

 先看第一步，我们使用片段着色器来填充链表：

[cpp] view plain copy

 

1. #version 420 core  
2.   
3. layout (early_fragment_tests) in;  
4.   
5. layout (binding = 0, r32ui) uniform uimage2D head_pointer_image;  
6. layout (binding = 1, rgba32ui) uniform writeonly uimageBuffer list_buffer;  
7.   
8. layout (binding = 0, offset = 0) uniform atomic_uint list_counter;  
9.   
10. layout (location = 0) out vec4 color;  
11.   
12. in vec4 surface_color;  
13.   
14. uniform vec3 light_position = vec3(40.0, 20.0, 100.0);  
15.   
16. void main(void)  
17. {  
18.     uint index;  
19.     uint old_head;  
20.     uvec4 item;  
21.   
22.     index = atomicCounterIncrement(list_counter);  
23.   
24.     old_head = imageAtomicExchange(head_pointer_image, ivec2(gl_FragCoord.xy), uint(index));  
25.   
26.     item.x = old_head;  
27.     item.y = packUnorm4x8(surface_color);  
28.     item.z = floatBitsToUint(gl_FragCoord.z);  
29.     item.w = 255 / 4;  
30.   
31.     imageStore(list_buffer, int(index), item);  
32.   
33.     //color = surface_color;  
34.     discard;  
35. }  

同时把顶点着色器代码也给读者展示一下：

[cpp] view plain copy

 

1. #version 330  
2.   
3. layout (location = 0) in vec3 position;  
4. layout (location = 1) in vec3 normal;  
5.   
6. uniform mat4 model_matrix;  
7. uniform mat4 view_matrix;  
8. uniform mat4 projection_matrix;  
9.   
10. uniform float minAlpha = 0.5f;  
11.   
12. out vec4 surface_color;  
13.   
14. void main(void)  
15. {  
16.     vec3 color = normal;  
17.     if (color.r < 0) { color.r = -color.r; }  
18.     if (color.g < 0) { color.g = -color.g; }  
19.     if (color.b < 0) { color.b = -color.b; }  
20.     vec3 normalized = normalize(color);  
21.     float variance = (normalized.r - normalized.g) * (normalized.r - normalized.g);  
22.     variance += (normalized.g - normalized.b) * (normalized.g - normalized.b);  
23.     variance += (normalized.b - normalized.r) * (normalized.b - normalized.r);  
24.     variance = variance / 2.0f;// range from 0.0f - 1.0f  
25.     float a = (0.75f - minAlpha) * (1.0f - variance) + minAlpha;  
26.     surface_color = vec4(normalized, a);  
27.   
28.     gl_Position = projection_matrix * view_matrix * model_matrix * vec4(position, 1.0f);  
29. }  

下面开始第二步骤的操作是渲染排序+blend，片段着色器代码如下所示：

[cpp] view plain copy

 

1. #version 420 core  
2. // The per-pixel image containing the head pointers  
3. layout (binding = 0, r32ui) uniform uimage2D head_pointer_image;  
4. // Buffer containing linked lists of fragments  
5. layout (binding = 1, rgba32ui) uniform uimageBuffer list_buffer;  
6.   
7. // This is the output color  
8. layout (location = 0) out vec4 color;  
9.   
10. // This is the maximum number of overlapping fragments allowed  
11. #define MAX_FRAGMENTS 40  
12.   
13. // Temporary array used for sorting fragments  
14. uvec4 fragment_list[MAX_FRAGMENTS];  
15.   
16. void main(void)  
17. {  
18.     uint current_index;  
19.     uint fragment_count = 0;  
20.   
21.     current_index = imageLoad(head_pointer_image, ivec2(gl_FragCoord).xy).x;  
22.   
23.     while (current_index != 0 && fragment_count < MAX_FRAGMENTS)  
24.     {  
25.         uvec4 fragment = imageLoad(list_buffer, int(current_index));  
26.         fragment_list[fragment_count] = fragment;  
27.         current_index = fragment.x;  
28.         fragment_count++;  
29.     }  
30.   
31.     if (fragment_count > 1)  
32.     {  
33.         for (uint i = 0; i < fragment_count - 1; i++)  
34.         {  
35.             uint p = i;  
36.             uint depth1 = (fragment_list[p].z);  
37.             for (uint j = i + 1; j < fragment_count; j++)  
38.             {  
39.                 uint depth2 = (fragment_list[j].z);  
40.                 if (depth1 < depth2)  
41.                 {  
42.                     p = j; depth1 = depth2;  
43.                 }  
44.             }  
45.             if (p != i)  
46.             {  
47.                 uvec4 tmp = fragment_list[p];  
48.                 fragment_list[p] = fragment_list[i];  
49.                 fragment_list[i] = tmp;  
50.             }  
51.         }  
52.     }  
53.   
54.     vec4 final_color = vec4(0.0);  
55.   
56.     for (uint i = 0; i < fragment_count; i++)  
57.     {  
58.         vec4 modulator = unpackUnorm4x8(fragment_list[i].y);  
59.         //final_color = mix(final_color, modulator, modulator.a);  
60.         final_color = final_color * (1.0f - modulator.a) + modulator * modulator.a;  
61.     }  
62.   
63.     color = final_color;  
64.     // color = vec4(float(fragment_count) / float(MAX_FRAGMENTS));  
65. }  

附带着顶点着色器代码如下所示：

[cpp] view plain copy

 

1. #version 420 core  
2.   
3. in vec3 position;  
4.   
5. uniform mat4 model_matrix;  
6. uniform mat4 view_matrix;  
7. uniform mat4 projection_matrix;  
8.   
9. void main(void)  
10. {  
11.     gl_Position = projection_matrix * view_matrix * model_matrix * vec4(position, 1.0f);  
12.     //gl_Position = vec4(position, 1.0f);  
13. }  

实现的效果图如下所示：

如果没有使用次序无关透明技术实现的效果图如下所示：

总结：

关于在3D游戏中的混合技术主要用于处理透明，半透明以及在解决渲染次序问题使用的次序无关透明度技术，希望对读者有所帮助。。。。。。