2. 3D Math BasicsThe following is a short introduction into the world of 3D math. Note that this is not a math tutorial, it only covers the basic stuff you need to work with 3D objects. In addition, there's a number of links pointing you to more 3D knowledge on the web.
2.1 Points & VectorsA point in the three dimensional space can be defined as P(x, y, z). Creating a new point in 3dhtml is just as simple as that:
var myPoint = new Point3D(x, y, z);The Point is internal stored as homogeneous coordinates, i.e. a four element point with an additional coordinate w.
We treat the point as 1x4 matrix called a vector.
2.2 MatricesWhat is the matrix? Well, a matrix is defined as a rectangular array of numbers. (cough)
In 3D math we use 1x4 matrices to represent a point and 4x4 matrices to transform these points.
4x4 Unit matrix
We will need matrix multiplication so it's the only matrix math we are looking at:
a1 a2 b1 b2 (a1 * b1 + a2 * b3) (a1 * b2 + a2 * b4) a3 a4 x b3 b4 = (a3 * b1 + a4 * b3) (a3 * b2 + a4 * b4)Okay, that was just a 2x2 matrix multiplication, we have to handle with 4x4 and that's exactly the reason why 3dhtml tries to conceal that stuff.
2.3 TransformationsWe can move points in the three dimensional space to new positions by adding values to the coordinates. To translate the point P(2, 0, 1) to the new position (3, 2, 1) we have to add (1, 2, 0).
Other transformations are scaling and rotating. These are more complex and result in a matrix multiplication.
Since we express the Point3D in homogeneous coordinates we can treat all transformations simply as multiplications:
2.4 Matrix CompositionInstead of transform a point multiple compose the transformations matrices and render the new coordinates only once.
Suppose we want to translate and scale two points the same way we have to process four transformations. By composing these transformations we reduce the number of transformations to process to two (and one matrix multiplication).
Mostly you will use matrix composition indirectly. Just call the transformation methods.
In the following code example you'll get a matrix to rotate and scale a model.
var myMatrix = new Matrix(); myMatrix.rotateX(0.05); myMatrix.scale(2, 2, 2);If you want to combine two matrices use
For example you want to transform one model depending on mouse interaction and the other model shall be transformed by mouse movements, too but also by a static bumping (size-varying) matrix. So use