Shadow performance?

[RCNNT-Industries]

Hi!

I'm trying to create a virtualized graph renderer, and as such I need to re-paint everything on scroll.

Scrolling is done using a reanimated2 pan recogniser, and later it will feature tapping, pinching and more.
The reanimated value is then translated to a Skia transform, which is applied as a translateX on a top level Group.

This translateX is calculated with: [{ translateX: skiaTranslateX.current % 50 }], where 50 is the width of a single bar.

I also shift the data to be rendered with % 50, so it looks like a scrolling list but only the visible parts on screen are being rendered.
This means that on every single scroll I re-paint the entire screen (which is just ~ 500x400 depending on device).
The painting is done using a <Drawing /> component. Let's say that each bar just consists of a vertical line, and a filled bar.

So far it renders at 60 FPS when scrolling, even on a slow Android device!

But if I add a shadow behind each bar then it drops to 15-20 FPS on a slow Android device. On iOS (iPhone 12 Pro) it's 60 FPS and buttery smooth. The RN perf monitor says 60 for both UI and JS on both platforms, but it's far from true on the Android.

The shadow is drawn using some code found in Box:

bars.forEach(bar => {
// ... various (simple) scaling calcs go here

// ... drawing a rect with a gradient fill here

//  and now for the shadow
canvas.drawRRect(inflate(Skia, rect, spread, spread, dx, dy), paint);
}

paint is defined globally as it never changes, like so

const shadowPaint = Skia.Paint();
shadowPaint.setColor(processColor(Skia, "black", 0.1));
shadowPaint.setMaskFilter(Skia.MaskFilter.MakeBlur(BlurStyle.Normal, 8, true));

I would very much like to use shadows, are there any performance tricks I could apply?
Any change in approach? Could it be faked with an image?

What is actually taking up render time here? Is it the blue operation? Can the quality be lowered to make it faster?

Even if I pre-render a 3000+ px wide Skia Canvas and scroll using a native ScrollView the performance isn't enough, again on a slow Android. On iOS it is decent, but with the virtualised approach it is 60 FPS buttery smooth even with shadows.

Ciao,
Erik

[RCNNT-Industries]

Asked a related question as I was playing with this on the issues page (sorry!)

#760

[wcandillon]

Indeed the perf monitor doesn't give accurate values since we execute things outside the JS and the UI thread.
This is will be fixed eventually. Currently, you need to look at the perf monitor and what is displayed using the debug property on Canvas.

We found that using masking operation even on the GPU are quite slow, especially on Android devices. Some of the best practices there we took from the google chrome implementation (regarding inner shadows for instance). Can you try to use a drop shadow instead of a MaskBlur?

[RCNNT-Industries]

Absolutely — how does one make a drop shadow? :)

[wcandillon]

https://shopify.github.io/react-native-skia/docs/image-filters/shadows

[RCNNT-Industries]

A drop shadow seems quicker — but still drops the frame rate visibly. Do you think this improve over time, or is it already as optimised as it'll ever be?

For others, the paint operation goes something like this (if I've understood it correctly):

const dropShadowPaint = Skia.Paint();
const dropShadowFilter = Skia.ImageFilter.MakeDropShadowOnly(0, 2, 4, 4, processColor(Skia, "black", 0.1));
dropShadowPaint.setImageFilter(dropShadowFilter);

[wcandillon]

If you send us a small reproducible example, we will be able to give a sense if there is room for improvement