search

adrianhajdin / project_3D_developer_portfolio

The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!
https://jsmastery.pro
6.06k stars 1.37k forks source link

Canvas with the computer model is not loading #32

Open clutch4t opened 1 year ago

clutch4t commented 1 year ago

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?

image

Also, these are some of the warnings I got in my console

image

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.

74C17N3P7UN3 commented 1 year ago

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.

clutch4t commented 1 year ago

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.

74C17N3P7UN3 commented 1 year ago

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.

DownOnCoffee commented 1 year ago

Can you share the code of how you fixed this issue?