Deep cache of WebGL

Deep cache (depth buffer) Note:

Some necessary steps are required when you use webgl to draw objects. Sort by level:

1. Run the vertex coloring tool on all vertices to draw the position of the object.
2. Linearly perform interpolation between vertices to tell which pieces of the vertex need to be colored (at this time, you can treat the pieces as pixels.
3. For each cell, run the Cell Coloring tool to draw its color.
4. Write it into the frame buffer.

In the end, frame buffering is the content displayed on the screen. But what happens when you need to draw two objects? For example, what if you need to draw two squares of the same size, one center at (,-5) and the other center at (,-10? You certainly do not want the second square to cover the first square because it is farther away and should be blocked.

Webgl uses deep cache to handle such a situation. The depth values related to the Z value will also be stored when the meta-coloring tool processes the color values of the element and rgba and writes them into the frame buffer,But this value is not exactly the same as the Z value.. (This is not surprising because the deep cache is often called the Z cache .)

Webgl always sorts all Z values from 0 to 1, 0 is the closest, and 1 is the farthest. All you need to know now is,The greater the value of Z-buffer, the farther the object is from,It is opposite to our normal coordinate system.

At this point, we should mention that the corresponding code is cached in depth.

Gl. Enable (GL. depth_test); // reminds the system to pay attention to the deep cache.

Gl. depthfunc (GL. Less); // If the Z value of the element is smaller than the current value, a new value is used instead of the original value.