Before WebGL start drawing, we need to be by myself for 3D space matrix and vector operations, the use of the Internet has matured conversion library to avoid themselves to achieve these complex mathematical operations.

We choose here is the gl-matrix library Download: https://github.com/toji/gl-matrix

Transform operations

Before the final start drawing, we need to convert the 3D world coordinate system for the WebGL object coordinate system, determine the location of the final draw.

Model transformation (vertex shader stage of the process)

A conversion model is used to determine the position of the model in the world coordinate system, all the models have a world coordinate system of the matrix, to ensure that all models in the same coordinate system (i.e., a world coordinate system) into the model transformation comprises a translation, rotation and scaling;

View transform (vertex shader stage of the process)

With after the world coordinate system is not enough, you also need a matrix camera is also located within the coordinate system used to represent the position and angle of view of an observer;

Model view transform (vertex shader stage of the process)

This transformation is obtained by multiplying the transformation matrix and the transformation model view transform;

Projective transformation (vertex shader stage of the process)

In this step, we get the final coordinates of the object looks in the camera, but the human eye can see, and we still differ scene, such as we see things in the world are from a perspective near the far smaller effect, projection transformation is used to achieve these effects of transformation;

Orthogonal projection

Orthogonal projection, can be seen as a parallel projection of the object is not near the far smaller visual effects in the orthogonal projection, looks the same regardless of distance large, the projection is generally used in a 2D or 2.5D (typically 3D characters 2D scene) in games, 3D games of the UI will be used to achieve this projection;

Gl-matrix created using an orthogonal projection library code is as follows:

. 1  var M4 = glMatrix.mat4.create ();
 2  // by setting the size of each face of the projection area determination 
. 3 glMatrix.mat4.ortho (M4, -100, 100, -100, 100, -100, 100) ;

Perspective projection

Perspective projection, can simulate the human eye to see the 3D world near the far smaller visual effects, the projection is generally used in 3D games;

Creating a perspective projection using the following codes gl-matrix library:

1  var M4 = glMatrix.mat4.create ();
 2  // Method 1: The vertical extent, and the aspect ratio of the projection area determined mesiodistal plane 
. 3 glMatrix.mat4.perspective (M4, 1, 1, 0, 100 );
 4  // method 2: projection area determined by setting the size of each face 
. 5 glMatrix.mat4.frustum (M4, -100, 100, -100, 100, -100, 100);

Perspective division (primitive assembly stage of the process)

I.e. the w component perspective division divided by x, y, z components (w default value is 1), to produce a three-dimensional perspective effect.

More information can be found: https://www.jianshu.com/p/7e701d7bfd79

Viewport transformation (primitive assembly stage of the process)

The viewport transformation is a projection of the main object in three-dimensional space onto a two dimensional plane, in computer graphics, which is defined through the geometric transformation, projective transformation of the object after clipping and transform screen displayed in the specified area.

User may control the transformation step by calling two methods:

gl.viewPort

Determining a final display position and size, in pixels;

gl.depthRange

Determining a final depth region can be displayed, selected from the range [0-1];

Complete conversion line (transformed lines) as shown below

The importance of transform order

3D applications, matrix multiplication is very important, we need to note that the results after two multipliers matrix switching, get is not the same.

MN≠NM

The following can be seen in FIG intuitive understanding of the different transform order to get different results:

Transformation matrix stack

In general, commonly used in the matrix stack structure having inherited models, i.e. the model of the complex composed of simple target. For example, a bicycle is composed of two wheels, a tripod, and other components thereof. Its performance in succession when the bicycle move forward, first front wheel rotation, followed by the rear wheels rotate, then translate the whole body forward, so go on, this bike will go forward.

In addition, when we need to implement complex models draw, will need the concept of global coordinates and local coordinates, for example, a table, on a global coordinate position on this internal table, it contains a table and four legs, these five models data matrix is a table of the relative local coordinates, instead of recording the global coordinates, we hope that the change in the matrix of the table, five local matrix model of the interior does not need to be changed.

Stack

The current value after the matrix multiplication in the matrix stack, the stack as a new matrix onto the stack, the stack will be appreciated that for the current matrix is the matrix used in local coordinates;

Pop

Pop stack matrix, the matrix is the current top of the stack on a local coordinates of the parent's coordinate matrix;

Draw the table by the transformation matrix stack:

Pressed into the matrix table;
Stack matrix multiplication with a matrix on the desktop, to obtain global coordinates of the matrix table top;
Pressed into the matrix table, when an object needs to be drawn on the table, the top of the stack may be used in the matrix multiplication of the matrix need to draw the object;
Desktop has no need to draw the object, the pop stack matrix (i.e., matrix desktop);
At this time, i.e., the table top of the stack matrix matrix matrix multiplication with the top of the stack in the first leg of the matrix, the matrix obtained global coordinates of the first leg;

And so forth, until you have drawn all models;

Examples

https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_3/index.html

WebGL study notes (five): Transform Library