New release with important fixes (#41)

README.MD

@@ -53,11 +53,14 @@ There is world renderer playground ([link](https://mcon.vercel.app/playground.ht
 
 However, there are many things that can be done in online version. You can access some global variables in the console and useful examples:
 
-- `localStorage.debug = '*'` - Enables all debug messages!
+- `localStorage.debug = '*'` - Enables all debug messages! Warning: this will start all packets spam.
+Instead I recommend setting `options.debugLogNotFrequentPackets`. Also you can use `debugTopPackets` (with JSON.stringify) to see what packets were received/sent by name
 
 - `bot` - Mineflayer bot instance. See Mineflayer documentation for more.
 - `viewer` - Three.js viewer instance, basically does all the rendering.
 - `viewer.world.sectionObjects` - Object with all active chunk sections (geometries) in the world. Each chunk section is a Three.js mesh or group.
+- `debugSceneChunks` - The same as above, but relative to current bot position (e.g. 0,0 is the current chunk).
+- `debugChangedOptions` - See what options are changed. Don't change options here.
 - `localServer` - Only for singleplayer mode/host. Flying Squid server instance, see it's documentation for more.
 - `localServer.overworld.storageProvider.regions` - See ALL LOADED region files with all raw data.
 
@@ -70,7 +73,7 @@ You can also drag and drop any .dat file into the browser window to see it's con
 - `F3` - Toggle debug overlay
 - `F3 + A` - Reload all chunks (these that are loaded from the server)
 <!-- <!-- - `F3 + N` - Restart local server (basically resets the world!) -->
-- `F3 + G` - Toggle chunk sections (geometries) border visibility (aka Three.js geometry helpers) - most probably need to reload chunks after toggling
+- `F3 + G` - Toggle chunk sections (geometries) border visibility (aka Three.js geometry helpers)
 
 ### Notable Things that Power this Project
 

package.json

@@ -6,8 +6,9 @@
     "start": "node scripts/build.js copyFilesDev && node scripts/prepareData.mjs && node esbuild.mjs --watch",
     "start-watch-script": "nodemon -w esbuild.mjs esbuild.mjs",
     "build": "node scripts/build.js copyFiles && node scripts/prepareData.mjs -f && node esbuild.mjs --minify --prod",
-    "check-build": "tsc && pnpm build",
+    "check-build": "tsc && pnpm test-unit && pnpm build",
     "test:cypress": "cypress run",
+    "test-unit": "vitest",
     "test:e2e": "start-test http-get://localhost:8080 test:cypress",
     "prod-start": "node server.js",
     "postinstall": "node scripts/gen-texturepack-files.mjs && tsx scripts/optimizeBlockCollisions.ts",

prismarine-viewer/examples/playground.ts

@@ -90,19 +90,18 @@ async function main () {
   // const schem = await Schematic.read(Buffer.from(data), version)
 
   const viewDistance = 0
-  const center = new Vec3(0, 90, 0)
+  const targetPos = new Vec3(2, 90, 2)
 
   const World = WorldLoader(version)
 
   // const diamondSquare = require('diamond-square')({ version, seed: Math.floor(Math.random() * Math.pow(2, 31)) })
 
-  const targetPos = center
   //@ts-ignore
   const chunk1 = new Chunk()
   //@ts-ignore
   const chunk2 = new Chunk()
-  chunk1.setBlockStateId(center, 34)
-  chunk2.setBlockStateId(center.offset(1, 0, 0), 34)
+  chunk1.setBlockStateId(targetPos, 34)
+  chunk2.setBlockStateId(targetPos.offset(1, 0, 0), 34)
   const world = new World((chunkX, chunkZ) => {
     // if (chunkX === 0 && chunkZ === 0) return chunk1
     // if (chunkX === 1 && chunkZ === 0) return chunk2
@@ -113,7 +112,7 @@ async function main () {
 
   // await schem.paste(world, new Vec3(0, 60, 0))
 
-  const worldView = new WorldDataEmitter(world, viewDistance, center)
+  const worldView = new WorldDataEmitter(world, viewDistance, targetPos)
 
   // Create three.js context, add to page
   const renderer = new THREE.WebGLRenderer()
@@ -127,20 +126,20 @@ async function main () {
 
   viewer.listen(worldView)
   // Load chunks
-  await worldView.init(center)
+  await worldView.init(targetPos)
   window['worldView'] = worldView
   window['viewer'] = viewer
 
 
   //@ts-ignore
   const controls = new globalThis.THREE.OrbitControls(viewer.camera, renderer.domElement)
-  controls.target.set(center.x + 0.5, center.y + 0.5, center.z + 0.5)
+  controls.target.set(targetPos.x + 0.5, targetPos.y + 0.5, targetPos.z + 0.5)
 
-  const cameraPos = center.offset(2, 2, 2)
+  const cameraPos = targetPos.offset(2, 2, 2)
   const pitch = THREE.MathUtils.degToRad(-45)
   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.lookAt(targetPos.x + 0.5, targetPos.y + 0.5, targetPos.z + 0.5)
   viewer.camera.position.set(cameraPos.x + 0.5, cameraPos.y + 0.5, cameraPos.z + 0.5)
   controls.update()
 
@@ -158,30 +157,30 @@ async function main () {
       const { states } = mcData.blocksByStateId[getBlock()?.minStateId] ?? {}
       folder = gui.addFolder('metadata')
       if (states) {
-      for (const state of states) {
-        let defaultValue
-        switch (state.type) {
-          case 'enum':
-            defaultValue = state.values[0]
-            break
-          case 'bool':
-            defaultValue = false
-            break
-          case 'int':
-            defaultValue = 0
-            break
-          case 'direction':
-            defaultValue = 'north'
-            break
+        for (const state of states) {
+          let defaultValue
+          switch (state.type) {
+            case 'enum':
+              defaultValue = state.values[0]
+              break
+            case 'bool':
+              defaultValue = false
+              break
+            case 'int':
+              defaultValue = 0
+              break
+            case 'direction':
+              defaultValue = 'north'
+              break
 
-          default:
-            continue
-        }
-        blockProps[state.name] = defaultValue
-        if (state.type === 'enum') {
-          folder.add(blockProps, state.name, state.values)
-        } else {
-          folder.add(blockProps, state.name)
+            default:
+              continue
+          }
+          blockProps[state.name] = defaultValue
+          if (state.type === 'enum') {
+            folder.add(blockProps, state.name, state.values)
+          } else {
+            folder.add(blockProps, state.name)
           }
         }
       } else {
@@ -214,8 +213,8 @@ async function main () {
       }
     } else {
       try {
-      //@ts-ignore
-      block = Block.fromProperties(blockId ?? -1, blockProps, 0)
+        //@ts-ignore
+        block = Block.fromProperties(blockId ?? -1, blockProps, 0)
       } catch (err) {
         console.error(err)
         block = Block.fromStateId(0, 0)

prismarine-viewer/viewer/lib/entities.js

@@ -38,6 +38,7 @@ function getEntityMesh (entity, scene, options) {
         tex.needsUpdate = true
         const spriteMat = new THREE.SpriteMaterial({ map: tex })
         const sprite = new THREE.Sprite(spriteMat)
+        sprite.renderOrder = 1000
         sprite.scale.set(canvas.width * 0.005, canvas.height * 0.005, 1)
         sprite.position.y += entity.height + 0.6
 

prismarine-viewer/viewer/lib/viewer.ts

@@ -20,6 +20,7 @@ export class Viewer {
   playerHeight: number
   isSneaking: boolean
   version: string
+  cameraObjectOverride?: THREE.Object3D // for xr
 
   constructor (public renderer: THREE.WebGLRenderer, numWorkers?: number) {
     this.scene = new THREE.Scene()
@@ -81,12 +82,13 @@ export class Viewer {
   }
 
   setFirstPersonCamera (pos: Vec3 | null, yaw: number, pitch: number, roll = 0) {
+    const cam = this.cameraObjectOverride || this.camera
     if (pos) {
       let y = pos.y + this.playerHeight
       if (this.isSneaking) y -= 0.3
-      new tweenJs.Tween(this.camera.position).to({ x: pos.x, y, z: pos.z }, 50).start()
+      new tweenJs.Tween(cam.position).to({ x: pos.x, y, z: pos.z }, 50).start()
     }
-    this.camera.rotation.set(pitch, yaw, roll, 'ZYX')
+    cam.rotation.set(pitch, yaw, roll, 'ZYX')
   }
 
   // todo type
@@ -116,6 +118,10 @@ export class Viewer {
       this.setBlockStateId(new Vec3(pos.x, pos.y, pos.z), stateId)
     })
 
+    emitter.on('chunkPosUpdate', ({ pos }) => {
+      this.world.updateViewerPosition(pos)
+    })
+
     emitter.emit('listening')
 
     this.domElement.addEventListener('pointerdown', (evt) => {

prismarine-viewer/viewer/lib/worldDataEmitter.ts

@@ -18,7 +18,7 @@ export class WorldDataEmitter extends EventEmitter {
   private eventListeners: Record<string, any> = {};
   private emitter: WorldDataEmitter
 
-  constructor (public world: import('prismarine-world').world.World | typeof __type_bot['world'], public viewDistance: number, position: Vec3 = new Vec3(0, 0, 0)) {
+  constructor(public world: import('prismarine-world').world.World | typeof __type_bot['world'], public viewDistance: number, position: Vec3 = new Vec3(0, 0, 0)) {
     super()
     this.loadedChunks = {}
     this.lastPos = new Vec3(0, 0, 0).update(position)
@@ -91,6 +91,7 @@ export class WorldDataEmitter extends EventEmitter {
   }
 
   async init (pos: Vec3) {
+    this.emitter.emit('chunkPosUpdate', { pos })
     const [botX, botZ] = chunkPos(pos)
 
     const positions = generateSpiralMatrix(this.viewDistance).map(([x, z]) => new Vec3((botX + x) * 16, 0, (botZ + z) * 16))
@@ -138,6 +139,7 @@ export class WorldDataEmitter extends EventEmitter {
     const [lastX, lastZ] = chunkPos(this.lastPos)
     const [botX, botZ] = chunkPos(pos)
     if (lastX !== botX || lastZ !== botZ || force) {
+      this.emitter.emit('chunkPosUpdate', { pos })
       const newView = new ViewRect(botX, botZ, this.viewDistance)
       const chunksToUnload: Vec3[] = []
       for (const coords of Object.keys(this.loadedChunks)) {