Hi
I’ve noticed that tweening an object in Chrome is not smooth at all – the object jitters considerably. This is actually noticeable in the examples as well: https://developer.playcanvas.com/en/tutorials/tweening/
If I open this page in Chrome, the box jitters as it moves, but if I open it in Firefox, the motion is much smoother. It’s not a performance or framerate issue so what’s going on here? Is it an issue with the update loop or the way time is measured in PlayCanvas?
Here’s a screencapture of the issue (.mov-format). Firefox is on top, Chrome below – you can actually see the jittering with the naked eye 
https://drive.google.com/file/d/1reYyQxlQUqM8X6yufix1beYNLOgZM_Q0/view?usp=sharing
That page is using lots of iframes, maybe the CPU scheduling between Firefox/Chrome is different
You can test single iframes, like https://playcanv.as/index/wEftzstB
It looks all smooth to me tho, so I can’t test… I did performance tracing via F12/devtools and one frame doesn’t even take 1ms
Yeah, I don’t think it’s about performance because this is even happening with games running at 60 fps. The jittering is also very noticeable with the single iframes link you provided.
BTW, I’m on a Mac, so maybe it’s more apparent on MacOS, but it’s also very apparent on mobile.
To me, it looks more like a timing issue than a performance issue. Maybe Chrome on Mac and mobile does something differently?
Can you record a performance profile to be sure? That also works on mobile via Chrome ADB debugging, if you want to debug that
Sure, the performance profile looks fine to me, very similar to your profile with frame times around 16ms.
This topic appears to touch on the same issue:
Those examples where published before this pull request was deployed in January 2018:
If I republished them with the latest engine, I would expect them to be much smoother.
Well, the reason I’m bringing this up is because we’re seeing jittering in our mobile game built with the current version of PlayCanvas 
The game is using a lot of tweens.
Maybe collect all the dt times in an array and graph them to get some insight if dt is wrong on Mac still?
Your game may be a lot more complex than that tweening example. It might be generating the occasional major garbage collection event that causes frame drops, for example.
But the confusing part here is why I’m only seeing the jittering motion in Chrome. The object moves smoothly when I use Firefox. That’s also the case with the tweening example: it’s jittering in Chrome, but smooth in Firefox.
I’ve actually noticed the opposite. Tweens are generally smoother on Chrome than on Firefox. Right now it seems like our smoothness issues are mostly linked to the dissolving in and out of some objects with lots of polys and many surfaces. That seems to cause tween motions to stutter/pause.
Okay, we really need to get to the bottom of this, so I created a new test project in the current version of PlayCanvas: a box moving back and forth similarly to the tween example.
The project is available here: https://playcanvas.com/project/647724/overview/tween-test
I then took a very powerful iMac (Retina 5K, 27-inch from 2017 with MacOS Mojave 10.14.6) and setup two browser windows next to each other:
Firefox version 70.0.1 (64-bit) on the left
Chrome version 78.0.3904.87 (Official Build) (64-bit) on the right.
Using QuickTime, I made a screencapture clearly showing that when running in Chrome the box jitters while the Firefox project is running smoothly.
The video is available here in .mov format (please download, the Google Drive preview is low quality):
https://drive.google.com/file/d/1SSS9hdQlzrvkgGXsDMVQHUReCYpnagcA/view?usp=sharing
Could be a rendering issue on each browser given the resolution. Have you tried this without Pixel Device Ratio ticked in settings?
Have both browsers enabled hardware acceleration?
Pixel Device Ratio is not ticked in settings in this test. Also, I did not make any changes to hardware acceleration settings in the browsers – I presume people playing our games usually wouldn’t know how to do that
Keep in mind that the issue also occurs on iOS devices, not just MacOS. That’s my primary concern since that’s where our audience is.
When this is a timing issue, it should be statistically notable?
LogDeltas = function() {
this.deltas = [];
this.running = false;
app.on("update", this.update.bind(this));
}
LogDeltas.prototype.update = function(dt) {
if (!this.running)
return;
this.deltas.push(dt);
}
LogDeltas.prototype.start = function() {
this.running = true;
}
LogDeltas.prototype.stop = function() {
this.running = false;
}
LogDeltas.prototype.toCSV = function() {
var csv = "id;dt\n";
for (var i=0; i<this.deltas.length; i++) {
var dt = this.deltas[i] * 1000;
csv += i + ";" + dt + "\n"
}
return csv;
}
And then just use it like this:
logDeltas = new LogDeltas();
logDeltas.start();
// wait a few seconds
logDeltas.stop();
// copy/paste into a .csv and look at it in LibreOffice or so
logDeltas.toCSV();
My Chrome/Win10 data looks like this:
id;dt
0;16.67300000000978
1;16.68699999997625
2;16.68600000004517
3;16.680999999982305
4;16.681999999971595
5;16.69000000000233
6;16.676000000035856
7;16.68499999999767
8;16.683000000019092
9;16.68699999997625
10;16.683000000019092
11;16.682999999960884
12;16.683000000019092
13;16.68800000002375
14;16.67599999997765
15;16.68800000002375
16;16.679999999993015
17;16.684000000008382
18;16.683999999950174
19;16.682000000029802
20;16.683000000019092
21;16.68499999999767
22;16.691999999980908
23;16.67599999997765
24;16.682000000029802
25;16.684000000008382
26;16.68799999996554
27;16.679000000003725
28;16.683000000019092
29;16.68499999999767
30;16.681999999971595
31;16.68800000002375
32;16.681999999971595
33;16.683000000019092
34;16.682000000029802
35;16.682999999960884
36;16.684000000008382
37;16.693000000028405
38;16.67399999999907
39;16.683999999950174
40;16.682000000029802
41;16.68499999999767
42;16.683000000019092
43;16.684000000008382
44;16.69000000000233
45;16.678999999945518
46;16.680000000051223
47;16.68699999997625
48;16.683000000019092
49;16.680999999982305
50;16.684000000008382
51;16.69000000000233
Have you tried not using tween library and just moving a block at a linear speed between two points?
Yes, moving the box with pc.math.lerp yields the same jittering result. Here’s a new screencapture, Firefox on the left, Chrome on the right:
https://drive.google.com/file/d/1HJthmXLdFdhurT8MwSLeUEGZXfKAyuRv/view?usp=sharing
And I’ve updated the example with a lerp scene so you can see the implementation:
https://playcanvas.com/project/647724/overview/tween-test
Some tests on your latest lerp launch url: