project_3D_developer_portfolio
project_3D_developer_portfolio copied to clipboard
adrianhajdin
Canvas with the computer model is not loading
For some reason after I've started adding extra info about my projects, my entire canvas in Hero section has disappeared and it says that the context is lost, making a big white window instead of the canvas. However, if I CTRL+X and CTRL+V useEffect that is in Computers.jsx, it goes to normal until I refresh the page. What may be the cause of it?
Also, these are some of the warnings I got in my console
Update: this issue only persists in Chrome, Firefox works just fine. Another update: now it does that every other time in Chrome for some reason.
Hi @clutch4t, I have the same error and I found out that it's a browser issue.
This problem does not appear in Firefox as it has a higher limit on WebGL contexts, while on Chrome you have to manually add --max-active-webgl-contexts=<number> as stated on stackoverflow.
Unfortunately I couldn't find a true fix for this, other than creating only one Canvas over the whole page and rendering each model at a specipic point. So for now, I'm just commenting out the Stars Canvas until I find a permanent fix.
Hi @clutch4t, I have the same error and I found out that it's a browser issue. This problem does not appear in Firefox as it has a higher limit on WebGL contexts, while on Chrome you have to manually add
--max-active-webgl-contexts=<number>as stated on stackoverflow.Unfortunately I couldn't find a true fix for this, other than creating only one Canvas over the whole page and rendering each model at a specipic point. So for now, I'm just commenting out the Stars Canvas until I find a permanent fix.
Oh, appreciate you clearing up the situation. And I hope there will be a permanent fix for this, since it is really annoying to face.
Hey @clutch4t, after further investigation I found out that Chrome's cap is at 16 <Canvas /> elements, because each of them makes up a WebGL context. The error is caused on my end because I have too many <BallCanvas />.
So my advice is to consider having at most 13 of them if you have more, or try checking if removing some canvases solves the issue.
I also read a comment by a chrome's dev saying that the context cap was introduced to limit memory leaks on lower-end devices, and if you want to have more 3d models you will have to render one canvas with all the models in it. Hope this was helpful to you as it was for me.
