 | [TOC] Chapter 8: Projections and Viewports |  |
| Introduction | |
Projections in 3D graphics are essential for translating a 3D scene into a 2D image on the screen. Two main types of projections—orthographic and perspective—transform 3D coordinates based on different principles, giving distinct visual results. We’ll examine the math behind these projections, how clipping works to remove out-of-bounds geometry, and how viewports map the projected scene onto specific screen regions. Understanding these concepts is crucial for creating realistic or stylized scenes in WebGPU.
| The Clipping Volume | |
The clipping volume is the bounded region of 3D space that is visible through the camera. Only objects within this volume are rendered; everything outside is clipped or discarded. The clipping volume differs for orthographic and perspective projections:
- In orthographic projections, it is a rectangular prism aligned with the coordinate axes.
- In perspective projections, it is a truncated pyramid (a frustum) extending outward from the camera.
Clipping
Clipping occurs when parts of objects extend beyond the clipping volume boundaries. Objects are clipped along the near, far, left, right, top, and bottom planes of the volume, so only visible sections remain. WebGPU handles clipping automatically after the projection transformation, ensuring the scene renders correctly within the camera’s field of view.
When Does a Projection Need to Happen?
Projection transformations occur during the graphics pipeline’s projection stage. After the model and view transformations position objects in the world, the projection step maps them into the clipping volume. This is crucial for accurate depth and spatial representation on the 2D screen.
| Orthographic Projections | |
Orthographic projections maintain an object's relative size regardless of its distance from the camera, making them useful for technical and architectural visualizations where dimensions should not appear distorted.
Orthographic Projection Matrix
The orthographic projection matrix transforms coordinates to fit within a specified rectangular clipping volume, defined by six planes: left, right, bottom, top, near, and far. The matrix scales and translates the 3D coordinates to map this volume into normalized device coordinates (NDC), where each axis ranges from -1 to +1.
The orthographic projection matrix:
\[
\begin{bmatrix}
\frac{2}{r - l} & 0 & 0 & -\frac{r + l}{r - l} \\
0 & \frac{2}{t - b} & 0 & -\frac{t + b}{t - b} \\
0 & 0 & \frac{2}{n - f} & -\frac{n + f}{n - f} \\
0 & 0 & 0 & 1
\end{bmatrix}
\]
where \( r \), \( l \), \( t \), \( b \), \( n \), and \( f \) represent the right, left, top, bottom, near, and far planes.
Example code to set up an orthographic projection matrix in WebGPU:
import { mat4 } from 'gl-matrix';
let orthoMatrix = mat4.create();
let left = -5, right = 5, bottom = -5, top = 5, near = 0.1, far = 100;
mat4.ortho(orthoMatrix, left, right, bottom, top, near, far);
| Perspective Projections | |
Perspective projection provides a realistic effect, where objects appear smaller as they move further from the camera, simulating the depth perception of the human eye.
The Viewing Volume of a Perspective Projection
In perspective projections, the viewing volume is a frustum, a truncated pyramid with a square or rectangular base extending from the near plane to the far plane. This shape gives perspective projections their unique depth effect, with objects scaling based on distance.
The Perspective Projection Matrix
A perspective projection matrix transforms coordinates so that the 3D frustum maps onto a cube with each axis ranging from -1 to +1 in normalized device coordinates. This projection requires scaling and mapping depth (z-values) into a range that can be clipped correctly.
Scale the View Window to (-1,1) to (+1,+1)
The matrix scales the x and y coordinates to fit within the NDC, compressing distant objects and expanding nearby objects to simulate depth.
Mapping Depth (z values) to (-1,+1)
The matrix also maps depth (z-values) to the NDC range, compressing it logarithmically so distant objects are smaller, creating the effect of perspective depth.
Building the Perspective Projection Transform
The perspective projection matrix:
\[
\begin{bmatrix}
\frac{n}{r} & 0 & 0 & 0 \\
0 & \frac{n}{t} & 0 & 0 \\
0 & 0 & -\frac{f + n}{f - n} & -\frac{2fn}{f - n} \\
0 & 0 & -1 & 0
\end{bmatrix}
\]
where \( r \), \( t \), \( n \), and \( f \) are the right, top, near, and far values, respectively.
Example code to create a perspective projection matrix in WebGPU:
let perspectiveMatrix = mat4.create();
let fov = Math.PI / 4; // 45 degrees
let aspect = canvas.width / canvas.height;
let near = 0.1, far = 100;
mat4.perspective(perspectiveMatrix, fov, aspect, near, far);
| Viewports | |
A viewport is a rectangular region of the screen where the final 2D projection of the 3D scene is drawn. The viewport transformation maps the normalized device coordinates (from the projection) to actual screen coordinates, effectively scaling and translating the image to fit the designated screen area.
The viewport transformation scales and shifts the x and y coordinates from the normalized device coordinates to the viewport’s pixel range. The viewport is usually defined by its width, height, and lower-left corner’s x and y coordinates, often normalized between 0 and 1.
Mouse Events into World Locations
When interacting with 3D scenes, translating 2D mouse coordinates into 3D world coordinates is essential for features like object selection. This involves:
1. Mapping mouse x and y coordinates to the viewport's NDC.
2. Using the inverse projection and view matrices to calculate corresponding 3D world coordinates.
Example code to convert mouse coordinates into world locations:
function getWorldCoordinates(mouseX, mouseY, viewMatrix, projMatrix, viewport) {
let ndcX = (mouseX / viewport.width) * 2 - 1;
let ndcY = (mouseY / viewport.height) * -2 + 1;
let inverseMatrix = mat4.create();
mat4.multiply(inverseMatrix, projMatrix, viewMatrix);
mat4.invert(inverseMatrix, inverseMatrix);
let mouseNDC = vec4.fromValues(ndcX, ndcY, -1, 1);
vec4.transformMat4(mouseNDC, mouseNDC, inverseMatrix);
return [mouseNDC[0] / mouseNDC[3], mouseNDC[1] / mouseNDC[3], mouseNDC[2] / mouseNDC[3]];
}
| Summary | |
This chapter covered projections, clipping, and viewport transformations in WebGPU. Orthographic and perspective projections control how 3D scenes appear in 2D, affecting depth and scale, while viewports define the specific screen areas where scenes render. Additionally, we explored mapping user input to 3D coordinates for interactive experiences. These fundamental concepts help render and interact with complex 3D scenes realistically and dynamically.
|
