FPS drops when calling dispose() in requestAnimationFrame()

[khalilkhalil25]

Hello,

I was trying the following ThreeJS memory test on HoloJS: https://threejs.org/examples/?q=mem#webgl_test_memory

But instead I am just updating the texture in the update function that is called in the requestAnimationFrame(). But calling dispose() in the update function drastically drops the FPS, and for some reason when I add another mesh to the scene, but without updating the texture, the FPS improves. Here is what I am doing:

function MemoryTest(scene, renderer) {

    let geometry = new THREE.SphereGeometry(0.1, Math.random() * 64, Math.random() * 32);
    let texture = new THREE.CanvasTexture(createImage());
    let material = new THREE.MeshBasicMaterial({
        map: texture,
        wireframe: true
    });

    sphereText = new THREE.Mesh(geometry.clone(), material.clone());
    sphereText.position.set(0, 0, -0.5);

    scene.add(sphereText);

    sphere = new THREE.Mesh(geometry.clone(), material.clone());
    sphere.position.set(0.3, 0, -0.5);

    // If I do not add this sphere to the scene the FPS drops drastically
    // otherwise the FPS is fine 
    scene.add(sphere);

    function createImage() {
        let canvas = document.createElement('canvas');
        canvas.width = 256;
        canvas.height = 256;
        let context = canvas.getContext('2d');
        context.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
        context.fillRect(0, 0, 256, 256);
        return canvas;
    }

    this.update = function (delta, elapsed) {
        let txt = new THREE.CanvasTexture(createImage());
        sphereText.material.map.dispose();
        sphereText.material.dispose();
        sphereText.material.map = txt;
    }
}