Falling ball is not smooth

Hi @tomsk and welcome,

You can move your camera update logic the postUpdate() callback, that will resolve the lagging:

Camera.prototype.postUpdate = function(dt) {
    if (!this.target) return;

    // get the position of the target entity
    var pos = this.target.getPosition();

    // calculate the desired position for this entity
    pos.x += 0.5 * this.distance;
    pos.y += 0.5 * this.distance;
    pos.z += 0.5 * this.distance;

    // smoothly interpolate towards the target position
    this.vec.lerp(this.vec, pos, 0.5);

    // set the position for this entity
    this.entity.setPosition(this.vec);
    //this.entity.setPosition(pos); 
};

Can you launch using the profiler and check the frame rate?

image

I got lagging in your project when testing on my Android phone. Changing from update -> postUpdate resolved the issue.

I have around 14-15 FPS, but when I use Google Chrome it is smooth, but I have to make it smooth in all browsers :smile:

Ah right, then the issue isn’t with your code, and given it’s a super simple project it’s not PlayCanvas related at all.

For some reason either the device is super slow or the browser isn’t utilizing all the available hardware resources. Not sure why, maybe do you have multiple launch windows active at the same time?

That can indeed kill performance.

I found that when I launch my main project in Chrome I have 59 FPS and in Firefox it is around 14 FPS, I dont think it is performance issue, I have:

  • i5 4670
  • 16 GB RAM
  • GTX 1060

Try running some other PlayCanvas projects from here, on Firefox, and see how they run:

https://developer.playcanvas.com/en/tutorials/

So I tried this: https://launch.playcanvas.com/476092?debug=true and in Chrome in it smooth 60 FPS, but in Firefox again it is super laggy as you can see here:
https://www.youtube.com/watch?v=rqq182LAsPg

These projects are all smooth for me on Win10 Firefox. Out of curiosity, are you simulating a mobile device on Firefox?

When I simulate mobile device using Firefox it is more smooth but it is not that smooth as in Chrome (60 FPS), and I found out that it is more smooth when play window is smaller.

I also tried your main project in at least 4 different browser(Opera GX, MC Edge, Firefox Dev, Safari), where the ball was super laggy as well, its not the performance. And as i can see everything around is smooth, its just the ball

Odd thing is that when i scale resolution to lower the lags are disappearing

When i tried “test project” where ball just falls on the ground its smooth in every browers
My specs:

Intel® Core™ i7-10750H CPU @ 2.60GHz
NVIDIA GeForce RTX 2060
RAM 16gb

This hardware can handle CyberPunk on high settings so i dont think it would not handle rolling ball in playcanvas xd

I see the video is in Firefox Dev edition. What about standard Firefox?

1 Like

I tried standard Firefox edition version 87.0 and I still get 14 FPS.

Can you check with other WebGL projects? eg: https://threejs.org/

Maybe hardware acceleration is disabled in FF for you?

Tried to run https://launch.playcanvas.com/1139534?profile=true&debug=true&ministats=true in Opera browser and I got 40 FPS, it is better than FF, but still worse than Chrome.

I tried this game: https://beinternetawesome.withgoogle.com/en_us/interland/kind-kingdom and it is laggy in FF… in Opera and Chrome it is smooth.

Hardware acceleration is enabled.

If all WebGL content is having issues in FF, then there is a potential issue with FF and your PC rather than PlayCanvas specifically.

Related?

Already tried to set layers.acceleration.force-enabled to true, and block sompositor, I have around 30 FPS now, but ball is still lagging behind camera.

Not super familiar with Linux, but I saw these more recent recommendations further down that thread:

  • Webrender enabled (gfx.webrender.all)
  • Use either the Wayland or X11/EGL backend (enabled by env vars MOZ_ENABLE_WAYLAND=1 or MOZ_X11_EGL=1)
  • make sure widget.dmabuf-webgl.enabled is enabled (should be)

This is interesting to see today: https://twitter.com/arnputz/status/1386978866640695298?s=20

@tomsk Can you try an older version of Firefox please? 85.0.2?

Reference: Slow video Textures on Firefox?