restore playground integration!

Author: zardoy

renderer/playground/baseScene.ts

@@ -1,12 +1,11 @@
-if (!new URL(location.href).searchParams.get('playground')) location.href = '/?playground=true'
-// import { BasePlaygroundScene } from './baseScene'
-// import { playgroundGlobalUiState } from './playgroundUi'
-// import * as scenes from './scenes'
+import { BasePlaygroundScene } from './baseScene'
+import { playgroundGlobalUiState } from './playgroundUi'
+import * as scenes from './scenes'
 
-// const qsScene = new URLSearchParams(window.location.search).get('scene')
-// const Scene: typeof BasePlaygroundScene = qsScene ? scenes[qsScene] : scenes.main
-// playgroundGlobalUiState.scenes = ['main', 'railsCobweb', 'floorRandom', 'lightingStarfield', 'transparencyIssue', 'entities', 'frequentUpdates', 'slabsOptimization', 'allEntities']
-// playgroundGlobalUiState.selected = qsScene ?? 'main'
+const qsScene = new URLSearchParams(window.location.search).get('scene')
+const Scene: typeof BasePlaygroundScene = qsScene ? scenes[qsScene] : scenes.main
+playgroundGlobalUiState.scenes = ['main', 'railsCobweb', 'floorRandom', 'lightingStarfield', 'transparencyIssue', 'entities', 'frequentUpdates', 'slabsOptimization', 'allEntities']
+playgroundGlobalUiState.selected = qsScene ?? 'main'
 
-// const scene = new Scene()
-// globalThis.scene = scene
+const scene = new Scene()
+globalThis.scene = scene

renderer/playground/playground.ts

@@ -14,7 +14,10 @@ export const playgroundGlobalUiState = proxy({
   actions: {} as Record<string, () => void>,
 })
 
-renderToDom(<Playground />)
+renderToDom(<Playground />, {
+  strictMode: false,
+  selector: '#react-root',
+})
 
 function Playground () {
   useEffect(() => {

renderer/playground/playgroundUi.tsx

@@ -1,23 +1,24 @@
-//@ts-nocheck
 // eslint-disable-next-line import/no-named-as-default
 import GUI, { Controller } from 'lil-gui'
 import * as THREE from 'three'
 import JSZip from 'jszip'
 import { BasePlaygroundScene } from '../baseScene'
 import { TWEEN_DURATION } from '../../viewer/three/entities'
 import { EntityMesh } from '../../viewer/three/entity/EntityMesh'
+import supportedVersions from '../../../src/supportedVersions.mjs'
+
+const includedVersions = globalThis.includedVersions ?? supportedVersions
 
 class MainScene extends BasePlaygroundScene {
   // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor (...args) {
-    //@ts-expect-error
     super(...args)
   }
 
   override initGui (): void {
     // initial values
     this.params = {
-      version: globalThis.includedVersions.at(-1),
+      version: includedVersions.at(-1),
       skipQs: '',
       block: '',
       metadata: 0,
@@ -35,7 +36,7 @@ class MainScene extends BasePlaygroundScene {
     this.metadataGui = this.gui.add(this.params, 'metadata')
     this.paramOptions = {
       version: {
-        options: globalThis.includedVersions,
+        options: includedVersions,
         hide: false
       },
       block: {
@@ -113,8 +114,8 @@ class MainScene extends BasePlaygroundScene {
       this.entityUpdateShared()
       if (!this.params.entity) return
       if (this.params.entity === 'player') {
-        viewer.entities.updatePlayerSkin('id', viewer.entities.entities.id.username, undefined, true, true)
-        viewer.entities.playAnimation('id', 'running')
+        this.worldRenderer!.entities.updatePlayerSkin('id', this.worldRenderer!.entities.entities.id.username, undefined, true, true)
+        this.worldRenderer!.entities.playAnimation('id', 'running')
       }
       // let prev = false
       // setInterval(() => {
@@ -129,17 +130,17 @@ class MainScene extends BasePlaygroundScene {
       // entityRotationFolder.open()
     },
     supportBlock: () => {
-      viewer.setBlockStateId(this.targetPos.offset(0, -1, 0), this.params.supportBlock ? 1 : 0)
+      this.worldView!.setBlockStateId(this.targetPos.offset(0, -1, 0), this.params.supportBlock ? 1 : 0)
     },
     modelVariant: () => {
-      viewer.world.mesherConfig.debugModelVariant = this.params.modelVariant === 0 ? undefined : [this.params.modelVariant]
+      this.worldRenderer!.worldRendererConfig.debugModelVariant = this.params.modelVariant === 0 ? undefined : [this.params.modelVariant]
     }
   }
 
   entityUpdateShared () {
-    viewer.entities.clear()
+    this.worldRenderer!.entities.clear()
     if (!this.params.entity) return
-    worldView!.emit('entity', {
+    this.worldView!.emit('entity', {
       id: 'id', name: this.params.entity, pos: this.targetPos.offset(0.5, 1, 0.5), width: 1, height: 1, username: localStorage.testUsername, yaw: Math.PI, pitch: 0
     })
     const enableSkeletonDebug = (obj) => {
@@ -153,14 +154,14 @@ class MainScene extends BasePlaygroundScene {
         if (typeof child === 'object') enableSkeletonDebug(child)
       }
     }
-    enableSkeletonDebug(viewer.entities.entities['id'])
+    enableSkeletonDebug(this.worldRenderer!.entities.entities['id'])
     setTimeout(() => {
-      viewer.render()
+      this.render()
     }, TWEEN_DURATION)
   }
 
   blockIsomorphicRenderBundle () {
-    const { renderer } = viewer
+    const { renderer } = this.worldRenderer!
 
     const canvas = renderer.domElement
     const onlyCurrent = !confirm('Ok - render all blocks, Cancel - render only current one')
@@ -169,28 +170,28 @@ class MainScene extends BasePlaygroundScene {
     const size = parseInt(sizeRaw, 10)
     // const size = 512
 
-    this.ignoreResize = true
     canvas.width = size
     canvas.height = size
     renderer.setSize(size, size)
 
-    viewer.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 10)
-    viewer.scene.background = null
+    // Temporarily replace PerspectiveCamera with OrthographicCamera for block rendering
+    this.worldRenderer!.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 10) as any
+    this.worldRenderer!.scene.background = null
 
     const rad = THREE.MathUtils.degToRad(-120)
-    viewer.directionalLight.position.set(
+    this.worldRenderer!.directionalLight.position.set(
       Math.cos(rad),
       Math.sin(rad),
       0.2
     ).normalize()
-    viewer.directionalLight.intensity = 1
+    this.worldRenderer!.directionalLight.intensity = 1
 
     const cameraPos = this.targetPos.offset(2, 2, 2)
     const pitch = THREE.MathUtils.degToRad(-30)
     const yaw = THREE.MathUtils.degToRad(45)
-    viewer.camera.rotation.set(pitch, yaw, 0, 'ZYX')
-    // viewer.camera.lookAt(center.x + 0.5, center.y + 0.5, center.z + 0.5)
-    viewer.camera.position.set(cameraPos.x + 1, cameraPos.y + 0.5, cameraPos.z + 1)
+    this.worldRenderer!.camera.rotation.set(pitch, yaw, 0, 'ZYX')
+    // this.worldRenderer!.camera.lookAt(center.x + 0.5, center.y + 0.5, center.z + 0.5)
+    this.worldRenderer!.camera.position.set(cameraPos.x + 1, cameraPos.y + 0.5, cameraPos.z + 1)
 
     const allBlocks = mcData.blocksArray.map(b => b.name)
     // const allBlocks = ['stone', 'warped_slab']
@@ -206,17 +207,17 @@ class MainScene extends BasePlaygroundScene {
       // onUpdate.block()
       // applyChanges(false, true)
     }
-    void viewer.waitForChunksToRender().then(async () => {
+    void this.worldRenderer!.waitForChunksToRender().then(async () => {
       // wait for next macro task
       await new Promise(resolve => {
         setTimeout(resolve, 0)
       })
       if (onlyCurrent) {
-        viewer.render()
+        this.render()
         onWorldUpdate()
       } else {
         // will be called on every render update
-        viewer.world.renderUpdateEmitter.addListener('update', onWorldUpdate)
+        this.worldRenderer!.renderUpdateEmitter.addListener('update', onWorldUpdate)
         updateBlock()
       }
     })
@@ -236,7 +237,7 @@ class MainScene extends BasePlaygroundScene {
       URL.revokeObjectURL(dataUrlZip)
       console.log('end')
 
-      viewer.world.renderUpdateEmitter.removeListener('update', onWorldUpdate)
+      this.worldRenderer!.renderUpdateEmitter.removeListener('update', onWorldUpdate)
     }
 
     async function onWorldUpdate () {
@@ -295,7 +296,7 @@ class MainScene extends BasePlaygroundScene {
       }
     }
 
-    worldView!.setBlockStateId(this.targetPos, block.stateId ?? 0)
+    this.worldView!.setBlockStateId(this.targetPos, block.stateId ?? 0)
     console.log('up stateId', block.stateId)
     this.params.metadata = block.metadata
     this.metadataGui.updateDisplay()

renderer/playground/scenes/main.ts

@@ -35,6 +35,7 @@ export const defaultWorldRendererConfig = {
   // Debug settings
   showChunkBorders: false,
   enableDebugOverlay: false,
+  debugModelVariant: undefined as undefined | number[],
 
   // Performance settings
   mesherWorkers: 4,
@@ -582,7 +583,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
       smoothLighting: this.worldRendererConfig.smoothLighting,
       outputFormat: this.outputFormat,
       // textureSize: this.resourcesManager.currentResources!.blocksAtlasParser.atlas.latest.width,
-      debugModelVariant: undefined,
+      debugModelVariant: this.worldRendererConfig.debugModelVariant,
       clipWorldBelowY: this.worldRendererConfig.clipWorldBelowY,
       disableSignsMapsSupport: !this.worldRendererConfig.extraBlockRenderers,
       worldMinY: this.worldMinYRender,

renderer/viewer/lib/worldrendererCommon.ts

@@ -3,6 +3,7 @@ import { options } from '../optionsStorage'
 import { progressNotificationsProxy, setNotificationProgress } from '../react/NotificationProvider'
 
 const loadingChunksProgress = () => {
+  if (!appViewer) return
   let gameStopped = false
 
   const checkStartProgress = () => {

src/app/progressControllers.ts

@@ -35,6 +35,7 @@ export type AppQsParams = {
   // UI params
   modal?: string
   viewerConnect?: string
+  playground?: string
   // Map version param
   mapVersion?: string
   // Command params

src/appParams.ts

@@ -18,34 +18,36 @@ const loadBackend = async () => {
   await appViewer.loadBackend(backend)
 }
 window.loadBackend = loadBackend
-if (process.env.SINGLE_FILE_BUILD_MODE) {
-  const unsub = subscribeKey(miscUiState, 'fsReady', () => {
-    if (miscUiState.fsReady) {
-      // don't do it earlier to load fs and display menu faster
+
+export const appLoadBackend = async () => {
+  if (process.env.SINGLE_FILE_BUILD_MODE) {
+    const unsub = subscribeKey(miscUiState, 'fsReady', () => {
+      if (miscUiState.fsReady) {
+        // don't do it earlier to load fs and display menu faster
+        void loadBackend()
+        unsub()
+      }
+    })
+  } else {
+    setTimeout(() => {
       void loadBackend()
-      unsub()
+    })
+  }
+
+  watchOptionsAfterViewerInit()
+
+  // reset backend when renderer changes
+  subscribeKey(options, 'activeRenderer', async () => {
+    if (appViewer.currentDisplay === 'world' && bot) {
+      appViewer.resetBackend(true)
+      await loadBackend()
+      void appViewer.startWithBot()
     }
   })
-} else {
-  setTimeout(() => {
-    void loadBackend()
-  })
 }
 
 const animLoop = () => {
   for (const fn of beforeRenderFrame) fn()
   requestAnimationFrame(animLoop)
 }
 requestAnimationFrame(animLoop)
-
-watchOptionsAfterViewerInit()
-
-// reset backend when renderer changes
-
-subscribeKey(options, 'activeRenderer', async () => {
-  if (appViewer.currentDisplay === 'world' && bot) {
-    appViewer.resetBackend(true)
-    await loadBackend()
-    void appViewer.startWithBot()
-  }
-})

src/appViewerLoad.ts

@@ -93,19 +93,26 @@ import { initMotionTracking } from './react/uiMotion'
 import { UserError } from './mineflayer/userError'
 import { startLocalReplayServer } from './packetsReplay/replayPackets'
 import { createFullScreenProgressReporter, createWrappedProgressReporter, ProgressReporter } from './core/progressReporter'
-import { appViewer } from './appViewer'
-import './appViewerLoad'
 import { registerOpenBenchmarkListener } from './benchmark'
 import { tryHandleBuiltinCommand } from './builtinCommands'
 import { loadingTimerState } from './react/LoadingTimer'
 import { loadPluginsIntoWorld } from './react/CreateWorldProvider'
 import { getCurrentProxy, getCurrentUsername } from './react/ServersList'
+import { isPlayground } from './playgroundIntegration'
+import { appLoadBackend } from './appViewerLoad'
 
 window.debug = debug
 window.beforeRenderFrame = []
 
 // ACTUAL CODE
 
+if (!isPlayground) {
+  void appLoadBackend()
+}
+if (isPlayground) {
+  void import('renderer/playground/playground')
+}
+
 void registerServiceWorker().then(() => {
   mainMenuState.serviceWorkerLoaded = true
 })
@@ -1080,11 +1087,14 @@ const maybeEnterGame = () => {
   void possiblyHandleStateVariable()
 }
 
-try {
-  maybeEnterGame()
-} catch (err) {
-  console.error(err)
-  alert(`Something went wrong: ${err}`)
+// Skip game connection logic in playground mode
+if (!isPlayground) {
+  try {
+    maybeEnterGame()
+  } catch (err) {
+    console.error(err)
+    alert(`Something went wrong: ${err}`)
+  }
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
@@ -1095,5 +1105,7 @@ if (initialLoader) {
 }
 window.pageLoaded = true
 
-appViewer.waitBackendLoadPromises.push(appStartup())
+if (!isPlayground) {
+  appViewer.waitBackendLoadPromises.push(appStartup())
+}
 registerOpenBenchmarkListener()

src/index.ts

@@ -0,0 +1,10 @@
+export const urlParams = new URLSearchParams(window.location.search)
+export const isPlayground = urlParams.get('playground') === 'true' || urlParams.get('playground') === '1'
+
+if (isPlayground) {
+  // hide #ui-root
+  const uiRoot = document.getElementById('ui-root')
+  if (uiRoot) {
+    uiRoot.style.display = 'none'
+  }
+}