fix: disable chunk batch display by default because of incorrect order and its too slow

renderer/viewer/lib/worldrendererCommon.ts

@@ -45,7 +45,8 @@ export const defaultWorldRendererConfig = {
   fetchPlayerSkins: true,
   highlightBlockColor: 'blue',
   foreground: true,
-  _experimentalSmoothChunkLoading: true
+  _experimentalSmoothChunkLoading: true,
+  _renderByChunks: false
 }
 
 export type WorldRendererConfig = typeof defaultWorldRendererConfig

renderer/viewer/three/documentRenderer.ts

@@ -22,6 +22,7 @@ export class DocumentRenderer {
   sizeChanged = () => { }
   droppedFpsPercentage: number
   config: GraphicsBackendConfig
+  onRender = [] as Array<(sizeChanged: boolean) => void>
 
   constructor (initOptions: GraphicsInitOptions) {
     this.config = initOptions.config
@@ -120,6 +121,9 @@ export class DocumentRenderer {
       this.stats.markStart()
       tween.update()
       this.render(sizeChanged)
+      for (const fn of this.onRender) {
+        fn(sizeChanged)
+      }
       this.renderedFps++
       this.stats.markEnd()
       this.postRender()

renderer/viewer/three/panorama.ts

@@ -69,14 +69,57 @@ export class PanoramaRenderer {
   }
 
   addClassicPanorama () {
-    const classicPanorama = new ClassicPanoramaRenderer(panoramaFiles.map(file => join('background', file)))
-    classicPanorama.panoramaGroup.onBeforeRender = () => {
-      this.time += 0.01
-      classicPanorama.panoramaGroup.rotation.y = Math.PI + this.time * 0.01
-      classicPanorama.panoramaGroup.rotation.z = Math.sin(-this.time * 0.001) * 0.001
+    const panorGeo = new THREE.BoxGeometry(1000, 1000, 1000)
+    const loader = new THREE.TextureLoader()
+    const panorMaterials = [] as THREE.MeshBasicMaterial[]
+
+    for (const file of panoramaFiles) {
+      const texture = loader.load(join('background', file))
+
+      // Instead of using repeat/offset to flip, we'll use the texture matrix
+      texture.matrixAutoUpdate = false
+      texture.matrix.set(
+        -1, 0, 1, 0, 1, 0, 0, 0, 1
+      )
+
+      texture.wrapS = THREE.ClampToEdgeWrapping // Changed from RepeatWrapping
+      texture.wrapT = THREE.ClampToEdgeWrapping // Changed from RepeatWrapping
+      texture.minFilter = THREE.LinearFilter
+      texture.magFilter = THREE.LinearFilter
+
+      panorMaterials.push(new THREE.MeshBasicMaterial({
+        map: texture,
+        transparent: true,
+        side: THREE.DoubleSide,
+        depthWrite: false,
+      }))
     }
-    this.scene.add(classicPanorama.panoramaGroup)
-    this.panoramaGroup = classicPanorama.panoramaGroup
+
+    const panoramaBox = new THREE.Mesh(panorGeo, panorMaterials)
+    panoramaBox.onBeforeRender = () => {
+      this.time += 0.01
+      panoramaBox.rotation.y = Math.PI + this.time * 0.01
+      panoramaBox.rotation.z = Math.sin(-this.time * 0.001) * 0.001
+    }
+
+    const group = new THREE.Object3D()
+    group.add(panoramaBox)
+
+    // Add squids
+    for (let i = 0; i < 20; i++) {
+      const m = new EntityMesh('1.16.4', 'squid').mesh
+      m.position.set(Math.random() * 30 - 15, Math.random() * 20 - 10, Math.random() * 10 - 17)
+      m.rotation.set(0, Math.PI + Math.random(), -Math.PI / 4, 'ZYX')
+      const v = Math.random() * 0.01
+      m.children[0].onBeforeRender = () => {
+        m.rotation.y += v
+        m.rotation.z = Math.cos(panoramaBox.rotation.y * 3) * Math.PI / 4 - Math.PI / 2
+      }
+      group.add(m)
+    }
+
+    this.scene.add(group)
+    this.panoramaGroup = group
   }
 
   async worldBlocksPanorama () {
@@ -167,54 +210,58 @@ export class PanoramaRenderer {
   }
 }
 
-class ClassicPanoramaRenderer {
-  panoramaGroup: THREE.Object3D
+// export class ClassicPanoramaRenderer {
+//   panoramaGroup: THREE.Object3D
 
-  constructor (private readonly backgroundFiles: string[]) {
-    const panorGeo = new THREE.BoxGeometry(1000, 1000, 1000)
-    const loader = new THREE.TextureLoader()
-    const panorMaterials = [] as THREE.MeshBasicMaterial[]
+//   constructor (private readonly backgroundFiles: string[], onRender: Array<(sizeChanged: boolean) => void>, addSquids = true) {
+//     const panorGeo = new THREE.BoxGeometry(1000, 1000, 1000)
+//     const loader = new THREE.TextureLoader()
+//     const panorMaterials = [] as THREE.MeshBasicMaterial[]
 
-    for (const file of this.backgroundFiles) {
-      const texture = loader.load(file)
+//     for (const file of this.backgroundFiles) {
+//       const texture = loader.load(file)
 
-      // Instead of using repeat/offset to flip, we'll use the texture matrix
-      texture.matrixAutoUpdate = false
-      texture.matrix.set(
-        -1, 0, 1, 0, 1, 0, 0, 0, 1
-      )
+//       // Instead of using repeat/offset to flip, we'll use the texture matrix
+//       texture.matrixAutoUpdate = false
+//       texture.matrix.set(
+//         -1, 0, 1, 0, 1, 0, 0, 0, 1
+//       )
 
-      texture.wrapS = THREE.ClampToEdgeWrapping // Changed from RepeatWrapping
-      texture.wrapT = THREE.ClampToEdgeWrapping // Changed from RepeatWrapping
-      texture.minFilter = THREE.LinearFilter
-      texture.magFilter = THREE.LinearFilter
+//       texture.wrapS = THREE.ClampToEdgeWrapping // Changed from RepeatWrapping
+//       texture.wrapT = THREE.ClampToEdgeWrapping // Changed from RepeatWrapping
+//       texture.minFilter = THREE.LinearFilter
+//       texture.magFilter = THREE.LinearFilter
 
-      panorMaterials.push(new THREE.MeshBasicMaterial({
-        map: texture,
-        transparent: true,
-        side: THREE.DoubleSide,
-        depthWrite: false,
-      }))
-    }
+//       panorMaterials.push(new THREE.MeshBasicMaterial({
+//         map: texture,
+//         transparent: true,
+//         side: THREE.DoubleSide,
+//         depthWrite: false,
+//       }))
+//     }
 
-    const panoramaBox = new THREE.Mesh(panorGeo, panorMaterials)
+//     const panoramaBox = new THREE.Mesh(panorGeo, panorMaterials)
+//     panoramaBox.onBeforeRender = () => {
+//     }
 
-    const group = new THREE.Object3D()
-    group.add(panoramaBox)
+//     const group = new THREE.Object3D()
+//     group.add(panoramaBox)
 
-    // Add squids
-    for (let i = 0; i < 20; i++) {
-      const m = new EntityMesh('1.16.4', 'squid').mesh
-      m.position.set(Math.random() * 30 - 15, Math.random() * 20 - 10, Math.random() * 10 - 17)
-      m.rotation.set(0, Math.PI + Math.random(), -Math.PI / 4, 'ZYX')
-      const v = Math.random() * 0.01
-      m.children[0].onBeforeRender = () => {
-        m.rotation.y += v
-        m.rotation.z = Math.cos(panoramaBox.rotation.y * 3) * Math.PI / 4 - Math.PI / 2
-      }
-      group.add(m)
-    }
+//     if (addSquids) {
+//       // Add squids
+//       for (let i = 0; i < 20; i++) {
+//         const m = new EntityMesh('1.16.4', 'squid').mesh
+//         m.position.set(Math.random() * 30 - 15, Math.random() * 20 - 10, Math.random() * 10 - 17)
+//         m.rotation.set(0, Math.PI + Math.random(), -Math.PI / 4, 'ZYX')
+//         const v = Math.random() * 0.01
+//         onRender.push(() => {
+//           m.rotation.y += v
+//           m.rotation.z = Math.cos(panoramaBox.rotation.y * 3) * Math.PI / 4 - Math.PI / 2
+//         })
+//         group.add(m)
+//       }
+//     }
 
-    this.panoramaGroup = group
-  }
-}
+//     this.panoramaGroup = group
+//   }
+// }

renderer/viewer/three/worldrendererThree.ts

@@ -366,13 +366,15 @@ export class WorldRendererThree extends WorldRendererCommon {
       }
     }
     this.sectionObjects[data.key] = object
-    object.visible = false
-    const chunkKey = `${chunkCoords[0]},${chunkCoords[2]}`
-    this.waitingChunksToDisplay[chunkKey] ??= []
-    this.waitingChunksToDisplay[chunkKey].push(data.key)
-    if (this.finishedChunks[chunkKey]) {
-      // todo it might happen even when it was not an update
-      this.finishChunk(chunkKey)
+    if (this.displayOptions.inWorldRenderingConfig._renderByChunks) {
+      object.visible = false
+      const chunkKey = `${chunkCoords[0]},${chunkCoords[2]}`
+      this.waitingChunksToDisplay[chunkKey] ??= []
+      this.waitingChunksToDisplay[chunkKey].push(data.key)
+      if (this.finishedChunks[chunkKey]) {
+        // todo it might happen even when it was not an update
+        this.finishChunk(chunkKey)
+      }
     }
 
     this.updatePosDataChunk(data.key)

src/optionsStorage.ts

@@ -111,7 +111,8 @@ const defaultOptions = {
   highlightBlockColor: 'auto' as 'auto' | 'blue' | 'classic',
   rendererOptions: {
     three: {
-      _experimentalSmoothChunkLoading: true
+      _experimentalSmoothChunkLoading: true,
+      _renderByChunks: false
     }
   }
 }

src/watchOptions.ts

@@ -86,6 +86,7 @@ export const watchOptionsAfterViewerInit = () => {
     appViewer.inWorldRenderingConfig.fetchPlayerSkins = o.loadPlayerSkins
     appViewer.inWorldRenderingConfig.highlightBlockColor = o.highlightBlockColor
     appViewer.inWorldRenderingConfig._experimentalSmoothChunkLoading = o.rendererOptions.three._experimentalSmoothChunkLoading
+    appViewer.inWorldRenderingConfig._renderByChunks = o.rendererOptions.three._renderByChunks
   })
 
   appViewer.inWorldRenderingConfig.smoothLighting = options.smoothLighting