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 6 of 10 · Noise in GLSL

Terrain

Noise as data. step() as filter.

Noise is not just color, it is information. Here we use it as terrain elevation. With step() you cut the terrain into levels, like a topographic map.

Topographic map of a planet that doesn't exist.

step() as levelEach step() defines a height level. Below the threshold = one color. Above = another. Multiple steps = multiple levels.
TryChange 4. in floor(v * 4.0) to 8., twice the levels. Change 0.75 to 0.5 and the pink peaks expand. Add another step with a third color for a level of your own.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float v = n2(p * 3.0) * 0.5 + n2(p * 6.0 + 2.0) * 0.3 + n2(p * 12.0) * 0.2;
  float contour = abs(fract(v * 10.0) - 0.5);
  contour = 1.0 - smoothstep(0.0, 0.04, contour);
  vec2 gridLine = abs(fract(p * 8.0) - 0.5);
  float grid = 1.0 - smoothstep(0.0, 0.03, min(gridLine.x, gridLine.y));
  float zone = floor(v * 4.0) / 4.0;
  vec3 col = vec3(0.01, 0.03 + zone * 0.06, 0.02 + zone * 0.04);
  col += vec3(0.0, 0.9, 0.7) * contour * 0.5;
  col += vec3(0.0, 0.3, 0.25) * grid * 0.2;
  col += vec3(0.95, 0.0, 0.5) * step(0.75, v) * 0.3;
  col += vec3(0.01, 0.01, 0.02);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close