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 4 de 10 · Fractales en GLSL

Suavizado

Los escalones se derriten en un gradiente continuo.

El conteo de la lección anterior es entero: 7 pasos, 8 pasos, 9. Por eso se ven anillos escalonados. Pero el escape guarda más información: por cuánto rebasó el umbral en el último paso. Con eso interpolamos entre escalones.

La fórmula mágica: n - log2(log2(|z|²)). Suena pesada, pero solo convierte el salto discreto en un número con decimales. Los anillos se vuelven seda.

sn = n - log2(log2(dot(z,z))) + 4.0El smooth iteration count. n es el paso entero del escape; el doble log2 mide qué tan lejos voló z al cruzar, y rellena el hueco entre un entero y el siguiente. El +4.0 solo recoloca el rango.
PruebaSube el segundo número de pow(g, 0.4) a 0.8 para oscurecer los medios, o bájalo a 0.2 para aplanar el brillo. Si subes dot(z,z)>256.0 aún más, el suavizado mejora.

El código

precision highp float;
void main(){
  vec2 uv=(gl_FragCoord.xy*2.0 - R)/R.y;
  float zoom=1.5;
  vec2 c=uv*zoom+vec2(-0.6,0.0);
  vec2 z=vec2(0.0); float n=0.0; bool esc=false;
  const int IT=140;
  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 g=sn/float(IT);
  float shade=pow(g, 0.4);
  vec3 col=esc ? mix(vec3(0.03,0.04,0.09), vec3(0.95,0.98,1.0), shade) : vec3(0.01,0.01,0.03);
  gl_FragColor=vec4(col,1.0);
}
close