feat: add a setting to either completely hide perf stats or enable mo…

…re advanced display

can be used for demos like: `?setting=renderDebug:"none"`

prismarine-viewer/examples/baseScene.ts

@@ -154,6 +154,7 @@ export class BasePlaygroundScene {
     // Create viewer
     const viewer = new Viewer(renderer, { numWorkers: 1, showChunkBorders: false, })
     window.viewer = viewer
+    viewer.world.isPlayground = true
     viewer.addChunksBatchWaitTime = 0
     viewer.world.blockstatesModels = blockstatesModels
     viewer.entities.setDebugMode('basic')

prismarine-viewer/viewer/lib/mesher/test/tests.test.ts

@@ -50,7 +50,6 @@ test('Known blocks are not rendered', () => {
       "end_gateway": true,
       "end_portal": true,
       "structure_void": true,
-      "trial_spawner": true,
     }
   `)
   expect(erroredBlocks).toMatchInlineSnapshot('{}')

prismarine-viewer/viewer/lib/ui/newStats.ts

@@ -28,6 +28,9 @@ export const addNewStat = (id: string, width = 80, x = rightOffset, y = lastY) =
   return {
     updateText (text: string) {
       pane.innerText = text
+    },
+    setVisibility (visible: boolean) {
+      pane.style.display = visible ? 'block' : 'none'
     }
   }
 }

prismarine-viewer/viewer/lib/worldrendererCommon.ts

@@ -38,6 +38,8 @@ type CustomTexturesData = {
 }
 
 export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any> {
+  isPlayground = false
+  displayStats = true
   worldConfig = { minY: 0, worldHeight: 256 }
   // todo need to cleanup
   material = new THREE.MeshLambertMaterial({ vertexColors: true, transparent: true, alphaTest: 0.1 })

prismarine-viewer/viewer/lib/worldrendererThree.ts

@@ -79,7 +79,10 @@ export class WorldRendererThree extends WorldRendererCommon {
     this.debugOverlayAdded = true
     const pane = addNewStat('debug-overlay')
     setInterval(() => {
-      pane.updateText(`C: ${this.renderer.info.render.calls} TR: ${this.renderer.info.render.triangles} TE: ${this.renderer.info.memory.textures} F: ${this.tilesRendered} B: ${this.blocksRendered}`)
+      pane.setVisibility(this.displayStats)
+      if (this.displayStats) {
+        pane.updateText(`C: ${this.renderer.info.render.calls} TR: ${this.renderer.info.render.triangles} TE: ${this.renderer.info.memory.textures} F: ${this.tilesRendered} B: ${this.blocksRendered}`)
+      }
     }, 100)
   }
 

src/optionsGuiScheme.tsx

@@ -90,6 +90,13 @@ export const guiOptionsScheme: {
       },
       handDisplay: {},
       neighborChunkUpdates: {},
+      renderDebug: {
+        values: [
+          'advanced',
+          'basic',
+          'none'
+        ],
+      },
     },
   ],
   main: [

src/optionsStorage.ts

@@ -5,6 +5,7 @@ import { proxy, subscribe } from 'valtio/vanilla'
 import { subscribeKey } from 'valtio/utils'
 import { omitObj } from '@zardoy/utils'
 
+const isDev = process.env.NODE_ENV === 'development'
 const defaultOptions = {
   renderDistance: 3,
   keepChunksDistance: 1,
@@ -75,6 +76,7 @@ const defaultOptions = {
   autoJump: 'auto' as 'auto' | 'always' | 'never',
   autoParkour: false,
   vrSupport: true, // doesn't directly affect the VR mode, should only disable the button which is annoying to android users
+  renderDebug: (isDev ? 'basic' : 'advanced') as 'none' | 'advanced' | 'basic',
 
   // advanced bot options
   autoRespawn: false,

src/react/PauseScreen.tsx

@@ -237,13 +237,15 @@ export default () => {
           </Button>
           {(navigator.share as typeof navigator.share | undefined) ? (
             <Button
+              title="Share Join Link"
               className="button"
               icon="pixelarticons:arrow-up"
               style={{ width: '20px' }}
               onClick={async () => clickWebShareButton()}
             />
           ) : null}
           <Button
+            title='Display QR for the Join Link'
             className="button"
             icon="pixelarticons:dice"
             style={{ width: '20px' }}

src/topRightStats.ts

@@ -39,11 +39,21 @@ if (hasRamPanel) {
   addStat(stats2.dom)
 }
 
+export const toggleStatsVisibility = (visible: boolean) => {
+  if (visible) {
+    stats.dom.style.display = 'block'
+    stats2.dom.style.display = 'block'
+    statsGl.container.style.display = 'block'
+  } else {
+    stats.dom.style.display = 'none'
+    stats2.dom.style.display = 'none'
+    statsGl.container.style.display = 'none'
+  }
+}
+
 const hideStats = localStorage.hideStats || isCypress()
 if (hideStats) {
-  stats.dom.style.display = 'none'
-  stats2.dom.style.display = 'none'
-  statsGl.container.style.display = 'none'
+  toggleStatsVisibility(false)
 }
 
 export const initWithRenderer = (canvas) => {

src/watchOptions.ts

@@ -6,6 +6,7 @@ import { isMobile } from 'prismarine-viewer/viewer/lib/simpleUtils'
 import { options, watchValue } from './optionsStorage'
 import { reloadChunks } from './utils'
 import { miscUiState } from './globalState'
+import { toggleStatsVisibility } from './topRightStats'
 
 subscribeKey(options, 'renderDistance', reloadChunks)
 subscribeKey(options, 'multiplayerRenderDistance', reloadChunks)
@@ -44,6 +45,20 @@ export const watchOptionsAfterViewerInit = () => {
     viewer.entities.setRendering(o.renderEntities)
   })
 
+  if (options.renderDebug === 'none') {
+    toggleStatsVisibility(false)
+  }
+  subscribeKey(options, 'renderDebug', () => {
+    if (options.renderDebug === 'none') {
+      toggleStatsVisibility(false)
+    } else {
+      toggleStatsVisibility(true)
+    }
+  })
+  watchValue(options, o => {
+    viewer.world.displayStats = o.renderDebug === 'advanced'
+  })
+
   // viewer.world.mesherConfig.smoothLighting = options.smoothLighting
   viewer.world.mesherConfig.smoothLighting = false // todo not supported for now
   subscribeKey(options, 'smoothLighting', () => {