Seven stages, one rendering pipeline.
A semester long progression through real time 3D graphics. Started as seven OpenGL and C plus plus 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. Play and pause control. Timeline scrubber lets you sweep through the interpolation manually.
A2, bezier curves
A cubic bezier curve rendered as a continuous line in 3D. Four control points as draggable spheres. A traveler sphere cycles 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 orientation from the Frenet frame at the current point. The tangent, normal, and binormal form a rotation matrix that keeps the aircraft 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. A HUD overlay shows heading, speed, and lap count. Toggle to a free orbit camera when you want to look around.
A5, skeletal bone animation
A four bone chain rendered as a SkinnedMesh. Each vertex has skin index and skin weight assigning it to nearby bones. 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.