Setup
A0
Hello Shader
A rotating cube with per-vertex color, using GLSL-style ShaderMaterial. The starting point of every graphics course: get a triangle on screen and understand how vertex data flows through the pipeline.
Animation
A1
Keyframe Animation
Discrete poses, continuous motion. Linear interpolation between authored keyframes using the same mathematical foundation as every production animation system.
A2
Bezier Curves
Four points, infinite paths. Interactive cubic Bezier editor with a traveler following the reparametrized arc. The same math used in every font renderer and CSS animation engine.
A3
Aircraft Along Curve
Follow the path, own the frame. An aircraft navigates a looping spline path with orientation computed from the curve's Frenet frame at every step.
A4
Aircraft Extended
Same path, deeper scene. A closed multi-segment course with a follow camera that trails through every maneuver and a minimal HUD overlay.
Skeletal animation
A5
Skeletal Bone Animation
Bones move, skin follows. A hierarchical skeleton drives a skinned mesh using linear blend skinning, the mathematics behind every character in a modern game engine.
Full scene
A6
Full Lit Scene
Everything on, all at once. Directional and point lights, shadow maps, physically based materials, environment reflections, and all the animated objects from previous stages.
Web particles
SVG Canvas
Particle System
Four particle simulations in a single page: random walk, gravity, elastic collisions, and a full particle emitter. Built with the HTML5 Canvas API and TypeScript.