MVP: building the model-view-projection matrix (WebGL2)

What the page shows

Five canvases draw the same model after each matrix has been applied:
final image, 1 model space, 2 world space (after M), 3 eye space (after V·M),
4 normalized device coordinates (after P·V·M and ÷w). The amber box is the camera’s
view volume. The matrices M, V, P and P·V·M are printed live under the canvases.
Controls: model transform, two camera setups (lookAt, or position + pitch/yaw/roll),
two projections (perspective, parallel), and a toggle that orbits the camera.
Drag and wheel on the small canvases to look around each space.

Student task (edit student.mjs only)

1. A more complicated model [“more complicated” is optional], however you should add another colouredCube, attach them and move them to demonstrate that they are attached (createModelMeshes, buildModelParts). Also requires some additions to UI.
2. buildViewLookAt
3. buildViewEuler
4. buildPerspective
5. buildParallel

Each stub returns the identity, so the page runs from the start and each canvas
changes as a step is finished. If a function returns something that is not a finite
4x4 matrix, the page keeps the last good one and prints a warning.

Files

• app.html, assets/style.css
• main.mjs controller: DOM, five contexts, frame loop
• student.mjs the exercise;
• pipeline.mjs composes M, V, P and P·V·M from the state
• views.mjs what each canvas draws; renderer.mjs DOM-free renderer; geometry.mjs meshes
• state.mjs state and camera animation; ui.mjs control table and panel
• matrixUtil.mjs scale, inverse, matrix formatting
• shaders/mvp.vert.glsl, shaders/mvp.frag.glsl

V = Rz(-roll)·Rx(-pitch)·Ry(-yaw)·T(-position).