[WebGL entry] 19th, Occlusion Removal and deep testing, webgl occlusion

[WebGL entry] 19th, Occlusion Removal and deep testing, webgl occlusion

Note: The article is translated from http://wgld.org/, the original author shanbenya (doxas). If I have additional instructions in the article, I will add [lufy:]. In addition, the research on webgl is not in-depth enough, and some professional words are required, if the translation is incorrect, please correct me.

Running result of this demo

The outer side, inner side and occlusion of a polygon remove the last introduced index cache and the use of IBO for plotting. Using the index cache can reuse duplicate vertices cyclically, improving the drawing efficiency. In this post, if there is no special reason, the index cache will basically be used for Plotting through drawElements.
This is an important concept of Occlusion Removal and deep testing. The content is not that difficult.
First, let's look at Occlusion Removal. If you have read the previous article, you should know the concept of [Occlusion Removal], which has been described in the previous Article (6, vertices and polygon.
In short, Occlusion Removal is based on the inside and outside of a polygon to determine whether to draw the polygon. The Method for Determining the inside and outside of a polygon is described in detail in the previous article. Let's talk about it again to help you better understand it.
In WebGL, Occlusion Removal is invalid by default. All polygon are drawn no matter in which order the vertex is defined. However, when Occlusion Removal is effective, only polygon meeting specific conditions will be drawn, and invisible parts will not be drawn, which will weaken the burden of Coordinate Calculation and so on.

To set Occlusion Removal in WebGL to be effective, you need to input appropriate parameters like the enable function. This enable function is not only used to control Occlusion Removal, but also has many other parameters, the corresponding functions are set to valid Based on the specified parameters. If the block Removal setting is valid, You need to input the built-in constant gl. CULL_FACE. The following is an example of the Code.

> Set Occlusion Removal to a valid code example

gl.enable(gl.CULL_FACE);

On the contrary, if the corresponding function is set to invalid, the disable function is used, and the input parameters are the same as the enable function.

> Occlusion Removal's inner and lateral switching method The inner and outer sides of a polygon are determined based on the connection sequence of the vertices. This judgment benchmark is the opposite. The connection sequence of the vertices that form a polygon is clockwise and lateral, it is inside the counter-clockwise. If you want to judge it in turn, the inside is clockwise. ClockWise is collectively referred to as CW, because the English language of [ClockWise] is ClockWise, and CW is its header text. The counter-clockwise clause is referred to as CCW, because the English language of [counter-clockwise] is CounterClockWise. The frontFace function is used to change the inner and outer judgment criteria of Occlusion Removal in WebGL. The parameters are CW and CCW. Set the code clockwise to [outside]: gl. frontFace (gl. CW ); Set the clockwise to the [inner] Code: gl. frontFace (gl. CCW );

Deep Test

Next we will talk about the deep test.

The enable function used to set the Occlusion Removal just now can also be used to set the depth to be effective, and the constant gl. if DEPTH_TEST is passed as a parameter to the enable function, the deep test can be set to valid. Similarly, the disable function can be used to set it to invalid.

The default value of the deep test is invalid. What is the purpose of setting the deep test to be effective? Why do we need to set the depth to be effective?

Deep testing can be associated with the word [depth]. In 3D space, it is an essential element to represent the direction inside the direction. DirectX is called the Z test, it indicates that an object is in front of you, or is it a distance to the inside, so deep testing is necessary.

When a drawing command is issued in WebGL, the model is drawn in a simulated 3D space. At this time, according to the order of drawing, the first thing will be overwritten by the latter, this is irrelevant to whether the object is in the current or inside. In fact, objects in the distance should be overwritten by objects in the near future.

If the deep test is set to be effective, it is to evaluate the depth of the model. The items that pass the evaluation will be painted on the screen, and those that pass the evaluation will not be drawn.

Like Occlusion Removal, enable and disable functions are used to set the deep test to valid or invalid.

> Set the deep test as a valid code example

gl.enable(gl.DEPTH_TEST);

The evaluation function of the deep test is depthFunc, which requires the parameter to be specified. Generally, the following constant is used as the parameter.

> Specify the evaluation method for general deep tests.

gl.depthFunc(gl.LEQUAL);

If the built-in constant gl. LEQUAL is specified here, it will hide the content on the internal side. In turn, it will basically not be specified as another situation.

Summary

This time, we introduced Block Removal and deep testing. Both of them use the enable function to set the values to be valid and use the disable function to set the values to invalid values. The parameters of enable and disable functions are the same. Different parameters can be set to valid or invalid.

If the block Removal setting is effective, the inside polygon will not be drawn, which reduces the drawing burden. Deep testing plays an important role in simulating a 3D space with a deep concept. If it is specified as a correct evaluation method, it will be like the real world, objects close to the distance will be blocked.

In this demo, You can freely switch between the effective and invalid Occlusion Removal methods, and you can freely specify the internal test and external sides of the polygon. You can switch the status of a single checked or unselected button on the demo page, in the deep test, you can switch between valid and invalid values. You can take a look at the actual operations to gain an in-depth understanding of Occlusion Removal and deep test.

Add demo content

In the demo, a polygon with four corners is drawn, and a total of two quadrants are drawn. One is to rotate along the X axis, the other is to rotate along the Y axis, and both quadrants rotate around the origin, if you set the test to be effective, the Quadrilateral inside will be covered by the Quadrilateral outside.

If you look at the demo code carefully, you should know that the two quadrants are composed of a vertical triangle and an external triangle. In this way, the upper and lower parts of the polygon can only be drawn if the Occlusion Removal is set to valid.

The connection sequence of the vertex. Let's take a look at the defined index cache array. The following is the code.

> Code for defining the Index Array

// Array var position = [0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0,-0.0, 0.0] for storing vertex attributes; // array for storing vertex indexes var index = [0, 1, 2, 1, 2, 3];

Take a look at the figure and code above, and then compare it to see that it defines two triangles for the inside and outside to generate a quadrilateral. This is specifically defined to test Occlusion Removal. Normally, when creating a 3D model, it will not be defined by mixing the inner side and the outer side like this. Otherwise, the model will be perforated if it is blocked.

This demo can be tested through the following link.

Demo of Occlusion Removal and deep Test

Http://wgld.org/s/sample_007/

Reprinted Please note: