OpenGL进阶之混合

参考：

https://learnopenglcn.github.io/04%20Advanced%20OpenGL/03%20Blending/

混合通常是实现物体透明度的一种技术.
透明就是说一个物体不是纯色的，它的颜色是物体本身的颜色和它背后其它物体的颜色的不同强度结合。

透明的物体可以是完全透明的（让所有的颜色穿过），或者是半透明的（它让颜色通过，同时也会显示自身的颜色）.
一个物体的透明度是通过它颜色的aplha值来决定的
当alpha值为0.0时物体将会是完全透明的。当alpha值为0.5时，物体的颜色有50%是来自物体自身的颜色，50%来自背后物体的颜色

丢弃片段

有些图片并不需要半透明，只需要根据纹理颜色值，显示一部分，或者不显示一部分.
比如说草，如果想不太费劲地创建草这种东西，你需要将一个草的纹理贴在一个2D四边形上，然后将这个四边形放到场景中。
然而，草的形状和2D四边形的形状并不完全相同，所以你只想显示草纹理的某些部分，而忽略剩下的部分

所以当添加像草这样的植被到场景中时，我们不希望看到草的方形图像，而是只显示草的部分，并能看透图像其余的部分。我们想要丢弃显示纹理中透明部分的片段，不将这些片段存储到颜色缓冲中.

要想加载有alpha值的纹理，我们并不需要改很多东西，stb_image在纹理有alpha通道的时候会自动加载，但我们仍要在纹理生成过程中告诉OpenGL，我们的纹理现在使用alpha通道了：

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);

同样，保证你在片段着色器中获取了纹理的全部4个颜色分量，而不仅仅是RGB分量：

void main()
{
   
    // FragColor = vec4(vec3(texture(texture1, TexCoords)), 1.0);
    FragColor = texture(texture1, TexCoords);
}

我们会创建一个vector，向里面添加几个glm::vec3变量来代表草的位置：

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

因为草的纹理是添加到四边形对象上的，我们还需要创建另外一个VAO，填充VBO，设置正确的顶点属性指针。接下来，在绘制完地板和两个立方体后，我们将会绘制草：

glBindVertexArray(vegetationVAO);
glBindTexture(GL_TEXTURE_2D, grassTexture);  
for(unsigned int i = 0; i < vegetation.size(); i++) 
{
   
    model = glm::mat4();
    model = glm::translate(model, vegetation[i]);               
    shader.setMat4("model", model);
    glDrawArrays(GL_TRIANGLES, 0, 6);
}

出现这种情况是因为OpenGL默认是不知道怎么处理alpha值的，更不知道什么时候应该丢弃片段。
我们需要自己手动来弄。幸运的是，有了着色器，这还是非常容易的。
GLSL给了我们discard命令，一旦被调用，它就会保证片段不会被进一步处理，所以就不会进入颜色缓冲
有了这个指令，我们就能够在片段着色器中检测一个片段的alpha值是否低于某个阈值，如果是的话，则丢弃这个片段，就好像它不存在一样：

#version 330 core
out vec4 FragColor;

in vec2 TexCoords;

uniform sampler2D texture1;

void main()
{
                
    vec4 texColor = texture(texture1, TexCoords);
    if(texColor.a < 0.1)
        discard;
    FragColor = texColor;
}

注意，当采样纹理的边缘的时候，OpenGL会对边缘的值和纹理下一个重复的值进行插值.
由于我们使用了透明值，纹理图像的顶部将会与底部边缘的纯色值进行插值。
这样的结果是一个半透明的有色边框，你可能会看见它环绕着你的纹理四边形。要想避免这个，每当你alpha纹理的时候，请将纹理的环绕方式设置为GL_CLAMP_TO_EDGE：

glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

效果如下：

混合

虽然直接丢弃片段很好，但它不能让我们渲染半透明的图像。我们要么渲染一个片段，要么完全丢弃它。要想渲染有多个透明度级别的图像，我们需要启用混合(Blending)。

glEnable(GL_BLEND);

OpenGL中的混合是通过下面这个方程来实现的：

C source：源颜色向量。这是源自纹理的颜色向量。
C destination：目标颜色向量。这是当前储存在颜色缓冲中的颜色向量。
F source：源因子值。指定了alpha值对源颜色的影响。
F destination：目标因子值。指定了alpha值对目标颜色的影响。
片段着色器运行完成后，并且所有的测试都通过之后，这个混合方程(Blend Equation)才会应用到片段颜色输出与当前颜色缓冲中的值。
源颜色和目标颜色将会由OpenGL自动设定，但源因子和目标因子的值可以由我们来决定。我们先来看一个简单的例子

我们有两个方形，我们希望将这个半透明的绿色方形绘制在红色方形之上。红色的方形将会是目标颜色（所以它应该先在颜色缓冲中），我们将要在这个红色方形之上绘制这个绿色方形
如果绿色方形对最终颜色贡献了60%，那么红色方块应该对最终颜色贡献了40%，即1.0 - 0.6。
所以我们将Fdestination设置为1减去源颜色向量的alpha值。这个方程变成了：


最终的颜色将会被储存到颜色缓冲中，替代之前的颜色
在OpenGL如何使用这样的因子呢？正好有一个专门的函数，叫做glBlendFunc

glBlendFunc(GLenum sfactor, GLenum dfactor)

函数接受两个参数，来设置源和目标因子
常数颜色向量C constant可以通过glBlendColor函数来另外设置。

为了获得之前两个方形的混合结果，我们需要使用源颜色向量的alpha作为源因子，使用1−alpha作为目标因子。这将会产生以下的glBlendFunc：

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

也可以使用glBlendFuncSeparate为RGB和alpha通道分别设置不同的选项：

glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO);

这个函数和我们之前设置的那样设置了RGB分量，但这样只能让最终的alpha分量被源颜色向量的alpha值所影响到

glBlendEquation允许我们设置运算符，它提供了三个选项：
GL_FUNC_ADD：默认选项，将两个分量相加：
C result=Src+Dst。

GL_FUNC_SUBTRACT：将两个分量相减：
C result=Src−Dst。

GL_FUNC_REVERSE_SUBTRACT：将两个分量相减，但顺序相反：
C result=Dst−Src。

渲染半透明纹理

首先，在初始化时我们启用混合，并设定相应的混合函数：

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

由于启用了混合，我们就不需要丢弃片段了，所以我们把片段着色器还原：

#version 330 core
out vec4 FragColor;

in vec2 TexCoords;

uniform sampler2D texture1;

void main()
{
                
    FragColor = texture(texture1, TexCoords);
}

现在（每当OpenGL渲染了一个片段时）它都会将当前片段的颜色和当前颜色缓冲中的片段颜色根据alpha值来进行混合
结果如下：

仔细看的话，最前面窗户的透明部分遮蔽了背后的窗户。
发生这一现象的原因是，深度测试和混合一起使用的话会产生一些麻烦。
当写入深度缓冲时，深度缓冲不会检查片段是否是透明的，所以透明的部分会和其它值一样写入到深度缓冲中。结果就是窗户的整个四边形不论透明度都会进行深度测试。即使透明的部分应该显示背后的窗户，深度测试仍然丢弃了它们。

要想保证窗户中能够显示它们背后的窗户，我们需要首先绘制背后的这部分窗户。这也就是说在绘制的时候，我们必须先手动将窗户按照最远到最近来排序，再按照顺序渲染。

不要打乱顺序

当绘制一个有不透明和透明物体的场景的时候，大体的原则如下：
1.先绘制所有不透明的物体。
2.对所有透明的物体排序。
3.按顺序绘制所有透明的物体。

排序透明物体的一种方法是，从观察者视角获取物体的距离。
这可以通过计算摄像机位置向量和物体的位置向量之间的距离所获得。
接下来我们把距离和它对应的位置向量存储到一个STL库的map数据结构中。
map会自动根据键值(Key)对它的值排序，所以只要我们添加了所有的位置，并以它的距离作为键，它们就会自动根据距离值排序了

std::map<float, glm::vec3> sorted;
for (unsigned int i = 0; i < windows.size(); i++)
{
   
    float distance = glm::length(camera.Position - windows[i]);
    sorted[distance] = windows[i];
}

结果就是一个排序后的容器对象，它根据distance键值从低到高储存了每个窗户的位置
之后，这次在渲染的时候，我们将以逆序（从远到近）从map中获取值，之后以正确的顺序绘制对应的窗户：

for(std::map<float,glm::vec3>::reverse_iterator it = sorted.rbegin(); it != sorted.rend(); ++it) 
{
   
    model = glm::mat4