minecraft-renderer 0.1.53 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecraft-renderer",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "description": "The most Modular Minecraft world renderer with Three.js WebGL backend",
   "type": "module",
   "main": "./dist/index.js",

package/src/lib/buildSharedConfig.mjs

@@ -1,5 +1,6 @@
 export const dynamicMcDataFiles = {
     'blocks': 'blocksArray',
     'blockCollisionShapes': 'blockCollisionShapes',
-    'biomes': 'biomesArray'
+    'biomes': 'biomesArray',
+    'tints': 'tints',
 }

package/src/lib/buildWorkerMcDataIndexes.test.ts

@@ -0,0 +1,30 @@
+//@ts-nocheck
+import { describe, expect, it } from 'vitest'
+import { augmentWorkerMcData } from './buildWorkerMcDataIndexes'
+
+describe('augmentWorkerMcData', () => {
+  it('is idempotent when mcData is augmented twice (menu then world)', () => {
+    const mcData: Record<string, unknown> = {
+      entities: [{ name: 'bat', id: 1, type: 'mob' }],
+      blocks: [{ name: 'stone', id: 3, minStateId: 48, maxStateId: 63, defaultState: 48 }],
+    }
+    augmentWorkerMcData(mcData)
+    expect(() => augmentWorkerMcData(mcData)).not.toThrow()
+    expect(mcData.__workerIndexesBuilt).toBe(true)
+    expect(Array.isArray(mcData.blocksArray)).toBe(true)
+  })
+
+  it('builds entitiesByName and items indexes from arrays', () => {
+    const mcData: Record<string, unknown> = {
+      entities: [{ name: 'bat', id: 1, type: 'mob' }],
+      items: [{ name: 'dirt', id: 2 }],
+      blocks: [{ name: 'stone', id: 3, minStateId: 48, maxStateId: 63, defaultState: 48 }],
+    }
+    augmentWorkerMcData(mcData)
+    expect((mcData.entitiesByName as Record<string, { name: string }>).bat?.name).toBe('bat')
+    expect((mcData.entities as Record<number, { id: number }>)[1]?.id).toBe(1)
+    expect((mcData.itemsByName as Record<string, unknown>).dirt).toBeDefined()
+    expect((mcData.items as Record<number, unknown>)[2]).toBeDefined()
+    expect((mcData.blocksByStateId as Record<number, unknown>)[48]).toBeDefined()
+  })
+})

package/src/lib/buildWorkerMcDataIndexes.ts

@@ -0,0 +1,93 @@
+//@ts-nocheck
+type McElement = Record<string, unknown>
+
+function buildIndexFromArray<T extends McElement> (
+  array: T[],
+  field: keyof T
+): Record<string | number, T> {
+  return array.reduce<Record<string | number, T>>((index, element) => {
+    index[element[field] as string | number] = element
+    return index
+  }, {})
+}
+
+function buildIndexFromArrayWithRanges<T extends McElement> (
+  array: T[],
+  minField: keyof T,
+  maxField: keyof T
+): Record<number, T> {
+  return array.reduce<Record<number, T>>((index, element) => {
+    const min = element[minField] as number
+    const max = element[maxField] as number
+    for (let i = min; i <= max; i++) {
+      index[i] = element
+    }
+    return index
+  }, {})
+}
+
+function ensureBlockStateIds (blocks: McElement[]) {
+  if (!blocks.length) return
+  if ('minStateId' in blocks[0] && 'defaultState' in blocks[0]) return
+  for (const block of blocks) {
+    const id = block.id as number
+    block.minStateId = id << 4
+    block.maxStateId = (block.minStateId as number) + 15
+    block.defaultState = block.minStateId
+  }
+}
+
+function getSourceArray (
+  mcData: Record<string, unknown>,
+  arrayKey: string,
+  rawKey: string
+): McElement[] | undefined {
+  const fromArrayKey = mcData[arrayKey]
+  if (Array.isArray(fromArrayKey)) {
+    return fromArrayKey as McElement[]
+  }
+  const raw = mcData[rawKey]
+  if (Array.isArray(raw)) {
+    return raw as McElement[]
+  }
+  return undefined
+}
+
+export function augmentWorkerMcData (mcData: Record<string, unknown>) {
+  if (mcData.__workerIndexesBuilt) {
+    return mcData
+  }
+
+  const blocks = getSourceArray(mcData, 'blocksArray', 'blocks')
+  if (blocks?.length) {
+    ensureBlockStateIds(blocks)
+    mcData.blocksArray = blocks
+    mcData.blocks = buildIndexFromArray(blocks, 'id')
+    mcData.blocksByName = buildIndexFromArray(blocks, 'name')
+    mcData.blocksByStateId = buildIndexFromArrayWithRanges(blocks, 'minStateId', 'maxStateId')
+  }
+
+  const items = getSourceArray(mcData, 'itemsArray', 'items')
+  if (items?.length) {
+    mcData.itemsArray = items
+    mcData.itemsByName = buildIndexFromArray(items, 'name')
+    mcData.items = buildIndexFromArray(items, 'id')
+  }
+
+  const entities = getSourceArray(mcData, 'entitiesArray', 'entities')
+  if (entities?.length) {
+    mcData.entitiesArray = entities
+    mcData.entitiesByName = buildIndexFromArray(entities, 'name')
+    mcData.entities = buildIndexFromArray(entities, 'id')
+  }
+
+  const biomes = getSourceArray(mcData, 'biomesArray', 'biomes')
+  if (biomes?.length) {
+    mcData.biomesArray = biomes
+    mcData.biomes = buildIndexFromArray(biomes, 'id')
+    mcData.biomesByName = buildIndexFromArray(biomes, 'name')
+  }
+
+  mcData.__workerIndexesBuilt = true
+  return mcData
+}

package/src/lib/workerProxy.restore.test.ts

@@ -0,0 +1,29 @@
+//@ts-nocheck
+import { describe, expect, it } from 'vitest'
+import { restoreTransferred } from './workerProxy'
+
+describe('restoreTransferred Set/Map', () => {
+  const worker = null as unknown as Worker
+
+  it('restores Set from __setValues', () => {
+    const out = restoreTransferred({ __restorer: 'Set', __setValues: ['a', 'b'] }, [], worker, false)
+    expect(out).toEqual(new Set(['a', 'b']))
+  })
+
+  it('does not throw when legacy values is a function (Map.values collision)', () => {
+    const map = new Map([['k', 1]])
+    const out = restoreTransferred({ __restorer: 'Set', values: map.values.bind(map) }, [], worker, false)
+    expect(out).toEqual(new Set())
+  })
+
+  it('restores Map from __mapEntries', () => {
+    const out = restoreTransferred({ __restorer: 'Map', __mapEntries: [['a', 1]] }, [], worker, false)
+    expect(out).toEqual(new Map([['a', 1]]))
+  })
+
+  it('does not throw when legacy entries is a function', () => {
+    const m = new Map()
+    const out = restoreTransferred({ __restorer: 'Map', entries: m.entries.bind(m) }, [], worker, false)
+    expect(out).toEqual(new Map())
+  })
+})

package/src/lib/workerProxy.ts

@@ -117,6 +117,10 @@ const getSyncId = () => {
   return Math.random().toString(36).slice(2, 15) + Math.random().toString(36).slice(2, 15)
 }
 
+const applySyncPatch = (target: any, patch: any, worker: Worker) => {
+  Object.assign(target, restoreTransferred(patch, [], worker, false))
+}
+
 const setupObjectSync = (obj: any, originalObj: any, worker: Worker, isValtio: boolean, debugKey: string) => {
   if (!obj['__syncToWorker'] && !obj['__syncFromWorker'] && !isValtio) return
 
@@ -141,13 +145,45 @@ const setupObjectSync = (obj: any, originalObj: any, worker: Worker, isValtio: b
     worker.addEventListener('message', (event: any) => {
       if (event.data.type === 'sync' && event.data.syncId === syncId) {
         currentWorkerSyncStats.fromWorker++
-        Object.assign(originalObj, event.data.value)
+        applySyncPatch(originalObj, event.data.value, worker)
       }
     })
   }
 }
 
+const serializeMapForTransfer = (map: Map<unknown, unknown>) => ({
+  __restorer: 'Map',
+  __mapEntries: Array.from(map.entries()),
+})
+
+const serializeSetForTransfer = (set: Set<unknown>) => ({
+  __restorer: 'Set',
+  __setValues: [...set],
+})
+
+const isSetLike = (value: unknown): value is Set<unknown> => {
+  return value instanceof Set || Object.prototype.toString.call(value) === '[object Set]'
+}
+
+const isMapLike = (value: unknown): value is Map<unknown, unknown> => {
+  return value instanceof Map || Object.prototype.toString.call(value) === '[object Map]'
+}
+
+const iterableFromPlainObject = (obj: Record<string, unknown>) => {
+  return Object.keys(obj)
+    .filter(k => !k.startsWith('__'))
+    .sort((a, b) => Number(a) - Number(b))
+    .map(k => obj[k])
+}
+
 const cloneValtioObject = (obj: any) => {
+  if (isMapLike(obj)) {
+    return serializeMapForTransfer(obj)
+  }
+  if (isSetLike(obj)) {
+    return serializeSetForTransfer(obj)
+  }
+
   if (getVersion(obj) === undefined) {
     return obj
   }
@@ -179,16 +215,19 @@ export const deepPrepareForTransfer = (obj: any, worker: Worker, autoRemoveMetho
         continue
       }
 
-      // print a warning for Date, RegExp, Map, WeakMap, WeakSet
-      if (obj[key] instanceof Date || obj[key] instanceof RegExp || obj[key] instanceof Map || obj[key] instanceof WeakMap || obj[key] instanceof WeakSet) {
+      // print a warning for Date, RegExp, WeakMap, WeakSet
+      if (obj[key] instanceof Date || obj[key] instanceof RegExp || obj[key] instanceof WeakMap || obj[key] instanceof WeakSet) {
         console.warn(`Warning: ${key} is a ${typeof obj[key]}, which is not supported for transfer.`)
       }
 
       // default restorers main -> worker
+      if (isMapLike(obj[key])) {
+        newObj[key] = serializeMapForTransfer(obj[key])
+        continue
+      }
       // Set (only primitive values)
-      if (obj[key] instanceof Set) {
-        newObj[key] = [...obj[key]]
-        newObj[key]['__restorer'] = 'Set'
+      if (isSetLike(obj[key])) {
+        newObj[key] = serializeSetForTransfer(obj[key])
         continue
       }
       if (obj[key] instanceof Vec3) {
@@ -253,7 +292,7 @@ const receiveSyncedObject = (obj: any, worker: Worker, debugKey: string) => {
   if (obj['__syncToWorker']) {
     worker.addEventListener('message', (event: any) => {
       if (event.data.type === 'sync' && event.data.syncId === syncId) {
-        Object.assign(obj, event.data.value)
+        applySyncPatch(obj, event.data.value, worker)
       }
     })
   }
@@ -275,10 +314,36 @@ const receiveSyncedObject = (obj: any, worker: Worker, debugKey: string) => {
 }
 
 const defaultRestorers = [
+  {
+    restorerName: 'Map',
+    restoreTransferred(obj, _worker: Worker) {
+      if (Array.isArray(obj)) {
+        return new Map(obj)
+      }
+      const raw = obj.__mapEntries ?? obj.entries
+      if (Array.isArray(raw)) {
+        return new Map(raw)
+      }
+      if (raw != null && typeof raw === 'object' && typeof raw !== 'function') {
+        return new Map(Object.entries(raw as Record<string, unknown>))
+      }
+      return new Map()
+    }
+  },
   {
     restorerName: 'Set',
-    restoreTransferred(obj, worker: Worker) {
-      return new Set(obj)
+    restoreTransferred(obj, _worker: Worker) {
+      if (Array.isArray(obj)) {
+        return new Set(obj)
+      }
+      const raw = obj.__setValues ?? obj.values
+      if (Array.isArray(raw)) {
+        return new Set(raw)
+      }
+      if (raw != null && typeof raw === 'object' && typeof raw !== 'function') {
+        return new Set(iterableFromPlainObject(raw as Record<string, unknown>))
+      }
+      return new Set()
     }
   },
   {
@@ -296,41 +361,50 @@ export const addDefaultRestorer = (restorer: { restorerName: string, restoreTran
 export const restoreTransferred = (obj: any, restorersArg: any[], worker: Worker, errorHandler: ((error: Error) => void) | boolean = true) => {
   const restorers = [...defaultRestorers, ...restorersArg]
 
-  for (const key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      if (!obj[key]) continue
+  const restoreValue = (value: any, debugKey: string): any => {
+    if (value == null || typeof value !== 'object') {
+      return value
+    }
 
-      if (typeof obj[key] === 'object' && obj[key] !== null) {
-        restoreTransferred(obj[key], restorers, worker, errorHandler)
+    if (value['__restorer']) {
+      const restorer = restorers.find(r => {
+        return r.restorerName ? r.restorerName === value['__restorer'] : r.name === value['__restorer']
+      })
+      if (restorer) {
+        return restorer.restoreTransferred(value, worker)
       }
-
-      if (obj[key]['__restorer']) {
-        // find restorer
-        const restorer = restorers.find(restorer => {
-          return restorer.restorerName ? restorer.restorerName === obj[key]['__restorer'] : restorer.name === obj[key]['__restorer']
-        })
-        if (restorer) {
-          obj[key] = restorer.restoreTransferred(obj[key], worker)
-        } else {
-          const error = new Error(`Restorer ${obj[key]['__restorer']} not found`)
-          if (typeof errorHandler === 'function') {
-            errorHandler(error)
-          } else if (errorHandler) {
-            throw error
-          } else {
-            console.error(error)
-          }
-        }
+      const error = new Error(`Restorer ${value['__restorer']} not found`)
+      if (typeof errorHandler === 'function') {
+        errorHandler(error)
+      } else if (errorHandler) {
+        throw error
+      } else {
+        console.error(error)
       }
+      return value
+    }
+
+    if (Array.isArray(value)) {
+      return value.map((item, index) => restoreValue(item, `${debugKey}[${index}]`))
+    }
 
-      if (obj[key]['__valtio']) {
-        obj[key] = proxy(obj[key])
+    for (const key in value) {
+      if (!Object.prototype.hasOwnProperty.call(value, key)) continue
+      const child = value[key]
+      if (child != null && typeof child === 'object') {
+        value[key] = restoreValue(child, `${debugKey}.${key}`)
       }
+    }
 
-      receiveSyncedObject(obj[key], worker, key)
+    if (value['__valtio']) {
+      value = proxy(value)
     }
+
+    receiveSyncedObject(value, worker, debugKey)
+    return value
   }
-  return obj
+
+  return restoreValue(obj, 'root')
 }
 
 // const workerProxy = createWorkerProxy({

package/src/lib/worldrendererCommon.ts

@@ -1277,6 +1277,8 @@ export const initMesherWorker = (onGotMessage: (data: any) => void, workerName =
   return worker
 }
 
+let mesherMcDataTintsMissingWarned = false
+
 export const meshersSendMcData = (workers: Worker[], version: string, mcDataKeys = dynamicMcDataFiles, mcDataFull: IndexedData) => {
   const mcData = {
     version: JSON.parse(JSON.stringify(mcDataFull.version))
@@ -1284,8 +1286,37 @@ export const meshersSendMcData = (workers: Worker[], version: string, mcDataKeys
   for (const [finalKey, sourceKey] of Object.entries(mcDataKeys)) {
     mcData[finalKey] = mcDataFull[sourceKey]
   }
+  if ('tints' in mcDataKeys && !mcData.tints && !mesherMcDataTintsMissingWarned) {
+    mesherMcDataTintsMissingWarned = true
+    console.warn(`[meshersSendMcData] mcData.tints missing for version ${version}; shader cubes will use legacy path in worker`)
+  }
 
   for (const worker of workers) {
     worker.postMessage({ type: 'mcData', mcData })
   }
 }
+
+/** Wait for worker `mcDataApplied` after {@link meshersSendMcData}. */
+export const meshersSendMcDataAwait = (
+  workers: Worker[],
+  version: string,
+  mcDataKeys = dynamicMcDataFiles,
+  mcDataFull: IndexedData,
+  timeoutMs = 10_000
+): Promise<void> => {
+  return Promise.all(workers.map(worker => new Promise<void>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      worker.removeEventListener('message', handler as EventListener)
+      reject(new Error(`mcData transfer timeout (${timeoutMs}ms)`))
+    }, timeoutMs)
+    const handler = ({ data }: MessageEvent) => {
+      if (data?.type === 'mcDataApplied') {
+        clearTimeout(timeout)
+        worker.removeEventListener('message', handler as EventListener)
+        resolve()
+      }
+    }
+    worker.addEventListener('message', handler as EventListener)
+    meshersSendMcData([worker], version, mcDataKeys, mcDataFull)
+  }))).then(() => undefined)
+}

package/src/resourcesManager/resourcesManager.ts

@@ -12,6 +12,7 @@ import itemsAtlasLegacy from 'mc-assets/dist/itemsAtlasLegacy.png'
 import christmasPack from 'mc-assets/dist/textureReplacements/christmas'
 import { AtlasParser, ItemsAtlasesOutputJson } from 'mc-assets/dist/atlasParser'
 import worldBlockProvider, { WorldBlockProvider } from 'mc-assets/dist/worldBlockProvider'
+import { isWebWorker } from '../three/documentRenderer'
 import { ItemsRenderer } from 'mc-assets/dist/itemsRenderer'
 import { getLoadedItemDefinitionsStore } from 'mc-assets'
 
@@ -55,7 +56,15 @@ export class LoadedResourcesTransferrable {
   constructor(data?: any) {
     if (data) {
       Object.assign(this, data)
-      this.mcData = MinecraftData(this.version)
+    }
+    if (this.version) {
+      const globalMc = (globalThis as { loadedData?: IndexedData, mcData?: IndexedData }).loadedData
+        ?? (globalThis as { mcData?: IndexedData }).mcData
+      if (isWebWorker && globalMc?.entitiesByName) {
+        this.mcData = globalMc
+      } else {
+        this.mcData = MinecraftData(this.version)
+      }
       // this.itemsRenderer = new ItemsRenderer(
       //   this.version,
       //   this.blockstatesModels,
@@ -70,8 +79,10 @@ export class LoadedResourcesTransferrable {
     for (const key in this) {
       if (!Object.prototype.hasOwnProperty.call(this, key)) continue
       if (typeof this[key] === 'function') continue
-      if (key === 'itemsRenderer' || key === 'worldBlockProvider' || key === 'mcData') {
-        // Skip these fields
+      if (
+        key === 'itemsRenderer' || key === 'worldBlockProvider' || key === 'mcData'
+        || key === 'itemsDefinitionsStore' || key === 'sourceItemDefinitionsJson'
+      ) {
         continue
       }
       cloned[key] = this[key as keyof this]

package/src/three/chunkMeshManager.ts

@@ -174,7 +174,9 @@ export class ChunkMeshManager {
     if (!mat) return
     const atlas = (this.material as THREE.MeshBasicMaterial).map ?? null
     mat.uniforms.u_atlas.value = atlas
-    const { tintPalette } = getShaderCubeResources()
+    const resources = getShaderCubeResources()
+    if (!resources) return
+    const { tintPalette } = resources
     if (!tintPalette.isReady()) {
       tintPalette.createTexture()
     }
@@ -542,6 +544,7 @@ export class ChunkMeshManager {
       this.pendingNearReveal.set(chunkKey, Date.now())
       this.armNearRevealTimer(chunkKey)
       this.armExpectedGraceTimer(chunkKey)
+      this.tryRevealPending()
       return
     }
     this.flushChunkDisplay(chunkKey)
@@ -596,9 +599,8 @@ export class ChunkMeshManager {
    * `chunkKey` is not yet `finishedChunks=true`.
    *
    * Two regimes by `ageMs` (time spent in `pendingNearReveal`):
-   * - Within `EXPECTED_NEAR_GRACE_MS`: walks every expected position in
-   *   the view-distance circle; missing-and-not-finished counts as a
-   *   blocker (catches "far worker beats near worker").
+   * - Within `EXPECTED_NEAR_GRACE_MS`: nearer columns in the circle that are
+   *   loaded but not finished block (far worker beats near worker).
    * - After grace: only actually-loaded-but-not-finished columns block,
    *   so a never-arriving column does not freeze the view.
    */
@@ -631,6 +633,7 @@ export class ChunkMeshManager {
           const oz = (playerCz + dCz) << 4
           const otherKey = `${ox},${oz}`
           if (otherKey === chunkKey) continue
+          if (!loadedChunks[otherKey]) continue
           if (!finishedChunks[otherKey]) return true
         }
       }

package/src/three/entities.ts

@@ -706,7 +706,7 @@ export class Entities {
   uuidPerSkinUrlsCache = {} as Record<string, { skinUrl?: string, capeUrl?: string }>
   currentSkinUrls = {} as Record<string, string>
 
-  private isCanvasBlank(canvas: HTMLCanvasElement): boolean {
+  private isCanvasBlank(canvas: HTMLCanvasElement | OffscreenCanvas): boolean {
     return !canvas.getContext('2d')
       ?.getImageData(0, 0, canvas.width, canvas.height).data
       .some(channel => channel !== 0)
@@ -802,12 +802,10 @@ export class Entities {
       let skinTexture: THREE.Texture
       let skinCanvas: OffscreenCanvas
       if (skinUrl === stevePngUrl) {
-        skinTexture = await steveTexture
-        const canvas = createCanvas(64, 64)
-        const ctx = canvas.getContext('2d')
-        if (!ctx) throw new Error('Failed to get context')
-        ctx.drawImage(skinTexture.image, 0, 0)
-        skinCanvas = canvas
+        const steveSkin = await loadSkinImage(stevePngUrl)
+        playerCustomSkinImage = steveSkin.image
+        skinTexture = new THREE.CanvasTexture(steveSkin.canvas)
+        skinCanvas = steveSkin.canvas
       } else {
         const { canvas, image } = await loadSkinImage(skinUrl)
         playerCustomSkinImage = image
@@ -822,12 +820,12 @@ export class Entities {
       playerObject.skin.modelType = inferModelType(skinCanvas)
       playerObject.skin['isCustom'] = skinUrl !== stevePngUrl
 
-      let earsCanvas: HTMLCanvasElement | undefined
+      let earsCanvas: OffscreenCanvas | undefined
       if (!playerCustomSkinImage) {
         renderEars = false
       } else if (renderEars) {
-        earsCanvas = document.createElement('canvas')
-        loadEarsToCanvasFromSkin(earsCanvas, playerCustomSkinImage)
+        earsCanvas = createCanvas(64, 64)
+        loadEarsToCanvasFromSkin(earsCanvas as unknown as HTMLCanvasElement, playerCustomSkinImage)
         renderEars = !this.isCanvasBlank(earsCanvas)
       }
       if (renderEars) {

package/src/three/graphicsBackendBase.ts

@@ -149,23 +149,33 @@ export const createGraphicsBackendBase = () => {
 
   const startMenuBackground = async (menuBackgroundStartOptions?: MenuBackgroundOptions) => {
     if (!documentRenderer) throw new Error('Document renderer not initialized')
-    if (worldRenderer) return
 
-    if (!menuBackgroundRenderer) {
-      const mergedOptions: MenuBackgroundOptions = {
-        ...initOptions.config.menuBackground,
-        ...menuBackgroundStartOptions
-      }
-      menuBackgroundRenderer = new MenuBackgroundRenderer(
-        documentRenderer,
-        { ...initOptions },
-        mergedOptions,
-        !!process.env.SINGLE_FILE_BUILD_MODE
-      )
-      callModsMethod('menuBackgroundCreated', menuBackgroundRenderer)
-      await menuBackgroundRenderer.start(mergedOptions)
-      callModsMethod('menuBackgroundReady', menuBackgroundRenderer)
+    if (worldRenderer) {
+      worldRenderer.destroy()
+      worldRenderer = null
+      frameTimingCollector = null
+      ;(globalThis as any).world = undefined
+      ;(globalThis as any).frameTimingCollector = undefined
+    }
+
+    if (menuBackgroundRenderer) {
+      menuBackgroundRenderer.dispose()
+      menuBackgroundRenderer = null
+    }
+
+    const mergedOptions: MenuBackgroundOptions = {
+      ...initOptions.config.menuBackground,
+      ...menuBackgroundStartOptions
     }
+    menuBackgroundRenderer = new MenuBackgroundRenderer(
+      documentRenderer,
+      { ...initOptions },
+      mergedOptions,
+      !!process.env.SINGLE_FILE_BUILD_MODE
+    )
+    callModsMethod('menuBackgroundCreated', menuBackgroundRenderer)
+    await menuBackgroundRenderer.start(mergedOptions)
+    callModsMethod('menuBackgroundReady', menuBackgroundRenderer)
   }
 
   const startWorld = async (displayOptionsArg: DisplayWorldOptions) => {

package/src/three/graphicsBackendOffThread.ts

@@ -2,9 +2,11 @@
 import * as THREE from 'three'
 import { GraphicsBackend, GraphicsBackendLoader } from '../graphicsBackend'
 import { useWorkerProxy, deepPrepareForTransfer, findProblemTransfer } from '../lib/workerProxy'
-import { meshersSendMcData } from '../lib/worldrendererCommon'
+import { meshersSendMcDataAwait } from '../lib/worldrendererCommon'
 import { dynamicMcDataFiles } from '../lib/buildSharedConfig.mjs'
 import { addNewStat } from '../lib/ui/newStats'
+import type { MenuBackgroundOptions } from './menuBackground/types'
+import { MENU_BACKGROUND_MC_VERSION } from './menuBackground/shared'
 import { createGraphicsBackendBase, type ThreeJsBackendMethods } from './graphicsBackendBase'
 import { addCanvasForWorker } from './documentRenderer'
 
@@ -58,14 +60,36 @@ export const createGraphicsBackendOffThread: GraphicsBackendLoader = async (init
   const backend: GraphicsBackend = {
     id: 'threejs',
     displayName: `three.js ${THREE.REVISION}`,
-    async startMenuBackground() { },
+    async startMenuBackground(menuBackgroundStartOptions?: MenuBackgroundOptions) {
+      const mcData = menuBackgroundStartOptions?.resourcesManager?.currentResources?.mcData
+      if (mcData) {
+        const workerThreeSendData = {
+          ...dynamicMcDataFiles,
+          items: 'itemsArray',
+          entities: 'entitiesArray',
+        }
+        await meshersSendMcDataAwait([worker], MENU_BACKGROUND_MC_VERSION, workerThreeSendData, mcData)
+      }
+      const prepared = deepPrepareForTransfer(menuBackgroundStartOptions ?? {}, worker)
+      try {
+        await proxy.startMenuBackground(structuredClone(prepared))
+      } catch (err) {
+        findProblemTransfer(prepared)
+        throw err
+      }
+    },
     async startWorld(options) {
       const workerThreeSendData = {
         ...dynamicMcDataFiles,
         items: 'itemsArray',
         entities: 'entitiesArray',
       }
-      meshersSendMcData([worker], options.version, workerThreeSendData, options.resourcesManager.currentResources.mcData)
+      await meshersSendMcDataAwait(
+        [worker],
+        options.version,
+        workerThreeSendData,
+        options.resourcesManager.currentResources.mcData
+      )
       console.log('mc data sent to three worker')
 
       options.inWorldRenderingConfig['__syncToWorker'] = true

package/src/three/hand.ts

@@ -1,13 +1,13 @@
 //@ts-nocheck
 import * as THREE from 'three'
-import { loadSkinFromUsername, loadSkinImage } from '../lib/utils/skins'
-import { steveTexture } from './entities'
+import { loadSkinFromUsername, loadSkinImage, stevePngUrl } from '../lib/utils/skins'
 
 
 export const getMyHand = async (image?: string, userName?: string) => {
   let newMap: THREE.Texture
   if (!image && !userName) {
-    newMap = await steveTexture
+    const { canvas } = await loadSkinImage(stevePngUrl)
+    newMap = new THREE.CanvasTexture(canvas)
   } else {
     if (!image) {
       image = await loadSkinFromUsername(userName!, 'skin')