finish!

renderer/viewer/three/worldrendererThree.ts

@@ -458,7 +458,7 @@ export class WorldRendererThree extends WorldRendererCommon {
   debugChunksVisibilityOverride () {
     const { chunksRenderAboveOverride, chunksRenderBelowOverride, chunksRenderDistanceOverride, chunksRenderAboveEnabled, chunksRenderBelowEnabled, chunksRenderDistanceEnabled } = this.reactiveDebugParams
 
-    const baseY = this.cameraSectionPos.y
+    const baseY = this.cameraSectionPos.y * 16
 
     if (
       chunksRenderAboveOverride !== undefined ||
@@ -469,11 +469,11 @@ export class WorldRendererThree extends WorldRendererCommon {
         const [x, y, z] = key.split(',').map(Number)
         const isVisible =
           // eslint-disable-next-line no-constant-binary-expression, sonarjs/no-redundant-boolean
-          chunksRenderAboveEnabled && chunksRenderAboveOverride !== undefined ? y >= (baseY + chunksRenderAboveOverride) : true &&
+          (chunksRenderAboveEnabled && chunksRenderAboveOverride !== undefined) ? y <= (baseY + chunksRenderAboveOverride) : true &&
           // eslint-disable-next-line @stylistic/indent-binary-ops, no-constant-binary-expression, sonarjs/no-redundant-boolean
-          chunksRenderBelowEnabled && chunksRenderBelowOverride !== undefined ? y <= (baseY + chunksRenderBelowOverride) : true &&
+          (chunksRenderBelowEnabled && chunksRenderBelowOverride !== undefined) ? y >= (baseY - chunksRenderBelowOverride) : true &&
           // eslint-disable-next-line @stylistic/indent-binary-ops
-          chunksRenderDistanceEnabled && chunksRenderDistanceOverride !== undefined ? Math.abs(y - baseY) <= chunksRenderDistanceOverride : true
+          (chunksRenderDistanceEnabled && chunksRenderDistanceOverride !== undefined) ? Math.abs(y - baseY) <= chunksRenderDistanceOverride : true
 
         object.visible = isVisible
       }
@@ -482,6 +482,7 @@ export class WorldRendererThree extends WorldRendererCommon {
 
   render (sizeChanged = false) {
     if (this.reactiveDebugParams.stopRendering) return
+    this.debugChunksVisibilityOverride()
     const start = performance.now()
     this.lastRendered = performance.now()
     this.cursorBlock.render()

src/optionsGuiScheme.tsx

@@ -109,6 +109,9 @@ export const guiOptionsScheme: {
           'none'
         ],
       },
+      rendererPerfDebugOverlay: {
+        text: 'Performance Debug',
+      }
     },
     {
       custom () {

src/optionsStorage.ts

@@ -106,6 +106,7 @@ const defaultOptions = {
   vrSupport: true, // doesn't directly affect the VR mode, should only disable the button which is annoying to android users
   vrPageGameRendering: false,
   renderDebug: 'basic' as 'none' | 'advanced' | 'basic',
+  rendererPerfDebugOverlay: false,
 
   // advanced bot options
   autoRespawn: false,

src/react/RendererDebugMenu.tsx

@@ -1,6 +1,7 @@
 import { WorldRendererCommon } from 'renderer/viewer/lib/worldrendererCommon'
 import { useState } from 'react'
 import { useSnapshot } from 'valtio'
+import { options } from '../optionsStorage'
 import Screen from './Screen'
 import Button from './Button'
 import Slider from './Slider'
@@ -11,11 +12,13 @@ export default () => {
   const { reactiveDebugParams } = worldRenderer
   const { chunksRenderAboveEnabled, chunksRenderBelowEnabled, chunksRenderDistanceEnabled, chunksRenderAboveOverride, chunksRenderBelowOverride, chunksRenderDistanceOverride, stopRendering, disableEntities } = useSnapshot(reactiveDebugParams)
 
-
+  const { rendererPerfDebugOverlay } = useSnapshot(options)
 
   // Helper to round values to nearest step
   const roundToStep = (value: number, step: number) => Math.round(value / step) * step
 
+  if (!rendererPerfDebugOverlay) return null
+
   return <div className={styles.container}>
     <div className={styles.column}>
       <h3>Rendering Controls</h3>
@@ -47,6 +50,7 @@ export default () => {
           min={0}
           max={256}
           value={chunksRenderAboveOverride ?? 0}
+          style={{ width: '100%', }}
           updateValue={(value) => {
             const roundedValue = roundToStep(value, 16)
             reactiveDebugParams.chunksRenderAboveOverride = roundedValue
@@ -70,6 +74,7 @@ export default () => {
           label="Chunks Below"
           min={0}
           max={256}
+          style={{ width: '100%', }}
           value={chunksRenderBelowOverride ?? 0}
           updateValue={(value) => {
             const roundedValue = roundToStep(value, 16)
@@ -81,7 +86,7 @@ export default () => {
         />
       </div>
 
-      <div className={styles.sliderGroup}>
+      {/* <div className={styles.sliderGroup}>
         <Button
           label={chunksRenderDistanceEnabled ? 'Disable Distance Override' : 'Enable Distance Override'}
           onClick={() => {
@@ -94,6 +99,7 @@ export default () => {
           label="Render Distance"
           min={1}
           max={32}
+          style={{ width: '100%', }}
           value={chunksRenderDistanceOverride ?? 8}
           updateValue={(value) => {
             const roundedValue = Math.round(value)
@@ -103,7 +109,7 @@ export default () => {
           unit=""
           valueDisplay={Math.round(reactiveDebugParams.chunksRenderDistanceOverride ?? 8)}
         />
-      </div>
+      </div> */}
     </div>
   </div>
 }

src/react/button.module.css

@@ -4,6 +4,7 @@
   position: relative;
   width: 200px;
   min-height: calc(20px * var(--scale));
+  max-height: calc(20px * var(--scale));
   font-family: minecraft, mojangles, monospace;
   font-size: 10px;
   color: white;