在 webgl 中合成颜色和纹理

Question

如何在 webgl 中进行颜色合成？我不确定要搜索什么，也许我错过了一个词。我希望能够绘制颜色或纹理作为叠加层。例如，在这里我尝试添加不透明度为 0.2 的黑色叠加层，但我没有直接使用颜色，而是减去不透明度。如果我想使用不同的颜色作为覆盖，我将不得不使用不同的解决方法。如何在不使用任何解决方法的情况下叠加/合成不同的颜色或纹理？ Shadertoy link

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
    vec2 uv = fragCoord/iResolution.xy;

    vec4 col = texture(iChannel0, uv);
    vec4 overlay = vec4(0., 0., 0., 0.2);

    col -= overlay.a;
    
    fragColor = col;
}

Answer 1

如果您想将纹理颜色变暗为黑色，您可以使用简单的乘法：

vec4 col = texture(iChannel0, uv);
col *= 0.8; // 20% darker

或者如果你想使用一种颜色，你也可以将它们相乘

vec4 col = texture(iChannel0, uv);
vec4 tint = vec4(1.0, 0.5, 0.0, 1.0); // Orange
col *= tint;

有很多方法可以将颜色混合在一起。在颜色之间创建平滑渐变的另一种方法是by using the mix() function。没有一个答案。