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

【问题标题】：Colored Vignette Shader (the outer part) - LIBGDX彩色晕影着色器（外部） - LIBGDX
【发布时间】：2015-05-08 11:29:20
【问题描述】：

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

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

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

【问题讨论】：

标签： opengl-es libgdx opengl-es-2.0 shader vertex-shader

【解决方案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 尚不完全支持。）

【讨论】：