Description
When using Skia JSX components and animating their properties using Reanimated, in some cases the during the animation Skia needs compile a new Metal shader and this takes mulitple tens or hundreds of milliseconds on older iOS devices causing the animation to drop frames.
I have not experienced this issue on Android.
I noticed the dropped frames visually and then verified this through Instruments, using the Hitches preset.
From Instruments you can see at the bottom an event that marks the begin of the animation and right after a couple frames taking ~170ms each to be shown, if you look at what the main thread is doing during those frame you can see it's blocked waiting for some Metal shader to compile.
I think this is supposed to be better with Graphite (i haven't tested) but since it's still experimental i wonder if there are ways this can be improved
React Native Skia Version
2.10.0
React Native Version
0.86.0
Using New Architecture
Steps to Reproduce
- Clone the repo linked below
- The app is just one screen with a full screen canvas showing an image with a blur filter, the "start animation" button at the bottom starts a cycle of increasing the blur radius to 20 and bringing it back to 0. To reproduce the issue open the app, once the image is fully loaded and so visible on the screen, tap the start animation button and that's it
Use XCode Instruments to inspect the app, i used the Hitches preset and added the os_signposts instrument since the app fires events at the start of the animation and at the end of each cycle to make it easier to link the track frames to what is actually happening
You should see that right after the animation start there are some very long frames, then for the first 1 or 2 cycles some longer frames sometimes appear, again looking at what the main thread is doing it appears to be waiting for shader compilation, then in successive cycles those frames tend to disappear, likely because the shaders have been cached at that point
Snack, Code Example, Screenshot, or Link to Repository
https://github.com/fbeccaceci/skia-metal-compilation-repro
Description
When using Skia JSX components and animating their properties using Reanimated, in some cases the during the animation Skia needs compile a new Metal shader and this takes mulitple tens or hundreds of milliseconds on older iOS devices causing the animation to drop frames.
I have not experienced this issue on Android.
I noticed the dropped frames visually and then verified this through Instruments, using the Hitches preset.
From Instruments you can see at the bottom an event that marks the begin of the animation and right after a couple frames taking ~170ms each to be shown, if you look at what the main thread is doing during those frame you can see it's blocked waiting for some Metal shader to compile.
I think this is supposed to be better with Graphite (i haven't tested) but since it's still experimental i wonder if there are ways this can be improved
React Native Skia Version
2.10.0
React Native Version
0.86.0
Using New Architecture
Steps to Reproduce
Use XCode Instruments to inspect the app, i used the Hitches preset and added the
os_signpostsinstrument since the app fires events at the start of the animation and at the end of each cycle to make it easier to link the track frames to what is actually happeningYou should see that right after the animation start there are some very long frames, then for the first 1 or 2 cycles some longer frames sometimes appear, again looking at what the main thread is doing it appears to be waiting for shader compilation, then in successive cycles those frames tend to disappear, likely because the shaders have been cached at that point
Snack, Code Example, Screenshot, or Link to Repository
https://github.com/fbeccaceci/skia-metal-compilation-repro