I have a scene that loads relatively fine on an old laptop, but when I close the browser tab it freezes and hangs. I am forced to terminate the browser… What is the reason for this?
I have this which I thought would help but it doesn’t:
window.addEventListener('beforeunload', () => {
this.renderer.setAnimationLoop(null);
this.traverse((obj) => {
if( obj instanceof THREE.Mesh )
{
if (obj.geometry) obj.geometry.dispose();
if (obj.material) {
if (obj.material.map) obj.material.map.dispose();
obj.material.dispose();
}
}
});
this.composer.passes.forEach(pass => {
if (pass instanceof ShaderPass) {
pass.material.dispose();
//@ts-ignore
if (pass.fsQuad) pass.fsQuad.geometry.dispose();
}
});
this.composer.renderTarget1.dispose();
this.composer.renderTarget2.dispose();
this.composer.dispose();
this.renderer.dispose();
this.renderer.forceContextLoss();
});
yeah I thought about that, but why could it be that it crashes? I tested the examples page of threejs in this laptop and they run fine… but my app makes it crash on tab close… so it is clearly some optimization problem on my side…
It depends on your scene, if you have lots of objects, that could be the cause.
I’ve used this kind of cleanup in dev mode with vue, as it tends to reload the entire Scene on top of existing resources with every edit, it generally worked well!
Try removing blocks (setAnimationLoop, traverse, composer…), and test which block is causing the problem. Isolating the issue this way can help narrow down the root cause!
Do you know if there’s an industry standard or something on what is a good or acceptable size for a threejs app? Or how much memory should it use? Are there well known baselines that people that has been doing this for a while have somewhat established? I’m asking to see if maybe I’m going well beyond what it is common knowledge and I’m being ignorant about.
My former operation (PEMDAS) stated that onBeforeUnload was inherently disreputable. Ad trackers often bundle a final salvo… which can be more confusing than onPageLoad since you are gone. You might inspect sources of other scripts that add listeners… set them to null.
Generally speaking, you want your app to run on as many devices as possible. This means testing it on low-end desktops and mobile devices, you’ll eventually need to make some trade-offs. unless it’s a niche market you’ll have to test it on the targeted devices.
In Chrome, the Performance tab allows you to throttle the CPU and emulate low-end devices. there are also online services provide performance and responsiveness evaluations for multiple devices.