Culling elements out of viewport

[Eonfuzz]

Heyo!

I'm running into some optimisation issues with a large amount of elements rendered on a canvas (think 100x8), and they cause panning to absolutely tank FPS.

I'm wondering if there's a pattern anyone's look at, or used, that allows you to cull elements outside of the viewport in canvas?

[wcandillon]

I believe that Skia does perform culling but the issue here my gut feeling says that the cost of interfacing with React Native and Skia is so much higher than the actual drawing that this is the bottleneck that you are experiencing. Can you provide me with more information about your use-case?

…

On Thu, Dec 7, 2023 at 5:52 AM Travis Pola-Carter ***@***.***> wrote: Heyo! I'm running into some optimisation issues with a large amount of elements rendered on a canvas (think 100x8), and they cause panning to absolutely tank FPS. I'm wondering if there's a pattern anyone's look at, or used, that allows you to cull elements outside of the viewport in canvas? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[wcandillon]

here displaying everything and just zooming is good enough.
Is my understanding correct that at second 17 things are getting slow?
We may have a new API in the work that will help with this but I would really like to confirm first the issue.
How many seats do you have? What's the maximum zoom level?
is there any change you could a small example (even privately).

[Eonfuzz]

There's 660ish seats in that demo, but the number isn't static.
Yep, it's the zoom at ~17 seconds things get bad, number wise it's hitting about 2.0 in scaleX and scaleY in the transform matrix.

I've identified the frame loss comes from the rendering of the elements that I toggle when zoomed in.
Do you know any methods of optimising text rendering on that larger scale?

[wcandillon]

I'm surprised you're hitting a bottleneck on so few seats. You can draw the seats as one big texture so you can only zoom into the bitmap (instead of redrawing on everyframe). I'd be curious to see if this helps: https://shopify.github.io/react-native-skia/docs/animations/textures

[Eonfuzz]

Weird, guess formatting ate up my <Text/> element in my message. Sorry.

The issue is from the Text elements being rendered every frame after I'm zoomed in, I'll try out your texture solution and see how that goes

[wcandillon]

I would start with drawing one empty seat and one taken seat in high-res and have it as a texture, then you only draw images. We are looking to offer a new API that would allow you to draw the 600 seats in one call instead of 600 calls: https://api.flutter.dev/flutter/dart-ui/Canvas/drawAtlas.html. Hopefully this should be available in a few weeks.