learn GLSL from zero
ToolsCrea con shadersShader MakerCrea shaders gratis en líneaToolkitObras de shaders listas para tu webSketcher LabPinta el hero de tu landing con shaders3D StudioEl editor Three.js en tu navegador
GamesJuega con shadersOnomatoShaderEscribe una palabra y explótalaThe WatcherUn ojo que te sigueAetherVidrio líquido con un ojo adentroBloomcoreUna palabra hace crecer un jardín de luzPyrokineAvienta fuego a la paredVoltaicLa pirámide lanza rayosSurfSurfea un océano de shader

Lección 5 de 10 · Fractales en GLSL

Paleta

El conteo suave se vuelve color. Aquí enciende.

Tienes un número continuo por frag: el conteo suave. Lo único que falta para que esto sea tier S es mapearlo a una paleta. Usamos el truco coseno de IQ: tres cosenos desfasados que barren el espectro entero sin tablas ni texturas.

El mismo conteo de la L04, vestido de fiesta. Cambiar la densidad de bandas reparte más o menos color por la orilla.

0.5 + 0.5*cos(0.35*band + vec3(0.0,2.1,4.2))Tres canales, tres fases (0.0, 2.1, 4.2). Como cada coseno arranca en otro punto, donde el rojo sube el verde baja: nace un arcoíris suave. band es el conteo suave escalado; mueve la fase y mueve el color.
PruebaSube band=sn * 0.5 a 1.2 para anillos de color más apretados, o a 0.2 para gradientes anchos. Cambia las fases 2.1 y 4.2 y reinventas la paleta.

El código

precision highp float;
void main(){
  vec2 uv=(gl_FragCoord.xy*2.0 - R)/R.y;
  float zoom=1.4;
  vec2 c=uv*zoom+vec2(-0.6,0.0);
  vec2 z=vec2(0.0); float n=0.0; bool esc=false;
  const int IT=150;
  for(int i=0;i<IT;i++){
    z=vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y)+c;
    if(dot(z,z)>256.0){ n=float(i); esc=true; break; }
  }
  float sn=esc ? (n - log2(log2(dot(z,z))) + 4.0) : 0.0;
  float band=sn * 0.5;
  vec3 col=0.5+0.5*cos(0.35*band + vec3(0.0,2.1,4.2));
  col=esc ? col : vec3(0.02,0.01,0.04);
  gl_FragColor=vec4(col,1.0);
}
close