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

Escape

¿Te quedas o te vas al infinito? Cuenta los pasos.

Aquí nace el conjunto de Mandelbrot. Para cada frag iteramos z = z² + c y vigilamos una cosa: si z se aleja más de un radio 2, ya nunca vuelve, escapó. Cortamos el bucle y guardamos en qué paso escapó.

El conjunto (los que nunca escapan) queda en negro. Los demás se pintan según qué tan rápido huyeron: huida lenta cerca de la orilla = brillo; huida instantánea lejos = casi negro. Blanco y negro puro, por número de iteraciones.

if(dot(z,z) > 4.0) break;dot(z,z) es |z|², más barato que sacar raíz. 4.0 es el radio 2 al cuadrado, el umbral de escape clásico de Mandelbrot. Cruzarlo es la sentencia: este frag se va al infinito.
PruebaCambia dot(z,z)>4.0 a 16.0 y el halo se engorda. Mueve zoom a 0.8 para entrar al detalle de la orilla.

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=120;
  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)>4.0){ n=float(i); esc=true; break; }
  }
  float g=n/float(IT);
  float shade=pow(g,0.45);
  vec3 col=esc ? vec3(shade) : vec3(0.0);
  gl_FragColor=vec4(col,1.0);
}
close