Efficient Spatial Anti-Aliasing Rendering for Line Joins on Vector Maps
EE FFICIENT S PATIAL A NTI -A LIASING R ENDERINGFOR L INE J OINS ON V ECTOR M APS
Chaoyang He ∗ Department of Computer ScienceUniversity of Southern CaliforniaLos Angeles, CA [email protected]
Ming Li
Department of Maps PlatformTencentShenzhen, China [email protected] A BSTRACT
The spatial anti-aliasing technique for line joins (intersections of the road segments) on vector maps isexclusively crucial to visual experience and system performance. Due to limitations of OpenGL API,one common practice to achieve the anti-aliased effect is splicing multiple triangles at varying scalelevels to approximate the fan-shaped line joins. However, this approximation inevitably producessome unreality, and the system rendering performance is not optimal. To circumvent these drawbacks,in this paper, we propose a simple but efficient algorithm which uses only two triangles to substitutethe multiple triangles approximation and then renders a realistic fan-shaped curve with alpha operationbased on geometrical relation computing. Our experiment shows it has advantages of a realisticanti-aliasing effect, less memory cost, higher frame rate, and drawing line joins without overlappingrendering. Our proposed spatial anti-aliasing technique has been widely used in Internet Maps suchas Tencent Mobile Maps and Tencent Automotive Maps. K eywords Spatial Anti-Aliasing · Map Rendering · Computer Graphics
In the setting of the smartphone operating system (Android, iOS) and the automotive operating system (Linux, Android,QNX), digital vector maps, a significant component determines the visual experience and system performance ingeographic information system (GIS), is built based on OpenGL ES library. It uses points, lines and polygons (areas) asvector data to render real-world map objects such as POIs (Point of Interest), roads, parks, rivers and houses. Duringthe OpenGL rendering process, line joins are used to render the road segment intersections, as shown in Figure 1 (a).The anti-aliasing technique for these line joins is exclusively important since the maps is mainly constituted by roadnetworks, and map users rely on them for route navigation. A better anti-aliasing performance can improve the level ofvisual verisimilitude and simultaneously optimize the system performance, including memory overhead and renderingframe rate.Drawing lines in OpenGL is unsatisfactory. First, the
GL_LINES
API [1] has many limitations: it does not supportline joins, line caps, non-integer line widths, widths larger than 10px, or varying widths, which makes it unsuitable forhigh-quality vector maps. Additionally, OpenGL’s anti-aliasing (multisample anti-aliasing [2]) is not reliably presenton all devices and generally is of poor quality. As an alternative, for vector maps rendering, one common approachto achieve the anti-aliased effect is splicing multiple triangles at varying scale levels to approximate the fan-shapedline join and then fitting these triangles with texture or color with gradients at the edge. As shown in Figure 1 (b),edge gradients in multiple triangles jointly provide the anti-aliasing effect for line joins. However, one defect of thisapproach is that the approximation inevitably produces some unreality, which does not achieve perfect line join arc.Moreover, the system rendering performance is not optimal. When there are many road intersections on the screen,rendering multiple triangles requires multiple draw calls, which lowers the frame-rate and requires much memory tocache vertices. There also exists overlapping rendering in the intersection part of two line segments. ∗ a r X i v : . [ c s . G R ] J un a) A line join, rendering the intersection of road segments (b) The common method to render the line joins Figure 1: Line Joins on Vector MapsIn this paper, we propose a simple but efficient algorithm to address these drawbacks. Our main idea is using onlytwo triangles to substitute the multiple triangles approximation and then render a realistic fan-shaped curve withalpha operation based on geometrical relation computing. The main advantages of our method are: 1. It implementsanti-aliasing with real curve, creating smooth effect for line joins. 2. It significantly decreases the number of triangles toform line joins, which means less draw calls, leading to less memory cost and higher frame rate. 3. The simple designof this method perfectly implement line joins without overlapping rendering.
The OpenGL Pipeline is shown in Figure 2. It consists of the following main stages[3]: (1) Vertex Shader (VertexProcessing): Process and transform individual vertices. These vertices define the boundaries of primitives which arebasic drawing shapes like triangles, lines, and points. (2) Rasterization: Convert each primitive (connected vertices)into a set of fragments. A fragment can be treated as a pixel in 3D spaces, which is aligned with the pixel grid, withattributes such as position, color and texture. (3) Fragment Shader (Fragment Processing): Process individual fragments.(4) Output Merging: Combine the fragments of all primitives (in 3D space) into 2D color-pixel for the display.Figure 2: OpenGL Rendering PipelineTo be more specific, with regard to the process of rendering line segments onto the screen, a line segment is split intotriangles, given its width, geographic coordinates of the triangle and anti-aliasing attribute values. Then, vertex dataof the triangles including geographic coordinates, anti-aliasing properties are transmitted to vertex shader, creatingmemory on GPU for storing our vertex data. It follows that each triangle is rasterized into triangle fragments and passedto the fragment shader for processing, in which the anti-aliasing operation is performed. Finally, the GPU combines theresults of the previous procedure to render it on the screen.Vertex Processing and Fragment Processing are programmable. The language in which shaders are programmeddepends on the target environment [4]. The official OpenGL and OpenGL ES shading language is OpenGL ShadingLanguage, also known as GLSL. In this work, to optimize spatial anti-aliasing rendering for line joins on vector maps,our algorithm runs on the OpenGL rendering pipeline through shader programming (vertex shader and fragment shader).
For the main body of the line segment, as shown in Figure 3 (a), a line segment parallel to the X-axis is denoted asline segment E , a unit vector parallel to E and oriented the x-axis direction is denoted as a , and another line segment2blique to the X-axis is denoted as line segment F , unit vector parallel to F but in the opposite direction to the x-axis isreferred as vector b . Given the line width of W , the length of half a line segment is W . Here, by adding ( − ∗ a ∗ W to b ∗ W , the vector (cid:126)AB can be easily obtained. Then, in the case where the coordinates of the vertices are known, thetwo line segments can be split into triangles with number ranging from 1 to 6, and the subsequent triangle fragmentscan be directly rendered.For the common practice, the line join is often fitted by multiple triangles, which adds a lot of extra triangle overhead,and the arc is not natural. Different from this method, our proposed method utilizes the geometric relation that thecoordinate of the point C in the intersection extension line of E and F can be calculated. Then, Figure 3 (b) is achieved. (a) (b)(c) (d) Figure 3: Geometric Schematic of the Proposed Spatial Anti-aliasing Rendering AlgorithmBased on Figure3 (b), for the main part of the line segments, anti-aliasing is implemented by alpha gradient processing.For triangle 1, a threshold N is defined below point A, and alpha gradient processing is performed in the orange region,while the rest retains alpha = 1. Since alpha gradient processing is only performed in Y direction, the pre-storedanti-aliasing property is assigned to the vertex triangle, wherein the X-axis direction attribute is 0, and the Y-axisdirection attribute is set to -1, 1 respectively, where 1 represents Y-axis attribute of point A and B. Thus, the trianglesegments will only have alpha interpolation in the Y-axis direction.For the line joins, as shown in figure, the anti-aliasing attribute pre-stored in the vertex triangle, e.g. triangle ABC,is also assigned. Point A, B, C are assigned to (0, 0), (0, 1), (N, 1) respectively, where N dependents on the cornerangle. In the rasterization process fragment shader, all fragments which have the distance of 1 to point A form an arc.In fragment shader, we also define an anti-aliasing threshold N which takes value between 0 and 1. The anti-aliasingattribute of the fragments can be assigned by calculating their distance d to point A. If d < N , then its alpha valueis 1 which means opaque. If N < d < , then the fragment is linearly interpolated by d, its alpha value ranges from0 to 1 which means the gradient transparent; If d > , then its alpha is 0, which means transparent. Finally, for theintersection of line segments, it display as a real arc.Therefore, in the vector map rendering scene, for the above algorithm steps, spatial anti-aliasing rendering effect forline joins can be achieved through the vertex shader and fragment shader algorithm.3 Experiment
We tested the performance of the existing algorithm and our proposed algorithm on the mobile map. In terms of thevisual effect, as shown in the figure 4, we can find that the improved algorithm avoids the problem of repeated cornerdrawing and the line join is more realistic. (a) Figure A (b) Figure B
Figure 4: Rendering Effect of the Proposed MethodIn terms of system performance, the optimization of the draw call number can reduce the GPU memory and increaseframe rate. We selected 10 road networks with different density in Beijing, China for rendering testing, recordingtheir draw calls and comparing the average value. The original method has different numbers of triangles interpolatedbecause of different corner angles, so the number of draw calls in each scene is different. Experiments show that ouralgorithm has fewer draw calls. Table 1: System Performance ComparisonMethod Average Draw CallsFitting Line Joins with Triangles 33.7Our Proposed Method 12 we proposed a simple but efficient algorithm to optimize the spatial anti-aliasing rendering. It uses only two trianglesto substitute the multiple triangles approximation and then renders a realistic fan-shaped curve with alpha operationbased on geometrical relation computing. We conduct experimental evaluation on the real-world mobile map system. Itshows our algorithm has advantages of a realistic anti-aliasing effect, decreasing the number of triangles, leading to lessmemory cost and higher frame rate, and drawing line joins without overlapping rendering.