How to create multiple stop gradient fragment shader?

Question

I'm trying to create an OpenGL ES 2.0 fragment shader that outputs multiple stop gradient along one axis. It should interpolate between multiple colors at points defined in percents.

I've achieved this by using ifs the fragment shader, like this:

float y = gl_FragCoord.y;
float step1 = resolution.y * 0.20;
float step2 = resolution.y * 0.50;

if (y < step1) {
    color = white;
} else if (y < step2) {
    float x = smoothstep(step1, step2, y);
    color = mix(white, red, x);
} else {
    float x = smoothstep(step2, resolution.y, y);
    color = mix(red, green, x);
}

They say that branching in fragment shader can kill performance. Is there some clever trickery that can be used to interpolate between many values without using ifs? Is it actually worth it (this is highly subjective, I know, but as rule of thumb)?

To illustrate my problem, full source (still short though) in this GLSL Sandbox link: http://glsl.heroku.com/e#8035.0

Answer 1

If you want to eliminate branches you can do following (taken from Heroku);

color = mix(white, red, smoothstep(step1, step2, y));
color = mix(color, blue, smoothstep(step2, step3, y));
color = mix(color, green, smoothstep(step3, resolution.y, y));

But I'm not sure at all whether this is any faster than if/elses or not.