GLSL Shader Tutorials

1

Hello World

Output a solid color

gl_FragColor vec3 / vec4 color precision qualifier

2

UV Coordinates

Map screen position to color

gl_FragCoord iResolution normalized UV coordinate systems

3

Animation

Using time to animate

iTime uniform sin() oscillation phase offset animation loops

4

Shapes: Circle

Signed distance functions

SDF concept length() step() vs smoothstep() anti-aliasing

5

Shapes: Rectangles

Box SDF and combining shapes

sdBox function min() union max() intersection subtraction

6

Patterns & Tiling

Repeating with fract()

fract() floor() tile index procedural repetition

7

Smooth Functions

mix, smoothstep, clamp

mix() smoothstep() clamp() linear interpolation

8

Noise

Random and FBM

hash function value noise smooth interpolation FBM octaves

9

2D Lighting

Point light and glow

inverse-square falloff glow formula iMouse uniform tone mapping

10

Intro to Raymarching

3D sphere with floor

ray origin / direction sphere tracing loop scene SDF getNormal via gradient diffuse lighting

11

Rotation & Transforms

Rotating shapes with 2D matrix rotation

mat2 rotation cos/sin coordinate transform order multiple transforms

12

Color Spaces

HSB/HSV color model for vibrant palettes

HSB to RGB conversion hue cycling atan() for angle color wheel

13

Polar Coordinates

Radial patterns and spirals

length() for radius atan() for angle radial symmetry spiral math

14

Domain Repetition

Infinite shapes with mod()

mod() repetition cell ID per-cell variation infinite geometry

15

Smooth Blending (SDF)

Smooth min for organic shapes

smin() function blend radius k organic blending metaball effect

16

Voronoi Noise

Cell-based patterns

Voronoi cells nearest neighbor search edge detection via d2 - d1 animated seeds

17

Glow & Bloom

Light emission and atmospheric glow

glow formula inverse distance tone mapping vignette

18

Morphing Shapes

Interpolating between SDFs

mix() between SDFs smooth blend factor phase cycling shape library

19

Texture Sampling

Using iChannel for multi-pass effects

iChannel uniforms framebuffer ping-pong feedback loops multi-pass pipeline

20

Post Processing

Vignette, chromatic aberration, film grain

chromatic aberration vignette film grain noise scanlines / CRT gamma correction

21

Domain Warping

FBM-based coordinate distortion for organic effects

domain warping FBM feedback coordinate distortion organic patterns

22

Reflections

Raymarching with reflection bounces

reflect() function multi-bounce rays reflectivity attenuation recursive marching

23

Soft Shadows

Penumbra shadows in raymarching

shadow ray casting penumbra softness factor k soft shadow formula shadow bias

24

Fog & Atmosphere

Exponential fog and volumetric atmosphere

exponential fog fog color blending height fog atmospheric depth cue

25

Mandelbrot Fractal

The classic Mandelbrot set with zoom

complex number iteration escape time algorithm fractal zoom smooth coloring

26

Julia Set

Interactive Julia set with animated parameter

Julia set vs Mandelbrot fixed complex parameter c interactive parameter escape coloring

27

Water & Waves

Procedural ocean with layered sine waves

layered sine waves height-based normal specular highlights Fresnel effect

28

Fire & Smoke

Procedural fire using noise and color ramp

scrolling noise fire color ramp vertical falloff turbulence layers

29

3D Domain Repetition

Infinite 3D grids with mod()

3D mod() repetition cell ID in 3D per-cell variation infinite scenes

30

FBM Terrain

Raymarched terrain with FBM heightmap

heightmap raymarching terrain normal from gradient height-based coloring terrain fog

31

Health Bar

Animated health bar with damage feedback

rounded rectangle SDF color gradient ramp damage flash feedback time-based pulsing

32

Dissolve Effect

Noise-based dissolve for spawn and death

threshold-based dissolve edge emission glow FBM noise masking procedural animation

33

Sprite Outline

Edge glow and outline for selection

edge detection sampling distance-based glow animated outline selection feedback

34

Shockwave Distortion

Expanding shockwave screen distortion

UV distortion expanding ring post-process effect procedural background

35

Force Field Shield

Hexagonal energy shield with Fresnel glow

hexagonal grid Fresnel edge glow impact ripples energy flow animation

36

Retro CRT Effect

Barrel distortion, scanlines, RGB phosphors

barrel distortion scanlines RGB phosphor grid vignette

37

2D Platformer Lighting

Dynamic point lights for 2D scenes

point light falloff additive blending ambient light interactive mouse light

38

Parallax Scrolling

Multi-layer scrolling with depth

parallax depth layers procedural terrain star field generation scroll speed variation

39

Portal Vortex

Swirling energy vortex for teleporters

polar coordinates spiral distortion energy particles radial color gradient

40

Pixel Art Dithering

Bayer dithering and color quantization

Bayer dithering matrix color quantization UV pixelation retro palette