Add FPS tracking

Author: JohannesDeml

Assets/Plugins/WebGL/WebGLTools/WebGlPlugins.cs

@@ -25,6 +25,8 @@ public static class WebGlPlugins
 		[DllImport("__Internal")]
 		private static extern void _AddTimeTrackingEvent(string eventName);
 		[DllImport("__Internal")]
+		private static extern void _AddFpsTrackingEvent(float fps);
+		[DllImport("__Internal")]
 		private static extern void _ShowInfoPanel();
 		[DllImport("__Internal")]
 		private static extern void _HideInfoPanel();
@@ -68,6 +70,15 @@ public static void AddTimeTrackingEvent(string eventName)
 			#endif
 		}
 
+		public static void AddFpsTrackingEvent(float fps)
+		{
+			#if UNITY_WEBGL && !UNITY_EDITOR
+			_AddFpsTrackingEvent(fps);
+			#else
+			Debug.Log($"{nameof(WebGlPlugins)}.{nameof(AddFpsTrackingEvent)} called with {fps:0.00}");
+			#endif
+		}
+
 		/// <summary>
 		/// Show the info panel in the top right corner
 		/// By default triggered by <see cref="WebGlTimeTracker"/> in Awake

Assets/Plugins/WebGL/WebGLTools/WebGlPlugins.jslib

@@ -49,6 +49,12 @@ var WebGlPlugins =
         console.log('Time tracker event ' +eventNameText +': ' + currentTimeRounded + 'ms');
     },
 
+    _AddFpsTrackingEvent: function(fps) {
+        if(typeof onFpsTrackingEvent !== 'undefined') {
+            onFpsTrackingEvent(fps);
+        }
+    },
+
     _ShowInfoPanel: function () {
         if(typeof setInfoPanelVisible !== 'undefined') {
             setInfoPanelVisible(true);

Assets/Plugins/WebGL/WebGLTools/WebGlTimeTracker.cs

@@ -9,6 +9,7 @@
 // --------------------------------------------------------------------------------------------------------------------
 
 using System;
+using System.Diagnostics;
 using UnityEngine;
 
 namespace Supyrb
@@ -21,15 +22,25 @@ namespace Supyrb
 	[DefaultExecutionOrder(-100)]
 	public class WebGlTimeTracker : MonoBehaviour
 	{
-		[SerializeField] 
+		[SerializeField]
 		private bool showInfoPanelByDefault = true;
-		
+
 		[SerializeField]
 		private bool trackAwakeTime = true;
-		
+
 		[SerializeField]
 		private bool trackStartTime = true;
 
+		[Header("FPS Tracking")]
+		[SerializeField]
+		private bool trackFps = true;
+
+		[SerializeField]
+		private float updateInterval = 0.5f;
+
+		private Stopwatch stopWatch;
+		private int lastFrameCount;
+
 		private void Awake()
 		{
 			if (showInfoPanelByDefault)
@@ -40,11 +51,13 @@ private void Awake()
 			{
 				WebGlPlugins.HideInfoPanel();
 			}
-			
+
 			if (trackAwakeTime)
 			{
 				WebGlPlugins.AddTimeTrackingEvent("Awake");
 			}
+
+			stopWatch = Stopwatch.StartNew();
 		}
 
 		private void Start()
@@ -54,5 +67,32 @@ private void Start()
 				WebGlPlugins.AddTimeTrackingEvent("Start");
 			}
 		}
+
+		private void Update()
+		{
+			if(!trackFps)
+			{
+				this.enabled = false;
+				return;
+			}
+
+			if(stopWatch.Elapsed.TotalSeconds > updateInterval)
+			{
+				var currentFrameCount = Time.frameCount;
+				var frameCount = currentFrameCount - lastFrameCount;
+				float fps = (float)(frameCount / stopWatch.Elapsed.TotalSeconds);
+				WebGlPlugins.AddFpsTrackingEvent(fps);
+				stopWatch.Restart();
+				lastFrameCount = currentFrameCount;
+			}
+		}
+
+		private void OnApplicationPause(bool pauseStatus) {
+			if (pauseStatus) {
+				stopWatch.Stop();
+			} else {
+				stopWatch.Start();
+			}
+		}
 	}
 }

Assets/WebGLTemplates/Develop/debug-console.js

@@ -588,6 +588,11 @@ function onAddTimeTracker(eventName) {
   refreshTrackingDiv();
 }
 
+function onFpsTrackingEvent(fps) {
+  const fpsDiv = getOrCreateInfoEntry('fps');
+  fpsDiv.textContent = `FPS: ${fps.toFixed(1)}`;
+}
+
 function refreshTrackingDiv() {
   const trackingDiv = getOrCreateInfoEntry('tracking');
   let innerHtml = '<dl>';