phaserjs / phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
https://phaser.io
MIT License
37.02k stars 7.09k forks source link

Fixed-step updates appear "less smooth" in Chrome #1380

Closed pnstickne closed 9 years ago

pnstickne commented 9 years ago

The master (~2.1.3, with delta-step) branch appears a good bit smoother to me than the dev (~2.2 RC, fixed-step) branch in almost every demo. It is really noticeable to me in the Render Starfield demo.

I would describe it as the fixed-step "stutters consistently", where the previous version would "occasionally stutter, being otherwise smooth".

The advanced timing information consistently returns a stable 60fps and the suggestedFps is also 60. The animation appears smoother when decreasing the desiredFps from 60 to 30-58. (This makes me believe there might be an inference pattern caused with the natural update cycle of the canvas.)

I've no doubt this depends a good bit on system (and perhaps even observer) - throwing this out there to see other experiences.

This "stutters consistently" appears to affect Chrome a good bit more than FF or IE.

photonstorm commented 9 years ago

Chrome has some serious vsync issues at the moment as well, which doesn't help matters. I can have a perfectly smooth timeline audit yet see an erratic visual display because of this, but I know it's being worked on, so am hopeful they'll resolve it soon. I would ignore the values Phaser is reporting and instead turn on the Chrome fps tools and monitor it from there - check the timeline, use the fps overlay and see.

lewster32 commented 9 years ago

I can confirm that it's really choppy in the starfield demo in dev compared to 2.1.3 (which is near enough perfect) in Chrome 39 on a mid-to-high spec desktop machine. FPS reads 60 in both, and it's not consistent - sometimes it seems to be smooth, other times it's really jerky, so I'm thinking this is some kind of out of phase/sync issue.

pnstickne commented 9 years ago

Ah, enabling the Chrome fps meter shows me:

WEBGL, 60fps target -> 20/30fps render (what?) WEBGL, 30fps target -> 60fps render (erg?) CANVAS, 60fps target -> 60fps render, and pretty darn smooth (go canvas!)

In 2.1.3, WEBGL ~ 55fps render.

The CANVAS mode "use more CPU", but apparently in ways that affect Chrome or the rendering less .. need to investigate / find the difference (and what change it was) though.

photonstorm commented 9 years ago

For me I'm seeing some serious performance regression with render textures full stop. Here is a similar demo I created using a sprite batch instead of a RT and the difference is staggering (on my system at least): https://github.com/photonstorm/phaser-examples/blob/master/examples/demoscene/starfield-batched.js

I'm wondering if there is maybe an attribute of RenderTextures (in WebGL) that require them to only be updated once per frame, and more than this harms them. Will ask Mat. In Canvas they're just hidden canvas objects, so no difference there.

pnstickne commented 9 years ago

That demo runs at 60fps beautifully here - not even a flinch.

photonstorm commented 9 years ago

Pretty sure this is related to #1424 so going to close off for now.