JavaScript WebGL draw order

Introduction

When I tried some effects in the three-dimensional related concepts of JavaScript WebGL , I encountered a new problem, so I went to check the information and summarized it after trying it myself.

• Origin
• My GitHub

draw order

The previous two-dimensional drawing order did not produce obvious bad effects, and now the three-dimensional drawing has a greater impact.

Let's first look at the effect of the same two-dimensional set of vertices in different orders:

• 2D face order example 1
• 2D face order example 2

The colors of the faces are always the same, but the order has changed. It is found that WebGL will draw in the order in the buffer by default , that is, the graphics drawn later will overwrite the graphics drawn first. This is like a layer of stickers, which is more in line with general cognition, so I didn't find anything obviously wrong when drawing in two dimensions.

Think about the three-dimensional drawing order first: the three-dimensional vertex coordinates have three components, and the third component represents depth information on the z-axis. The default vertical screen inward is the negative direction, then the larger the z value, the closer to the screen, since There is a basis for distinction, and it should be fine to draw directly in this order. Actual try:

• 3D face order example 1
• 3D face order example 2

It is found that the setting of the z component in Example 2 has no effect, and it is still the same as the two-dimensional drawing surface order. Check the information and say to turn on the hidden face removal function:

 gl.enable(gl.DEPTH_TEST)

Let's take a look at Example 2. Turn on DEPTH_TEST , and find that it still has no effect. Find some examples on the Internet and compare them. It is found that projection is needed to see the effect. See Example 2 to turn on DEPTH_TEST and produce the correct projection .

deep conflict

After the hidden surface removal function is turned on, when two very close surfaces are drawn, abnormal display may occur. This phenomenon is called deep conflict (Z fighting) . Here are two examples of this phenomenon:

• drawArrays performs a drawing, which contains two faces Example 1
• drawArrays performs two draws, two faces drawn separately Example 2

The case of example 1 is to draw multiple faces at once, which is easier to solve by adjusting the z-component.

In the case of example 2, multiple faces are drawn multiple times, and the uncertainty is relatively stronger. At this time, polygon offset can be used to solve it. Specify an offset between draws:

 // 代码省略
  gl.enable(gl.POLYGON_OFFSET_FILL);
  gl.drawArrays(gl.TRIANGLES, 0, 3); // 开启多边形偏移
  gl.polygonOffset(1, 1); // 指定偏移
  gl.drawArrays(gl.TRIANGLES, 3, 3);

Here is an example .

polygonOffset(factor, units) specifies the offset added to the z value of each vertex. Both parameters are scale factors. The formula for the final value is factor × DZ + r × units, where DZ is the relative value of the surface where the vertex is located. r is the minimum amount of offset that the device can resolve, based on the viewer's line-of-sight angle. This method is useful for rendering hidden line images, applying decals to surfaces, and rendering stereographics with highlighted edges.

References

• polygonOffset mdn
• WebGL Programming Guide Online Edition