GLSL：如何将alpha混合包含到带有照明的片段着色器中

Question

我设法用OpenGL（OpenTK，因为我使用C#和Winforms）创建了一个明亮的场景，使用了以下片段着色器：

#version 420 core

in vec3 FragPos;
in vec3 Normal;
in vec2 texCoord;

out vec4 FragColor;

uniform sampler2D texture0;
uniform sampler2D texture1;

struct Material {
    sampler2D diffuse;
    sampler2D specular;
    float     shininess;
};
struct Light {
    vec3 position;
    vec3 ambient;
    vec3 diffuse;
    vec3 specular;
};

uniform Material material;
uniform Light light;
uniform vec3 viewPos;

void main()
{
    // Ambient
    vec3 ambient = light.ambient * vec3(texture(material.diffuse, texCoord));

    // Diffuse 
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(vec3(light.position - FragPos));
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = light.diffuse * diff * vec3(texture(material.diffuse, texCoord));

    // Specular
    vec3 viewDir = normalize(viewPos - FragPos);
    vec3 reflectDir = reflect(-lightDir, norm);
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess);
    vec3 specular = light.specular * spec * vec3(texture(material.specular, texCoord));

    vec3 result = ambient + diffuse + specular;    
    FragColor = vec4(result, 1.0);
}

计划是，左边的球体是云层。纹理包含一个alpha通道，这应该会产生一个透明的球体，上面有可见的云。不要困惑：当一切恢复正常时，云球体将被移回地球上方。

在实现环境、漫反射和镜面照明之前，我使用了以下片段着色器：

#version 420 core

in vec2 texCoord;

out vec4 FragColor;

uniform sampler2D texture0;
uniform sampler2D texture1;

void main()
{
    vec4 outputColor = mix(texture(texture0, texCoord), texture(texture1, texCoord), 0.2);
    if(outputColor.a < 0.1)
        discard;

    FragColor = outputColor;
}

这个着色器考虑了alpha通道，它确实按预期工作。重要的是，云和地球是独立的球体对象。旧着色器中的texture 1根本没有使用。所以唯一相关的纹理是texture 0。

所以“目标”应该是将alpha通道添加到新着色器（带有照明的着色器）中。

如果你觉得这个问题很愚蠢，我很抱歉。我是OpenGL新手，还在学习。提前谢谢！

Answer 1

我自己找到了解决办法。下面是修复着色器：

#version 420 core

in vec3 FragPos;
in vec3 Normal;
in vec2 texCoord;

out vec4 FragColor;

struct Material {
    sampler2D diffuse;
    sampler2D specular;
    float     shininess;
};
struct Light {
    vec3 position;
    vec3 ambient;
    vec3 diffuse;
    vec3 specular;
};

uniform Material material;
uniform Light light;
uniform vec3 viewPos;

void main()
{
    // Ambient
    vec4 ambient = vec4(light.ambient, 1.0) * texture(material.diffuse, texCoord);

    // Diffuse 
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(vec3(light.position - FragPos));
    float diff = max(dot(norm, lightDir), 0.0);
    vec4 diffuse = vec4(light.diffuse, 1.0) * diff * texture(material.diffuse, texCoord);

    // Specular
    vec3 viewDir = normalize(viewPos - FragPos);
    vec3 reflectDir = reflect(-lightDir, norm);
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess);
    vec4 specular = vec4(light.specular, 1.0) * spec * texture(material.specular, texCoord);

    vec4 result = ambient + diffuse + specular;   

    if(result.a < 0.1)
        discard;    
    
    FragColor = result;
}

如果你有更好的主意，我很乐意尝试一下：）

Answer 2

您必须混合依赖于云层的alpha通道的纹理。假设“texture 1”是云层：

vec4 groundColor = texture(texture0, texCoord);
vec4 cloudColor  = texture(texture1, texCoord);
vec4 outputColor = vec4(mix(grundColor.rgb, cloudColor.rgb, cloudColor.a), 1.0);

FragColor = outputColor;