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

GLSL for beginners

Ten lessons from zero. A color is three numbers, every pixel knows its coordinates, and time makes it move. The last lesson is a tunnel of light.

  1. Hello, lightOne fragment. Millions of colors. Your first piece.
  2. The three numbersRed, green, blue. That is how you make any color.
  3. MixingThree operations. Total control.
  4. CoordinatesEvery frag knows where it is.
  5. The gradientA position controls a color. There you go, you are an artist.
  6. The centerThe origin point of every shader.
  7. The clockT is time. Your first live variable.
  8. The wavesin() of position. Patterns from one function.
  9. The glowDistance to center. exp() does the rest.
  10. The tunnelEverything together. 1/distance. Everything you learned in one output.

Next section: Shader patterns →

close