 | [TOC] Chapter 6: Model Transformations |  |
| Introduction | |
In this chapter, we’ll explore model transformations in WebGPU, diving into scaling, translating, and rotating 3D objects and how to apply transformation matrices. Model transformations adjust an object’s position, orientation, and size in 3D space. This chapter will guide you through applying these transformations using the `glMatrix` library, a powerful tool for handling matrix operations in WebGPU.
Basic transformations allow us to adjust an object's geometry in a 3D space. Each transformation type—scaling, translation, and rotation—manipulates vertices in distinct ways. Scaling changes an object's size, translating moves it in space, and rotating changes its orientation. Combining these transformations helps us build complex scenes and animations in WebGPU.
| Scaling | |
Scaling transformations adjust an object’s size along its x, y, and z axes. The scale factors define how much an object stretches or shrinks in each direction.
Scaling can be represented by a 4x4 matrix:
\[
\begin{bmatrix}
s_x & 0 & 0 & 0 \\
0 & s_y & 0 & 0 \\
0 & 0 & s_z & 0 \\
0 & 0 & 0 & 1
\end{bmatrix}
\]
where \( s_x \), \( s_y \), and \( s_z \) are scaling factors for the x, y, and z axes.
Special Cases and Effects
1. Uniform Scaling: When \( s_x = s_y = s_z \), the object scales uniformly in all directions, preserving its original proportions.
2. Non-Uniform Scaling: Setting different values for \( s_x \), \( s_y \), and \( s_z \) allows for stretching or compressing the object in specific directions. This is useful for transforming an object into an elongated or flattened shape.
3. Negative Scaling: A negative scale factor inverts the object along the respective axis. For example, applying \( -1 \) to the x-axis reflects the object across the y-z plane.
Example code for scaling with `glMatrix`:
// Import glMatrix library
import { mat4 } from 'gl-matrix';
// Define scale factors
const scaleX = 2.0;
const scaleY = 0.5;
const scaleZ = 1.0;
// Create a scaling matrix
let scaleMatrix = mat4.create();
mat4.scale(scaleMatrix, scaleMatrix, [scaleX, scaleY, scaleZ]);
| Translating | |
Translation moves an object in 3D space without altering its orientation or scale. It’s represented by adding translation values to the x, y, and z coordinates.
The translation matrix looks like this:
\[
\begin{bmatrix}
1 & 0 & 0 & t_x \\
0 & 1 & 0 & t_y \\
0 & 0 & 1 & t_z \\
0 & 0 & 0 & 1
\end{bmatrix}
\]
where \( t_x \), \( t_y \), and \( t_z \) specify the translation offsets along each axis.
Special Cases and Effects
1. Origin Translation: Moving an object from the origin to any location in 3D space.
2. Translation by Zero: Applying zero translation values keeps the object in its original position.
3. Negative Translation: Negative values shift the object in the opposite direction along the specified axis.
Example code for translation with `glMatrix`:
// Define translation offsets
const translateX = 5.0;
const translateY = 3.0;
const translateZ = -2.0;
// Create a translation matrix
let translationMatrix = mat4.create();
mat4.translate(translationMatrix, translationMatrix, [translateX, translateY, translateZ]);
| Rotating | |
Rotation transforms an object by rotating it around a specified axis. In 3D, rotations are defined by an angle and an axis.
Rotation about any axis
A rotation around an arbitrary axis requires a more complex rotation matrix, but libraries like `glMatrix` provide built-in support. Rotation is often decomposed into rotations around the x, y, or z axes for simplicity.
The rotation matrix for rotating by an angle \( \theta \) about the z-axis, for example, is:
\[
\begin{bmatrix}
\cos \theta & -\sin \theta & 0 & 0 \\
\sin \theta & \cos \theta & 0 & 0 \\
0 & 0 & 1 & 0 \\
0 & 0 & 0 & 1
\end{bmatrix}
\]
Special Cases and Effects
1. 90-Degree Rotation: For a 90-degree rotation, the cosines and sines simplify to 0, 1, and -1, making calculations more efficient.
2. Multiple Rotations: Rotating sequentially around multiple axes can yield complex effects and is often used in animations.
Example code for rotation with `glMatrix`:
// Define rotation angle and axis (e.g., around Z-axis)
const angle = Math.PI / 4; // 45 degrees
const axis = [0, 0, 1];
// Create a rotation matrix
let rotationMatrix = mat4.create();
mat4.rotate(rotationMatrix, rotationMatrix, angle, axis);
Transformation matrices allow us to encapsulate scaling, translation, and rotation in a single matrix operation. When combined, these transformations can be applied efficiently.
Matrix Basics
Matrices are fundamental in 3D graphics to represent transformations. A 4x4 matrix provides a way to apply scaling, rotation, and translation in one operation.
Basic Properties of Matrices - Order Matters
The order in which you apply transformations matters because matrix multiplication is not commutative. Rotating then translating yields a different result than translating then rotating.
The Identity Matrix and the Matrix Inverse
The identity matrix is the “do nothing” matrix and serves as a starting point for transformations. The matrix inverse is used to undo transformations, which is useful for reverting changes or calculating relative transformations.
Matrix Conventions
We generally use column-major order for matrices, which affects how we arrange values in code.
Example of creating a transformation matrix:
let transformMatrix = mat4.create(); // Start with the identity matrix
mat4.scale(transformMatrix, transformMatrix, [1.5, 1.5, 1.5]);
mat4.rotate(transformMatrix, transformMatrix, Math.PI / 4, [0, 0, 1]);
mat4.translate(transformMatrix, transformMatrix, [5, 0, 0]);
| `glMatrix` Library (Free, OpenSource and Powerful) | |
The `glMatrix` library simplifies complex matrix operations, offering functions like `scale`, `rotate`, `translate`, and `invert`. It’s widely used in WebGPU applications for its performance and ease of use.
| Using `glMatrix` - A Robot Arm Base | |
Imagine a robot arm base that can pivot around a central axis. To implement this, we combine a translation to position the arm in space and a rotation to simulate the pivot.
Example code:
// Initialize matrix
let robotBaseMatrix = mat4.create();
mat4.translate(robotBaseMatrix, robotBaseMatrix, [0, 0, -5]);
mat4.rotate(robotBaseMatrix, robotBaseMatrix, Math.PI / 6, [0, 1, 0]); // Rotate around Y-axis
Chaining transformations involves applying multiple transformations in a specific order. For instance, in a robot arm, each joint transformation depends on the previous joint’s transformation.
Example of chaining transformations:
let baseMatrix = mat4.create();
mat4.translate(baseMatrix, baseMatrix, [0, 0, -5]);
let upperArmMatrix = mat4.clone(baseMatrix);
mat4.rotate(upperArmMatrix, upperArmMatrix, Math.PI / 4, [1, 0, 0]);
let forearmMatrix = mat4.clone(upperArmMatrix);
mat4.translate(forearmMatrix, forearmMatrix, [0, 2, 0]);
| More Matrix Math Concepts | |
Order Matters!
Matrix order is crucial because of non-commutativity in matrix multiplication. The same transformations in a different order yield different results.
Matrix Multiplication is Associative
While matrix multiplication order matters, it is associative: \((AB)C = A(BC)\). This property allows us to group transformations in different ways.
Transformations are applied relative to the current coordinate system, which is why chaining transformations can produce cumulative effects, especially in articulated models like robot arms.
| Coding Issues | |
Common issues in WebGPU transformations include matrix order mistakes, confusing column-major and row-major conventions, and neglecting to reset transformations between frames. Consistent use of helper functions from `glMatrix` can help mitigate these errors.
| Summary | |
In this chapter, we covered model transformations in WebGPU, focusing on scaling, translating, and rotating, and learned how to chain transformations to create articulated models. By mastering transformation matrices and libraries like `glMatrix`, you can construct and animate complex 3D models with precision and efficiency.
|
