Teleportation?

[mcseem7]

I have a main scene canvas placed like this:
<MainCanvas/> <Routes>...</Routes>
Let's say I want to use some models / particle effects (quarks) inside my React in specific Components. How can I do this in proper way? Creating new canvas on each render causes new context creation on each render. And if I try just to move the canvas into some Component's div it lags so much xD

[mcseem7]

BTW if I use createPortal for canvas it still re-renders it so new context is created (no diff with new canvas)

[krispya]

Hi! Could you he more specific or provide an example? I’m not sure what you are asking exactly.

[mcseem7]

Hi! I'm talking about single canvas that generates an image and many other canvases that must be placed as a background somewhere in React DOM (in components).

It's kinda strange request xD but I want the same canvas to appear in different places to keep one r3f context instead of creatin new one each time component mounts

I've already tried:

1. to place new canvas on every render and it creates new context for each canvas and downloads related assets each time
2. to teleport it by changing node it holds (with document.getElementById().children.append()) -> is laggy way
3. to get texture with GLRenderTarget and to share it as an image -> creates CPU overhead as drawImage runs on CPU -> is also laggy on lowend

[mcseem7]

Let's say I have a drawer that does not exist in DOM before it's opened. Once I open it i want to have some 3d model in there displayed (uncontrollable or controllable if it's possible) but context must be single for all the drawers I open