search

anvaka / city-roads

Visualization of all roads within any city
https://anvaka.github.io/city-roads/
MIT License
6k stars 445 forks source link

customize line thickness #21

Open pkra opened 4 years ago

pkra commented 4 years ago

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

pkra commented 4 years ago

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

anvaka commented 4 years ago

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:

image

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 commented 4 years ago

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 commented 4 years ago

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.