Lagging on move move after scene updation

Hi,

I have developed this 360 Virtual Tour. Now I am working on optimization. I am facing lags after switch from one image to another. I have implemented same code as this Three.js Example.

Any suggestion would be appreciated. I am beginner in Three.js. Let me know if you need more details about the issue.

Thanks in advance.

Does the lag occur only once? I mean at the moment when changing the texture?

yes, mouse movement becomes heavy or it lags after changing the texture.

But is this performance drop permanently? Or does it occur just once in a single frame (a so called frame drop)?

Performance keeps on degrading whenever I switch images

I don’t know why but there seems to be a problem with your rendering. This is a screenshot of the FPS counter:

image

It’s definitely something wrong when the performance monitor shows a FPS greater than 60. How do you update stats.js?

    animate() {
        var _this2 = this;
        this.stats.begin();
        requestAnimationFrame(() => { _this2.animate() } );
        this.update();
        this.stats.end();
    }

    update() {
        //calculation and updating camera on move or touch 

        this.camera.lookAt( this.camera.target);

        //update controls with conditions
        if(mobile devices) {
            //update DeviceControl

        }else{
            //update OrbitControl
        }
        
        //renderer condition
        if(vrmode == on){

            //apply stereoeffects
            this.stereoeffects.render(this.scene, this.camera);

        }else{
            
            this.renderer.render( this.scene, this.camera );
        }
    }

Is renderering affected by mixtures of packages like StereoEffect, DeviceControls, OrbitControls which I have imported.

Is it possible to share your application without minified code? I guess you app-level code is in 360Viewer.min.js, right? It would be great if you host the application just with 360Viewer.js for debugging purposes.

I have hosted 360Viewer.js. :ok_hand:

Can you try to change your animation loop to something like:

function animate() {

    requestAnimationFrame(this.animationLoop);

    this.stats.begin();

    this.update();

    this.stats.end();

}

The idea is to avoid the creation of a new function when calling requestAnimationFrame(). animationLoop is a new member variable with the value this.animate.bind(this) which is set in the constructor.

I made suggested changes, There is an improvement in FPS rate.

requestAnimationFrame(this.animationLoop);

was throwing error as its not a callback function.

Uncaught (in promise) TypeError: Failed to execute ‘requestAnimationFrame’ on ‘Window’: The callback provided as parameter 1 is not a function.

Should I define animationLoop? Also I changed it to below code which is same as my earlier code, just not the ES6 version. I had to write this to avoid error.

requestAnimationFrame(this.animate.bind(this));

Yes. It should be a new member variable. If you execute this.animate.bind(this) per frame, you create each time a new function which is bad.

Hi,

I solved my performance issue by limiting framerate. what do you think is it good or bad method?

I think it’s not necessary if requestAnimationFrame() is properly used.

Hi,

The problem was while rendering hotspots I called multiple times animate() instead of update() .

1 Like