Dispose texture in raw shader

Questions
,
1

I am using custom shader by this:

 const meshMaterial = new THREE.RawShaderMaterial({
            uniforms: uniforms,
            vertexShader: terrainShader._VS,
            fragmentShader: terrainShader._FS,
 })

and i have used that in STL file loaded mesh by this:

 let response: THREE.BufferGeometry = await terrainLoader.loadAsync(
                    `stl/${x}Dregion${metaState.region}.stl`
  )
  mesh = new THREE.Mesh(response, meshMaterial)

this is my uniforms for that raw shader material:

var uniforms = {
    z: { value: metaState.flat == 0 ? 500 : 0 },
    diffuseTexture: { type: 't', value: new THREE.Texture() },
    annotationTexture: { type: 't', value: annotationTexture },
    persTexture: { type: 't', value: new THREE.Texture() },
    colormap: { type: 't', value: new THREE.Texture() },
    annotation: { value: 1 },
    segsMax: { type: 'f', value: 0 },
    persShow: { value: 0 },
    hoverValue: { type: 'f', value: 0 },
    guide: { value: params.guide },
    dimensions: { type: 'vec2', value: regionDimensions },
    dry: { type: 'bool', value: params.dry },
    flood: { type: 'bool', value: params.flood },
    quadrant: { value: metaState.quadrant },
}

how can i dispose these textures in this i am using some of the texture for passing data into the shader and one texture diffusetexture is for rendering.

When i reload my page the memory in the stats window everytime gets increment by value it shows at the first time.

this is when i loaded it for first time:

image
image762×515 102 KB

this is after third refresh:

image
image1155×743 76.4 KB

any help please !!

My dispose code is this but it is not helping me to stop incrementing memory in each refresh.

This is my dispose code:

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

        if (node.material) {
            node.material.dispose()
        }
        console.log(node)
        node = undefined
    }
} 
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)
    }
}

function disposeUniform() {
    type ObjectKeyUniforms = keyof typeof uniforms
    for (let key in uniforms) {
        if (uniforms[key as ObjectKeyUniforms]) {
            let x: any = uniforms[key as ObjectKeyUniforms]
            if (x['type'] !== undefined && x['type'] == 't') {
                x['value'].dispose()
            }
        }
    }
}


disposeUniform()
disposeHierarchy(scene, disposeNode)
renderer.renderLists.dispose()
disposeNode(scene)

any help please !!

I am new to this thing and i am not able to figure out what is going on !!

PS: There is nothing on console

2

Can you please put a breakpoint at this place and ensure dispose() is actually called for the related texture uniforms?

In any event, using Texture.dispose() is the correct approach to get rid of any texture related data.

3

Thank you, @Mugen87

I am so clueless here because this is what I knew from the documentation and this form but I am still getting high memory in stats

I did put breakpoint and the key value pair that got into that loop has expected key which is diffusetexture, persTexture, colormap etc so I guess dispose worked !! I don’t know if there is anyway to check if it worked or not !!

I made the following change in the code:

I disposed of the texture not only in uniforms but also in mesh

this is what I got when I consoled the mesh material

image
image1530×782 97.8 KB

image
image863×671 30.7 KB

and I did this:

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

        if (node.material) {
            console.log(node.material)
            for (let key in node.material.uniforms) {
                if (
                    key == 'annotationTexture' ||
                    key == 'colormap' ||
                    key == 'diffuseTexture' ||
                    key == 'persTexture'
                ) {
                    node.material.uniforms[key].value.dispose()
                }
            }
            node.material.dispose()
        }
        node = null
    }
}

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)
renderer.renderLists.dispose()

and I also disposed uniform independently

function disposeUniform() {
    type ObjectKeyUniforms = keyof typeof uniforms
    for (let key in uniforms) {
        if (uniforms[key as ObjectKeyUniforms]) {
            let x: any = uniforms[key as ObjectKeyUniforms]
            if (x['type'] !== undefined && x['type'] == 't') {
                x['value'].dispose()
                uniforms[key as ObjectKeyUniforms].value = new THREE.Texture()
            }
        }
    }
    for (let key in persTextures) {
        persTextures[key].dispose()
        persTextures[key] = new THREE.Texture()
    }
}

still no affect !