Unity WebGL builds stuttering with Application.targetFrameRate

23 June 2021 3 min read gamedev

Getting stuttering and poor performance in WebGL builds, but there is plenty of CPU power to spare and non-WebGL builds running smooth? It could be because of Application.targetFrameRate.

I recently added frame rate limiting functionality to one of my games. It worked well in Windows, but when I published a WebGL build it had really obvious stuttering (despite being a very simple and otherwise high-performant game). I’m beginning to learn that WebGL is a special snowflake with many limitations due to running inside a tightly controlled browser environment – makes sense.

You’re best off not applying any Application.targetFrameRate value for your WebGL builds (or use Application.targetFrameRate = -1, which is default). This lets the browser choose the most appropriate frame rate for the system, and gets rid of the Looks like you are rendering without using requestAnimationFrame for the main loop error you might be seeing in browser console.

You can use C# preprocessor directives to handle this for WebGL builds, eg:

#if !UNITY_WEBGL
    // https://docs.unity3d.com/ScriptReference/QualitySettings-vSyncCount.html
    QualitySettings.vSyncCount = vSyncCount;
    // https://docs.unity3d.com/ScriptReference/Application-targetFrameRate.html
    Application.targetFrameRate = targetFrameRate;
#endif

That’s better, nice and smooth 144 FPS gameplay (or whatever your monitor refresh rate is, assuming either Chrome/Firefox/Edge with hardware acceleration enabled).

Here’s Unity’s docs on Application.targetFrameRate