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 6 de 10 · Domain warping

Tie-dye

Tie-dye de medianoche. No es Woodstock.

Tie-dye es radial: length() crea anillos. Warpear antes del length() los distorsiona en formas fluidas. sin() sobre la distancia crea las bandas de color.

La playera que nunca lavaste.

length(p)Distancia al origen. Con warp = radial irregular.
PruebaCambia blood a vec3(1., 0., .9) (magenta), gold a vec3(0., 1., .7) (cian) y electric a vec3(1., .9, 0.) (amarillo). Te queda rave.

El código

void main(){
  vec2 p = gl_FragCoord.xy / R * 3.0 - 1.5;
  float warp = fb(p * 2.0);
  vec2 wp = p + warp * 0.4;
  float d = length(wp);
  float rings = sin(d * 10.0) * 0.5 + 0.5;
  float band = floor(rings * 4.0) / 4.0;
  vec3 midnight = vec3(0.03, 0.02, 0.1);
  vec3 blood = vec3(0.5, 0.05, 0.1);
  vec3 gold = vec3(0.8, 0.65, 0.15);
  vec3 electric = vec3(0.1, 0.3, 0.9);
  vec3 col = midnight;
  col = mix(col, blood, step(0.25, band));
  col = mix(col, gold, step(0.5, band));
  col = mix(col, electric, step(0.75, band));
  col *= 0.85 + 0.15 * rings;
  col += vec3(.1,.06,.04) * pow(rings, 5.) * 0.3;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.0);
}
close