💎

Shaders

Linear Algebra on the GPU

🦴💎💡✨🌀⚡
Roadmap topics covered here
Full roadmap →

Shaders lessons

Vertex Transformation Pipeline

MVP
gl_Position = P . V . M . vec4(pos, 1.0) M=Model(Obj>World) V=View(World>Cam) P=Proj(Cam>Clip)
Normal Matrix
n' = normalize((M^-1)^T . n) Non-uniform scale skews normals off-perpendicular

Live: Basis Change / Space Transform

Drag to morph between world space and object space. The yellow point stays fixed — the coordinate grid transforms around it. This is exactly what Model, View, and Projection matrices do:

The point stays fixed in space — the grid (coordinate system) transforms around it. This is what M, V, P matrices do.

Perspective Projection: Why Divide by Z

The projection matrix divides y by z — farther objects get smaller. Watch the yellow point project onto the near plane as you push it deeper:

Push Z farther to see y/z shrink. This division IS the projection matrix.

Phong and Blinn-Phong

Phong
I = ka*Ia + kd*Id*max(N.L,0) + ks*Is*(R.V)^a R = 2(N.L)N - L
Blinn-Phong
H = normalize(L+V) I_spec = ks*Is*(N.H)^b b~4a -- 1 normalize replaces 1 reflect

Cook-Torrance PBR

BRDF
fr = f_diff + D*F*G / (4(N.L)(N.V))
D -- GGX NDF
D = a^2/(pi[(N.H)^2(a^2-1)+1]^2) a=roughness^2
F -- Schlick
F = F0+(1-F0)(1-V.H)^5 F0=0.04|albedo
G -- Smith
G = G1(N,V)*G1(N,L) G1=(N.x)/((N.x)(1-k)+k)

Interactive: GGX Specular Lobe

The GGX NDF controls specular spread. Low roughness = tight mirror. High roughness = wide diffuse-like shape:

Interactive: Fresnel Curve

Schlick approximation: reflectance increases at grazing angles. F0=0.04 for dielectrics, 0.7+ for metals:

BRDF Polar Response Plot

For a given incoming light direction and roughness, this polar plot shows how much light reflects in each outgoing direction. Low roughness = tight specular peak near mirror angle. High roughness = wide scatter:

← 🦴 RiggingLighting 💡 →
Interactive lessonCanvas visualizersMathematical notation