Confused about fluid motion on html5, frames per second and v-sync
So I'm using Godot 3.5.2 to make a 2D GLES2 minigame for the browser. When I try it on desktop pressing the play button, I get very fluid motion and the console says that is running with v-syn enabled and at 60 fps, which is already strange because my monitor refresh rate is 75Hz, not 60.

But the problem is that, when I try the game on the browser (chrome on windows), it doesn't run as smoothly, it looks a little bit choppy. And I don't see the fps on the console anymore, so I don't know what's happening but the game is very light so the problem shouldn't be the performance.

I have tried going full screen, disabling V-sync and using GLES3, but the problem persists. And I don't understand why but even disabling V-sync I'm still getting 60 fps when I run the game on desktop, even if my monitor is 75Hz so what the hell is happening?

  • cybereality
    Yeah, the problem with VSync is that nowadays most gamers have high refresh monitors that have adaptative sync (g-sync or freesync), and V-sync will try to match the maximum refresh rate, that can be as high as 300+Hz, while browser games run on limited resources, so that many frames for a 2D game are unnecesary and expensive. That's why I would have prefered to make the game run at 60 fps for all users because that way:
    60Hz users will have the same experience as with V-sync and high Hz users will have their monitors adapt the Hz to 60 resulting in also smooth experience. That is true for desktop, but the problem is that the browser doesn't activate the adaptative sync of the GPU, so the 60Hz users will have a smooth experience but the high Hz users will get choppy motion from their Hz not matching the 60 fps.

    But now that I solved the physics problem, the Vsync solution is not as consuming as before on high Hz monitors because at least physics don't have to be as high as the Hz now, so that's what I will do.
    The perfect solution would be to have the browser use the adaptative sync of modern monitors and GPUs, that way 60 fps would run smooth in every monitor as it happens with desktop, but I guess that problem comes from the browser platform and not Godot.

    I will mark this comment as best answer as it packs all the conclusions I learnt with your help and the docs.
    Thank you!

    Try adding an FPS Label. You can but this code on it.

    extends Label

func _physics_process(_delta):
    var fps = Engine.get_frames_per_second()
    text = "FPS: " + str(fps)

      cybereality Thank you! I can see now that on the browser the fps are also 60, so the problem is not related to the fps directly.

      My guess is that the browser's choppines may be happening because the browser is not using the adaptative sync (free-sync) of my graphic card so my monitor is probably running at 75Hz while the browser is outputing (is that a word?) 60 fps, so the Hz and the pfs are out of sync, causing choppines. While the desktop window is having success using the freesync of my GPU, so even if the fps are 60, it's making the monitor use 60Hz resulting in a smooth experience.

      If that's the case, the question I need to answer is why is my game forcing the fps? Is there any setting or function that I may have used to cap it to 60 fps? (I made this game long ago)

        Ok so I found the setting. It was on project config - debug - config - force FPS (why is it on debug? I looked for it everywhere but there) and disabling it I get 75 fps on desktop AND on the browser, resulting in smoothness in both platforms.

        But I'm not happy because now I understand why I limited the FPS in the past. The game has some problems synchronizing the frames with the physic ticks because this proyect requires precission so I made the physics 60 and capped the fps to 60 in order to force them to be in sync. So to get those two working in sync for every user I guess I need one of these solutions:

        1. Keep the v-sync disabled, the FPS cap on 60 and physics on 60, and solving the game not using freesync on the browser (could be out of Godot's hands, I don't know) so every user can get smooth motion.

        2. V-sync enabled, no FPS cap, but having a function that gets the user's monitor refresh rate or the current fps and forces the physics to be the same (I don't know how to do that).

          Physic tick and frame rate do not have to be the same.

            Denxel This is why process and physics_process are separate things, so you could code things to not be dependent or influenced by the process frametime.

              Also, you pretty much always want to leave VSync on. Setting it off cause cause tearing and other issues.

                cybereality
                Not in all cases, but if they are different or out of sync there can be problems depending on the game. Thats why physics interpolation was incorporated to godot as explained in the docs: https://docs.godotengine.org/es/stable/tutorials/physics/interpolation/physics_interpolation_introduction.html
                In my case, luckily today I've been able to fix the problems that arised from the physics and the fps being out of sync tweaking some parts of my code, but unfortunatelly that is not always possible. The official 2D platformer demo for example, that has the motion of the player linked to the physic ticks, has been stuttery on non-60Hz monitors since always and the only solution so far is using physics interpolation.

                  cybereality
                  Yeah, the problem with VSync is that nowadays most gamers have high refresh monitors that have adaptative sync (g-sync or freesync), and V-sync will try to match the maximum refresh rate, that can be as high as 300+Hz, while browser games run on limited resources, so that many frames for a 2D game are unnecesary and expensive. That's why I would have prefered to make the game run at 60 fps for all users because that way:
                  60Hz users will have the same experience as with V-sync and high Hz users will have their monitors adapt the Hz to 60 resulting in also smooth experience. That is true for desktop, but the problem is that the browser doesn't activate the adaptative sync of the GPU, so the 60Hz users will have a smooth experience but the high Hz users will get choppy motion from their Hz not matching the 60 fps.

                  But now that I solved the physics problem, the Vsync solution is not as consuming as before on high Hz monitors because at least physics don't have to be as high as the Hz now, so that's what I will do.
                  The perfect solution would be to have the browser use the adaptative sync of modern monitors and GPUs, that way 60 fps would run smooth in every monitor as it happens with desktop, but I guess that problem comes from the browser platform and not Godot.

                  I will mark this comment as best answer as it packs all the conclusions I learnt with your help and the docs.
                  Thank you!

                    If a user owns a 300 Hz monitor, then they almost surely have the GPU to run a 2D game 300 fps. I get 10,000 FPS easy on Godot 2D.

                      cybereality I hope so. I get 2000 fps with this game on desktop, but I'm more concerned about it's performance on the browser. Sadly, when I run the game on the browser the fps are locked at my refresh rate (75Hz) even when V-sync is disabled, even if I set the force fps setting on 1000. If I set the force fps to 65, then I get 65fps. But I can't get more than 75. I even activated the option "Vsync always off: not recomended" of my AMD GPU but chrome keeps locking the game at 75fps for some reason.