HTML and CSS Reference
In-Depth Information
dx dy dz
Here,
dx
,
dy
, and
dz
are the distances to move on each axis. Now you need to apply the transformation
matrix to the point matrix; this is done with matrix addition. You just add each corresponding cell together
to make a new matrix containing the sum of each cell. To add two matrices, they need to be the same
size. So for translation, you do this:
x y z + dx dy dz = (x + dx) (y + dy) (z + dz)
The resulting matrix can be called
x1
,
y1
,
z1
, and it contains the new position of the point after it has been translated.
So, if you had a point at
100
,
50
,
75
on x, y, z, and then wanted to move it
-10
,
20
,
-35
, here's how that would look:
100 50 75 + -10 20 -35 = (100 - 10) (50 + 20) (75 - 35)
Thus, when you perform the addition, you get
90
,
70
,
40
as the point's new position. You probably already
noticed the correlation to velocity, where the velocity on each axis is added to the position on that axis. It's
the same here, but we're just looking at it a bit differently.
If you had a larger matrix, you would still use the same process, matching up the cells. We won't be
dealing with matrix addition for anything larger than 1 × 3 matrices here, but here's an abstract example:
a b c j k l (a + j) (b + k) (c + l)
d e f + m n o = (d + m) (e + n) (f + o)
g h i p q r (g + p) (h + q) (i + r)
That's all you need to know about matrix addition. After we cover matrix multiplication, you see how to put
together some actual functions to use in a matrix-based 3D engine.
Matrix multiplication
A more common way of calculating 3D transformations is using
matrix multiplication,
which is usually used
for scaling and rotating. We won't actually use 3D scaling in this topic, as the examples cover using either
points, which can't be scaled, or a drawn shape, which does not have any 3D “thickness” and is therefore
scaled only in two dimensions. Of course, you can build a more complex engine that can scale an entire
3D solid, but you'd then need to write additional functions that would alter the 3D points of the soild to the
new size. That's beyond the scope of what we're doing here, but because scaling is a simple and clear
demonstration of matrix multiplication, we'll run through an example.
Scaling with a matrix
First, you need to know an object's existing width, height, and depth—in other words, its measurement of
size on each of the three axes. This creates a 1 × 3 matrix:
w h d
Here,
w
,
h
, and
d
stand for width, height, and depth. Next, you need a scaling matrix like the following:
sx 0 0
0 sy 0
0 0 sz
