Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simulation speed too fast #795

Closed
ZpeedTube opened this issue Nov 11, 2019 · 8 comments
Closed

Simulation speed too fast #795

ZpeedTube opened this issue Nov 11, 2019 · 8 comments

Comments

@ZpeedTube
Copy link

ZpeedTube commented Nov 11, 2019

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
Copy link
Author

Or am I the only one experiencing this vierd issue?

@ZpeedTube
Copy link
Author

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
Copy link

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
Copy link
Author

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
Copy link

@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
Copy link
Author

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
Copy link

wassfila commented Jan 31, 2020

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

@liabru
Copy link
Owner

liabru commented Mar 6, 2020

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.

@liabru liabru closed this as completed Mar 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants