feat: Add spectator mode entity spectating (#369)

Author: Phoenix616

renderer/viewer/lib/basePlayerState.ts

@@ -47,17 +47,27 @@ export const getInitialPlayerState = () => proxy({
   shouldHideHand: false,
   heldItemMain: undefined as HandItemBlock | undefined,
   heldItemOff: undefined as HandItemBlock | undefined,
+
+  cameraSpectatingEntity: undefined as number | undefined,
+})
+
+export const getPlayerStateUtils = (reactive: PlayerStateReactive) => ({
+  isSpectator () {
+    return reactive.gameMode === 'spectator'
+  },
+  isSpectatingEntity () {
+    return reactive.cameraSpectatingEntity !== undefined && reactive.gameMode === 'spectator'
+  }
 })
 
 export const getInitialPlayerStateRenderer = () => ({
   reactive: getInitialPlayerState()
 })
 
 export type PlayerStateReactive = ReturnType<typeof getInitialPlayerState>
+export type PlayerStateUtils = ReturnType<typeof getPlayerStateUtils>
 
-export interface PlayerStateRenderer {
-  reactive: PlayerStateReactive
-}
+export type PlayerStateRenderer = PlayerStateReactive
 
 export const getItemSelector = (playerState: PlayerStateRenderer, specificProperties: ItemSpecificContextProperties, item?: import('prismarine-item').Item) => {
   return {

renderer/viewer/lib/worldrendererCommon.ts

@@ -16,7 +16,7 @@ import { HighestBlockInfo, CustomBlockModels, BlockStateModelInfo, getBlockAsset
 import { chunkPos } from './simpleUtils'
 import { addNewStat, removeAllStats, updatePanesVisibility, updateStatText } from './ui/newStats'
 import { WorldDataEmitterWorker } from './worldDataEmitter'
-import { PlayerStateRenderer } from './basePlayerState'
+import { getPlayerStateUtils, PlayerStateReactive, PlayerStateRenderer, PlayerStateUtils } from './basePlayerState'
 import { MesherLogReader } from './mesherlogReader'
 import { setSkinsConfig } from './utils/skins'
 
@@ -156,7 +156,8 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
   abstract changeBackgroundColor (color: [number, number, number]): void
 
   worldRendererConfig: WorldRendererConfig
-  playerState: PlayerStateRenderer
+  playerStateReactive: PlayerStateReactive
+  playerStateUtils: PlayerStateUtils
   reactiveState: RendererReactiveState
   mesherLogReader: MesherLogReader | undefined
   forceCallFromMesherReplayer = false
@@ -191,7 +192,8 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
   constructor (public readonly resourcesManager: ResourcesManagerTransferred, public displayOptions: DisplayWorldOptions, public initOptions: GraphicsInitOptions) {
     this.snapshotInitialValues()
     this.worldRendererConfig = displayOptions.inWorldRenderingConfig
-    this.playerState = displayOptions.playerState
+    this.playerStateReactive = displayOptions.playerStateReactive
+    this.playerStateUtils = getPlayerStateUtils(this.playerStateReactive)
     this.reactiveState = displayOptions.rendererState
     // this.mesherLogReader = new MesherLogReader(this)
     this.renderUpdateEmitter.on('update', () => {
@@ -304,11 +306,11 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
     }
   }
 
-  onReactivePlayerStateUpdated<T extends keyof typeof this.displayOptions.playerState.reactive>(key: T, callback: (value: typeof this.displayOptions.playerState.reactive[T]) => void, initial = true) {
+  onReactivePlayerStateUpdated<T extends keyof PlayerStateReactive>(key: T, callback: (value: PlayerStateReactive[T]) => void, initial = true) {
     if (initial) {
-      callback(this.displayOptions.playerState.reactive[key])
+      callback(this.playerStateReactive[key])
     }
-    subscribeKey(this.displayOptions.playerState.reactive, key, callback)
+    subscribeKey(this.playerStateReactive, key, callback)
   }
 
   onReactiveConfigUpdated<T extends keyof typeof this.worldRendererConfig>(key: T, callback: (value: typeof this.worldRendererConfig[T]) => void) {

renderer/viewer/three/cameraShake.ts

@@ -21,6 +21,10 @@ export class CameraShake {
     this.update()
   }
 
+  getBaseRotation () {
+    return { pitch: this.basePitch, yaw: this.baseYaw }
+  }
+
   shakeFromDamage (yaw?: number) {
     // Add roll animation
     const startRoll = this.rollAngle
@@ -35,6 +39,11 @@ export class CameraShake {
   }
 
   update () {
+    if (this.worldRenderer.playerStateUtils.isSpectatingEntity()) {
+      // Remove any shaking when spectating
+      this.rollAngle = 0
+      this.rollAnimation = undefined
+    }
     // Update roll animation
     if (this.rollAnimation) {
       const now = performance.now()

renderer/viewer/three/entities.ts

@@ -870,9 +870,7 @@ export class Entities {
 
     const meta = getGeneralEntitiesMetadata(entity)
 
-    //@ts-expect-error
-    // set visibility
-    const isInvisible = entity.metadata?.[0] & 0x20
+    const isInvisible = ((entity.metadata?.[0] ?? 0) as unknown as number) & 0x20 || (this.worldRenderer.playerStateReactive.cameraSpectatingEntity === entity.id && this.worldRenderer.playerStateUtils.isSpectator())
     for (const child of mesh!.children ?? []) {
       if (child.name !== 'nametag') {
         child.visible = !isInvisible

renderer/viewer/three/holdingBlock.ts

@@ -116,12 +116,10 @@ export default class HoldingBlock {
   offHandModeLegacy = false
 
   swingAnimator: HandSwingAnimator | undefined
-  playerState: PlayerStateRenderer
   config: WorldRendererConfig
 
   constructor (public worldRenderer: WorldRendererThree, public offHand = false) {
     this.initCameraGroup()
-    this.playerState = worldRenderer.displayOptions.playerState
     this.worldRenderer.onReactivePlayerStateUpdated('heldItemMain', () => {
       if (!this.offHand) {
         this.updateItem()
@@ -146,9 +144,9 @@ export default class HoldingBlock {
         // now watch over the player skin
         watchProperty(
           async () => {
-            return getMyHand(this.playerState.reactive.playerSkin, this.playerState.reactive.onlineMode ? this.playerState.reactive.username : undefined)
+            return getMyHand(this.worldRenderer.playerStateReactive.playerSkin, this.worldRenderer.playerStateReactive.onlineMode ? this.worldRenderer.playerStateReactive.username : undefined)
           },
-          this.playerState.reactive,
+          this.worldRenderer.playerStateReactive,
           'playerSkin',
           (newHand) => {
             if (newHand) {
@@ -167,7 +165,7 @@ export default class HoldingBlock {
 
   updateItem () {
     if (!this.ready) return
-    const item = this.offHand ? this.playerState.reactive.heldItemOff : this.playerState.reactive.heldItemMain
+    const item = this.offHand ? this.worldRenderer.playerStateReactive.heldItemOff : this.worldRenderer.playerStateReactive.heldItemMain
     if (item) {
       void this.setNewItem(item)
     } else if (this.offHand) {
@@ -357,8 +355,8 @@ export default class HoldingBlock {
         itemId: handItem.id,
       }, {
         'minecraft:display_context': 'firstperson',
-        'minecraft:use_duration': this.playerState.reactive.itemUsageTicks,
-        'minecraft:using_item': !!this.playerState.reactive.itemUsageTicks,
+        'minecraft:use_duration': this.worldRenderer.playerStateReactive.itemUsageTicks,
+        'minecraft:using_item': !!this.worldRenderer.playerStateReactive.itemUsageTicks,
       }, this.lastItemModelName)
       if (result) {
         const { mesh: itemMesh, isBlock, modelName } = result
@@ -475,7 +473,7 @@ export default class HoldingBlock {
     this.swingAnimator = new HandSwingAnimator(this.holdingBlockInnerGroup)
     this.swingAnimator.type = result.type
     if (this.config.viewBobbing) {
-      this.idleAnimator = new HandIdleAnimator(this.holdingBlockInnerGroup, this.playerState)
+      this.idleAnimator = new HandIdleAnimator(this.holdingBlockInnerGroup, this.worldRenderer.playerStateReactive)
     }
   }
 
@@ -710,7 +708,7 @@ class HandIdleAnimator {
 
     // Check for state changes from player state
     if (this.playerState) {
-      const newState = this.playerState.reactive.movementState
+      const newState = this.playerState.movementState
       if (newState !== this.targetState) {
         this.setState(newState)
       }

renderer/viewer/three/panorama.ts

@@ -197,7 +197,7 @@ export class PanoramaRenderer {
         version,
         worldView,
         inWorldRenderingConfig: defaultWorldRendererConfig,
-        playerState: getInitialPlayerStateRenderer(),
+        playerStateReactive: getInitialPlayerStateRenderer().reactive,
         rendererState: getDefaultRendererState().reactive,
         nonReactiveState: getDefaultRendererState().nonReactive
       }

renderer/viewer/three/world/cursorBlock.ts

@@ -61,16 +61,14 @@ export class CursorBlock {
     this.blockBreakMesh.name = 'blockBreakMesh'
     this.worldRenderer.scene.add(this.blockBreakMesh)
 
-    subscribeKey(this.worldRenderer.playerState.reactive, 'gameMode', () => {
+    this.worldRenderer.onReactivePlayerStateUpdated('gameMode', () => {
       this.updateLineMaterial()
     })
-
-    this.updateLineMaterial()
   }
 
   // Update functions
   updateLineMaterial () {
-    const inCreative = this.worldRenderer.displayOptions.playerState.reactive.gameMode === 'creative'
+    const inCreative = this.worldRenderer.playerStateReactive.gameMode === 'creative'
     const pixelRatio = this.worldRenderer.renderer.getPixelRatio()
 
     this.cursorLineMaterial = new LineMaterial({

renderer/viewer/three/worldrendererThree.ts

@@ -69,6 +69,9 @@ export class WorldRendererThree extends WorldRendererCommon {
   }
   fountains: Fountain[] = []
 
+  private currentPosTween?: tweenJs.Tween<THREE.Vector3>
+  private currentRotTween?: tweenJs.Tween<{ pitch: number, yaw: number }>
+
   get tilesRendered () {
     return Object.values(this.sectionObjects).reduce((acc, obj) => acc + (obj as any).tilesCount, 0)
   }
@@ -150,7 +153,7 @@ export class WorldRendererThree extends WorldRendererCommon {
   override watchReactivePlayerState () {
     super.watchReactivePlayerState()
     this.onReactivePlayerStateUpdated('inWater', (value) => {
-      this.scene.fog = value ? new THREE.Fog(0x00_00_ff, 0.1, this.displayOptions.playerState.reactive.waterBreathing ? 100 : 20) : null
+      this.scene.fog = value ? new THREE.Fog(0x00_00_ff, 0.1, this.playerStateReactive.waterBreathing ? 100 : 20) : null
     })
     this.onReactivePlayerStateUpdated('ambientLight', (value) => {
       if (!value) return
@@ -238,7 +241,7 @@ export class WorldRendererThree extends WorldRendererCommon {
   }
 
   getItemRenderData (item: Record<string, any>, specificProps: ItemSpecificContextProperties) {
-    return getItemUv(item, specificProps, this.resourcesManager, this.playerState)
+    return getItemUv(item, specificProps, this.resourcesManager, this.playerStateReactive)
   }
 
   async demoModel () {
@@ -430,7 +433,7 @@ export class WorldRendererThree extends WorldRendererCommon {
   }
 
   setFirstPersonCamera (pos: Vec3 | null, yaw: number, pitch: number) {
-    const yOffset = this.displayOptions.playerState.reactive.eyeHeight
+    const yOffset = this.playerStateReactive.eyeHeight
 
     this.updateCamera(pos?.offset(0, yOffset, 0) ?? null, yaw, pitch)
     this.media.tryIntersectMedia()
@@ -448,10 +451,28 @@ export class WorldRendererThree extends WorldRendererCommon {
         pos.y -= this.camera.position.y // Fix Y position of camera in world
       }
 
-      new tweenJs.Tween(this.cameraObject.position).to({ x: pos.x, y: pos.y, z: pos.z }, 50).start()
+      this.currentPosTween?.stop()
+      this.currentPosTween = new tweenJs.Tween(this.cameraObject.position).to({ x: pos.x, y: pos.y, z: pos.z }, this.playerStateUtils.isSpectatingEntity() ? 150 : 50).start()
       // this.freeFlyState.position = pos
     }
-    this.cameraShake.setBaseRotation(pitch, yaw)
+
+    if (this.playerStateUtils.isSpectatingEntity()) {
+      const rotation = this.cameraShake.getBaseRotation()
+      // wrap in the correct direction
+      let yawOffset = 0
+      const halfPi = Math.PI / 2
+      if (rotation.yaw < halfPi && yaw > Math.PI + halfPi) {
+        yawOffset = -Math.PI * 2
+      } else if (yaw < halfPi && rotation.yaw > Math.PI + halfPi) {
+        yawOffset = Math.PI * 2
+      }
+      this.currentRotTween?.stop()
+      this.currentRotTween = new tweenJs.Tween(rotation).to({ pitch, yaw: yaw + yawOffset }, 100)
+        .onUpdate(params => this.cameraShake.setBaseRotation(params.pitch, params.yaw - yawOffset)).start()
+    } else {
+      this.currentRotTween?.stop()
+      this.cameraShake.setBaseRotation(pitch, yaw)
+    }
   }
 
   debugChunksVisibilityOverride () {
@@ -508,7 +529,7 @@ export class WorldRendererThree extends WorldRendererCommon {
     const cam = this.cameraGroupVr instanceof THREE.Group ? this.cameraGroupVr.children.find(child => child instanceof THREE.PerspectiveCamera) as THREE.PerspectiveCamera : this.camera
     this.renderer.render(this.scene, cam)
 
-    if (this.displayOptions.inWorldRenderingConfig.showHand && this.playerState.reactive.gameMode !== 'spectator' /*  && !this.freeFlyMode */ && !this.renderer.xr.isPresenting) {
+    if (this.displayOptions.inWorldRenderingConfig.showHand && this.playerStateReactive.gameMode !== 'spectator' /*  && !this.freeFlyMode */ && !this.renderer.xr.isPresenting) {
       this.holdingBlock.render(this.camera, this.renderer, this.ambientLight, this.directionalLight)
       this.holdingBlockLeft.render(this.camera, this.renderer, this.ambientLight, this.directionalLight)
     }

src/appViewer.ts

@@ -1,5 +1,5 @@
 import { WorldDataEmitter, WorldDataEmitterWorker } from 'renderer/viewer/lib/worldDataEmitter'
-import { getInitialPlayerState, PlayerStateRenderer } from 'renderer/viewer/lib/basePlayerState'
+import { getInitialPlayerState, PlayerStateRenderer, PlayerStateReactive } from 'renderer/viewer/lib/basePlayerState'
 import { subscribeKey } from 'valtio/utils'
 import { defaultWorldRendererConfig, WorldRendererConfig } from 'renderer/viewer/lib/worldrendererCommon'
 import { Vec3 } from 'vec3'
@@ -67,7 +67,7 @@ export interface DisplayWorldOptions {
   version: string
   worldView: WorldDataEmitterWorker
   inWorldRenderingConfig: WorldRendererConfig
-  playerState: PlayerStateRenderer
+  playerStateReactive: PlayerStateReactive
   rendererState: RendererReactiveState
   nonReactiveState: NonReactiveState
 }
@@ -180,7 +180,7 @@ export class AppViewer {
     this.worldView!.listenToBot(bot)
   }
 
-  async startWorld (world, renderDistance: number, playerStateSend: PlayerStateRenderer = this.playerState) {
+  async startWorld (world, renderDistance: number, playerStateSend: PlayerStateRenderer = this.playerState.reactive) {
     if (this.currentDisplay === 'world') throw new Error('World already started')
     this.currentDisplay = 'world'
     const startPosition = bot.entity?.position ?? new Vec3(0, 64, 0)
@@ -192,7 +192,7 @@ export class AppViewer {
       version: this.resourcesManager.currentConfig!.version,
       worldView: this.worldView,
       inWorldRenderingConfig: this.inWorldRenderingConfig,
-      playerState: playerStateSend,
+      playerStateReactive: playerStateSend,
       rendererState: this.rendererState,
       nonReactiveState: this.nonReactiveState
     }

src/cameraRotationControls.ts

@@ -18,6 +18,7 @@ export function onCameraMove (e: MouseEvent | CameraMoveEvent) {
   if (!isGameActive(true)) return
   if (e.type === 'mousemove' && !document.pointerLockElement) return
   e.stopPropagation?.()
+  if (appViewer.playerState.utils.isSpectatingEntity()) return
   const now = performance.now()
   // todo: limit camera movement for now to avoid unexpected jumps
   if (now - lastMouseMove < 4 && !options.preciseMouseInput) return
@@ -32,7 +33,6 @@ export function onCameraMove (e: MouseEvent | CameraMoveEvent) {
   updateMotion()
 }
 
-
 export const moveCameraRawHandler = ({ x, y }: { x: number; y: number }) => {
   const maxPitch = 0.5 * Math.PI
   const minPitch = -0.5 * Math.PI