Benefits and use-cases for textures

[AdamGerthel]

I'm trying to optimize performance as much as possible, and for that reason, textures looks interesting as something I could potentially implement in several cases. However, it's not clear to me how to use it and what the benefits are.

I understand that textures are created in and live in the GPU, so I'm assuming performance is better, and I also understand that there could be downsides since the resolution is fixed. However, I'm not sure if those things matter if I render a (memoized) component that uses a texture compare to one that doesn't utilize textures.

Let's take the useTexture example:

import { useWindowDimensions } from "react-native";
import { useTexture } from "@shopify/react-native-skia";
import { Image, Rect, rect, Canvas, Fill } from "@shopify/react-native-skia";
import React from "react";
 
const Demo = () => {
  const {width, height} = useWindowDimensions();
  const texture = useTexture(
      <Fill color="cyan" />,
    { width, height }
  );
  return (
    <Canvas style={{ flex: 1 }}>
      <Image image={texture} rect={{ x: 0, y: 0, width, height }} />
    </Canvas>
  )
}

What is the difference in outcome compared to the same drawing without texture? Is it performance, or are there other reasons? And if there is a performance benefit, would it make sense to reuse the same texture in all instances of the same component through some kind of cache layer?

[wcandillon]

When you use an image via useImage(), the image content is uploaded to the GPU and also may be re-uploaded to the GPU if you exceed the ResourceCache from Skia. By using texture you truly have full control on what you want to do. I would definitely recommend it as you are using Skia in quite an advanced way. Textures need to be created on the same (UI) thread. Skia Ganesh is not multithreaded. useImage() is very convenient for simple use-cases.

…

On Fri, Jan 24, 2025 at 11:17 AM Adam Gerthel ***@***.***> wrote: I'm trying to optimize performance as much as possible, and for that reason, textures looks interesting as something I could potentially implement in several cases. However, it's not clear to me how to use it and what the benefits are. Let's take the useTexture example <https://shopify.github.io/react-native-skia/docs/animations/textures/#usetexture> : import { useWindowDimensions } from "react-native";import { useTexture } from ***@***.***/react-native-skia";import { Image, Rect, rect, Canvas, Fill } from ***@***.***/react-native-skia";import React from "react"; const Demo = () => { const {width, height} = useWindowDimensions(); const texture = useTexture( <Fill color="cyan" />, { width, height } ); return ( <Canvas style={{ flex: 1 }}> <Image image={texture} rect={{ x: 0, y: 0, width, height }} /> </Canvas> )} What is the difference in outcome compared to the same drawing without texture? Is it performance, or are there other reasons? And if there is a performance benefit, would it make sense to reuse the same texture in all instances of the same component through some kind of cache layer? — Reply to this email directly, view it on GitHub <#2912>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVWO3ZZU4WDQOKTEXXD2MIHMHAVCNFSM6AAAAABVZK3PDWVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZXHA3DKNJXGI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[AdamGerthel]

Ok, so let's say I implement usePictureAsTexture for an icon that's rendered multiple times in various places (same size and color). Does skia handle the caching/re-use of the same texture somehow? I mean, how does Skia understand that it's the same texture? Will it not generate a new texture whenever the hook is used, even if the same picture is passed to the hook?

[wcandillon]

There is Skia.Surface.MakeOffscreen(). If you execute this function on the UI thread (using Reanimated) this is a texture. Things like usePictureAsTexture are utilities on top of MakeOffscreen() on the UI thread. I understand this is a bit head scratching, we definitely need to consolidate there, especially on the documentation.

…

On Fri, Jan 24, 2025 at 2:02 PM Adam Gerthel ***@***.***> wrote: Ok, so let's say I implement usePictureAsTexture for an icon that's rendered multiple times in various places. Does skia handle the caching/re-use of the same texture somehow? I mean, how does Skia understand that it's the same texture? Will it not generate a new texture whenever the hook is used, even if the same picture is used? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>