Preface
Based on UE4/Unity to draw the basic elements of the map-line (part 1)
Based on UE4/Unity to draw the basic elements of the map-line (part 2)
After drawing the lines on the map, the next step is to draw the surface and the volume:
As one of the basic elements of map rendering, the surface can represent various forms of regions in the map, such as sea surface and green space. Surface data is usually stored in the form of discrete point strings, so the most concerned thing when rendering is how to display it as a closed figure.
A volume can be understood as a surface with a height, which represents various buildings in a map, and is usually obtained by processing the top surface data and height data.
This article records the process of drawing surfaces and volumes and solutions to flicker problems.
Draw polygonal area surface
Surface data is usually stored in the form of discrete point strings, and the principle of drawing a surface is similar to that of a line. The basic unit of rendering is triangles. Lines are rendered by constructing triangles by expanding the line width, and faces are rendered by dividing the polygon into multiple triangles.
The process of splitting into triangles is called triangulation. The commonly used triangulation algorithm is Ear Clipping. The more mature solution is Mapbox's earcut. For polygons with [formula] vertices, the time complexity is For the [formula], it is worth noting that the solution of triangulation may not be unique. Any kind of subdivision method can render the surface, but the small triangle is easier to draw the same pixel in the surface multiple times, resulting in Overdraw, so some adjustments in the order of division according to polygon features can be used as an optimization point.
After the polygon area is divided into sections, after specifying the color of each vertex, a solid-color surface can be drawn. Similar to the Z-fighting problem of road lines, the area surface also needs to deal with the problem of overlapping display at the same height. At the same time, the two-dimensional road line and the regional plane are also at the same height. Therefore, it is necessary to consider the hierarchical relationship and place all road lines above the regional plane. After the unified processing is completed, a two-dimensional map board can be obtained.
Drawing a polygonal building
After the bottom plate of the two-dimensional map is completed, it is the turn of the building blocks on the map. In order to reduce the amount of data, the usual storage method is the top surface point string and its corresponding uplift height, and the vertices are added to form a closed body during rendering.
The rendering process of the top surface is the same as that of the closed area. The side surface is drawn according to the height of the building. A rectangle is rendered between every two adjacent vertices to form the side surface of the closed body. In order to reduce the number of drawing times, only the side facing the outside is usually drawn, the bottom surface You can't see it under normal viewing angle, and you can choose whether to draw or not.
The rendering of the building body only has more side surfaces than the regional surface. The logic is relatively simple. After all the triangle data is processed, the vertex color can be configured to complete the rendering.
Strange building Z-fighting problem
In theory, the top surface of the building volume data usually does not overlap, so there will be no Z-Fighting problem after unplugging the rendering, but strangely, after rendering, it is still found that some volumes have side flickering problems. Through the investigation of the whole link, it is found that the problem is the polygon data.
When triangulation is used, there is a precondition: the object to be used must be a simple polygon, that is, any two sides in the polygon can only intersect at the vertex. The following figure (a) is a simple polygon that satisfies the definition. In figure (b), the sides 01 and 23 of the polygon intersect at non-vertex, so it is a non-simple polygon.
For non-simple polygons, the use of triangulation can only get a satisfactory result, but its correctness cannot be guaranteed. From the triangulation result of the non-simple polygon formed by the four vertices in the figure below, it can be seen that the vertices will be lost and wrong triangles will be generated when the polygon is rendered, and the true data cannot be restored.
According to this idea, the existing data has been detected for edge intersection, and there is indeed a small part of polygons that are not simple polygons. The elevation of the body element draws a rectangle between each group of adjacent vertices according to the original data, which will cause problems. Take the above non-simple polygon (b) as an example. Side 12 is pulled up to create a rectangle 1245, and side 23 is pulled up to create a rectangle 2364. The two side rectangles are completely overlapped on the face 1245. When the facade is pasted with different textures, Will produce Z-Fighting phenomenon. At the same time, because the facade is only drawn towards the outside, the face 1245 will disappear when viewed from the opposite side, producing a very strange effect.
In view of this problem, the easier solutions to think of are mainly the following three:
1. Direct filtration, simple and rude.
2. Calculate the circumscribed rectangle based on the polygon to reduce details
3. Remove redundant vertices according to the triangulation results and regenerate simple polygons
The above three schemes preserve the details of polygons from less to more, but they do not completely restore the real data. Especially for some complex buildings, the error of a certain surface will lead to the wrong rendering result of the final assembly. Therefore, the ideal way is to repair the non-simple polygon, decompose it into multiple simple polygons, and render the details separately.
Judgment and repair of simple polygon
The definition of a simple polygon, it is easy to think of the use of violence determination Solution: A 
polygon has 
sides, each side only and the other 
strip adjacent edges is not determined whether the intersection can achieve the object, its time complexity is 
, for It is sufficient for static data that only needs to be cleaned once. However, for dynamic data that needs to be processed in real time, it needs to traverse all combinations, especially for the case where there may only be a small number of intersection points, and there are too many redundant calculations. Therefore, an intersection determination algorithm with lower time complexity can be introduced for processing.
For a non-simple polygon, after decomposing it into multiple simple polygons, it is enough to draw all the graphics whose area is not 0. This kind of scheme can restore the original data to the greatest extent and avoid the flicker problem.
summary
After solving the flicker problem caused by the data, you can use solid colors or texture maps to decorate the sides and top of the building, with the sky box and some solid color elements to decorate, which can already imitate the effect of the city. However, in the current architectural rendering method, the architectural details can only be expressed in the form of textures. If more detailed expression effects are required, such as glass window structure, roof facilities, etc., additional triangles need to be added for presentation.
Author: Programmer A Tu
Link: https://zhuanlan.zhihu.com/p/266870185
Source: Zhihu
The copyright belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.