Leaflet: Big GPU consumption with retina tiles on browser zoom to 75-33 %

[davojta]

Browser: Chrome 50, 52
OS: Linux (reproducible on Windows too)
Leaflet version 1.0.0-rc.1
Issue is not reproducible with leaflet 0.7.7

Play test - http://playground-leaflet.rhcloud.com/qiwa/1

Steps -

1. open link with retina tiles with map for all window - 100% width and 100% height
2. open chrome task manager (Shift + ESC)
3. reduce browser zoom to 50%
4. see GPU memory consumption (medium - near 120 mb, peak - more then 512)

Result - big memory consumption, on old or device with limited gpu memory - destroyеd map layer

Problem: GPU hardware acceleration was added to tiles. It's consist from 2 pieces will-change:

• opacity property on tile element from (commit 6b67df023 make animations significantly smoother with will-change ) [https://github.com/Leaflet/Leaflet/commit/6b67df023234186e70647334c381fd66e4838721]
• translate3d properties in addTile https://github.com/Leaflet/Leaflet/blame/master/src/layer/tile/GridLayer.js#L752

[hyperknot]

If you are on a Retina device you already have 4x the number of pixels of a normal device (say 3840x2040 pixels). If you even zoom the browser to 50%, now you have 16x the number of pixels of a normal device (say 7680x4080 pixels).

Obviously having a browser tab display 7680x4080 pixels will use that much GPU memory. But Retina devices are new and have enough memory to handle this. If not, just do not zoom the browser window to 50%, it will make your memory usage 1/4.

The GPU hardware acceleration is a key feature of Leaflet and the added properties are one reason why 1.0 is slightly faster than 0.7.

[kaynz]

Wouldn't it be easy to avoid issues like this with a simple flag to disable GPU hardware acceleration?

[perliedman]

@kaynz http://leafletjs.com/reference.html#global-l_disable_3d

[davojta]

The main issues here is the tight case for retina tiles (on non-retina devices initially but it's can be fixed by override zooms) and acceleration on raster tile elements.
I fix it for our project by set .leaflet-fade-anim .leaflet-tile style to will-change: init; (it's recommended to not use widely will-change on mdn - https://developer.mozilla.org/en-US/docs/Web/CSS/will-change )
And manually change translate3d to translate for tile dom elements. Other optimizations dont cause additional gpu memory consumption and not show additional gpu usage in compare with 0.7.7

And the tweak actually work well in chrome and i dont see any changes (but may be it's can be issue in other browser if we will remove that premature optimization for tiles

[hyperknot]

@davojta why is it better than L_DISABLE_3D?

[davojta]

@hyperknot because L_DISABLE_3D will remove all accelerations (from panes and container elements) which is reduced performance in whole map app (because of translate3d style makes accelerated layer if we remove that style, all layers will be without hw acceleration)

[IvanSanchez]

I fix it for our project by set .leaflet-fade-anim .leaflet-tile style to will-change: init;

Can you make that into a pull request for the leaflet repo? I'd be nice to try it out.

[hyperknot]

@davojta but you said:

And manually change translate3d to translate for tile dom elements.

On which tiles or panes or elements exactly do you use translate3d and on which ones do you use translate? Yes, making a pull request would be great to see this.

[kaynz]

@davojta Any news on this?

[davojta]

need to review my fix, i stuck with needed optimizations
I switch off will change property as mentioned in https://github.com/Leaflet/Leaflet/issues/4730
also i made fall back from translate3d to translate by monkey patching leaflet

and actually found bug in previous project in our tile rendering mechanics (actually we use retina tiles for no reason)

So these fixes completely have fixed perf issues. I will create PR with that fixes for Leaflet

[kaynz]

Does it make sense to avoid translate3d in L.Marker and L.Tooltip?

[davojta]

No, it doesnt. Translate3d is working well with small area elements like
tooltips and markers. The main problem is full screen elements which very
heavy to process on gpu due to big texture size created by acceleration
layer.

On Wed, Jan 18, 2017, 11:25 AM kaynz [e-mail] wrote:

Does it make sense to avoid translate3d in L.Marker and L.Tooltip?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Leaflet/Leaflet/issues/4578#issuecomment-273412618,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2i0jm74dmkTZbo57Y7juNVlKKoG7efks5rTcyKgaJpZM4Ig-uv
.