Scene, camera and coordinate frame
Three axes, a camera, a field of view. Why up is y, what the fov changes, and why near and far exist. Your first scene to drive with sliders.
Vectors: position, direction, distance
Adding, measuring, normalising, and the dot product that answers "is it looking at me?". A cat head that follows your pointer.
Translate, rotate, scale: matrices
The 4x4 matrix that holds position, rotation and size. Why order matters, and how a cat tail follows its body through the hierarchy.
Sine and cosine: orbits and oscillations
Amplitude, period, phase: three numbers to make a cat breathe, swing Christmas baubles and orbit a firefly. Plus lerp and easing.
Gravity, bounce, friction
Euler's method in three lines, the restitution coefficient, exponential friction and rolling without slipping. And why a large dt blows everything up.
Light and materials: Lambert, shadows, bloom
Lambert is a dot product: n·l. Emissive, tone mapping and the bloom that makes a fire or ice cat glow.
Colour is a vector: k-means
A pixel is a point in an RGB cube. Distance, mean, and the k-means algorithm that guesses a cat's coat from its photo.
What you will learn
Place an object and a camera in a coordinate frame, and set fov, near and far without guessing
Use vectors, lengths and the dot product to aim, measure and detect a gaze
Combine translations, rotations and scales, and animate with sin, cos and lerp
Simulate gravity and bounces, light with Lambert, and extract colours with k-means
Prerequisites: JavaScript basics (variables, functions, objects). On the maths side, nothing beyond high school, and every formula is explained again. The demos run in your browser with WebGL, and they only load when you click them.
Curious where this maths leads? The 3D Lab shows the two complete scenes used as examples throughout the course.