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

Your noise piece

Two layers. Two directions. Your piece.

Everything you learned in Noise. Two layers of FBM moving in opposite directions, sunset colors, framed with vignette.

The full terminal. Every technique you learned, falling.

TryChange 6. (vertical drop density) to 12., faster, tighter rain. Change 8. (column count) to 4. for wide columns. Change 0.3 and 0.8 in speed to shift the rhythm between columns. This noise is yours.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float d = length(p);
  float glitch = step(0.93, h2(vec2(floor(T * 5.0), floor(p.y * 6.0))));
  p.x += glitch * 0.2;
  float shift = 0.04;
  float col_id = floor(p.x * 8.0);
  float speed = 0.3 + h2(vec2(col_id, 0.0)) * 0.8;
  float scroll = p.y + T * speed;
  float data = step(0.45, h2(vec2(col_id, floor(scroll * 6.0))));
  float trail = exp(-fract(scroll * 6.0) * 2.5);
  float r = step(0.45, h2(vec2(floor((p.x+shift) * 8.0), floor(scroll * 6.0))));
  float b = step(0.45, h2(vec2(floor((p.x-shift) * 8.0), floor(scroll * 6.0))));
  vec3 col = vec3(r * 0.6, data * 0.9, b * 0.5) * trail;
  col += vec3(0.0, 0.85, 0.65) * step(0.9, data) * trail;
  col += vec3(0.9, 0.0, 0.5) * glitch * 0.5;
  vec2 gridLine = abs(fract(p * 8.0) - 0.5);
  float grid = 1.0 - smoothstep(0.0, 0.03, min(gridLine.x, gridLine.y));
  col += vec3(0.0, 0.2, 0.15) * grid * 0.15;
  float scan = step(0.5, sin(gl_FragCoord.y * 1.5) * 0.5 + 0.5) * 0.1;
  col *= 1.0 - scan;
  col *= 1.0 - d * 0.15;
  col += vec3(0.015, 0.01, 0.02);
  gl_FragColor = vec4(col, 1.);
}
close