如何使着色器淡出颜色？答案

【问题标题】：How to make a shader fade to a color?如何使着色器淡出颜色？
【发布时间】：2016-05-14 23:42:23
【问题描述】：

这是我正在使用的当前着色器。它通过缓慢降低不透明度来淡化对象。我想褪成紫色。如何做到这一点？

shader.frag：

uniform sampler2D texture;
uniform float opacity;

void main()
{
    vec4 pixel = texture2D(texture, gl_TexCoord[0].xy);
    gl_FragColor = pixel * vec4(1.0, 1.0, 1.0, opacity);
}

shader.vert：

void main()
{
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
    gl_TexCoord[0] = gl_TextureMatrix[0] * gl_MultiTexCoord0;
    gl_FrontColor = gl_Color;
}

shader在main函数中的应用：

sf::Shader shader;
if (!shader.loadFromFile("shader.vert", "shader.frag"))
    return EXIT_FAILURE;

float opacity = 1.0; //transparency of shader
shader.setParameter("texture", sf::Shader::CurrentTexture); //shader.vert
shader.setParameter("opacity", opacity);                    //shader.frag

/////////////////////////

//Delete Text Display
    counter1 = 0;
    for (iter8 = textDisplayArray.begin(); iter8 != textDisplayArray.end(); iter8++)
    {
        if (textDisplayArray[counter1].destroy == true)
        {
            //shader
            opacity -= 0.1;         
            if (opacity <= 0)
            {
                textDisplayArray.erase(iter8);
                opacity = 1;
            }
            shader.setParameter("opacity", opacity);
        }

【问题讨论】：

感谢这么快的响应，我插入了代码，它完成了我想要它做的一半：它确实淡化为紫色，但它显示为一个遮挡文本的矩形。有没有办法让文本和/或精灵淡化为精灵/文本的紫色轮廓？

标签： c++ shader sfml

【解决方案1】：

紫色的 RGB 值为vec3( 1.0, 0.0, 1.0 )（最大红色、最小绿色和最大蓝色）。您必须在片段颜色和 purpel 的颜色值之间进行插值，就像使用 opacity 一样。为此使用mix。 mix(x, y, a) 在x 和y 之间执行线性插值，使用a 在它们之间加权。返回值计算为x×(1−a)+y×ax×(1−a)+y×a。

uniform sampler2D texture;
uniform float opacity;
uniform float purpleFac;

void main()
{
    vec4 pixel = texture2D(texture, gl_TexCoord[0].xy);
    vec3 mixedCol = mix( vec3( 1.0, 0.0, 1.0 ), pixel.rgb, purpleFac );
    gl_FragColor = vec4( mixedCol , opacity );
}

请注意，您必须设置统一的purpleFac，就像使用opacity 一样。 purpleFac 应该在 [0.0, 1.0] 范围内。如果purpleFac 是1.0 你的片段是紫色的，如果是0.0 你的片段颜色只是纹理的颜色。

【讨论】：