Problem with a Color Shader

Tafauxpar

Member
Hey everyone,

I am developing a game with only two colors that change from level to level.
I'm using a shader to do so which works fine even though it is pretty simple.

However, on certain computers, the shader does not work and I have no idea why.
I was wondering if you could help me with it.

The shader (GLSL ES) is this:

--------------------------------------------------------------------------
varying vec2 v_vTexcoord;
varying vec4 v_vColour;

uniform vec3 rep1;
uniform vec3 rep2;

uniform vec3 new1;
uniform vec3 new2;

void main()
{
vec4 rgba = v_vColour * texture2D(gm_BaseTexture, v_vTexcoord);
vec3 rgb = rgba.rgb;

//Check if it needs to be replaced
if (rgb == rep1) {
rgb = new1;
}
if (rgb == rep2) {
rgb = new2;
}
gl_FragColor = vec4(rgb, rgba.a);
}
------------------------------------------------------------------------------

And the use is in a called script from a controller which reads:

-----------------------------------------------------------------------------
outlineColor = initiate_border_color(0);
boxColor = initiate_border_color(1);

shader_set(shader_color);

shader_set_uniform_f(shader_get_uniform(shader_color, "rep1"), 64.0/255.0,64.0/255.0,1.0)
shader_set_uniform_f(shader_get_uniform(shader_color, "new1"), colour_get_red(outlineColor)/255.0, colour_get_green(outlineColor)/255.0, colour_get_blue(outlineColor)/255.0)

shader_set_uniform_f(shader_get_uniform(shader_color, "rep2"), 128.0/255.0,128/255.0,1.0)
shader_set_uniform_f(shader_get_uniform(shader_color, "new2"), colour_get_red(boxColor)/255.0, colour_get_green(boxColor)/255.0, colour_get_blue(boxColor)/255.0)
--------------------------------------------------------------------------

So basically, it takes two colors (64,64,255 and 128,128,255) which are both tints of blue and transforms them into different colors so all my sprites are only these two colors.

If you could help me with my problem, I'll really appreciate it.

Thank you,
 

vdweller

Member
I can't test your code because I'm on my phone but this prob has to do with how floats are stored in shaders and rounding errors. Try to run the shader with replacing the tints of blue with, for example, pure red and pure green, and see if that works. If it works, then that is indeed the issue.

Edit:Also try adding 'precision float highp' on top of your shader and run it as it is, as certain devices have low/medium precision enabled by default, but that is true mostly for mobile devices and it's still a bit risky.

Edit2: Also also instead of checking for pure equality you can try to check if the difference between sampled color and blue tint value is within some tiny range for each color component.
 
Edit2: Also also instead of checking for pure equality you can try to check if the difference between sampled color and blue tint value is within some tiny range for each color component.
Yeah, there's a built in distance() function you can use in your shader. Check if the dist is less than a tolerance, and that should help.
 

Tafauxpar

Member
Thank you very much!

I did:
if(distance(rgb,rep1) < 0.1){
rgb = new1;
}

And it looks like it worked.

I even added "precision highp float;" at the beginning of the Vertex and Fragment parts of the shader just to be safe.

Anyway, I think it's good now hopefully.
Thank you again for the quick response and helpful advice.
 
Top