react-native-skia icon indicating copy to clipboard operation
react-native-skia copied to clipboard

feat: add MakeTextureFromImage

Open terrysahaidak opened this issue 1 year ago • 4 comments

This PR allows us to upload SkImage to GPU to cache as a texture.

Skia doesn't cache images as textures automatically, so on each drawImage call it will upload it to GPU to draw. It's fine when you render a few images, but if you need to render 20-30 images it becomes a problem, especially on Android. On iOS it's mostly fine. I assume copying images from cpu to gpu is much faster on iOS.

I added MakeTextureFromImage for ImageFactory (Skia.Image).

Also I added isTextureBacked() and textureSize() to SkImage which are helpful when you work with textures.

It was tested on both iOS and Android.

As part of this PR, I exposed getDirectContext on Platform Context for both iOS and Android. It is used for the TextureFromImage call, but probably will be used for other APIs in the future.

terrysahaidak avatar Sep 16 '24 14:09 terrysahaidak

oups I forgot, we need to update the documentation at https://shopify.github.io/react-native-skia/docs/animations/textures/#under-the-hood and the useTexture hook.

On Tue, Sep 17, 2024 at 11:03 AM Terry Sahaidak @.***> wrote:

@.**** commented on this pull request.

In packages/skia/cpp/api/JsiSkImage.h https://github.com/Shopify/react-native-skia/pull/2637#discussion_r1762705375 :

@@ -186,6 +186,14 @@ class JsiSkImage : public JsiSkWrappingSkPtrHostObject<SkImage> { runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image))); }

  • JSI_HOST_FUNCTION(isTextureBacked) {
  • return static_cast(getObject()->isTextureBacked());
  • }
  • JSI_HOST_FUNCTION(textureSize) {
  • return static_cast(getObject()->textureSize());

Usefull to have an idea how much memory your textures use https://api.skia.org/classSkImage.html#acd7bda080bbe286f56fb0fe7b8af30c7. In the future, we could allow users to configure skia memory cache size https://api.skia.org/classGrDirectContext.html#af972a5f50215ee314c48e5749d6259b9 so you can then calculate also for each texture the pressure and also call purge when you need.

For now added it so we can collect info on how much GPU memory we used by our textures.

— Reply to this email directly, view it on GitHub https://github.com/Shopify/react-native-skia/pull/2637#discussion_r1762705375, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACKXVVWLTZS2KSAEHI5ZMTZW7V5JAVCNFSM6AAAAABOJPQNJSVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDGMBYHA3TGMZRGQ . You are receiving this because you commented.Message ID: @.***>

wcandillon avatar Sep 17 '24 14:09 wcandillon

@terrysahaidak any chance you could look at the failing tests? I will try to look at the failing tests as well

wcandillon avatar Sep 27 '24 07:09 wcandillon

@terrysahaidak head up, I merged main in this branch which is now using m130 from Skia

wcandillon avatar Sep 27 '24 16:09 wcandillon

@terrysahaidak head up, I merged main in this branch which is now using m130 from Skia

wcandillon avatar Sep 27 '24 16:09 wcandillon