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

Forces in a shader

In a shader, a force is time applied to the coordinates. You add gravity, wind, pulse, vortex, drift, turbulence, ripples and collisions to a warped field, one line of code at a time.

  1. ForcesThree shapes. Zero forces. The before.
  2. GravityThe circles fall. Each at its own weight.
  3. WindWind pushes the blocks. Blows and returns.
  4. PulseThe hexagon pulses. Waves from the hit.
  5. VortexTriangles in orbit. The vortex pulls.
  6. DriftDiamonds that slide. Lazy diagonal.
  7. TurbulenceThree frequencies. The squares never settle.
  8. RippleRings from center. The stone in the lake.
  9. CollisionTwo sources orbit. The waves collide.
  10. All togetherEvery force. Every shape. One piece.

Next section: Noise in GLSL →

close