I have a problem in "WARNING: Too many active WebGL contexts. Oldest context will be lost"

Questions
, ,
1

So basically I’m creating a full stack website with ThreeJS now the is that when I’m trying to search an Item…each time I search the ThreeJS keep saying this and each of my Geometry model will lost

and this will pop up “WARNING: Too many active WebGL contexts. Oldest context will be lost.” and then my website will get hang a little up

So basically I have something in my ReactJS

    const [search,setSearch] = useState("")


    useEffect(() => {
        setfilterSearch(searchList.filter((currentStarter,idx) => {
            return (
                currentStarter.name.toLowerCase().includes(search.toLowerCase())
            )
        }))
    },[search])

This one affects my WEBGL errors and I don’t know why? I created the 3D models by creating a CRUD Method but then it will pop up in console the WEBGL errors.

And this is my Shape.jsx that will separated.

    useEffect(() => {
        let sceneItems = document.querySelectorAll(".shape-container .scene")

        sceneItems.forEach((elem,i) => {
            let sceneItem = elem;
            let scene,camera,renderer,renderScene,bloomPass,bloomComposer;
            let shapeGeometry,shapeMesh,shapeMat;
            let light1;
    
            let darkMaterial,lightMaterial;
            let meshItems = [];
            
            var mov = 0.01
            let v = new THREE.Vector3();

            init();
            animate();
            onWindowResize();
   
          //Other Codes here
          ....

        })

    },[])

Can anyone tell me how do I fix the WEBLGL errors? Thanks. I’m trying to make a Full Stack Crud with 3D but the only problem is the WEBLGL errors.

2 
renderer.dispose()
renderer.forceContextLoss()

Manually clear the webgl instance.

3

are you sure it is renderer = null? It sounds like literally null.

4

and it doesn’t work though? Where do I input that hehe?

5

use dispose

6

do you create multiple canvas and scenes? that is not possible on the web. you may get away with a few but the browser will start to complain and the number of allowed canvas elements will vary between systems. likewise i would avoid re-creating the canvas between route changes, browsers are very inconsistent when it comes to clearing memory even after gl.dispose(), at some point you overload memory and the tab keeps shutting down.

use something like this if you want multiple “views”:

and something like that if you want to persist between routes:

in general, consider using react-three-fiber. everything you can ever thing of has been taken care of with full integration. stuffing threejs into a useeffect is like using document.querySelector and node.appendChild in the midst of your react app, putting imperative code into declarative react makes no sense, and all integration goes out the window.

7

ahh I see this definitely hard… There is no lesson I can take or any tutorial in r3f so that’s why I’m just using a vanilla javascript… I’m just tired keep creating the same logic lol.

8

Btw…can R3F can create multiple scenes? like maybe a hundred or thousand times?

9

ok, that explains it then, this is a no go. you’d have to implement a view splitting mechanism in vanilla similar to https://threejs.org/examples/?q=mult#webgl_multiple_elements this isn’t an easy feat. again, this stuff has been solved in the react eco system.

can R3F can create multiple scenes? like maybe a hundred or thousand times?

yes, with the link above. this is a component that splits the viewport into pieces that you can control with divs. technically you only have one canvas, so memory is light and you can re-use models and materials.

There is no lesson I can take

fiber is threejs. just like react-dom is the dom. a <div> turns into document.createElement("div") and a <mesh> turns into new THREE.Mesh(), this is fundamentally react. the few extra semantics you can learn here: React Three Fiber Documentation and you find many useful helpers (like that view component above) here: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber