Resolving #2153 Added ability to set frame-lock.

game.js

@@ -1095,6 +1095,7 @@ class GameManager extends EventTarget {
   constructor() {
     super();
 
+    this.renderLimitMs = 0; // 0 - limit is not set
     this.menuOpen = 0;
     this.gridSnap = 0;
     this.editMode = false;

io-manager.js

@@ -570,6 +570,30 @@ ioManager.keydown = e => {
       debug.toggle();
       break;
     }
+    case 187: { // + & shift [plus - not on num-pad]
+
+      if ( e.shiftKey ) {
+
+        game.renderLimitMs = game.renderLimitMs || 16.6 * 2; // if not set then set to 30fps
+        game.renderLimitMs = Math.round( 1000 / ( 1000 / game.renderLimitMs + 5 ) ); // +5fps, can be not 100% accurate cause of update/render frame shifted [loop time too long]
+        console.log( `Render limit increased to ${ game.renderLimitMs }ms (${ Math.round( 1000 / game.renderLimitMs ) }fps)` );
+
+      }
+      break;
+
+    }
+    case 189: { // - & shift [minus - not on num-pad]
+
+      if ( e.shiftKey ) {
+
+        game.renderLimitMs = game.renderLimitMs || 16.6 * 2; // if not set then set to 30fps
+        game.renderLimitMs = Math.round( 1000 / ( 1000 / game.renderLimitMs - 5 ) ); // -5fps, can be not 100% accurate cause of update/render frame shifted [loop time too long]
+        console.log( `Render limit decreased to ${ game.renderLimitMs }ms (${ Math.round( 1000 / game.renderLimitMs ) }fps)` );
+
+      }
+      break;
+
+    }
   }
 };
 ioManager.keypress = e => {

src/Stats.jsx

@@ -1,14 +1,19 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useContext} from 'react';
 import * as THREE from 'three';
 import classnames from 'classnames';
 import {getRenderer} from '../renderer.js';
 import metaversefile from 'metaversefile';
 import performanceTracker from '../performance-tracker.js';
+import { AppContext } from './components/app';
 import style from './Stats.module.css';
 
+//
+
 const localVector = new THREE.Vector3();
 
 export const Stats = () => {
+
+    const { app } = useContext( AppContext );
 	const [enabled, setEnabled] = useState(false);
 	const [fps, setFps] = useState(0);
 	const [position, setPosition] = useState([0, 0, 0]);
@@ -67,12 +72,16 @@ export const Stats = () => {
 				// Only update once per second
 				const now = performance.now();
 				if (now > lastTime + 1000) {
-					setFps(Math.round((frames * 1000) / (now - lastTime)));
+
+                    setFps( 'Render ' + Math.round( 1000 * app.renderFrame / ( now - lastTime ) ) + ' Loop ' + Math.round( 1000 * app.loopFrame / ( now - lastTime ) )  );
 					setPrograms(renderer.info.programs.length);
 					setGeometries(renderer.info.memory.geometries);
 					setTextures(renderer.info.memory.textures);
 					setCalls(renderer.info.render.calls);
 
+                    app.renderFrame = 0;
+                    app.loopFrame = 0;
+
 					frames = 0;
 					lastTime = now;
 				}

webaverse.js

@@ -71,6 +71,10 @@ export default class Webaverse extends EventTarget {
   constructor() {
     super();
 
+    this.lastRenderTime = 0;
+    this.renderFrame = 0;
+    this.loopFrame = 0;
+
     this.loadPromise = (async () => {
       await Promise.all([
         physx.waitForLoad(),
@@ -332,22 +336,29 @@ export default class Webaverse extends EventTarget {
         };
         _pre();
 
-        // render scenes
-        performanceTracker.setGpuPrefix('diorama');
-        dioramaManager.update(timestamp, timeDiffCapped);
-        performanceTracker.setGpuPrefix('minimap');
-        minimapManager.update(timestamp, timeDiffCapped);
-        performanceTracker.setGpuPrefix('loadout');
-        loadoutManager.update(timestamp, timeDiffCapped);
+        const timeSinceLastRender = timestamp - this.lastRenderTime;
+        this.loopFrame ++;
 
-        {
-          const popRenderSettings = renderSettingsManager.push(rootScene);
+        if ( timeSinceLastRender >= game.renderLimitMs )  {
+
+          this.lastRenderTime = timestamp;
+          this.renderFrame ++;
+
+          // render scenes
+          performanceTracker.setGpuPrefix('diorama');
+          dioramaManager.update(timestamp, timeDiffCapped);
+          performanceTracker.setGpuPrefix('minimap');
+          minimapManager.update(timestamp, timeDiffCapped);
+          performanceTracker.setGpuPrefix('loadout');
+          loadoutManager.update(timestamp, timeDiffCapped);
 
+          const popRenderSettings = renderSettingsManager.push(rootScene);
           performanceTracker.setGpuPrefix('');
           this.render(timestamp, timeDiffCapped);
-
           popRenderSettings();
+
         }
+
       };
       _frame();