Matter-js: Simulation speed too fast

[ZpeedTube]

Tried to look but could not see anyone else talking about this issue.

So I have noticed that at least in Chrome 77/78 and Firefox 70 Mater js simulation runs roughly double the speed than in older browsers. If I run same code in Chrome 74 (happened to be the version OBS Browser uses atm) it runs like normal.

So I don't know what, but something has changed in newer browsers that make Mater js run faster.

But I have come up with an temporary fix, at least for Chrome.
In setup I put

function setup(){
    engine = Engine.create();
    // Checks version and adjust timeScale
    if (navigator.version > 74) {
        engine.timing.timeScale = 0.55;
    }
    Engine.run(engine);
}

and use these functions to get browser version

// Returns browser name and version, found it from here https://stackoverflow.com/questions/5916900/how-can-you-detect-the-version-of-a-browser
navigator.sayswho = (function(){
    var ua= navigator.userAgent, tem, 
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

// Returns just version as a number
navigator.version = (function(){
    var v = navigator.sayswho.split(" ")[1];
    return parseInt(v);
})();

Would not take much adjustment to make temporary fix for other browsers but I mainly need/use chrome.

Biggest problem I see with this issue is that when people update to newer versions of browsers (at least Chrome 77 and newer) is that games on the web that use Mater js is going to run too fast.

EDIT:
Forgot to mention that I don't use the render part of Matter js in case that could affect the speed?
I have built my own system to "attach" html elements to Matter js object body. Just reads the body position and move the element with js/css.

[ZpeedTube]

Or am I the only one experiencing this vierd issue?

[ZpeedTube]

A little update:
So got the chance to test run my website on another system and it seems like it's just my computer that is affected somehow so I guess I must have screwed up some settings on my computer or something, but I'm not sure what it is since both Chrome and Firefox are affect the same way.
If I find out what it is I will put it here.

[nfernand]

Last time I used it, Matter was bad at dealing with monitors > 60Hz. Observed behaviour was a very fast simulation on 144Hz monitors. Is your monitor refresh rate higher than 60Hz?

[ZpeedTube]

Last time I used it, Matter was bad at dealing with monitors > 60Hz. Observed behaviour was a very fast simulation on 144Hz monitors. Is your monitor refresh rate higher than 60Hz?

Sorry for late response!
Yes, I recently bought a 144hz monitor, so that must be the problem. (Also have 2x 60hz monitors.)
Even though I like Matter I _might_ have to consider another physics engine then.

Did check so you can apparently use window.requestAnimationFrame together with some code to get fps. Found the information here on stackoverflow. I'll try at some point if this would work.

Thank you for the info @nfernand !

[wassfila]

@ZpeedTube , I think this can easily be fixed, feel free to have a look at the solution I linked to this tikcet.
As long as you call the run inside

    requestAnimationFrame( animate );

this function should be in sync with the refresh rate, and the solution I suggested adjust the time parameters by itself so no hardware specific configuration is needed.
I hope this could help with your issue.

[ZpeedTube]

Haven't had time to try it until now.

@wassfila Took a moment to understand how to implement your idea, but I have it in my code now and it seems like it runs much more consistent across different browsers!
Seems like this is exactly what I needed!
I'll comment more if I find some problem but I think this is pretty much perfect.

Thank you a lot!!

[wassfila]

@ZpeedTube
Welcome. Glad this idea from #818 helped :)

[liabru]

Exactly, the issue is that the built in runner is pretty simplistic and assumes a 60hz monitor, but now that monitors are coming with higher refresh rates this is becoming a problem.

I've actually already been working on some improvements to the runner which will solve this, but for now go with a fixed timestep or a custom runner. Thanks for reporting but closing this one as it's a known issue.