如何使着色器淡出到一种颜色？ [英] How to make a shader fade to a color?

问题描述

这是我使用的当前着色器。它通过慢慢减少不透明度来淡化对象。我想淡紫色。如何实现？

This is the current shader I am using. It fades the object by slowly reducing the opacity. I want to fade to purple. How can this be done?

shader.frag：

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：

shader.vert:

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

在主函数中应用shader：

application of shader in main function:

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

推荐答案

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 。

The RGB value for purple is vec3( 1.0, 0.0, 1.0 ) (maximum red, minimal green and maximum blue). You have to interpolate between your frgment color and the color value of purpel, similar as you do it with opacity. Use mix for this. mix(x, y, a) performs a linear interpolation between x and y using a to weight between them. The return value is computed as 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 );
}

请注意，您必须设置uniform purpleFac 类似于你用 opacity 做的。 purpleFac 在范围[0.0，1.0]内。如果 purpleFac 为 1.0 ，则您的片段为紫色，如果 0.0 您的片段colol是纹理的颜色。

Note you have to set uniform purpleFac similar as you do it with opacity. purpleFac shoud be in range [0.0, 1.0]. If purpleFac is 1.0 your fragment is colord purple and if it is 0.0 your fragment colol is the color of the texture only.

这篇关于如何使着色器淡出到一种颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！