search

openstreetmap / iD

🆔 The easy-to-use OpenStreetMap editor in JavaScript.
https://www.openstreetmap.org/edit?editor=id
ISC License
3.34k stars 1.2k forks source link

Explore the use of canvas for some drawing instead of svg #3741

Open bhousel opened 7 years ago

bhousel commented 7 years ago

D3 v4 now has better support for rendering to canvas. We should try to move some of our svg elements to canvas (e.g. filled areas) to see if we get a performance boost.

cc @batpad @kepta @geohacker

bhousel commented 7 years ago

For inspiration:

https://bocoup.com/blog/smoothly-animate-thousands-of-points-with-html5-canvas-and-d3

https://medium.freecodecamp.com/d3-and-canvas-in-3-steps-8505c8b27444

Anton-Latukha commented 7 years ago

Maybe it is possible to go straight to regl.

Quote from guy from first link you mentioned:

Using this approach with canvas can only get us so far. As you exceed 5,000 points and approach closer to 10,000 it is common to see degradation in performance. If you really need to animate that many points flying around, your best bet is to turn to WebGL and have shaders do the work for you. The regl library provides a nice interface to working with shaders and can be used effectively for this purpose, but that’s a topic for another day!

UPDATE: That blog post has now been written. Check out how to animate 100,000 points in regl for details.

Link to this his post: https://peterbeshai.com/beautifully-animate-points-with-webgl-and-regl.html

It looks realistically. Everything on Earth supports WebGL now.

Anton-Latukha commented 7 years ago

It looks like project matured to truly stable form year ago (graph)[https://github.com/regl-project/regl/graphs/contributors].

It may look like it died-out. But no, - it's maturity of Web-based library. Main developer reviews PRs and bugreports. And many issues/PRs closed due to functionality already present. Or discussions goes on. PRs get merged. He responds to messages: regl-project/regl#424, guy there says that it uses it in serious production and it is good for him.

But looks like main developer not eager to write new code. Maybe he busy, or life. He reviews, merges, writes responses.

Anton-Latukha commented 7 years ago

HTML5Test.com results

Anton-Latukha commented 6 years ago

There is a lot of superb WebGL choices: (https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc)

bhousel commented 6 years ago

d3-jetpack has a thing to help with sharing coordinate systems between svg and canvas: https://bl.ocks.org/1wheel/f9b9909f10ed0f01780c5338ad38bd50