在 webgl 中合成颜色和纹理

Question

如何在webgl中进行颜色合成？我不确定到底要搜索什么，也许我漏掉了一个词。我希望能够绘制颜色或纹理作为叠加层。例如，我在这里尝试添加不透明度为 0.2 的黑色叠加层，但我没有直接使用颜色，而是减去了不透明度。如果我想使用不同的颜色作为叠加层，我将不得不使用不同的解决方法。如何在不使用任何解决方法的情况下 overlay/composite 不同的颜色或纹理？ 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。没有人回答。

在 webgl 中合成颜色和纹理

Compositing colors and textures in webgl

webgl