Turn a texture to a vec3 color or create a gradient in shader languge with 10 colors

[lv2lrn4lf]

I have a webgl scene that i would like to apply a rainbow color effect, i can get the effect i want with one color and i can create a gradient colors of two color in shader language.

uniform vec2 u_resolution;

void main() {

 vec2 st = gl_FragCoord.xy/u_resolution.xy;

 vec3 color1 = vec3(1.9,0.55,0);
 vec3 color2 = vec3(0.226,0.000,0.615);

 float mixValue = distance(st,vec2(0,1));
 vec3 color = mix(color1,color2,mixValue);

 gl_FragColor = vec4(color,mixValue);
}

from

https://stackoverflow.com/questions/47376499/creating-a-gradient-color-in-fragment-shader

is there a function in fragment shader that allow you to mix more than two colors with a smooth gradient linear?

i would love to just use a image but i can't seem to get that to work and want to focus on what i can get to work.

[greggman]

You really should figure out how to use a texture like the answer you linked to rather than try to figure out a poor substitute. As the answer points out Canvas 2D and CSS both use a texture for gradients because it's the most flexible and performant solution.

Otherwise if you want a non-flexible solution there are examples on shadertoy

https://www.shadertoy.com/view/4ttfRN

[lv2lrn4lf]

okay, thanks for the link with the shader, i also came across these two sources:

https://thebookofshaders.com/06/

https://mitchmcclellan.com/four-color-gradient/

I don't know if this will allow me to do what i want, i tried it with gradients and the result was that certain areas was drawn in color when trying the get the effect that a single color would give. But you did answer my question, so thank you.