Camera Movement & Clipping
Following the 3D Graphics Engine tutorial series by javidx9. I'm loosely transcribing the learnings from C++ to JavaScript with HTML canvas.
Keyboard/Mouse Only: click on the canvas to move the camera, with additonal QE+WASD movement.
Notes:
The 2D projection simulates perspective around the origin; we can't move the origin to the camera but we can move the world relative to the camera.
This just translates to subtracting the camera position from the world, and then applying the camera's orientation.
The video covers what a LookAt matrix is for handling position + orientation, likely how CFrames work. I'll likely just use quaternions + XYZ vectors in the future.
I've re-implemented the camera movement with quaternions as they're super intuitive, especially for this bearing-less type of camera rotation.
Clipping refers to fragmenting or removing triangles if they go beyond a plane eg. the edges of the screen or the camera's Z position.
With the projection matrix from part 1, any negative Z points are projected inversely onto the screen. To remove this artefact we clip any tri going into negative Z-values to 0 or greater.
Another reason is for performance, in screen-space we don't want to consume compute calculating/filling pixels outside the viewport. I didn't implement this one as canvas' 2D context handles this under the hood, by clipping from a tri to a tri or quad polygon.