Seven stages, one rendering pipeline.
A semester long progression through real time 3D graphics. It began as seven C++ and OpenGL assignments, now ported to three.js so every stage runs in your browser. The arc moves from a basic shader to a fully lit scene with skeletal bone animation.
A0, hello shader
The hello world of shader programming. A rotating colored cube with a custom GLSL vertex and fragment pair. Sets up the basic pipeline that the other demos build on.
A1, keyframe animation
A cube interpolates between two named poses driven by an AnimationMixer, with play and pause controls and a timeline scrubber that lets you sweep through the interpolation by hand.
A2, Bézier curves
A cubic Bézier curve rendered as a continuous line in 3D, with its four control points as draggable spheres and a traveler sphere cycling along the curve. Drag the control points to reshape the path.
A3, aircraft along a curve
An aircraft mesh follows a Catmull Rom curve. Each frame computes the aircraft’s orientation from the Frenet frame at the current point. The tangent, normal, and binormal form a rotation matrix that keeps it pointed forward along the curve.
A4, extended aircraft scene
A closed multi segment course with environment objects. A follow camera tracks the aircraft from behind while a HUD overlay shows heading, speed, and lap count. Toggle to the free orbit camera when you want to look around.
A5, skeletal bone animation
A four bone chain rendered as a SkinnedMesh. Each vertex carries skin indices and weights binding it to nearby bones, and four sliders rotate each bone independently. As you move them, the mesh deforms.
A6, full lit scene
The capstone scene. An aircraft flies its curve while a skinned chain idles in the foreground. Directional and ambient lights with soft shadows. Materials use the PBR shading model from three.js.