customize line thickness

[pkra]

It would be great to allow users to customize line-thickness (alongside colors) to improve contrast and to enable more variation.

[pkra]

Also: this is a wonderful tool -- thank you!

[anvaka]

Thank you! I'd totally love to do this, but I don't know how to do it efficiently.

Right now it is not uncommon to have a road graph with 100,000+ segments, each encoded as a pair of coordinates (x, y).

To render segments I'm using gl.LINES draw type, which is very fast, and needs just two points per segment.

The only way that I know how to add thickness to the line is via triangulation. We turn each line segment into a rectangle, and then split it into two triangles. This method would require much more memory and a little bit more pre-processing.

Even if we don't consider memory consumption a problem, there is another thing that I haven't solved yet. My current implementation of thick lines doesn't have smooth transition between connected segments, which gives very jagged experience on high zoom levels:

I'm learning webgl myself, and if there are some good tricks that could help us get thick lines in the most efficient manner - please share!

[pkra]

Thanks for taking the time to respond, @anvaka ! I don't know much about webgl, I'm afraid. But I did notice that the SVG export is relatively easy to customize afterwards (by increasing the stroke-width of the <g> wrapping around the paths).

[anvaka]

Found a solution that doesn't consume as much CPU power as my original version. You can try it now, by loading a city, and then in the browser's developer tools, enter this command:

scene.queryLayer().lineWidth = 2; // Sets new width to lines.