Como criar vários shader de fragmento de gradiente de parada?

Eu estou tentando criar um sombreador de fragmento OpenGL ES 2.0 que gera vários gradiente de parada ao longo de um eixo. Ele deve interpolar entre várias cores em pontos definidos em porcentagens.

Eu consegui isso usandoifs o shader de fragmento, assim:

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

Dizem que a ramificação no shader de fragmento pode matar o desempenho. Existe algum truque inteligente que pode ser usado para interpolar entre muitos valores sem usarifs? Vale a pena (isso é altamente subjetivo, eu sei, mas como regra prática)?

Para ilustrar o meu problema, fonte completa (ainda que curta) neste link GLSL Sandbox:http://glsl.heroku.com/e#8035.0

questionAnswers(1)

yourAnswerToTheQuestion