Memory consumption in stats increases on every refresh

Questions
,
1

I have multiple asynchronous code 2 texture loaders and a STL file loader

const satelliteLoader = new THREE.TextureLoader()
satelliteLoader.load(
    `./img/Region_${metaState.region}_RGB.png`,
    function (texture) {
        uniforms.diffuseTexture.value = texture
        const meshMaterial = new THREE.RawShaderMaterial({
            uniforms: uniforms,
            vertexShader: terrainShader._VS,
            fragmentShader: terrainShader._FS,
        })
        const terrainLoader = new STLLoader()
        ;[2, 3].forEach(async (x) => {
            try {
                let response: THREE.BufferGeometry = await terrainLoader.loadAsync(
                    `stl/${x}Dregion${metaState.region}.stl`
                )
                mesh = new THREE.Mesh(response, meshMaterial)
                mesh.receiveShadow = true
                mesh.castShadow = true
                mesh.position.set(0, 0, -100)
                meshes[x] = mesh
                if (metaState.flat == 0) {
                    if (x == 3) {
                        scene.add(mesh)

                        isSTLDone = true
                    }
                } else {
                    if (x == 2) {
                        scene.add(mesh)

                        isSTLDone = true
                    }
                }
            } catch (e) {}
            // geometry.computeBoundingBox()
            // geometry.computeVertexNormals()

            // .catch((error: any) => {
            //     console.log(error)
            // })
        })
        setTimeout(function () {
            if (isSegmentationDone) {
                // display menu and hide the loader animation when the segmentation file loading is done
                ;(document.getElementById('loader') as HTMLElement).style.display = 'none'
                ;(document.getElementById('modal-wrapper') as HTMLElement).style.display = 'block'
            }
            // isModelLoaded = true
        }, 5000)
    },
    undefined,
    function (err) {}
)

and another file loader which load the segmentation data of the mesh in data file


async function getPersistence() {
    await Promise.all(
        pers.map(async (thresh) => {
            await fetch(`${host}img/segmentation_region${metaState.region}_pers${thresh}.data`)
                .then((r) => r.arrayBuffer())
                .then((response) => {
                    persDatas[thresh] = new Int16Array(response)
                    var max = 0
                    var imageData = new Uint8Array(4 * persDatas[thresh].length)
                    segsToPixels2[thresh] = {}
                    for (var x = 0; x < persDatas[thresh].length; x++) {
                        var segID = persDatas[thresh][x]
                        if (segID > max) {
                            max = segID
                        }
                        imageData[x * 4] = Math.floor(segID / 1000)
                        imageData[x * 4 + 1] = Math.floor((segID % 1000) / 100)
                        imageData[x * 4 + 2] = Math.floor((segID % 100) / 10)
                        imageData[x * 4 + 3] = segID % 10
                    }
                    segsMax[thresh] = max
                    persTextures[thresh] = new THREE.DataTexture(
                        imageData,
                        regionDimensions[0],
                        regionDimensions[1]
                    )
                    persTextures[thresh].needsUpdate = true
                    if (thresh == persIndex[params.pers]) {
                        uniforms.persTexture.value = persTextures[thresh]
                        uniforms.segsMax.value = segsMax[thresh]
                    }
                })
                .catch((error) => {})
        })
    )
    isSegmentationDone = true
    if (isSTLDone) {
        ;(document.getElementById('loader') as HTMLElement).style.display = 'none'
    }

    if (Developer) {
        _readstateFile()
    }
}

getPersistence()

I am using custom shader in glsl

i am using this as animate and render function

function animate() {
    requestAnimationFrame(animate)
    stats_mb.update()
    if (camera.position.z <= 100) {
        camera.position.z = 100
        camera.updateProjectionMatrix()
    }
    if (!Developer || overRideControl) {
        controls.update()
    }
    TWEEN.update()
    render()
}

function render() {
    renderer.render(scene, camera)
}
animate()

I have stats in the project

and in first loading it shows around 400MB and when i refresh it goes around 800MB

and when i do multiple of these it foes increasing and increasing

One reloading for 3/4 times:

image
image1155×743 76.9 KB

This was when it was loaded for first time:

image
image762×515 102 KB

can anyone please help me !!!

I saw that there should be no comment which preserve the thread so i removed every console

but still no effect

I added the dispose to the mesh but no effect !!

Mesh added to the scene is just 30/40MB though.

Can any one help me on this please !!

I am so tired because of this :frowning:

I added code which i thought is relevant,
I can’t put replica of this because i believe this is big and i struggled so much with sandbox website.

This is the code repo:

and this is my console output:

image
image1920×1005 114 KB

2

you need to programmatically dispose resources to avoid accumulation of discarded resources such as geometries, materials and textures

3

Hi Thank you so much,

I only have one mesh which is also not big

i have dispose code as this:

function disposeNode(node: any) {
    if (node instanceof THREE.Mesh) {
        if (node.geometry) {
            node.geometry.dispose()
        }

        if (node.material) {
            node.material.dispose()
        }
    }
} // disposeNode

function disposeHierarchy(node: any, callback: any) {
    for (var i = node.children.length - 1; i >= 0; i--) {
        var child = node.children[i]
        disposeHierarchy(child, callback)
        callback(child)
    }
}

 disposeHierarchy(scene, disposeNode)

do you think i need more ?

4

I pass few texture as uniform in custom shader and there is a mesh and another texture !!!

So when am i suppose to clean it ?