Electricitymap-contrib: Arrows are slowing down the map

[corradio]

I've noticed that removing arrows speed up the map significantly, especially when the wind is present.
Maybe we should consider drawing them in canvas, or in webgl

[systemcatch]

This includes the import/export arrows right? Maybe removing the animation could help?

[corradio]

It would, but it would also make me sad :(

On Tue 11 Sep 2018 at 12:43, Chris [e-mail] wrote:

This includes the import/export arrows right? Maybe removing the animation
could help?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tmrowco/electricitymap-contrib/issues/1590#issuecomment-420230122,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABlEKGLK1DAA5BMG6gmnmQPS4Ixmj4XAks5uZ5PkgaJpZM4WVFzd
.

[systemcatch]

Some random ideas/questions.

• Is every arrow a separate object?
• Are the arrows redrawn or just disabled on every zoom/drag?
• I guess cache is already used fully.
• Could we get improvement from using another format instead of gif?

[corradio]

Every arrow is a different GIF. Arrows are hidden/shown on zoom/drag. I
don't know of other formats that are universally supported.
We tried with SVG but that was slower due to CPU-bound animations.
I think an alternative could be to animate in canvas.

On Tue, Sep 11, 2018 at 1:24 PM Chris [e-mail] wrote:

Some random ideas/questions.

• Is every arrow a separate object?
• Are the arrows redrawn or just disabled on every zoom/drag?
• I guess cache is already used fully.
• Could we get improvement from using another format instead of gif?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tmrowco/electricitymap-contrib/issues/1590#issuecomment-420239706,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABlEKKZzLTXzlMfhDbteuw_27D8GBLaPks5uZ52EgaJpZM4WVFzd
.

[systemcatch]

Maybe we could reduce it to one object that just gets properties (rotation, colour, pulse), or possibly use CSS sprites in some way (sorry if I'm going over stuff you've already thought of, I'm just throwing out random ideas).

By canvas you mean the way countries are drawn?

[corradio]

Countries are drawn using WebGL, but the wind animation is actually drawn
using canvas. We could do the same with arrows.
I don't know about CSS sprites or about how we would just have on object.
Are you able to investigate? That could be good ideas.

Olivier

On Wed, Sep 12, 2018 at 1:14 PM Chris [e-mail] wrote:

Maybe we could reduce it to one object that just gets properties
(rotation, colour, pulse), or possibly use CSS sprites in some way (sorry
if I'm going over stuff you've already thought of, I'm just throwing out
random ideas).

By canvas you mean the way countries are drawn?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tmrowco/electricitymap-contrib/issues/1590#issuecomment-420611062,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABlEKB_Ja63ycr-FUzLsUn0-uMhA4XO4ks5uaOx6gaJpZM4WVFzd
.

[systemcatch]

@corradio I've thought about this again.

Using this article as a reference I converted all of the arrows from gifs to html5 videos (mp4) with the following command.

for i in *.gif; do ffmpeg -i "$i" -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" "${i%.*}.mp4"; done

Total size of all arrows dropped from 653KB to 185KB. There's likely some performance gains in the browser as well.

[corradio]

That's pretty cool! Do you see any differences in perf in the browser? I'm
not sure the size changes a lot, but it shouldn't hurt!
The way I'm testing it is that I activate the wind layer, and see how
smooth it runs. Without arrows it runs very smooth on my laptop, and with
arrows it lags.

On Wed, Nov 21, 2018 at 6:21 PM Chris [e-mail] wrote:

@corradio https://github.com/corradio I've thought about this again.

Using this article
https://moz.com/blog/how-to-improve-site-performance-using-gifs as a
reference I converted all of the arrows from gifs to html5 videos (mp4)
with the following command.

for i in .gif; do ffmpeg -i "$i" -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)2:trunc(ih/2)2" "${i%.}.mp4"; done

Total size of all arrows dropped from 653KB to 185KB. There's likely some
performance gains in the browser as well.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/tmrowco/electricitymap-contrib/issues/1590#issuecomment-440746319,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABlEKI9bNtUpohVq3zbruiuR9C8ax1IBks5uxYu0gaJpZM4WVFzd
.

[systemcatch]

I haven't had a chance to run it yet, it'll need some modification of the html tags I guess (any pointers for where to do that?).

I'll try testing with the wind layer once I get it working.

Also https://css-tricks.com/css-sprites/ is interesting. You might be able to get some decent performance gains (reduced http requests) by applying sprites to all the png images.

[corradio]

I think there's a map layer called exchangelayer.js or something like that.
If you search for img or gif you should be able to see where it
generates the tag.

On Wed, Nov 21, 2018 at 7:08 PM Chris [e-mail] wrote:

I haven't had a chance to run it yet, it'll need some modification of the
html tags I guess (any pointers for where to do that?).

I'll try testing with the wind layer once I get it working.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/tmrowco/electricitymap-contrib/issues/1590#issuecomment-440760900,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABlEKMRUNs0r6_NIXNoheVZ17XQAiMWDks5uxZaGgaJpZM4WVFzd
.

[corradio]

This could maybe be used: https://github.com/antimatter15/jsgif

[corradio]

Seems like mp4 in img src is not supported in Chrome

[corradio]

Seems like playing gif on canvas could help:
https://codepen.io/corradio/pen/PXzqwO?editors=0010
using
https://github.com/blindman67/GIFGroover

Will try to integrate into the map to test

[corradio]

I've created a branch here to try it out:
https://github.com/tmrowco/electricitymap-contrib/tree/olc/canvas-arrows

[ChrisLoer]

One option to consider would be representing the arrows as lines in a GeoJSON source, and then adding a line layer to the map. You can use the line-gradient property to change the colors (and the line-gradient property is quick to update, so it should be reasonable to drive this kind of animation with it). See the "animate a route line" example at https://blog.mapbox.com/map-pride-2018-with-our-new-design-tools-32b886f7db1b

If you want to have an arrow head as well as a line, you might have to get clever with making arrow shapes in the geojson, or alternatively you could use a _separate_ line layer using line-pattern to pull in some image as an SDF (which can also be rendered very quickly by GL JS)

[corradio]

Hi @ChrisLoer ,

from looking at the code it seems that the animation is driven by the JS thread, every 20ms:

This seems to be very expensive if we have ~ 20arrows that we animate using JS.

[corradio]

@ChrisLoer have you seen this?
https://github.com/mapbox/mapbox-gl-js/pull/7999

[scriptator]

Just played around a bit with CSS animations, but unfortunately this is expensive as well. See https://codepen.io/nidhinobinu/pen/RWaYGb

[corradio]

@ChrisLoer have you seen this?
mapbox/mapbox-gl-js#7999

There's a sample here:
https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/
and more docs here:
https://docs.mapbox.com/mapbox-gl-js/api/#customlayerinterface