I am developing a virtual experience project of a virtual city, in the gameplay if u go around, threejs crashes “Out of Memory” error, the crash happens after some times.
my source code routinely clears all variables on every for loops and declared (let, var, const) variables, it seems that the memory gets full overtime.
I was referring to for ( new i ; i < o.lenght ; i++ ) { ... } There are “new THREE.” but this are not recurring codes. I think that there must be a variables in threejs that are recurring that the garbage collector can not clear and it accumulates until it crashes.
Reduce the complexity of your code by commenting out sections/features of your code base until the problem disappears.
Re-writing 120+ MB of zipped code seems like a huge task which I’d definitely try to avoid. In re-writing, you’d go the other way around, adding stuff to a bare-bones minimum until it breaks.
In any case: the last portion you took away until the problem vanished, or added before the problem re-surfaced, is likely to be the culprit.
P.S.: try to identify test cases (user interactions) which reliably introduce the problem. Re-run those before introducing the next level of complexity, going up. Or: going down - until the problem goes away.
If you are dynamically adding objects to your webgl environment, you also need to dynamically clear objects loaded in to memory that are no longer required, this is generally known as “garbage collection” in webgl and reffered to as dispose() in threejs there are many topics on here covering the disposal of no longer needed textures and geometries
this is already integrated in the source code and several memory leak routines that clears unused variables but the browser still crash after sometimes.
I have a similar problem. When you refresh or reload the page with the button in the browser, memory allocation doesn’t free and the amount of memory used grows up.
May be you have reloaded the page a lot of times, and memory gets full
Just profile your game using the Devtools they will tell you what is blowing up memory. Creating objects instead of reusing (pooling) is a major reason for hickups (laggs) and page crashes, as well as WebGL related garbage that usually rather leads to a context loss but can also crash the page in some cases.
I traced the problem (not in threejs) the crash occures when cars are unloaded (variables are not actually disposed) so when cars are reloaded the raycast vehicle function creates new variables (does not reused the undisposed variables), this loop cascades until it crashes the browser.