Bug targetFrameRate not working in 2021.3.1 LTS WebGL

I'm working on a game for WebGL platform, I was earlier working before on Unity 2020 LTS. I fixed the FPS to 60 with the help of Application.targetFrameRate and it was working, but as soon I upgraded my project to 2021 LTS. It stopped working, it only works in editor but on WebGL platform inside browser it adapts to the current refresh rate of monitor.

If i downgrade my project back to 2020 LTS, it works. But if I upgrade it to 2021 LTS it stops working. Nothing changed in project. Is it something I'm missing in 2021 regarding WebGL?

I have also tried setting vsync to 0 via code. It didn't resolved anything. Its only happening to 2021.3.1 LTS

Update: When i turn vsync off and set it to 0 and set targetFrameRate any value except 60 (even 50 or 61) it works. Its only not working on value of 60

 

Thank you for the detailed response. But what if we really want to force the target frame to 60 on every type of display (120Hz or even 144Hz). You can consider this a very strict hard requirement for us, in any case we want our it to run at 60 at max. Is there any other way?

Because our app on WebGL must run at 60 FPS since its embedded inside a webpage that tries to record and sync with it at 60 FPS, it's essential to our requirement.

Currently we are working on Unity 2020 with this method, but we would like to upgrade to 2021 version. Please let us know if there is anyway for us to do that.

 

But, when set targetFrameRate to 15, fps remains 60hz. This didn't happen until Unity2021.
1. Set targetFrameRate


2. Print function called:
function _emscripten_set_main_loop_timing(mode, value) {
Browser.mainLoop.timingMode = mode;
Browser.mainLoop.timingValue = value;
console.log('_emscripten_set_main_loop_timing', mode, value);

3. Game's FPS remains 60hz

 

Try setting it to some odd number like 14 or 29 or 59 and it will reflect. Its only happening in Unity 2021. Also make sure you set vsync to 0

 

@brendanduncan_u3d sorry i'm a bit confused for targetFrameRate % 60 == 0 (when targetFrameRate is 15 then it should be false, then how its still using EM_TIMING_RAF)

Also how we can force EM_TIMING_SETTIMEOUT when targetFrameRate is 60

Another problem is we are trying to achieve it closer by setting it to 59 but it causing our frames to freeze for no reason

This is only happening in Unity 2021 (old versions are okay, we would like to achieve it on new version if possible)

 

Thanks, this fixed my issue! I was wondering, here and in the docs its recommended to let the browser dictate the frame rate. When we run our build the fans on our machine start going crazy and the gpu usage is really high (this is across multiple machines such as M1 Max 24 gpu core and windows machines with 20180ti, 3080 mobile, 3090 desktop and 1080 desktop). What's shown on the screen seldom changes as most of the time a user is just using it to view static content. So we really don't need it to be updated every frame, only when being interacted with.

Will limiting the framerate with targetFrameRate to something low really be less efficient than running it at max speed?

 

Unity2021.3.16LTS
mobile webgl


Need 60 % targetFrameRate != 0

targetFrameRate = 31

QualitySettings.vSyncCount = 0;
Application.targetFrameRate =targetFrameRate;

it works.

 

I am also very interested in what robrab2000-aa asked: is setting the target frame rate to -1 (i.e. letting the browser decide) really the "better" way when the goal is to be less resource-hungry?
I'm sure I used to be able to limit the frame rate to 30 to not have laptops put their fans into overdrive (or the M1 MacBooks actually produce fan noise), but now I can't seem to influence the actual frame rate at all, even when using 31 instead of 30 as the target number and setting vSyncCount to zero.
Is there a reliable way to cap the frame rate in WebGL nowadays? (@brendanduncan_u3d ?)

 

Right, thanks. so does this mean that I can get it to only render every 4th frame by setting target frame rate 15? Ideally I'd like to have it updating very infrequently most of the time and then occasionally (on user input) have it update at 60 or whatever the browser wants?

 

great, thanks I'll give it a go and let you know how I get on The main thing is that we have super heavy SSAO (which is essential for our use case) so even if I could get the post processing to not update every frame that would be amazing

 

Thanks for the reply!
It does look like a bug to me:
I just made a new empty project with the same Unity version I first noticed this with (2021.3.18f1), adding a script to a GameObject in the scene setting

Application.targetFrameRate = 30;

in Start(), disabling build compression and Auto Graphics API and made a build. I also repeated the same process for a second new project in the currently latest 2022 LTS 3.5f1 version.
I checked both builds hosted on a GitLab Pages page on Windows 10/11 in Brave and Edge, using the Developer Tools' "Frame Rendering Stats" overlay from the Console drawer's Rendering tab, and I get significantly higher fps than the expected ~30, seemingly still trying to match the screen refresh rate (e.g. 230+ frames per second on a laptop with a 240 Hz screen).
I reported a bug with the 2022 project attached (Case IN-49893) and will link to it once it goes public.

 

I just checked another build I've had online for close to a year where that method of capping the frame rate definitely worked in the past, so I'm wondering if some browser update broke that?

 

I'm not finding it in the issue tracker and here in the thread, can you post it here?

 

The bug report status was changed to "Under Review" 7 hours ago, still no link I can share though.

 

The bug has been confirmed ~6 hours ago, here's the public Issue Tracker link: https://issuetracker.unity3d.com/is...t-on-the-frame-rate-when-used-in-webgl-player
Thanks to everyone who pushed this!

 

Thanks @jukka_j for the detailed answers, the Github issue is also very informative (plus the exchange here where I think you also answered and that offers more context for the rest of this post).

On a side note, in addition to the note about the Frame Rendering Stats panel, I also realized I got served cached versions for some of my tests despite clearing the site data (which I wrongfully assumed would suffice) further distorting my observations, sorry.

I see the bug is being tackled by refining the documentation for now, as long as that underlying beast of an issue still persists.

In the meantime I've tried my hand at adjusting the frame rate dynamically with a simple/naive benchmarking method (for now I just check if Time.deltaTime is below a certain value for a number of consecutive frames and try to further reduce the frame rate if so by increasing the vSyncCount). That works reasonably well (putting of dealing with varying display refresh rates as mentioned in the Github issue for now), but for very high refresh rates (e.g. my 240 Hz display), I have a bit of a problem:
As per the documentation, QualitySettings.vSyncCount is limited to a value of 0, 1, 2, 3 or 4. Thus I can get down to 60 fps by setting vSyncCount to 4 (because 240 Hz / 4 == 60), but can't get to the 30 fps I want (for which I would need vSyncCount to be 8). I think the other way via Application.targetFrameRate also wouldn't really work, since I would need to set 60 / 8 == 7.5, plus I would like to stick to requestAnimationFrame and decimation. I also tried to use the OnDemandRendering API, but that doesn't seem to work with WebGL at all.

So I think the best way is to directly call the framework function that Unity normally calls when changing vSyncCount / targetFrameRate, which should be _emscripten_set_main_loop_timing(mode, value) from <buildname>.framework.js and for the 240 Hz example, I think I'd need to call it with mode=1 and value=8 to have it use requestAnimationFrame but skip rendering for all but the every 8th call.

So the question is: how can I call _emscripten_set_main_loop_timing from the Unity code (I know how to make JavaScript calls from C#, but how can I get to that function via - presumably - a unityInstance reference)?

 

Okay, this is how I got it working:

I added

Module["_emscripten_set_main_loop_timing"] = _emscripten_set_main_loop_timing;

to <buildname>.framework.js right after the definition of the _emscripten_set_main_loop_timing function so I can access the function via

Module

, which is in the same namespace as JavaScript functions defined in Unity via .jslib (as documented here).
I don't know much about JavaScript, so if there's a way without having to edit the framework file please do let me know.

My .jslib file looks like this:

Code (JavaScript):

1. mergeInto(LibraryManager.library, {
2.     AdjustDecimationCount: function (decimationCount) {
3.         if (Module && Module._emscripten_set_main_loop_timing) {
4.             Module._emscripten_set_main_loop_timing(1, decimationCount);
5.             console.log("set decimation value to " + decimationCount);
6.         } else {
7.             console.log("Error: Unity build couldn't find _emscripten_set_main_loop_timing function!");
8.         }
9.     },
10. });

Finally, I added the following C# script to my test scene:

Code (CSharp):

1. public class FrameRateAdjuster : MonoBehaviour
2. {
3.     private int _consecutiveOvers;
4.     private int _consecutiveUnders;
5.    
6.     [DllImport("__Internal")]
7.     public static extern void AdjustDecimationCount(int decimationCount);
8.  
9.     private void Update()
10.     {
11.         if (Time.deltaTime < 1 / 40f)
12.         {
13.             _consecutiveOvers += 1;
14.             _consecutiveUnders = 0;
15.             if (_consecutiveOvers == 30)
16.             {
17.                 ChangeDecimationCount(+1); // increase number of frames in which rendering is skipped
18.                 _consecutiveOvers = 0;
19.             }
20.         }
21.         else if (Time.deltaTime > 1 / 25f)
22.         {
23.             _consecutiveUnders += 1;
24.             _consecutiveOvers = 0;
25.             if (_consecutiveUnders == 30)
26.             {
27.                 ChangeDecimationCount(-1); // decrease number of frames in which rendering is skipped
28.                 _consecutiveUnders = 0;
29.             }
30.         }
31.         else
32.         {
33.             _consecutiveOvers = 0; // Mathf.Max(0, _consecutiveOvers - 1);
34.             _consecutiveUnders = 0; // Mathf.Max(0, _consecutiveUnders - 1);
35.         }
36.     }
37.  
38.     private void ChangeDecimationCount(int change)
39.     {
40.         _decimationCount = Mathf.Max(0, _decimationCount + change);
41.         AdjustDecimationCount(_decimationCount); // calls JavaScript function from .jslib
42.     }
43. }

So I keep track of frames in which Time.deltaTime is above or below some magic thresholds (around 1/30 because I want to enforce 30 fps) and if either happens for 30 frames in a row (a naive way to try and ignore short frame rate drops / spikes), I increase or decrease the "decimation value" n, meaning rendering is skipped for all but every nth frame (this is implemented in _emscripten_set_main_loop_timing which takes this n as second parameter, while the first determines the mode of render loop timing, where 1 means use requestAnimationFrame and perform decimation as I described).
This is by no means a great or finished implementation, but it seems to work for me so far. Both the threshold values for when the number of frames skipped should be increased or decreased and the magic 30 consecutive frames may need tuning. At least as it is now, it should adapt the frame rate if the base vsync rate decides to change.