彩色晕影着色器（外部）- LIBGDX

Question

我看过很多关于晕影着色器的教程，就像 these 但其中 none 说了如何更改晕影的颜色，他们只谈论将棕褐色或灰色着色器应用于整个合成图像。

例如，上面的视频给出了晕影着色器的以下代码。如何更改小插图的颜色？所以它不是黑色而是红色或橙色，并且小插图内部的图像部分保持不变。

const float outerRadius = .65, innerRadius = .4, intensity = .6;

void main(){
    vec4 color = texture2D(u_sampler2D, v_texCoord0) * v_color;
    vec2 relativePosition = gl_FragCoord.xy / u_resolution - .5;
    relativePosition.y *= u_resolution.x / u_resolution.y;
    float len = length(relativePosition);
    float vignette = smoothstep(outerRadius, innerRadius, len);
    color.rgb = mix(color.rgb, color.rgb * vignette, intensity);

    gl_FragColor = color;
}

Answer 1

在您发布的着色器中，vignette 值看起来基本上是一个混合在图像上的暗度值，因此根据 mix 函数，它只是乘以纹理颜色。

因此，要修改它以使用任意颜色，您需要将其更改为不透明度值（反转）。现在它是不透明度，您可以将它乘以强度以简化接下来的计算。最后，您可以混合到您选择的晕影颜色。

所以在main函数之前先声明你想要的颜色

const vec3 vignetteColor = vec3(1.0, 0.0, 0.0); //red
//this could be a uniform if you want to dynamically change it.

然后你的倒数第二行变成下面这样。

float vignetteOpacity = smoothstep(innerRadius, outerRadius, len) * intensity; //note inner and outer swapped to switch darkness to opacity
color.rgb = mix(color.rgb, vignetteColor, vignetteOpacity);

顺便说一句，“intensity = .6f”会导致着色器无法在移动设备上编译，因此删除f。（除非您以 OpenGL ES 3.0 为目标，但 libgdx 尚未完全支持它。）

彩色晕影着色器（外部）- LIBGDX

Colored Vignette Shader (the outer part) - LIBGDX

shader

opengl-es

vertex-shader

opengl-es-2.0

libgdx