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

Vívido

Todo junto: paleta, glow de orilla, vetas y viñeta. Tu pieza.

El finale apila todo lo que aprendiste en una sola pasada: conteo suave para el color base, un glow de orilla en los frags que tardaron en escapar, las vetas del orbit trap por dentro, una respiración lenta con T y una viñeta que sienta la pieza en el marco.

Ninguna técnica nueva. Solo todas juntas, calibradas. Eso es composición: capas que se suman sin pelearse.

Capasband = color del conteo suave. edge = brillo cálido donde la orilla es más profunda. vein = el orbit trap iluminando el interior. vig = oscurece las esquinas. Sumar luces (no multiplicar) mantiene los colores limpios.
PruebaSube band=sn * 0.5 a 1.0 para más anillos de color, o baja zoom a 0.7 para entrar al detalle. Ajusta la viñeta cambiando el 0.16 de dot(uv,uv)*0.16.

El código

precision highp float;
void main(){
  vec2 uv=(gl_FragCoord.xy*2.0 - R)/R.y;
  float zoom=1.3 + sin(T*0.22)*0.055;
  vec2 orbit=vec2(cos(T*0.11),sin(T*0.13))*0.018;
  vec2 c=uv*zoom+vec2(-0.6,0.0)+orbit;
  vec2 z=vec2(0.0);
  float n=0.0; bool esc=false; float trap=1000.0;
  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;
    trap=min(trap, abs(length(z)-1.0));
    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,0.6,1.1) + T*0.15);
  float edge=esc ? smoothstep(0.2, 0.6, sn/float(IT)) : 0.0;
  col+=vec3(1.0,0.85,0.6)*edge*0.5;
  float vein=pow(clamp(1.0-trap*1.2,0.0,1.0),3.0);
  col+=vec3(0.6,0.85,1.0)*vein*0.6;
  col=esc ? col : (vec3(0.02,0.0,0.05)+vec3(0.6,0.85,1.0)*vein*0.6);
  float vig=1.0-dot(uv,uv)*0.16;
  col*=vig;
  gl_FragColor=vec4(col,1.0);
}
close