Long time listener, first time caller. I am working on a babylon-js project within the context of a React app. In an effort to help improve performance, I would like to load textures only once and preserve that across scene/engine disposals. The engine and scene are disposed because the canvas running babylon-js does not exist on all pages in the app. I have investigated serializing the scene, materials etc, but that did not seem to work as the textures are still loaded again (albeit from indexdb now that I am using an offline provider). The current running hypothesis is to extract the canvas outside the react vDOM and just toggle its visibility css upon entering or exiting the babylon-js viewer component. The question I have is that: am I missing something? Extracting the canvas outside the react context strikes me as an anti-pattern
Frequently creating and disposing webgl contexts is a big no-no as it's not only resource/computationally intensive but can also causes loss of context to other tabs since there's only a limited amount of contexts the browser can provide and resources are freed asynchronously. Keep in mind that patterns are concepts, not rules and have to be evaluated as such on a per case basis.
So to answer your question: no you didn't miss anything, the best solution is to store the webgl canvas outside of reacts vDOM.