pick changes from webgpu:

fix cursor lines
fix background color change

Author: zardoy

renderer/buildMesherWorker.mjs

@@ -22,7 +22,7 @@ const buildOptions = {
   },
   platform: 'browser',
   entryPoints: [path.join(__dirname, './viewer/lib/mesher/mesher.ts')],
-  minify: true,
+  minify: !watch,
   logLevel: 'info',
   drop: !watch ? [
     'debugger'
@@ -39,7 +39,7 @@ const buildOptions = {
     ...mesherSharedPlugins,
     {
       name: 'external-json',
-      setup (build) {
+      setup(build) {
         build.onResolve({ filter: /\.json$/ }, args => {
           const fileName = args.path.split('/').pop().replace('.json', '')
           if (args.resolveDir.includes('minecraft-data')) {

renderer/playground.html

@@ -11,11 +11,17 @@
 
       html, body {
         height: 100%;
+        touch-action: none;
 
         margin: 0;
         padding: 0;
       }
 
+      * {
+        user-select: none;
+        -webkit-user-select: none;
+      }
+
       canvas {
         height: 100%;
         width: 100%;

renderer/viewer/lib/basePlayerState.ts

@@ -14,6 +14,9 @@ export type PlayerStateEvents = {
   heldItemChanged: (item: HandItemBlock | undefined, isLeftHand: boolean) => void
 }
 
+export type BlockShape = { position: any; width: any; height: any; depth: any; }
+export type BlocksShapes = BlockShape[]
+
 export interface IPlayerState {
   getEyeHeight(): number
   getMovementState(): MovementState
@@ -39,6 +42,21 @@ export interface IPlayerState {
     ambientLight: number
     directionalLight: number
     gameMode?: GameMode
+    lookingAtBlock?: {
+      x: number
+      y: number
+      z: number
+      face?: number
+      shapes: BlocksShapes
+    }
+    diggingBlock?: {
+      x: number
+      y: number
+      z: number
+      stage: number
+      face?: number
+      mergedShape?: BlockShape
+    }
   }
 }
 

renderer/viewer/lib/ui/newStats.ts

@@ -7,7 +7,7 @@ let lastY = 40
 export const addNewStat = (id: string, width = 80, x = rightOffset, y = lastY) => {
   const pane = document.createElement('div')
   pane.style.position = 'fixed'
-  pane.style.top = `${y}px`
+  pane.style.top = `${y ?? lastY}px`
   pane.style.right = `${x}px`
   // gray bg
   pane.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'
@@ -19,7 +19,7 @@ export const addNewStat = (id: string, width = 80, x = rightOffset, y = lastY) =
   pane.style.pointerEvents = 'none'
   document.body.appendChild(pane)
   stats[id] = pane
-  if (y === 0) { // otherwise it's a custom position
+  if (y === undefined && x === rightOffset) { // otherwise it's a custom position
     // rightOffset += width
     lastY += 20
   }
@@ -35,6 +35,50 @@ export const addNewStat = (id: string, width = 80, x = rightOffset, y = lastY) =
   }
 }
 
+export const addNewStat2 = (id: string, { top, bottom, right, left, displayOnlyWhenWider }: { top?: number, bottom?: number, right?: number, left?: number, displayOnlyWhenWider?: number }) => {
+  if (top === undefined && bottom === undefined) top = 0
+  const pane = document.createElement('div')
+  pane.style.position = 'fixed'
+  if (top !== undefined) {
+    pane.style.top = `${top}px`
+  }
+  if (bottom !== undefined) {
+    pane.style.bottom = `${bottom}px`
+  }
+  if (left !== undefined) {
+    pane.style.left = `${left}px`
+  }
+  if (right !== undefined) {
+    pane.style.right = `${right}px`
+  }
+  // gray bg
+  pane.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'
+  pane.style.color = 'white'
+  pane.style.padding = '2px'
+  pane.style.fontFamily = 'monospace'
+  pane.style.fontSize = '12px'
+  pane.style.zIndex = '10000'
+  pane.style.pointerEvents = 'none'
+  document.body.appendChild(pane)
+  stats[id] = pane
+
+  const resizeCheck = () => {
+    if (!displayOnlyWhenWider) return
+    pane.style.display = window.innerWidth > displayOnlyWhenWider ? 'block' : 'none'
+  }
+  window.addEventListener('resize', resizeCheck)
+  resizeCheck()
+
+  return {
+    updateText (text: string) {
+      pane.innerText = text
+    },
+    setVisibility (visible: boolean) {
+      pane.style.display = visible ? 'block' : 'none'
+    }
+  }
+}
+
 export const updateStatText = (id, text) => {
   if (!stats[id]) return
   stats[id].innerText = text

renderer/viewer/lib/workerProxy.ts

@@ -1,5 +1,6 @@
-export function createWorkerProxy<T extends Record<string, (...args: any[]) => void>> (handlers: T): { __workerProxy: T } {
-  addEventListener('message', (event) => {
+export function createWorkerProxy<T extends Record<string, (...args: any[]) => void>> (handlers: T, channel?: MessagePort): { __workerProxy: T } {
+  const target = channel ?? globalThis
+  target.addEventListener('message', (event: any) => {
     const { type, args } = event.data
     if (handlers[type]) {
       handlers[type](...args)
@@ -19,7 +20,7 @@ export function createWorkerProxy<T extends Record<string, (...args: any[]) => v
  * const workerChannel = useWorkerProxy<typeof importedTypeWorkerProxy>(worker)
  * ```
  */
-export const useWorkerProxy = <T extends { __workerProxy: Record<string, (...args: any[]) => void> }> (worker: Worker, autoTransfer = true): T['__workerProxy'] & {
+export const useWorkerProxy = <T extends { __workerProxy: Record<string, (...args: any[]) => void> }> (worker: Worker | MessagePort, autoTransfer = true): T['__workerProxy'] & {
   transfer: (...args: Transferable[]) => T['__workerProxy']
 } => {
   // in main thread
@@ -40,11 +41,11 @@ export const useWorkerProxy = <T extends { __workerProxy: Record<string, (...arg
         }
       }
       return (...args: any[]) => {
-        const transfer = autoTransfer ? args.filter(arg => arg instanceof ArrayBuffer || arg instanceof MessagePort || arg instanceof ImageBitmap || arg instanceof OffscreenCanvas) : []
+        const transfer = autoTransfer ? args.filter(arg => arg instanceof ArrayBuffer || arg instanceof MessagePort || arg instanceof ImageBitmap || arg instanceof OffscreenCanvas || arg instanceof ImageData) : []
         worker.postMessage({
           type: prop,
           args,
-        }, transfer)
+        }, transfer as any[])
       }
     }
   })

renderer/viewer/lib/worldrendererCommon.ts

@@ -53,6 +53,7 @@ export const defaultWorldRendererConfig = {
 export type WorldRendererConfig = typeof defaultWorldRendererConfig
 
 export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any> {
+  timeOfTheDay = 0
   worldSizeParams = { minY: 0, worldHeight: 256 }
 
   active = false
@@ -184,7 +185,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
       if (this.mainThreadRendering) {
         this.fpsUpdate()
       }
-    }, 1000)
+    }, 500)
   }
 
   fpsUpdate () {
@@ -495,10 +496,23 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
   }
 
   getMesherConfig (): MesherConfig {
+    let skyLight = 15
+    const timeOfDay = this.timeOfTheDay
+    if (timeOfDay < 0 || timeOfDay > 24_000) {
+      //
+    } else if (timeOfDay <= 6000 || timeOfDay >= 18_000) {
+      skyLight = 15
+    } else if (timeOfDay > 6000 && timeOfDay < 12_000) {
+      skyLight = 15 - ((timeOfDay - 6000) / 6000) * 15
+    } else if (timeOfDay >= 12_000 && timeOfDay < 18_000) {
+      skyLight = ((timeOfDay - 12_000) / 6000) * 15
+    }
+
+    skyLight = Math.floor(skyLight)
     return {
       version: this.version,
       enableLighting: this.worldRendererConfig.enableLighting,
-      skyLight: 15,
+      skyLight,
       smoothLighting: this.worldRendererConfig.smoothLighting,
       outputFormat: this.outputFormat,
       textureSize: this.resourcesManager.currentResources!.blocksAtlasParser.atlas.latest.width,
@@ -608,7 +622,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
     this.logWorkerWork(`-> unloadChunk ${JSON.stringify({ x, z })}`)
     delete this.finishedChunks[`${x},${z}`]
     this.allChunksFinished = Object.keys(this.finishedChunks).length === this.chunksLength
-    if (!this.allChunksFinished) {
+    if (Object.keys(this.finishedChunks).length === 0) {
       this.allLoadedIn = undefined
       this.initialChunkLoadWasStartedIn = undefined
     }
@@ -735,18 +749,11 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
     worldEmitter.on('time', (timeOfDay) => {
       this.timeUpdated?.(timeOfDay)
 
-      let skyLight = 15
       if (timeOfDay < 0 || timeOfDay > 24_000) {
         throw new Error('Invalid time of day. It should be between 0 and 24000.')
-      } else if (timeOfDay <= 6000 || timeOfDay >= 18_000) {
-        skyLight = 15
-      } else if (timeOfDay > 6000 && timeOfDay < 12_000) {
-        skyLight = 15 - ((timeOfDay - 6000) / 6000) * 15
-      } else if (timeOfDay >= 12_000 && timeOfDay < 18_000) {
-        skyLight = ((timeOfDay - 12_000) / 6000) * 15
       }
 
-      skyLight = Math.floor(skyLight) // todo: remove this after optimization
+      this.timeOfTheDay = timeOfDay
 
       // if (this.worldRendererConfig.skyLight === skyLight) return
       // this.worldRendererConfig.skyLight = skyLight

renderer/viewer/three/graphicsBackend.ts

@@ -19,8 +19,6 @@ const getBackendMethods = (worldRenderer: WorldRendererThree) => {
     playEntityAnimation: worldRenderer.entities.playAnimation.bind(worldRenderer.entities),
     damageEntity: worldRenderer.entities.handleDamageEvent.bind(worldRenderer.entities),
     updatePlayerSkin: worldRenderer.entities.updatePlayerSkin.bind(worldRenderer.entities),
-    setHighlightCursorBlock: worldRenderer.cursorBlock.setHighlightCursorBlock.bind(worldRenderer.cursorBlock),
-    updateBreakAnimation: worldRenderer.cursorBlock.updateBreakAnimation.bind(worldRenderer.cursorBlock),
     changeHandSwingingState: worldRenderer.changeHandSwingingState.bind(worldRenderer),
     getHighestBlocks: worldRenderer.getHighestBlocks.bind(worldRenderer),
     rerenderAllChunks: worldRenderer.rerenderAllChunks.bind(worldRenderer),

renderer/viewer/three/world/cursorBlock.ts

@@ -3,6 +3,7 @@ import { LineMaterial, LineSegmentsGeometry, Wireframe } from 'three-stdlib'
 import { Vec3 } from 'vec3'
 import { subscribeKey } from 'valtio/utils'
 import { Block } from 'prismarine-block'
+import { BlockShape, BlocksShapes } from 'renderer/viewer/lib/basePlayerState'
 import { WorldRendererThree } from '../worldrendererThree'
 import destroyStage0 from '../../../../assets/destroy_stage_0.png'
 import destroyStage1 from '../../../../assets/destroy_stage_1.png'
@@ -89,15 +90,13 @@ export class CursorBlock {
     this.prevColor = this.worldRenderer.worldRendererConfig.highlightBlockColor
   }
 
-  updateBreakAnimation (block: Block | undefined, stage: number | null) {
+  updateBreakAnimation (blockPosition: { x: number, y: number, z: number } | undefined, stage: number | null, mergedShape?: BlockShape) {
     this.hideBreakAnimation()
-    if (stage === null || !block) return
+    if (stage === null || !blockPosition || !mergedShape) return
 
-    const mergedShape = bot.mouse.getMergedCursorShape(block)
-    if (!mergedShape) return
-    const { position, width, height, depth } = bot.mouse.getDataFromShape(mergedShape)
+    const { position, width, height, depth } = mergedShape
     this.blockBreakMesh.scale.set(width * 1.001, height * 1.001, depth * 1.001)
-    position.add(block.position)
+    position.add(blockPosition)
     this.blockBreakMesh.position.set(position.x, position.y, position.z)
     this.blockBreakMesh.visible = true;
 
@@ -119,7 +118,7 @@ export class CursorBlock {
     }
   }
 
-  setHighlightCursorBlock (blockPos: Vec3 | null, shapePositions?: Array<{ position: any; width: any; height: any; depth: any; }>): void {
+  setHighlightCursorBlock (blockPos: Vec3 | null, shapePositions?: BlocksShapes): void {
     if (blockPos && this.interactionLines && blockPos.equals(this.interactionLines.blockPos)) {
       return
     }
@@ -143,7 +142,7 @@ export class CursorBlock {
       group.add(wireframe)
     }
     this.worldRenderer.scene.add(group)
-    group.visible = this.cursorLinesHidden
+    group.visible = !this.cursorLinesHidden
     this.interactionLines = { blockPos, mesh: group }
   }
 

renderer/viewer/three/worldrendererThree.ts

@@ -140,6 +140,7 @@ export class WorldRendererThree extends WorldRendererCommon {
   }
 
   override watchReactivePlayerState () {
+    super.watchReactivePlayerState()
     this.onReactiveValueUpdated('inWater', (value) => {
       this.scene.fog = value ? new THREE.Fog(0x00_00_ff, 0.1, this.displayOptions.playerState.reactive.waterBreathing ? 100 : 20) : null
     })
@@ -151,6 +152,12 @@ export class WorldRendererThree extends WorldRendererCommon {
       if (!value) return
       this.directionalLight.intensity = value
     })
+    this.onReactiveValueUpdated('lookingAtBlock', (value) => {
+      this.cursorBlock.setHighlightCursorBlock(value ? new Vec3(value.x, value.y, value.z) : null, value?.shapes)
+    })
+    this.onReactiveValueUpdated('diggingBlock', (value) => {
+      this.cursorBlock.updateBreakAnimation(value ? { x: value.x, y: value.y, z: value.z } : undefined, value?.stage ?? null, value?.mergedShape)
+    })
   }
 
   changeHandSwingingState (isAnimationPlaying: boolean, isLeft = false) {

src/appViewer.ts

@@ -155,6 +155,12 @@ export class AppViewer {
     }
   }
 
+  async startWithBot () {
+    const renderDistance = miscUiState.singleplayer ? options.renderDistance : options.multiplayerRenderDistance
+    await this.startWorld(bot.world, renderDistance)
+    this.worldView!.listenToBot(bot)
+  }
+
   async startWorld (world, renderDistance: number, playerStateSend: IPlayerState = this.playerState) {
     if (this.currentDisplay === 'world') throw new Error('World already started')
     this.currentDisplay = 'world'
@@ -185,11 +191,7 @@ export class AppViewer {
   }
 
   resetBackend (cleanState = false) {
-    if (cleanState) {
-      this.currentState = undefined
-      this.currentDisplay = null
-      this.worldView = undefined
-    }
+    this.disconnectBackend(cleanState)
     if (this.backendLoader) {
       this.loadBackend(this.backendLoader)
     }
@@ -216,7 +218,12 @@ export class AppViewer {
     this.resourcesManager.destroy()
   }
 
-  disconnectBackend () {
+  disconnectBackend (cleanState = false) {
+    if (cleanState) {
+      this.currentState = undefined
+      this.currentDisplay = null
+      this.worldView = undefined
+    }
     if (this.backend) {
       this.backend.disconnect()
       this.backend = undefined
@@ -225,7 +232,7 @@ export class AppViewer {
     const { promise, resolve } = Promise.withResolvers<void>()
     this.worldReady = promise
     this.resolveWorldReady = resolve
-    Object.assign(this.rendererState, getDefaultRendererState())
+    this.rendererState = proxy(getDefaultRendererState())
     // this.queuedDisplay = undefined
   }
 

src/appViewerLoad.ts

@@ -37,3 +37,13 @@ const animLoop = () => {
 requestAnimationFrame(animLoop)
 
 watchOptionsAfterViewerInit()
+
+// reset backend when renderer changes
+
+subscribeKey(options, 'activeRenderer', () => {
+  if (appViewer.currentDisplay === 'world' && bot) {
+    appViewer.resetBackend(true)
+    loadBackend()
+    void appViewer.startWithBot()
+  }
+})