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

Learn GLSL, free, from zero

WoGL Academy teaches fragment shaders in 90 interactive lessons. You edit live code in your browser and the light changes as you type. Nothing to install, nothing to break.

What is a shader?

A shader is a small program that runs on your graphics card and decides the color of every pixel at once. A fragment shader, written in GLSL, receives a pixel's position and returns its color.

The nine sections

  1. GLSL for beginnersColor, coordinates and time, from the first pixel to a tunnel of light.
  2. Shader patternsStripes, grids, polar coordinates, spirals, mirrors and Chladni plates.
  3. Forces in a shaderTime applied to coordinates: gravity, wind, vortex, turbulence, ripples.
  4. Noise in GLSLFrom raw randomness to FBM, terrain and a noise sphere.
  5. Domain warpingOne warp, many skins: giraffe, camo, wood, marble, liquid metal.
  6. Shader animationBreathing, phase, easing, morphs, flow fields and the seamless loop.
  7. Strange attractors on the GPUThe Aizawa attractor: an ODE, Euler, and 130,000 particles on the GPU.
  8. Ray marching in GLSL3D with distances: rays, SDFs, normals, light, shadows and materials.
  9. Fractals in GLSLz = z² + c: the complex plane, escape coloring, Julia sets and deep zoom.

Build with WoGL

Vibe coders: you don't need to learn code to put shaders on your website. Here we show you how.

close