Resolving #2153 Added ability to set frame-lock.

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;
 				}

src/components/app/App.jsx

@@ -141,6 +141,36 @@ export const App = () => {
 
     }, [] );
 
+    useEffect( () => {
+
+        const handleKeyUp = ( event ) => {
+
+            if ( event.which === 187 && event.shiftKey ) {
+
+                app.renderLimitMs = app.renderLimitMs || 16 * 2; // if not set then set to 30fps
+                app.renderLimitMs = Math.floor( 1000 / ( 1000 / app.renderLimitMs + 5 ) ); // +5fps, can be not 100% accurate cause of update/render frame shifted [loop time too long]
+                console.log( `Render limit increased to ${ app.renderLimitMs }ms (${ Math.floor( 1000 / app.renderLimitMs ) }fps)` );
+
+            } else if ( event.which === 189 && event.shiftKey ) {
+
+                app.renderLimitMs = app.renderLimitMs || 16 * 2; // if not set then set to 30fps
+                app.renderLimitMs = Math.floor( 1000 / ( 1000 / app.renderLimitMs - 5 ) ); // -5fps, can be not 100% accurate cause of update/render frame shifted [loop time too long]
+                console.log( `Render limit decreased to ${ app.renderLimitMs }ms (${ Math.floor( 1000 / app.renderLimitMs ) }fps)` );
+
+            }
+
+        };
+
+        registerIoEventHandler( 'keyup', handleKeyUp );
+
+        return () => {
+
+            unregisterIoEventHandler( 'keyup', handleKeyUp );
+
+        };
+
+    }, [] );
+
     useEffect( () => {
 
         const update = e => {

webaverse.js

@@ -79,6 +79,11 @@ export default class Webaverse extends EventTarget {
   constructor() {
     super();
 
+    this.renderLimitMs = 0; // not limited by default
+    this.lastRenderTime = 0;
+    this.renderFrame = 0;
+    this.loopFrame = 0;
+
     this.loadPromise = (async () => {
       await Promise.all([
         physx.waitForLoad(),
@@ -340,22 +345,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 = _pushRenderSettings();
+        if ( timeSinceLastRender >= this.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 = _pushRenderSettings();
           performanceTracker.setGpuPrefix('');
           this.render(timestamp, timeDiffCapped);
-
           popRenderSettings();
+
         }
+
       };
       _frame();