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 3 of 10 · Domain warping

Cow

Holstein in black and white. Graphic, brutal.

The cow is the giraffe with two changes: lower frequency (bigger patches) and higher threshold (fewer patches, more white).

Pangea in black and white.

FrequencyThe multiplier on p controls size. Lower = big patches. Higher = fine texture.
TryLower 2.5 to 1.5 for huge patches, raise to 5.0 for dalmatian. Change 0.8 (warp) to 0.2 for cleaner spots, or 2.0 for chaotic warp.

The code

void main(){
  vec2 p = gl_FragCoord.xy / R * 2.5;
  float warp = fb(p);
  float f = fb(p + warp * 0.8);
  float mask = smoothstep(0.54, 0.57, f);
  float skin = n2(p * 25.0) * 0.05;
  float pore = n2(p * 50.0) * 0.02;
  vec3 white = vec3(0.98, 0.97, 0.95);
  vec3 black = vec3(0.015, 0.015, 0.02);
  vec3 col = mix(white, black, mask);
  col += (skin + pore) * (1.0 - mask);
  float edge = smoothstep(0.52,0.54,f) * (1.0-smoothstep(0.57,0.59,f));
  col -= vec3(0.12) * edge;
  col *= 0.88 + 0.12 * (1.0 - mask);
  gl_FragColor = vec4(col, 1.0);
}
close