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

FBM

The core function. One line, all the texture.

What you just built by hand is already packed in fb(), the same function you used in Forces as a black box. Now you know exactly what is inside: stacked layers of noise. One function, one line, texture with detail at every scale.

One line. All the texture.

fb(p)FBM, 4 octaves of noise stacked and rotated. The black box, opened.
TryChange p * 3. to p * 8., finer. To p * 1., huge.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float v = fb(p * 3.0);
  float contour = 1.0-smoothstep(0.0,0.03, abs(fract(v*8.)-0.5));
  float zone = floor(v * 5.0) / 5.0;
  float scan = step(0.5,sin(gl_FragCoord.y*1.5)*.5+.5)*.06;
  vec3 col = vec3(0.01, 0.02, 0.03);
  col += vec3(0.0, 0.35+zone*0.4, 0.25+zone*0.3) * v;
  col += vec3(0.0, 0.9, 0.7) * contour * 0.6;
  col += vec3(0.9, 0.0, 0.5) * step(0.78, v) * 0.4;
  col += vec3(0.95, 0.9, 1.0) * step(0.88, v) * 0.3;
  float glow = exp(-length(p)*1.5) * v * 0.2;
  col += vec3(0.0, 0.5, 0.4) * glow;
  col *= 1.0 - scan;
  col += vec3(0.015, 0.01, 0.02);
  gl_FragColor = vec4(col, 1.);
}
close