[WebGL Primer] 13, minmatrix.js and coordinate transformation matrices

Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (doxas), the article if there is my additional instructions, I will add [Lufy:], in addition, The WEBGL research is not deep enough, some professional words, if the translation is wrong, you are welcome to correct.

Basic functions of coordinate transformation matrices

For basic 3D rendering, it is necessary to prepare 3 coordinate transformation matrices, which have been mentioned many times in previous articles.
The first one is the model transformation matrix, which is called the World transformation matrix in DirectX. The model transformation matrix affects the model, the position of the model, the rotation of the model, the enlargement and reduction of the model, and other related situations.
The second is the View transformation matrix, which is simply defined as the lens (camera) that captures 3D space, determines the position of the lens, the reference point of the lens, and the direction of the lens.
The third is the projection transformation matrix, this coordinate transformation defines the screen of the ratio, shear field, etc., in addition to obtain the effect of the law of Near and far need to use this transformation matrix.
Depending on the content, you'll almost know what you need to do with the matrix. Using Minmatrix.js, you can perform basic operations on the matrix and see what minmatrix.js can do.

Basic functions of Minmatrix.js

The development of this site Minmatrix.js, including Matrix generation and basic operation of the Matrix, the core of Minmatrix.js is a object called Mativ, through this object can do all the matrix operation, using Minmatrix.js to manipulate the matrix, first, need to generate a Mativ object.

> Generate code for Mativ objects

var m = new Mativ ();

As above, the variable m is an instance of the Mativ object, and the method that exists in the Mativ object can be called by M. Method name.
Below, the method of Mativ object defined in Minmatrix.js, not immediately understand their meaning, a general look at it.

>>minmatrix.js:create
Function	:	Mativ.create ()
Parameters	:	No
return value	:	Matrix
Generates a 4x4 square that contains 16 elements, which are actually a Float32array object and all elements are initialized to 0.

>>minmatrix.js:identity
Function	:	Mativ.identity (dest)
Parameters	:	Dest > Initialization Matrix
return value	:	The Matrix after initialization
The received matrix parameter is initialized and returned.

>>minmatrix.js:multiply
Function	:	Mativ.multiply (Mat1,mat2,dest)
Parameters	:	MAT1 > multiplying the original matrix
Parameters	:	Mat2 > as a matrix of multipliers
Parameters	:	Dest > The matrix used to hold the results of the calculation
MAT1 is left, Mat2 is right, and the result of multiplying is saved to dest.

>>minmatrix.js:scale
Function	:	Mativ.scale (Mat,vec,dest)
Parameters	:	Mat > Original Matrix
Parameters	:	VEC > Zoom vector
Parameters	:	Dest > The matrix used to hold the results of the calculation
In the model transformation, the magnification is reduced, the mat is the primitive matrix, the VEC is a vector of each x, Y and Z's scaling values, and the final result is saved in Dest.

>>minmatrix.js:translate
Function	:	Mativ.translate (Mat,vec,dest)
Parameters	:	Mat > Original Matrix
Parameters	:	Vec > represents a vector that moves a certain distance from the origin.
Parameters	:	Dest > The matrix used to hold the results of the calculation
The coordinate movement in the model transformation, Mat is the original matrix, VEC is a vector of moving amount in all directions of X, Y, Z, and finally the results are saved to dest.

>>minmatrix.js:rotate
Function	:	Mativ.rotate (Mat,angle,axis,dest)
Parameters	:	Mat > Original Matrix
Parameters	:	Angle > Swivel angle
Parameters	:	Axis > axis of rotation vector
Parameters	:	Dest > The matrix used to hold the results of the calculation
Rotation in model transformations, Mat is the original matrix, angle is the rotation angle, axis is the axis of rotation, and finally the results are saved to dest.

>>minmatrix.js:lookat
Function	:	Mativ.lookat (Eye,center,up,dest)
Parameters	:	Eye > Lens position vector
Parameters	:	Vectors for center > Lens Reference Points
Parameters	:	Up > Direction vector of the lens
Parameters	:	Dest > The matrix used to hold the results of the calculation
The formation of the View transformation matrix, Eye is the position of the lens in three-dimensional space, center is the reference point of the lens, up is the direction vector of the lens, and finally the results are saved to dest.

>>minmatrix.js:perspective
Function	:	Mativ.perspective (Fovy,aspect,near,far,dest)
Parameters	:	Fovy > Perspective
Parameters	:	Aspect > Screen width and height ratio
Parameters	:	Near > Close-section locations
Parameters	:	Location of Far > distal section
Parameters	:	Dest > The matrix used to hold the results of the calculation
The projection transformation matrix is generated, which is a projection transformation matrix commonly referred to as [perspective projection], including the law of Near and far. Fovy is the angle of view, the aspect is the ratio of the screen to the bottom, near the position of the close section (must be greater than 0 values), far distant section position (any number), and finally save the results of the calculation to dest.

>>minmatrix.js:transpose
Function	:	Mativ.transpose ()
Parameters	:	Mat > Original Matrix
Parameters	:	Dest > The matrix used to hold the results of the calculation
The columns of the matrix are interchanged, and the results are saved to dest.

>>minmatrix.js:inverse
Function	:	Mativ.inverse (Mat,dest)
Parameters	:	Mat > Original Matrix
Parameters	:	Dest > The matrix used to hold the results of the calculation
To find the inverse matrix of matrices, Mat is the original matrix, and the inverse matrix of the matrix is saved to dest.

It contains only specific features, so the design is very simple.

Flow of matrix transformations

Using Minmatrix.js, you can manipulate the matrix, then first to confirm the operation sequence.

The model transforms well, the view transforms, the projection transforms also, if does not have the gentleman to become the matrix, can do nothing. So first execute mativ.create to generate the rectangle, and then initialize the matrix through mativ.identity, the code is as follows.

> Initializing matrices with Mativ objects

Generate Mativ object var m = new Mativ ();//matrix initialization var matrix = m.identity (M.create ());

in this case, you can use the matrix variable.
The above code performs the generation and initialization of the matrix at the same time, and it is possible to do so separately.

> Using the Mativ Object initialization matrix (2)

var matrix = m.create (); m.identity (matrix);

then use this initialized matrix to perform the actions you want. For example, to use the model matrix to move the coordinates of the model to the x direction by one 1.0, the code is as follows.
>モデル Slew and the occupies of moving components and ふれ合える cases

var matrix = m.identity (M.create ()), M.translate (Matrix, [1.0, 0.0, 0.0], matrix);

In this case, the matrix is transformed into a matrix that passes through the 1.0 model moving in the x direction. Likewise, rotation and scaling are also possible. However, it is important to note that the order of execution is moved, rotated, scaled. The results of the movement after the first movement and the first rotation are changed. This is because the rotation is centered at the origin point. So pay great attention to the execution order of the model transformations.
The specific order of execution should be to enlarge > rotate > Move so that the scaled rotated model can be moved to the correct position.

But that's not the end of it.

The OpenGL matrix uses column vectors, which are multiplied in the exact opposite order. It is easy to see that the multiplication order of the column vector and the row vector is the exact opposite if you study the calculation method of the matrix well. In other words, the results of the order [Zoom > Rotate > Move] are completely different, the correct order should be [move > Rotate > Zoom out], so the order of the model transformation matrix should be paid special attention.

The generation of the view transform matrix uses the Mativ.lookat function, and the generation of the projection transformation matrix uses the Mativ.perspective function.

In this step, the model, the view, the projection of each transformation matrix have been generated, and then multiply three matrices, generate the final coordinate transformation matrix, the multiplication between the arrays using the Mativ.multiply function.

But here are some things to watch out for.

The order in which the three matrices of a model, view, and projection is multiplied is important, and the previous article (five, the basic knowledge of the Matrix) also illustrates that the order of matrix multiplication, if changed, will change. Although the common arithmetic in the time of the product, the exchange order of the left and right to get the same result, but the matrix, the result has changed.

The coordinate transformation matrix generally uses the model, the view, the projection of the English word of the first English letter to represent, such as Mvpmatrix. The order of multiplication is not MVP, but p>v>m. Using Minmatrix.js, the code example is as follows.

> Preparation of examples of coordinate transformations

Generation and initialization of various matrices var Mmatrix = m.identity (M.create ());   Model transformation matrix var Vmatrix = m.identity (M.create ());   View transformation matrix var PMatrix = m.identity (M.create ());   The projection transformation matrix var Mvpmatrix = m.identity (M.create ()); The final coordinate transformation matrix//The order in which each matrix is multiplied uses example m.multiply (PMatrix, Vmatrix, Mvpmatrix); P and V are multiplied by m.multiply (Mvpmatrix, Mmatrix, Mvpmatrix); Then multiply with M

using the steps to the current position, after generating the coordinate transformation matrix, the final notification to WebGL, this method next time.

Summary

This time introduced the matrix of the site to calculate the basic use of the library minmatrix.js, and coordinate transformation matrix order.

Minmatrix.js through an object called Mativ to operate on the matrix, the specific contents of various methods, now do not understand it does not matter, such as necessary when the specific description. After the coordinate transformation matrix is generated, it is a small step away from drawing the polygon.

Next time, you should finally let the polygon appear on the screen.

reprint Please specify: transfer from Lufy_legend's blog Http://blog.csdn.net/lufy_legend