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

Marble

Classic Carrara. White with grey veins.

sin() of a coordinate + warp = veins. Linear coordinate gives direction, warp undulates them. Three colors: cream base, gray in wide veins, gold in finest lines.

Sediment pressed for a thousand years.

sin(p.x + warp)Linear coordinate = direction. Warp = undulation. Together = marble.
TryChange p.x to p.y for horizontal veins, or p.x + p.y for diagonal.

The code

void main(){
  vec2 p = gl_FragCoord.xy / R * 4.0;
  float w = fb(p * 0.7);
  float w2 = fb(p * 1.3 + 5.0);
  float v1 = sin(p.x * 3.0 + w * 4.0 + p.y * 0.4);
  float vein1 = exp(-abs(v1) * 6.0);
  float v2 = sin(p.x * 5.5 + w2 * 3.0 - p.y * 0.6);
  float vein2 = exp(-abs(v2) * 10.0);
  float v3 = sin(p.y * 9.0 + w * 2.5 + p.x * 1.5);
  float vein3 = exp(-abs(v3) * 18.0);
  float surf = n2(p * 25.0) * 0.012;
  vec3 white = vec3(0.97, 0.965, 0.96);
  vec3 grey = vec3(0.45, 0.43, 0.48);
  vec3 col = white + surf;
  col = mix(col, grey, vein1 * 0.55);
  col = mix(col, grey, vein2 * 0.3);
  col = mix(col, grey * 0.7, vein3 * 0.2);
  gl_FragColor = vec4(col, 1.0);
}
close