Question

我已经看过很多关于晕影着色器的教程，就像these一样，但是他们都没有说明如何更改晕影的颜色，他们只讨论将棕褐色或灰色着色器应用于整个合成图像。 / p>

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

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函数的行中，它只是乘以纹理颜色

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

首先在主函数之前声明你想要的颜色。

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

1 个答案: