This material provides a technical derivation and practical implementation of 3D perspective projection using elementary mathematics. The core mechanism relies on the projection formula $P'(X', Y') = P(X/Z, Y/Z)$, executed entirely within a standard HTML5 2D Canvas context without utilizing specialized graphics APIs (e.g., WebGL). The presentation progresses from coordinate system setup, through animated Z-axis translation and XZ-plane rotation, culminating in a wireframe renderer capable of handling arbitrarily complex models. The geometric validity of the projection formula is proven using principles of similar triangles, confirming the position of the viewport (screen) at $Z=1$ relative to the camera/eye at the origin ($Z=0$).
Summarizing the Implementation of a Basic 3D Graphics Engine
0:00 Core Projection Formula: The fundamental 3D-to-2D projection is defined by the formula where the screen coordinates ($X'$, $Y'$) are derived by dividing the 3D coordinates ($X, Y$) by the Z-depth: $X' = X/Z$ and $Y' = Y/Z$. This formula relies on the 3D point being behind the screen plane ($Z>0$).
0:41 HTML Canvas Setup: The implementation uses a basic HTML page loading a JavaScript file, leveraging the 2D context of an 800x800 HTML Canvas for rendering.
3:20 Coordinate System Translation: Standard 3D graphics (and the projection formula) assume a centered coordinate system (range $[-1, 1]$). A crucial translation function (screen) is developed to map these normalized coordinates to the HTML Canvas's screen coordinates (top-left $0, 0$ to bottom-right $W, H$), including flipping the Y-axis to place positive Y at the top.
6:36 3D Projection Implementation: The project function is implemented. A point located at $Z=0$ cannot be projected (division by zero), confirming the camera/eye must be at the origin and the object must be distant ($Z>0$).
8:04 Z Translation Animation: Animating the Z-coordinate (offsetting the points’ depth) demonstrates the vanishing point effect: points move toward the screen center as they recede, illustrating perspective.
11:33 XZ Rotation Implementation: Rotation around the Y-axis (in the XZ plane) is introduced. This requires adapting the standard 2D rotation matrix ($\cos\theta, -\sin\theta, \sin\theta, \cos\theta$) by substituting the Z-coordinate for the Y-coordinate in the matrix calculation.
14:16 Wireframe Rendering: A wireframe representation of the cube is created by defining faces as arrays of vertex indices (stored in VS) and iterating through them to connect the projected 2D points using the Canvas API's path and stroke methods.
17:48 Mathematical Validation: The geometric foundation of the $X/Z$ formula is rigorously proven using the concept of similar triangles, where the ratio of the screen distance ($1$) to the point depth ($Z$) is proportional to the ratio of the projected coordinate ($X'$) to the original coordinate ($X$).
19:25 Rendering Complex Models: The engine's capability is demonstrated by successfully loading and rendering a pre-prepared, complex 3D model (Penger model, approximately 326 vertices and 626 faces), emphasizing that this complexity is handled solely by the basic projection and rendering loop.
19:57 Conclusion: The final 3D engine is confirmed to use only the native 2D HTML Canvas context and fundamental mathematical principles, bypassing specialized graphics libraries.