[WebGL Primer] 19, occlusion culling and depth testing

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.

The results of this demo run

outer, inner, and occlusion culling of polygonsThe index cache was last introduced, and drawing using IBO, using the index cache to iterate through duplicate vertices can improve drawing efficiency. After this article, if there is no special reason, basically will use the index cache, through the drawelements to draw.
This time, occlusion culling and depth testing are two important concepts, and the content is not that difficult.
First look at occlusion culling, if you have seen previous articles, you should know the concept of [occlusion culling], previous articles (six, vertices and polygons) have been described.
To put it simply, occlusion culling is to determine whether to draw this polygon based on the inner and outer sides of the polygon. The method of judging the inner and outer sides of polygons is explained in detail in the previous article. To deepen the impression, say it again.
In WebGL, occlusion culling is not valid by default, and all polygons are drawn regardless of the order in which the vertices are defined. However, when occlusion culling is effective, only polygons that meet certain conditions will be drawn and invisible parts will not be drawn, which will weaken the burden of coordinate calculations.

In order to set the occlusion culling in WebGL as valid, you need to pass in the appropriate parameters like the Enable function, which is not only used to control occlusion culling, but also has many other parameters, which are set to be valid according to the specified parameters. If occlusion culling is set to valid, you need to pass in the built-in constant GL. Cull_face, here is the code example.

> Set occlusion culling to a valid code example

Gl.enable (GL. Cull_face);

Conversely, if the corresponding function is set to invalid, using the Disable function, the passed in parameters are the same as the Enable function.

method of internal and lateral switching of >> occlusion culling The inner and outer sides of the polygon are judged according to the order in which the vertices are connected, and this judgment datum in turn is the same, and the order in which the vertices of the polygon is formed is the outer side when the vertex is clockwise, the counter-clockwise is the inside, and if you want to reverse it, it becomes inside. Clockwise is referred to as CW, because [clockwise] English is CLOCKWISE,CW is its head text. and counterclockwise is referred to as CCW, because [counterclockwise] English is counterclockwise. The function that alters the inner and outer sides of the occlusion culling in WebGL is Frontface, and the parameters are the CW and CCW just mentioned. Set clockwise to [outside] code: Gl.frontface (GL. CW); Set clockwise to [inside] code: GL.FRONTFACE (GL. CCW);

Depth Test

Then, the depth test.

Just mentioned the set occlusion culling function enable, can also be used to set the depth of validity, will be constant GL. Depth_test is passed as a parameter to the Enable function, the depth test can be set to valid, and the Disable function can be used to set it to be invalid.

The default value of the depth test is not valid, so what is the use of setting the depth test to be effective, and why is the setting depth valid?

Depth testing can be associated with the term [depth], the three-dimensional space in the direction of the orientation is an essential element, DirectX is called the Z test, to indicate whether an object in front of you, or a distance, so the depth test is necessary.

When you make a drawing command in WebGL, you draw the model in a simulated three-dimensional space, and then, based on the order in which it is drawn, the first thing that is drawn will be overwritten by what is then drawn, which is not related to whether the object is present or inside. In fact, objects in the distance should be covered by objects that are near.

Setting the depth test to effective, is to evaluate the depth of the model, the evaluation of the qualified things will be drawn to the screen, unqualified things will not be drawn.

As with the occlusion culling just now, setting the depth test to valid or invalid uses the Enable function and the Disable function.

> Set the depth test to a valid code example

Gl.enable (GL. Depth_test);

The evaluation function for the depth test is depthfunc, which requires specifying parameters, typically using the following constants as parameters.

> Specifying evaluation methods for general depth testing

Gl.depthfunc (GL. LEqual);

The built-in constant GL is specified here. LEqual words, will be in the side of the things hidden, in turn think about, basically will not be designated as another situation.

Summary

This time, the occlusion culling and depth test are introduced, regardless of whether the use of the Enable function to set the valid, use the Disable function to set the invalid. Enable and disable parameters of the two functions are consistent, depending on the parameters passed in, you can set various properties to be valid or invalid.

If the occlusion culling is set to valid, the inner polygon will not be painted, thus reducing the burden on the drawing. Depth testing plays a very important role in simulating a three-dimensional space with a deep concept, and is designated as the correct evaluation method, so that near objects will be able to block distant objects in the same way as in the real world.

This time to do the demo, you can freely switch the effective and invalid occlusion culling, and can freely specify the inner and outer side of the polygon, the single box of the demo page is selected or not selected, you can switch the corresponding state, and the depth test can be free to switch between valid or invalid, can be observed by the actual operation, Get an in-depth look at occlusion culling and depth testing.

content Additions to the demo

A four-corner polygon is drawn in the demo, a total of two quads are drawn, one is rotated along the x-axis, the other is rotated along the y-axis, and the two quads are rotated around the origin, and the depth test is set to be valid, and the quads are obscured by the outer quadrilateral.

Look closely at the code of the demo, you should be able to know that the two quads are a face-to-side, a triangle facing the outer side of the composition. In this case, if the occlusion culling is set to valid, the upper and lower parts of the polygon can be drawn only one.

The connection order of the vertices, and look at the array of defined index caches, you see, here's the code.

> code that defines an array of indexes

Save array of vertex properties var position = [     0.0,  1.0,  0.0,     1.0,  0.0,  0.0,    -1.0,  0.0,  0.0,     0.0, -1.0,  0.0];//The array that holds the index of the vertex var index = [    0, 1, 2,    1, 2, 3];

Take a look at the diagram and code above, and then compare it to the definition of two triangles facing the inner and outer sides to create the quadrilateral. This is specifically defined for the purpose of testing occlusion culling. Normally, when making 3D models, it is not like this will be mixed in the side and outside the definition, otherwise with occlusion culling, the model will appear perforated.

This demo can be tested with the link below.

Demo for occlusion culling and depth testing

http://wgld.org/s/sample_007/

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