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

Static

Raw noise. Pure hash.

In Forces you used fb() as a black box, it generated irregular texture and you moved it. Now we are going to open it up. Everything starts here: raw noise. Think of the static on an old TV, visual noise filling the screen.

h2() generates that. Give it a coordinate, it returns a number between 0 and 1 that looks random. Controlled chaos.

h2() generates chaos. Every cell, a digital die.

h2(p)A hash. 2D position goes in, pseudo-random value comes out. The foundation of everything that comes next, and of the fb() you already know.
TryChange 12. to 50., finer, digital grit. To 3., big blocks like bathroom tile.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  vec2 grid = floor(p * 12.0);
  float id = h2(grid);
  float dead = step(0.92, id);
  float scan = step(0.5, sin(gl_FragCoord.y * 1.5) * 0.5 + 0.5) * 0.12;
  vec3 col = vec3(0.0);
  col.r = step(0.6, h2(grid + 0.1)) * 0.8;
  col.g = step(0.5, h2(grid + 0.2)) * 0.9;
  col.b = step(0.55, h2(grid + 0.3)) * 0.7;
  col *= 1.0 - dead;
  col += vec3(0.9, 0.0, 0.4) * dead * 0.3;
  col *= 1.0 - scan;
  col += vec3(0.01, 0.02, 0.02);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close