Dom nodes is not deleted properly

TooCalm · March 31, 2021, 7:55pm

Hey Guys,
Looks like i found new memory leak

I use angular for development and i have angular component which creates babylon scene. Everytime i create this component i see that number of DOM nodes increased by 2. I found which line is doing this.

this.assetsManager.addMeshTask(’’, ‘’, ‘assets/’, ‘x.glb’);

When this line is commented everything is fine: number of DOM elements is the same after GC. When it’s not commented everytime i create this component number of DOM elements +2 after GC.
(Even if i have this line multiple times i still have +2)

I checked that my angular component is successfully deleted in memory dump in both cases. Also i tried to use engine.dispose() scene.dispose() and even assetsmanager.reset()

P.S. Without this line i have 135 nodes. With line i have 170 nodes +2 each time.

Not sure how to reproduce it on playground
Any thoughts?

Deltakosh · March 31, 2021, 9:34pm

Wait, we are not supposed to add any DOM node from babylonjs. We definitely need more detail on which nodes are added for sure

TooCalm · April 1, 2021, 12:12am

Update:

Compared HTMLs from both cases and found that it’s a next nodes:

@-webkit-keyframes spin1 { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} } @keyframes spin1 { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

Each time i create component each time babylon add them to the DOM regardless they are already there

I found that this classes are used in babylon spinning picture during loading of scene. Proof of that i disabled loading screen assetsManager.useDefaultLoadingScreen = false; and issue disappeared.

Before that i tried to add only one task to assetesmanager to understand issue and when line was commented no loading screen showed. so it’s confused me.

Finally: Problem is that babylon tries to add style for spinning picture to the DOM even if it was already added

UPD: found where it is added

github.com

BabylonJS/Babylon.js/blob/master/src/Loading/loadingScreen.ts

import { Nullable } from "../types";
import { Engine } from "../Engines/engine";
/**
 * Interface used to present a loading screen while loading a scene
 * @see https://doc.babylonjs.com/how_to/creating_a_custom_loading_screen
 */
export interface ILoadingScreen {
    /**
     * Function called to display the loading screen
     */
    displayLoadingUI: () => void;
    /**
     * Function called to hide the loading screen
     */
    hideLoadingUI: () => void;
    /**
     * Gets or sets the color to use for the background
     */
    loadingUIBackgroundColor: string;
    /**

This file has been truncated. show original

// Generating keyframes
var style = document.createElement(‘style’);
style.type = ‘text/css’;
var keyFrames =
@-webkit-keyframes spin1 {\ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} }\ @keyframes spin1 {\ 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} };
style.innerHTML = keyFrames;
document.getElementsByTagName(‘head’)[0].appendChild(style);

Deltakosh · April 1, 2021, 12:26am

Yes this is what I thought You can simply not using the Loading Screen

You can also go ahead and create a repo issue for me on Github so I will fix that tiny leak

TooCalm · April 1, 2021, 1:00am

i’ve created