learn GLSL from zero
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean

Lesson 4 of 10 · Domain warping

Leopard

Rosettes in gold. The third color is luxury.

Here comes the third color. Two smoothsteps at different thresholds create three zones: background, mid-ring, dark center. Subtracting two smoothsteps = the ring band.

Ink rosettes on kraft paper.

LayeringSubtracting two smoothsteps at different thresholds creates a mid-tone ring.
TryChange vec3 spot (rosette center) to vec3(0.8, 0.1, 0.0) and rosettes become bloody eyes. Change vec3 gold to something cool like vec3(0.1, 0.4, 0.9) for a cobalt leopard.

The code

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