Change Color with Shader

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
NoAim91
Prole
Posts: 38
Joined: Mon Feb 20, 2017 10:28 am
Location: Germany

Change Color with Shader

Post by NoAim91 » Tue May 16, 2017 8:58 pm

Hello,

I like to change the color of my character with a shader. I try to modify the glow.glsl shader for löve

Original Code

Code: Select all

extern Image glowImage;
extern float glowTime;

vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords) {
    vec3 glowInfo = Texel(glowImage, texture_coords).rgb;

    if(glowInfo.r != glowInfo.g) {
        float glowStrength = glowTime + glowInfo.b;
        if(mod(glowStrength, 2.0) < 1.0) {
            glowInfo.b = mod(glowStrength, 1.0);
        } else {
            glowInfo.b = 1.0 - mod(glowStrength, 1.0);
        }

        return Texel(texture, texture_coords) * (glowInfo.g + glowInfo.b * (glowInfo.r - glowInfo.g));
    }
    
    return vec4(Texel(texture, texture_coords).rgb * glowInfo.r, 1.0);
}
My current Changings:

Code: Select all

extern Image glowImage;
extern float glowTime;
extern vec3 Color;

vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords) {
    vec3 glowInfo = Color;

    if(glowInfo.r != glowInfo.g) {
        float glowStrength = glowTime + glowInfo.b;
        if(mod(glowStrength, 2.0) < 1.0) {
            glowInfo.b = mod(glowStrength, 1.0);
        } else {
            glowInfo.b = 1.0 - mod(glowStrength, 1.0);
        }
        
        return Texel(glowImage, texture_coords) * (glowInfo.g + glowInfo.b * (glowInfo.r - glowInfo.g));
    }
    
    return vec4(Texel(texture, texture_coords).rgb * glowInfo.r, 1.0);
}

the effect of my "improvement" is, that my hero pulsates constantly instead of each color on its own... but how i change the color??

User avatar
raidho36
Party member
Posts: 2063
Joined: Mon Jun 17, 2013 12:00 pm

Re: Change Color with Shader

Post by raidho36 » Wed May 17, 2017 3:21 am

First of all that's a very poor shader to start with. All of those branches and redundant computations and superfluous data transfer, just ugh!

Code: Select all

extern Image glowImage;
extern float glowStrength;

vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords) {
	return mix ( Texel ( texture, texture_coords ) * Color, Texel ( glowImage, texture_coords ), glowStrength );
}
Compute your glowStrength on CPU, pretty sure all you need is a simple sine wave function to make it pulse.

What do you mean "change color"? You can do a normal color blend through setColor function, or you use a different glow texture. You can multiply the glow texel by blending color too but pretty sure that won't look very good.

NoAim91
Prole
Posts: 38
Joined: Mon Feb 20, 2017 10:28 am
Location: Germany

Re: Change Color with Shader

Post by NoAim91 » Wed May 17, 2017 6:10 am

The colorinput from the image is green. If the health of the player is near death is should be red. That is what i like to do with a color change. love.graphics.setColor doesn´t effect the glowmap, I don´t know why.

Image
Image

User avatar
raidho36
Party member
Posts: 2063
Joined: Mon Jun 17, 2013 12:00 pm

Re: Change Color with Shader

Post by raidho36 » Wed May 17, 2017 6:16 am

Because you need to multiply glow texel color by graphics blend color, the same way as with sprite texel. Otherwise it's just what was in the texture. See shader code above.

That said, you don't need shader for this, you can simply set alpha of blend color with blinking formula and it will do the same thing.

NoAim91
Prole
Posts: 38
Joined: Mon Feb 20, 2017 10:28 am
Location: Germany

Re: Change Color with Shader

Post by NoAim91 » Wed May 17, 2017 6:01 pm

I have no clue what I am doing xD

error: swizzle mask element not present in operand "rgb"
warning: unrecognized profile specifier "mix"

Post Reply

Who is online

Users browsing this forum: No registered users and 63 guests