Is there a way to make canvas reuse existing renderer?

[UltimateForm]

In my case i have a sort of 3d models gallery with many canvases so I eventually reach the
WARNING: Too many active WebGL contexts. Oldest context will be lost. and the later THREE.WebGLRenderer: Context Lost.. I could use just one canvas for many models but the gallery has other things other than 3d models + they are encapsulated in non-threeJs components.

I am also aware of this https://stackoverflow.com/questions/21548247/clean-up-threejs-webgl-contexts but I wanted to know if there is a way to do so and keep fiber's more react-friendly ways

Also what would be the best way to collect a thumbnail lets say using Fiber? From the canvas html element within fiber's Canvas or through https://threejs.org/docs/#api/en/renderers/WebGLRenderer.domElement ?

Thank you in advance

[drcmda]

If you have a single canvas you can sure exchange the content, even use routes if you want. Is your gallery available in a codesandbox? Would be interesting to see how it creates context-loss.

Also what would be the best way to collect a thumbnail lets say using Fiber?

something like this?

const { gl } = useThree()
gl.domElement ...

[UltimateForm]

https://codesandbox.io/s/lingering-tree-wvjqs once the panels start breaking you can inspect the logs and find the error and warning specified

i'm using a slightly altered gltf loader from #73 and another also slightly altered controls from #27

[UltimateForm]

https://github.com/drcmda/react-three-fiber#switching-the-default-renderer I am aware of this but I wanted to know if there is a way of doing it and yet mantaining your Canvas. Docs also speak of WebGL props https://github.com/drcmda/react-three-fiber#canvas but not of actually using an existing one. I could have misread something

[drcmda]

i was hoping that perhaps you had something like a carousel where you always just see one canvas instance. But how do you plan on doing this when the browsers limits the number of canvas instances you can use?

Im guessing you need to domElement to make a still-snapshot and display it as an image? Sorry for being slow, i didn't get it before. But if that's the plan, there must be a better way ...

[UltimateForm]

Do browsers limit the number of canvas instances you can use? I was unaware of that. Either way I am not comfortable with having a webgl renderer per panel which is why I asked if there was a way to reuse it. Of course even if i could reuse it, rendering everything at once could not be optimal, which is why I also asked about the thumbnail which approach is still not clear to me. I want to collect a thumbnail and then dispose of the webgl renderer, but how should I do this? I have tried https://stackoverflow.com/questions/37621564/three-js-todataurl-blank before submitting this issue but couldnt resolve it. Is there a way to know exactly when the model is fully loaded? with a callback possibly. And I'd still have the renderer issue, probably, since to collect to these thumbnails I'll first have to use the renderer.

[UltimateForm]

Perhaps these questions would be better suited to the ThreeJS github? not sure

[UltimateForm]

i will try this https://threejs.org/docs/#api/en/loaders/managers/LoadingManager

but I doubt it'll work as I suspect it only tracks loading into memory, not into render

[UltimateForm]

hello again @drcmda I managed to make the thumbnails work, the trick is forcing the render:

    manager.onLoad = function() {
      console.log(url, "Loading complete!");
      gl.render(scene, camera);
      let thumb = gl.domElement.toDataURL();
      setThumb(thumb);
      gl.dispose();
      console.log(url, thumb);
    };

however, even with that dispose I still run into the the problem I feared I'd run into to, getting the thumbnails and disposing the renderer doesnt fix the problem, because they could all be running at the same time. Also it seems this pickle is not new https://observablehq.com/@vorth/reusable-three-js-canvas and there is also this: https://threejs.org/docs/#api/en/renderers/WebGLRenderer.context

which the constructor takes as a parameter, if u take a look at the codesandbox you'll see on the render method that I played with that aswell but it didn't work so well, there were no errors, but it lacked a canvas so nothing was rendered. afaik contexts can't be switched after the constructor, so the only "solution" i see on the horizon right now is keeping a queue list of some sort and rendering one at time, aka, render, fetch thumbnail, dispose, repeat for next target

https://stackoverflow.com/questions/9122361/is-it-possible-to-have-two-webgl-contexts-on-the-same-page

mrdoob/three.js#12978

https://www.khronos.org/webgl/public-mailing-list/public_webgl/1201/msg00047.php

and those links I can conclude this is a broader issue, so I'll close this one here if you don't mind