GLSL: How to include alpha blending into a fragment shader with lighting

Question

I managed to create a nicely lighted scene with OpenGL (OpenTK, because I'm using C# and Winforms) using the following fragment shader:

#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);
}

Unfortunately this solution doesn't seem to consider the alpha channel of the textures. This results in a scene like this:

The plan is, that the left sphere is the cloud layer. The texture contains an alpha channel, which should result in a transparent sphere with visible clouds. Don't be confused: the cloud sphere will be moved back above the earth when everything works again.

Before I implemented the ambient, diffuse and specular lighting, I used the following fragment shader:

#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;
}

This shader considers the alpha channel and it did work as intended. Important to say is, that clouds and earth are separate sphere objects. texture1 in the old shader is not used at all. So the only relevant texture is texture0.

So the "goal" should be to add the alpha channel into the new shader (the one with the lighting).

Sorry if this question seems stupid to you. I'm new to OpenGL and still learning. Thanks in advance!

Rabbid76 Rabbid76 · Accepted Answer · 2020-11-09T16:41:46

You have to mix the textures dependent on the alpha channel of the cloud layer. Suppose "texture1" is the cloud layer:

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

FragColor = outputColor;

GLSL: How to include alpha blending into a fragment shader with lighting

2 Answers