OpenGL 中一个对象上的两个图像

Question

我有两个纹理。一个是jpg，另一个是png。我已经渲染了一个立方体，我想在立方体的每个面上使用 jpg 图像作为背景，然后在这个背景上使用 png。我试过 mix() 但我可以通过 png 看到背景，但我不想要那样。有什么功能可以帮我做这个吗？

片段着色器：

#version 330 core

struct Light {
    vec3 direction;
    vec3 ambient;
    vec3 diffuse;
    vec3 specular;
};

struct Material {
    float shininess;
};

out vec4 FragColor;

in vec3 FragPos;
in vec3 Normal;
in vec2 TexCoords;

uniform vec3 viewPos;
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform Light light;
uniform Material material;

void main() {
    
    // ambient
    vec3 ambient = light.ambient * mix(texture(texture1, TexCoords), texture(texture2, TexCoords), 0.0).rgb;

    // diffuse 
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(-light.direction);  
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = light.diffuse * diff * mix(texture(texture1, TexCoords), texture(texture2, TexCoords), 0.0).rgb;  

    // 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 * mix(texture(texture1, TexCoords), texture(texture2, TexCoords), 0.0).rgb;  
        
    vec3 result = ambient + diffuse + specular;
    FragColor = vec4(result, 1.0);

}

texture1 是 png，texture2 是 jpg。

Answer 1

您需要根据 PNG 纹理的 Alpha 通道混合颜色。假设 texture1 是 JPG，texture2 是 PNG，mix texture1 和 texture2 取决于 texture2 的 alpha 通道：

vec4 color_jpg = texture(texture1, TexCoords);
vec4 color_png = texture(texture2, TexCoords);
vec3 color = mix(color_jpg.rgb, color_png.rgb, color_png.a);

片段着色器：

void main()
{
    vec4 color_jpg = texture(texture1, TexCoords);
    vec4 color_png = texture(texture2, TexCoords);
    vec3 color = mix(color_jpg.rgb, color_png.rgb, color_png.a);

    // ambient
    vec3 ambient = light.ambient * color;

    // diffuse 
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(-light.direction);  
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = light.diffuse * diff * color;  

    // 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 * color;  
        
    vec3 result = ambient + diffuse + specular;
    FragColor = vec4(result, 1.0);
}

OpenGL 中一个对象上的两个图像

Two Images on one Object in OpenGL

c++

opengl

textures

glsl