feat: limit rendering in background to 20fps so it uses less resource…

…s (+setting to control that)
zardoy · May 21, 2024 · 2a26679 · 2a26679
1 parent 0dfa7c3
commit 2a26679
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 8 deletions.
diff --git a/prismarine-viewer/viewer/lib/viewerWrapper.ts b/prismarine-viewer/viewer/lib/viewerWrapper.ts
@@ -5,9 +5,10 @@ export class ViewerWrapper {
     previousWindowWidth: number
     previousWindowHeight: number
     globalObject = globalThis as any
-    stopRenderOnBlur = true
+    stopRenderOnBlur = false
     addedToPage = false
     renderInterval = 0
+    renderIntervalUnfocused: number | undefined
     fpsInterval
 
     constructor(public canvas: HTMLCanvasElement, public renderer?: THREE.WebGLRenderer) {
@@ -44,7 +45,7 @@ export class ViewerWrapper {
             this.globalObject.requestAnimationFrame(this.render.bind(this))
         }
         if (typeof window !== 'undefined') {
-            // this.trackWindowFocus()
+            this.trackWindowFocus()
         }
     }
 
@@ -77,11 +78,12 @@ export class ViewerWrapper {
         for (const fn of beforeRenderFrame) fn()
         this.globalObject.requestAnimationFrame(this.render.bind(this))
         if (this.globalObject.stopRender || this.renderer?.xr.isPresenting || (this.stopRenderOnBlur && !this.windowFocused)) return
-        if (this.renderInterval) {
+        const renderInterval = (this.windowFocused ? this.renderInterval : this.renderIntervalUnfocused) ?? this.renderInterval
+        if (renderInterval) {
             this.delta += time - this.lastTime
             this.lastTime = time
-            if (this.delta > this.renderInterval) {
-                this.delta %= this.renderInterval
+            if (this.delta > renderInterval) {
+                this.delta %= renderInterval
                 // continue rendering
             } else {
                 return

diff --git a/src/index.ts b/src/index.ts
@@ -120,6 +120,7 @@ const renderWrapper = new ViewerWrapper(renderer.domElement, renderer)
 renderWrapper.addToPage()
 watchValue(options, (o) => {
   renderWrapper.renderInterval = o.frameLimit ? 1000 / o.frameLimit : 0
+  renderWrapper.renderIntervalUnfocused = o.backgroundRendering === '5fps' ? 1000 / 5 : o.backgroundRendering === '20fps' ? 1000 / 20 : undefined
 })
 
 const isFirefox = ua.getBrowser().name === 'Firefox'

diff --git a/src/optionsGuiScheme.tsx b/src/optionsGuiScheme.tsx
@@ -43,6 +43,16 @@ export const guiOptionsScheme: {
         return <Button label='Guide: Disable VSync' onClick={() => openURL('https://gist.github.com/zardoy/6e5ce377d2b4c1e322e660973da069cd')} inScreen />
       },
     },
+    {
+      backgroundRendering: {
+        text: 'Background FPS limit',
+        values: [
+          ['full', 'NO'],
+          ['5fps', '5 FPS'],
+          ['20fps', '20 FPS'],
+        ],
+      },
+    },
     {
       custom () {
         return <Category>Experimental</Category>

diff --git a/src/optionsStorage.ts b/src/optionsStorage.ts
@@ -50,6 +50,7 @@ const defaultOptions = {
   } as Record<string, [number, number]>,
   touchControlsType: 'classic' as 'classic' | 'joystick-buttons',
   gpuPreference: 'default' as 'default' | 'high-performance' | 'low-power',
+  backgroundRendering: '20fps' as 'full' | '20fps' | '5fps',
   /** @unstable */
   disableAssets: false,
   /** @unstable */

diff --git a/src/react/OptionsItems.tsx b/src/react/OptionsItems.tsx
@@ -60,6 +60,7 @@ export const OptionButton = ({ item }: { item: Extract<OptionMeta, { type: 'togg
   }, [item.values])
 
   return <Button
+    data-setting={item.id}
     label={`${item.text}: ${valuesTitlesMap[optionValue]}`}
     onClick={async () => {
       if (item.disabledReason) {
@@ -107,9 +108,22 @@ export const OptionSlider = ({ item }: { item: Extract<OptionMeta, { type: 'slid
     return undefined // default display
   }, [optionValue])
 
-  return <Slider disabledReason={isDisabled(item) ? 'qs' : undefined} label={item.text!} value={options[item.id!]} min={item.min} max={item.max} updateValue={(value) => {
-    options[item.id!] = value
-  }} unit={item.unit} valueDisplay={valueDisplay} updateOnDragEnd={item.delayApply} />
+  return (
+    <Slider
+      label={item.text!}
+      value={options[item.id!]}
+      data-setting={item.id}
+      disabledReason={isDisabled(item) ? 'qs' : undefined}
+      min={item.min}
+      max={item.max}
+      unit={item.unit}
+      valueDisplay={valueDisplay}
+      updateOnDragEnd={item.delayApply}
+      updateValue={(value) => {
+        options[item.id!] = value
+      }}
+    />
+  )
 }
 
 const OptionElement = ({ item }: { item: Extract<OptionMeta, { type: 'element' }> }) => {