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

Ray marching in GLSL

Ray marching draws 3D with distances. For every pixel a ray steps forward until it touches a shape. You go from one ray to a lit scene with normals, shadows and materials.

  1. The rayA camera, one ray per pixel. The sky is its direction.
  2. The sphereAn SDF: a formula that measures how far the surface is.
  3. The marchThe ray takes safe steps. Here you see how hard it works.
  4. NormalsWhich way the surface faces. The orientation map.
  5. LightDiffuse: the face looking at the light lights up.
  6. The floorA plane + min(). Two shapes share one scene.
  7. ShadowA second ray toward the light. If it hits, shadow.
  8. Two shapessmin(): two spheres melting into one.
  9. MaterialColor by position + a sharp specular highlight.
  10. Full sceneEverything together + the light orbits with time. FINALE.

Next section: Fractals in GLSL →

close