title: How to create multiple stop gradient fragment shader?
body: <p>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.</p>
  
  <p>I've achieved this by using <code>if</code>s the fragment shader, like this:</p>
  
  <pre><code>float y = gl_FragCoord.y;
  float step1 = resolution.y * 0.20;
  float step2 = resolution.y * 0.50;
  
  if (y &lt; step1) {
      color = white;
  } else if (y &lt; 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);
  }
  </code></pre>
  
  <p>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 <code>if</code>s? Is it actually worth it (this is highly subjective, I know, but as rule of thumb)?</p>
  
  <p>To illustrate my problem, full source (still short though) in this GLSL Sandbox link: <a href="http://glsl.heroku.com/e#8035.0" rel="noreferrer">http://glsl.heroku.com/e#8035.0</a></p>