Can a HTML5 physics game run smoothly at 60fps on an external monitor?

Is there a way to make the physics in an HTML5 game run smoothly?

When “Vsync” is enabled it runs smoothly, but at 70fps on an external monitor. Without Vsync it runs at 60fps, but it’s very choppy.

How should an issue like this be approached? I haven’t tested it on an iPhone in power mode yet (which throttles games to 30fps), but I expect that will be an issue too.

Your best bet for consistent behaviour across those setups (HTML5, iPhone in power-save mode etc.) is to uncheck vsync and leave frame cap at 0. This way the engine will measure elapsed time every frame instead of trying to query the hardware for monitor refresh rate.

Unfortunately this may result in (maybe) less stable physics simulation since the timestep will not be constant. The work with decoupling physics timestep from engine frame time would resolve this, but it’s not planned for any release in the near future.

1 Like

I tried this and it works well on desktop Chrome. On mobile (any mobile) it stutters and the physics behaviour is… unpredictable, to put it mildly. Maybe leaving it to Vsync at 60hz is the way to go, and accept speedup/slowdown on various configs?

Another thing I’ve noticed is that the stuttery strange physics appear to grow in intensity the further away from 0,0 the physics objects are. Can this be true?

That might also be shader precision loss. You can try switching your texture samplers to highp instead of what they are by default. Another work around for this is to have a simulated chunked world space where you move everything back an amount toward the origin after they have moved too far away from it and then save the relative positions.

1 Like

How do I do this??

You can find the default materials and programs in the builtins folder. If you are using sprites make a copy of the sprite material and fp/vp programs then set the copy of the material to be set to the new copies of the fragment program/vertex program and not old. Then in the vp you can set

attribute mediump vec4 position;

to

attribute highp vec4 position;

While you’re at it you can set a DIFFUSE_TEXTURE sampler to the material samplers and set it up how you want.

If you don’t modify the fp you don’t need a custom copy of it.

You might need highp set on other values too. Test and see.

4 Likes

Just wanted to say I tried your suggestion @Pkeod and it appears to completely solve the choppiness issue. Thanks very much! :raised_hands:

2 Likes