Color interpolation in Fragment Shader GLSL?
-
02-01-2020 - |
Question
I need to map a scalar value to color that ranges 0 to 1. It will go from GREEN to RED (from 0 to 1) Linear Interpolation using the texture co-ordinates (also ranges from 0 to 1)
I'm new to OpenGL and GLSL, so far I have figured out that I need to write color value in
gl_FragColor
which is a vector of dimension 4. I'm not sure how I can calculate the R, G and B channels for gl_FragColor just by one scalar value that ranges for 0 to 1.0 (It will from GREEN to RED and at 0.5 it will be WHITE)
Solution
#version 120
...
float remap( float minval, float maxval, float curval )
{
return ( curval - minval ) / ( maxval - minval );
}
...
const vec4 GREEN = vec4( 0.0, 1.0, 0.0, 1.0 );
const vec4 WHITE = vec4( 1.0, 1.0, 1.0, 1.0 );
const vec4 RED = vec4( 1.0, 0.0, 0.0, 1.0 );
float u = <whatever, grabbed from a uniform?>;
u = clamp( u, 0.0, 1.0 );
if( u < 0.5 )
gl_FragColor = mix( GREEN, WHITE, remap( 0.0, 0.5, u ) );
else
gl_FragColor = mix( WHITE, RED, remap( 0.5, 1.0, u ) );
Or you could sample a 3-pixel 1D texture.
OTHER TIPS
If your value in the range 0 to 1 is named val
:
if (val < 0.5)
{
gl_FragColor = vec4(2.0 * val, 1.0, 2.0 * val, 1.0);
}
else
{
gl_FragColor = vec4(1.0, 2.0 * (1.0 - val), 2.0 * (1.0 - val), 1.0);
}
Or if you want to avoid branch statements:
gl_FragColor = vec4(min(2.0 * val, 1.0),
min(2.0 * (1.0 - val), 1.0),
2.0 * min(val, 1.0 - val),
1.0);
Not sure if this would actually be faster. As pointed out by @Jessy, this can be simplified if the color buffer has a normalized format, because the output colors are automatically clamped to a [0, 1] range in that case, making a couple of the min
calls unnecessary:
gl_FragColor = vec4(2.0 * val,
2.0 * (1.0 - val),
2.0 * min(val, 1.0 - val),
1.0);
You don't need to worry about manual clamping, because gl_FragColor is clamped between 0-1.
float red = 2. * texel;
float green = 2. - red;
gl_FragColor = vec4(red, green, min(red, green), 1.);