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

Leopard

Rosetas en oro. El tercer color es lujo.

Aquí entra el tercer color. Dos smoothsteps a diferentes thresholds crean tres zonas: fondo, anillo intermedio, y centro oscuro. La resta de dos smoothsteps = la franja del anillo.

Rosetas de tinta en papel kraft.

LayeringRestar dos smoothsteps a diferentes umbrales crea un anillo de color intermedio.
PruebaCambia el vec3 spot (centro de la roseta) a vec3(0.8, 0.1, 0.0) y las rosetas se vuelven ojos sangrientos. Cambia el vec3 gold a algo cool como vec3(0.1, 0.4, 0.9) para un leopardo de cobalto.

El código

void main(){
  vec2 p = gl_FragCoord.xy / R * 3.0;
  float warp = fb(p * 0.8);
  float f = fb(p + warp * 1.2);
  float ring = step(0.46, f) - step(0.58, f);
  float core = step(0.58, f);
  vec3 gold = vec3(0.9, 0.7, 0.35);
  vec3 ring_col = vec3(0.2, 0.1, 0.03);
  vec3 spot = vec3(0.04, 0.02, 0.01);
  vec3 col = gold;
  col = mix(col, ring_col, ring);
  col = mix(col, spot, core);
  col += vec3(.12,.08,.02) * pow(1.0-f, 3.) * 0.5;
  gl_FragColor = vec4(col, 1.0);
}
close