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

Camo

Camo de pasarela. Ni militar ni hippie.

Mismo warp, diferente corte. Apilas tres step() a thresholds que suben, y el campo se rebana en cuatro zonas. Cada zona pinta un color distinto. Así nace el camuflaje.

Invisible entre los arbustos con una cerveza fría.

step() apiladoEl primer step(0.25, f) separa fondo de wine. El segundo step(0.45, f) mete charcoal arriba del 0.45. El tercero step(0.65, f) mete plum arriba del 0.65. Cuatro zonas, tres cortes.
PruebaAcerca los tres thresholds (0.25, 0.45, 0.65), prueba 0.4, 0.5, 0.6 y las zonas se aprietan. Separa los thresholds (0.1, 0.45, 0.85) y cada color ocupa su propio reino.

El código

void main(){
  vec2 p = gl_FragCoord.xy / R * 3.5;
  float warp = fb(p + 1.5);
  float f = fb(p + warp * 1.2);
  vec3 deep = vec3(0.03, 0.01, 0.05);
  vec3 wine = vec3(0.4, 0.08, 0.15);
  vec3 charcoal = vec3(0.15, 0.12, 0.18);
  vec3 plum = vec3(0.3, 0.12, 0.28);
  vec3 col = deep;
  col = mix(col, wine, step(0.25, f));
  col = mix(col, charcoal, step(0.45, f));
  col = mix(col, plum, step(0.65, f));
  col *= 0.8 + 0.2 * f;
  col += vec3(.1,.05,.08) * pow(f, 5.) * 0.3;
  gl_FragColor = vec4(col, 1.0);
}
close