useOffscreenImage

function useOffscreenImage(
   element: ReactNode, 
   options: RenderToImageOptions, 
   deps?: unknown[]): TgfxImage | null;

Render a scene offscreen and get the image handle back, disposed for you when the component unmounts or the inputs change.

The declarative half of renderToImage: null on the first frame, then the handle once the GPU has drawn it.

const badge = useOffscreenImage(<Badge count={n} />, { width: 64, height: 64 })
return <Canvas>{badge && <TgfxImage image={badge} x={0} y={0} width={64} height={64} />}</Canvas>

An inline element is a new object every render, so pass deps - the values the scene actually depends on - or memoise the tree. Without either, every parent render re-exports, and each export takes the shared GPU device lock.

Parameters

element

ReactNode

options

RenderToImageOptions

deps?

unknown[]

Returns

TgfxImage | null