Threejs unexplained crash "Out of Memory"

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.

Maybe you’re allocating memory using the JavaScript “new” keyword from within your animation loop?

Maybe you’re recreate instancedBufferGeometry every frame

I don’t have instancedBufferGeometry in my source code

I didn’t used JavaScript “new” in my codes.

Can you give an example of how to use Three.js without an occasional “new”?

1 Like

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.

Add stats to see memory. Then one by one delete some stuffs from code and see then memory is ok
image

2 Likes

where di u get that api? here is the source code so u check where does the crash occurs.

Its from three.js three.js examples
But modifed version
stats.js (4.0 KB)

<script type="text/javascript" src="js/stats.js"></script>
<script type="text/javascript">
var stats=new Stats();
document.getElementById("project").appendChild(stats.dom);
...
function animate(){
requestAnimationFrame(loop); 
stats.update();
renderer.render(scene,camera);
}
</script>
1 Like

The engine is very big i cant seek what to delete. You need to do it self.

I scanned the source code so many times and I couldn’t find what is causing the memory leak, I am thinking about rewriting it again carefully.

Delete stuff one by one and you will find bottle neck

2 Likes

If I may interpret @Chaser_Code 's suggestion:

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.

4 Likes

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

2 Likes

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

have u check the memory leakage from the other api, like cannon.js?

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.

3 Likes

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.

1 Like