About the rendering

[wiltchamberian]

In fact, this is not an issue, it is a question. Sorry for that as I hope to find a shortcut to get some information from the author of this amazing library.

I tried to use it at https://mapshaper.org/, and import a 150M .geojson files Then I found it is really fast and there are no delays when I zoom or translate. After I looked at the GPU, I found it is nearly 0 which is unbelievable.

So, simply said, how did you render the big .geojson file so fast? I can't figure it all. In fact it's a vector graphic with more than one thousand points. When I use three.js(webgl) to render the .geojson with advanced tech such as batching rendering. It still used nearly 100% gpu.

So how did you implement the rendering?

[mbloch]

Hi! thanks for the compliment :)

Mapshaper uses the Canvas 2D API for rendering, which typically does use the GPU.

One thing that helps speed up rendering is displaying polygon outlines rather than filled polygons. If you use the -style command to add a fill to a polygon layer, then the rendering speed is much slower.

Also, mapshaper does some on-the-fly simplification to reduce the number of vertices that it draws when rendering large datasets. Only sub-pixel details are removed this way, it shouldn't affect the on-screen appearance of your data.

[wiltchamberian]

Sounds interesting, but still amazing, after I asked the question, I guessed it may be because of not filling the polygons, I found it supports simplifying the vertex, and there is a slider used for the level of simplification, with algorithms like -Douglas-Peucker. But if I move the slider to 100%(not simplified), does the library still use some on-fly simplification? could you give more hints on that? for rendering the outline of polygons, did you use tech such as batching all polygons to one buffer to gpu or something like that? And I just tried to render the same data on my computer with outline only, (batching all to a buffer with Three.js) but it still used about 76% gpu resource, of course I didn't simplify anything, so is it normal in your sight? Sorry for so many questions, as I just want to figure out anything. Still amazing about the nearly 0% of gpu resources.

[mbloch]

Hi... yes, even when the slider is at 100% simplification, mapshaper still uses simplification internally for rendering, when appropriate.

Mapshaper uses batching with the 2D canvas API (the api functions ctx.fill() and ctx.stroke() are usually called after some number of paths are drawn). I found that this generally sped up rendering. I guess it's up to the browser's Canvas renderer to decide how this gets converted to GPU operations.