Render High‑Quality Lines in WebGL Maps: Width, Joins, Dashes & Anti‑Aliasing

Lines are fundamental map elements, but drawing them with WebGL is tricky.

Why not use native WebGL methods

WebGL supports points, lines, and triangles, yet native lines lack custom width, lineJoin/lineCap, dash patterns, and have poor anti‑aliasing performance.

No custom line width

No lineJoin and lineCap

No dash support

Unsatisfactory anti‑aliasing

Implementation approach

For lines wider than 1 pixel, decompose them into triangles.

By extending the line vertices along the normal direction by half the desired width, a rectangle is formed, which can be rendered as two triangles, achieving a line width greater than 1.

Two implementation options exist:

Calculate the expanded rectangle vertices in JavaScript, then pass the coordinates to the shader for direct triangle rendering.

Pass original coordinates, line width, and a scale factor to the shader; the vertex shader computes the final triangle vertices each frame.

Option 1 caches the computed data, causing line width to change with map zoom. Option 2 recomputes vertices in the shader per frame, keeping line width consistent, so option 2 is preferred.

When multiple connected segments are present, simple decomposition leaves gaps at corners.

The gap appears because the corner vertices are not properly joined, requiring custom lineJoin handling.

lineJoin

Three lineJoin styles are supported: miter (sharp), bevel, and round.

Sharp (miter)

Implementation moves the outer vertex to the miter point, calculated via trigonometry, and creates triangles that fill the corner.

Round

Approximate a round join by inserting an intermediate point halfway around the corner and connecting it with two triangles, which is sufficient for thin map lines.

Bevel

Bevel joins are rendered by generating the appropriate index order (e.g., 023) without adding extra vertices.

Dash patterns

Texture

Each dash pattern has a specific on/off ratio (e.g., 1:1, 3:1). A 1‑pixel‑high canvas can generate a texture where the left half is opaque (>0.5 alpha) and the right half is transparent (<0.5 alpha). The texture is stored as an RGBA Uint8Array.

For a 3:1 dash, the left two‑thirds are opaque and the right one‑third is transparent.

Rendering

Dash rendering steps:

Store the cumulative length of the line up to each vertex.

Apply the dash texture using gl.REPEAT.

Compute texture coordinates from the cumulative length and texture size.

In the fragment shader, discard fragments with alpha < 0.5, creating the dash effect.

Anti‑aliasing

WebGL’s built‑in anti‑aliasing is costly, so a custom solution is used.

The technique expands the line by a feather width and gradually reduces alpha from the inner edge to the outer edge, creating a smooth edge.

Effect comparison

Without anti‑aliasing:

With anti‑aliasing:

Summary

Native WebGL line drawing has several limitations.

Decomposing lines into triangles enables widths greater than 1 pixel.

Passing original coordinates, line width, and a scale factor to the vertex shader keeps line width consistent during zoom.

lineJoin corners are generated via trigonometric calculations and appropriate triangle indices.

Dash patterns are achieved through texture mapping with transparent/opaque segments.

Custom anti‑aliasing is implemented by feathering line edges and fading alpha.