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

Wood

Dark rosewood. Grain that shines.

sin() turns a continuous field into repeating waves. Over a warped field, those waves bend like wood grain. The multiplier before sin() controls density.

Oak table, freshly varnished.

sin(f * N)N = grain density. Warp gives natural curvature.
TryRaise the 12.0 in sin(f * 12.0) to 25.0 for fine grain. Drop it to 5.0 and veins go thick, almost raw.

The code

void main(){
  vec2 p = gl_FragCoord.xy / R * 3.0;
  float warp = fb(p);
  float f = fb(p + warp * 0.6);
  float grain = sin(f * 12.0) * 0.5 + 0.5;
  float band = floor(grain * 5.0) / 5.0;
  float line = step(0.9, grain);
  float fine = n2(p * 15.0) * 0.04;
  vec3 light = vec3(0.55, 0.3, 0.15);
  vec3 mid = vec3(0.35, 0.18, 0.08);
  vec3 dark = vec3(0.1, 0.04, 0.01);
  vec3 col = mix(light, mid, band);
  col = mix(col, dark, line);
  col += fine;
  col += vec3(.2,.12,.06) * pow(grain, 5.) * 0.5;
  col *= 0.9 + 0.1 * grain;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.0);
}
close