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

Zoom

Reencuadra y baja. El detalle nunca se acaba.

El superpoder de un fractal es la autosimilitud: por más que te acerques, sigue habiendo detalle nuevo. Para entrar solo necesitamos dos cosas: recentrar a un punto jugoso y escalar uv por un zoom chico.

Aquí apuntamos al valle de los caballitos de mar, cerca de (-0.745, 0.113). Bajar zoom es como un microscopio: cada nivel revela espirales que no estaban antes.

c = uv * zoom + centercenter es a dónde apuntas; zoom es cuánto plano cabe. Más chico = más cerca = más detalle. La iteración no cambia ni una letra: el fractal ya contiene todo, solo decides qué pedacito miras.
PruebaBaja zoom de 0.6 a 0.15 y caes en picada al detalle. Cambia center a vec2(-0.16, 1.04) para otra región hirviendo de espirales.

El código

precision highp float;
void main(){
  vec2 uv=(gl_FragCoord.xy*2.0 - R)/R.y;
  float zoom=0.6;
  vec2 center=vec2(-0.745, 0.113);
  vec2 c=uv*zoom+center;
  vec2 z=vec2(0.0); float n=0.0; bool esc=false;
  const int IT=160;
  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.4;
  vec3 col=0.5+0.5*cos(0.3*band + vec3(0.0,2.4,4.4));
  col=esc ? col : vec3(0.02,0.0,0.04);
  gl_FragColor=vec4(col,1.0);
}
close