Shopify
drawImage is janky with large images on iOS
After noticing that we couldn't "warmup" images on iOS, we realized that each draw operation appears to upload the whole image to the gpu. Resulting in rendering delays and janks when animating the image. In comparison, an ImageShader appears to not have this issue.
https://user-images.githubusercontent.com/306134/175042316-dc171870-d358-4283-94e5-43013293e893.mov
@laurens-lamberts you're definitely being affected by this issue? Maybe you need to switch to a shader image until this is fixed? (assuming that this is indeed a bug). The issue is that even for ImageShader, we don't appear to be able to "warmup" the first time to frame there. Stay tuned.
Hi @wcandillon,
Thanks for letting me know about your findings!
I just looked it up for our project, and I believe this finding does not affect our implementation at the moment.
We do animate the visibility of a Skia canvas, though not directly on the canvas / Skia component itself. We currently use a Reanimated Animated.View with opacity interpolation on scroll position, and we use Reanimated LayoutAnimation to fade-in Skia images.
Passing the animated values to properties of the Skia components themselves would be a nicer implementation, as it prevents the need of the extra Reanimated Animated.View wrapper. As soon as you think these rendering issues are resolved, I will definitely give it a try!
@wcandillon; I just remember that my Flappy bird example does use a SkiaValue<number> on the y property of Skia Image. This value is set within a useValueEffect on useClockValue, without any visible issues (the bird flies smoothly, and looks happy). Is this a different scenario from the one you tested?
So far it looks like this only happens with very large images. In fact, this might not be a bug and very large images should be loaded as surface textures directly. This is currently under investigation.