WebGL enters the three-dimensional world

1. Observe the target point and the upper direction

In order to determine the observer's state, you need to obtain two information: The Observer's position, the point of view (Look-at point), which is the spot where the target is being observed, which can be used to determine the line of sight. Also, because we need to draw the observed scene onto the screen, we need to know the upper direction (up direction). With these three messages, you can determine the state of the Observer.

Viewpoint: The position in the three-dimensional space where the observer is located, the starting point of sight. The viewpoint coordinates are generally expressed in (Eyex, Eyey, Eyez).
Observe the target point: the point where the target is being observed. Only by observing the target point and the viewpoint at the same time can we calculate the direction of sight. The coordinates of the observed target point are represented by (AtX, AtY, AtZ).
Upper direction: The final drawing on the screen affects the upward direction of China. expressed in (UPX,UPY,UPZ).

2. Create a view matrix

We can create a view matrix with the viewpoint, the observation target point, the upper direction three vectors. The Matrix4.setlookat () function provided by Coun-matrix.js can create a view matrix based on the above three vectors. The functions are defined as Matrix4.setlookat (Eyex, Eyey, Eyez, AtX, AtY, AtZ, UpX, Upy, UpZ). Parameters:
Eyex,eyey, Eyez: Specifying a viewpoint
AtX, AtY, AtZ: Specifying Observer
UpX, Upy, UpZ: Specifies the upper direction, if the upper direction is the y-axis positive direction then the vector is (0, 1, 0).

3. Model Matrix

We know that if you want to rotate a graphic, you need to multiply the rotation matrix by the vertex coordinates of the selected money:
< rotated vertex coordinates > = < rotation matrix > * < original vertex coordinates >

By multiplying the view matrix by the rotated vertex coordinates, you get the rotated vertex coordinates from the viewpoint look:

< ' Look from viewpoint ' after rotation vertex coordinates > = < view matrix > * < rotation matrix > * < original vertex coordinates >

In addition to the rotation matrix, you can also use basic transformation matrices such as panning, zooming, or a combination of them, when the matrix is called the model matrix. This can be written as:

< view matrix >*< model matrix >*< original vertex coordinates >

4. Model View Matrix

The demerit of the multiplication of the view matrix and the model matrix is called the Model View matrix. The transformed result can be written as:

< model view Matrix >*< vertex coordinates >

5. Visible Space

In addition to the limits within the horizontal and vertical range, WebGL also limits the depth of the observer, which is "How far to look". All of these limits, including horizontal view, vertical view, and visual depth, define the visual space (view volume). If we do not specify a visual space, the default depth is not round enough, so some parts of the graph are not visible.

There are two types of visual spaces:

A rectangle is a space, also known as a box-shaped space, produced by orthographic projection (orthogrphic projection).

The pyramid/Pyramids are space-generated by perspective projection (Perspective projection).

6. Box-shaped visual space

Box-shaped visual space as shown. The visible space is determined by the front and back two rectangular surfaces, which are called near-clipping faces (nearly clipping plane) and far-cut polygons (farther clipping plane), the four vertices of which are (right, top,-near), (-left, Top,-near) , (-left,-bottom,-near), (right,-bottom,-near), while the latter's four vertices are (right, top, FAR), (-left, Top, FAR), (-left,-bottom, FAR), (right,-bottom, far).

7. Orthographic projection matrix and view matrix operations

If a program involves two matrices. In the vertex shader, we need to multiply the vertex coordinates with the view matrix, get the coordinates of the vertex in the view coordinate system, then left multiply the orthographic projection matrix and assign the value to Gl_position. The calculation process is as follows:

< ortho projection Matrix > * < view matrix > * < vertex coordinates >

8. Perspective Projection Visual Space

Perspective projection visual space. Just like a box-shaped visual space, perspective projection visual space also has a viewpoint, line of sight, near clipping surface, far clipping surface.

Whether it is a perspective projection visual space or a box-shaped visual space, we use a projection matrix to represent it, but the parameters that define the matrix are different. The Setperspective () method of the Matrix4 object can be used to define the perspective projection visual space.

A matrix that defines a perspective projection visual space is called a Perspective projection matrix (Perspective projection matrix).

9. Hide Face Removal

WebGL provides a hidden surface removal (hidden surface removal) feature. This feature will help us to eliminate the blocked surfaces (hidden faces), and you can confidently plot the scene without having to estimate the order of the objects in the buffer. Turn on the Hide Face removal feature. You need to follow these two steps:

1. Turn on the Hide Face removal feature

Gl.enable (GL. Depth_test);

2. Clear the depth buffer before drawing

Gl.clear (GL. Depth_buffer_bit);

The depth buffer is cleared while the color buffer is cleared, and all can be connected with a bitwise OR (|) connection to GL. Depth_buffer_bit and Gl.color_buffer_bit:

Gl.clear (GL. Color_buffer_bit | Gl. Depth_buffer_bit);

10.gl.enable (CAP)

Opens the function (capability) that the CAP represents. Parameters:

Cap: Specifies the function that needs to be turned on, possibly the following: GL. Depth_test hidden face removal, g.blend blend, gl. Polygon_offset_fill Polygon SHIFT, etc.

11.gl.diable (CAP)

Closes the function that the CAP represents. Parameters:

Cap: Same as gl.enable ()

12. Deep conflict (Z fighting)

When the geometry or two surfaces of an object are very close to each other, the surface looks patchy. This phenomenon is called deep conflict. The left side is the effect of deep conflict:

WEBGL provides a mechanism called polygon offset (polygon offset) to solve this problem. This mechanism automatically adds an offset to the z-value. Starting this mechanism requires only two lines of code:

1. Start Polygon Compilation

Gl.enable (GL. Polygon_offset_fill);

2. Specify the parameters used to calculate the offset before drawing

Gl.polygonoffset (1.0, 1.0);

13.gl.polygonoffset (factor, units)

Specifies the offset on the z-value that is added to each vertex after it is drawn, and the offset is calculated as the formula "M*factor+r*units", where m represents the angle of the surface of the vertex relative to the observer's line of sight, and R indicates that the hardware is able to distinguish the minimum value of the difference between two Z-values.

14.gl.drawelements (Mode, count, type, offset)

Executes the shader, as specified in the mode parameter, according to the binding to GL. Element_array_buffer the vertex index value in the buffer to draw the graph. Parameters:

Mode: Specify how you draw to receive the following constant symbols: GL. POINTS, GL. LINES, GL. Line_strip, GL. Line_loop, GL. Triangles, GL. Triangles_strip, GL. Triangles_fan

Count: Specifies the number of vertices to draw (number of reshape)

Type: Specifies the indexed array types: GL. Unsigned_byte or Gl.unsigned_short

Offset: Specifies the position, in bytes, at which the index array begins to draw

WebGL enters the three-dimensional world