Shopify / react-native-skia

High-performance React Native Graphics using Skia
https://shopify.github.io/react-native-skia
MIT License
6.98k stars 452 forks source link

feat: add MakeTextureFromImage #2637

Open terrysahaidak opened 2 months ago

terrysahaidak commented 2 months ago

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.

wcandillon commented 2 months ago

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 { runtime, std::make_shared(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 commented 1 month ago

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

wcandillon commented 1 month ago

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

wcandillon commented 1 month ago

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