[WebGL Primer] six, vertices and polygons

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.

something that can be painted in three-dimensional space.

To say what can be depicted in the WebGL world, everything can be painted. And the most basic of the painting is the following kinds of things.

? dot

? line segments

? triangles

Although a rectangular drawing is provided in OpenGL, there are basically only three types that can be drawn in WebGL. Unlike the two-dimensional world, such as an IMG tag in HTML, it is not possible to simply draw a rectangular image on the screen.

Not to mention the dots and lines, basically, WebGL is using triangles to draw something on the screen. This triangle is a polygon, and a polygon is at least a triangle that draws three vertices, so a polygon can be drawn with a minimum of three vertices.

Vertex is a point that exists in three-dimensional space. Of course, this point needs to have a coordinate position. The horizontal axis of the vertex is x, the ordinate is Y, and the depth is Z. A polygon is formed by connecting points that contain this information.

In recent years, a very realistic 3D game, or Disney, organizing activities, such as 3D animation, is actually doing the same thing. With a large number of triangles that you can't imagine, you've created incredibly beautiful characters and scenes.

To draw a model of a complex construct, you need to prepare a large number of very small polygons. The fewer polygons you use, the more angular the model is drawn (as Virtua Fighter first generation). To draw a beautiful model, you need more polygons, of course, the number of these polygons increases, the fixed-point number will multiply exponentially, the greater the load of the coordinate calculation.

3D rendering the world's difficulty is that the number of vertices, the number of polygons increased to more appropriate. Too many vertices and polygons, processing speed may not keep up, too little, the visual effect will be reduced.

If it is an abstract design, the number of vertices and the number of polygons will be greatly reduced, but it is more difficult to talk about design, really annoying.

connection order and occlusion culling of vertices

You use vertices and lines to join together to draw polygons, which are connected in order. Connecting clockwise or counterclockwise, this order is actually very important.

To say this is why, for example, to draw a sphere, the sphere, no matter where you take the photograph, it must be a ball. And, of course, we can only see half of it. The moon does not see the second half of the same truth, the first half of the sphere is hidden outside the surface.

Hidden parts do not need to be drawn, and if this part is calculated in coordinate, then it is invalid. The processing of the Inner Sphere is less than half the amount of processing if it is not executed, so the most common way to lighten the burden is to not see what is in the 3D rendering world.

The inside of something that does not draw the mechanism is called occlusion culling. OpenGL and WebGL are, of course, able to set occlusion culling. If occlusion culling is set, only polygons visible on the outside can be drawn, and all polygons on the inside are no longer drawn.

But, try to think, How is the polygon judged on the inside or outside?

In fact, it is the connection order of the vertices that we have just said to judge the benchmark. The polygons that connect the vertices clockwise are on the outer side, and the polygons connected counterclockwise are inside. Therefore, when defining the vertex information, pay special attention to it. If occlusion culling is set, there should be a polygon at some point, but it will not be drawn at all.

Summary

A vertex is any point on a three-dimensional space that contains at least a coordinate intelligence, and three points are connected by a line to represent a triangular polygon. The polygon is divided into the inner and outer sides according to the vertex connection order, which can be used for occlusion culling.

Next, the actual rendering will begin with the definition of the vertex's intelligence. At this point, the order of the vertices, occlusion culling and other settings become very important, so make sure to thoroughly understand this content.

Next time, start preparing the actual rendering environment.

reprint please specify: from Lufy_legend blog Http://blog.csdn.net/lufy_legend