Freeing ThreeJS Application Memory

Question

I am currently having problems freeing up memory in a ThreeJS application.

I know that there are several questions on this issue:

• freeing memory in three.js file
• Freeing memory with threejs
• Three.js Collada - What is the correct way to recycle () and free up memory (garbage collection)?

I do delete the objects using the following Typescript function I did:

function dispose( object3D: THREE.Object3D ): void
{
    // Dispose children first
    for ( let childIndex = 0; childIndex < object3D.children.length; ++childIndex )
    {
        this.dispose( object3D.children[childIndex] );
    }

    object3D.children = [];

    if ( object3D instanceof THREE.Mesh )
    {
        // Geometry
        object3D.geometry.dispose();

        // Material(s)
        if ( object3D.material instanceof THREE.MultiMaterial )
        {
            for ( let matIndex = 0; matIndex < object3D.material.materials.length; ++matIndex )
            {
                object3D.material.materials[matIndex].dispose();
                object3D.material.materials[matIndex] = null;
            }
            object3D.material.materials = [];
        }

        if ( object3D.material.dispose )
        {
            object3D.material.dispose();
            object3D.material = null;
        }
    }

    // Remove from parent
    if ( object3D.parent )
        object3D.parent.remove( object3D );

    object3D = null;
}

However, when I take a bunch of pictures using Chrome Dev tools, I still have tons and tons:

• Arrays
• Vector2 (uvs in __directGeometry, ...)
• Vector3 (vertices in geometry, normal in faces, vertex in colors in faces, ...)
• Face3 (face in geometry)
• Color (colors in __directGeometry, ...)
• JSArrayBufferData (, , attributes geometry,...)

- Jetsam iOS, .: Jetsam WebGL iOS

, , .

Answer 1

. . , , 3D-. .

let dispose = function(o) {
    try {
        if (o && typeof o === 'object') {
            if (Array.isArray(o)) {
                o.forEach(dispose);
            } else
            if (o instanceof THREE.Object3D) {
                dispose(o.geometry);
                dispose(o.material);
                if (o.parent) {
                    o.parent.remove(o);
                }
                dispose(o.children);
            } else
            if (o instanceof THREE.Geometry) {
                o.dispose();
            } else
            if (o instanceof THREE.Material) {
                o.dispose();
                dispose(o.materials);
                dispose(o.map);
                dispose(o.lightMap);
                dispose(o.bumpMap);
                dispose(o.normalMap);
                dispose(o.specularMap);
                dispose(o.envMap);
            } else
            if (typeof o.dispose === 'function') {
                o.dispose();
            } else {
                Object.values(o).forEach(dispose);
            }
        }
    } catch (error) {
        console.log(error);
    }
};