minecraft-renderer 0.1.0

package/src/three/graphicsBackend.ts

@@ -0,0 +1,274 @@
+/**
+ * Three.js Graphics Backend - Main entry point for Three.js WebGL rendering.
+ *
+ * This module provides the GraphicsBackend implementation using Three.js.
+ * It creates and manages:
+ * - WebGL renderer (via DocumentRenderer)
+ * - World renderer (via WorldRendererThree - to be implemented)
+ * - Scene management
+ * - Camera updates
+ */
+
+import * as THREE from 'three'
+import { Vec3 } from 'vec3'
+import type { GraphicsBackendLoader, GraphicsBackend, GraphicsInitOptions, DisplayWorldOptions } from '@/graphicsBackend'
+import { createWorkerProxy, restoreTransferred } from '@/lib/workerProxy'
+import { ResourcesManager } from '@/resourcesManager'
+// import { WorldViewWorker } from '@/worldView'
+import { FrameTimingCollector } from '@/lib/frameTimingCollector'
+import { WorldRendererThree } from './worldRendererThree'
+import { DocumentRenderer, isWebWorker, ThreeRendererMainData } from './documentRenderer'
+import { PanoramaRenderer } from './panorama'
+
+// Disable Three.js color management for compatibility
+THREE.ColorManagement.enabled = false
+// Enable Three.js in global scope for debugging
+globalThis.THREE = THREE
+
+const getBackendMethods = (worldRenderer: WorldRendererThree): any => {
+  return {
+    updateMap: worldRenderer.entities.updateMap.bind(worldRenderer.entities),
+    updateCustomBlock: worldRenderer.updateCustomBlock.bind(worldRenderer),
+    getBlockInfo: worldRenderer.getBlockInfo.bind(worldRenderer),
+    playEntityAnimation: worldRenderer.entities.playAnimation.bind(worldRenderer.entities),
+    damageEntity: worldRenderer.entities.handleDamageEvent.bind(worldRenderer.entities),
+    updatePlayerSkin: worldRenderer.entities.updatePlayerSkin.bind(worldRenderer.entities),
+    changeHandSwingingState: worldRenderer.changeHandSwingingState.bind(worldRenderer),
+    getHighestBlocks: worldRenderer.getHighestBlocks.bind(worldRenderer),
+    reloadWorld: worldRenderer.reloadWorld.bind(worldRenderer),
+    updateEntityModel: worldRenderer.entities.updateEntityModel.bind(worldRenderer.entities),
+    playEntityModelAnimation: worldRenderer.entities.playEntityModelAnimation.bind(worldRenderer.entities),
+    addMedia: worldRenderer.media.addMedia.bind(worldRenderer.media),
+    destroyMedia: worldRenderer.media.destroyMedia.bind(worldRenderer.media),
+    setControlMode: worldRenderer.media.setControlMode.bind(worldRenderer.media),
+    setVideoPlaying: worldRenderer.media.setVideoPlaying.bind(worldRenderer.media),
+    setVideoSeeking: worldRenderer.media.setVideoSeeking.bind(worldRenderer.media),
+    setVideoVolume: worldRenderer.media.setVideoVolume.bind(worldRenderer.media),
+    setVideoSpeed: worldRenderer.media.setVideoSpeed.bind(worldRenderer.media),
+    handleUserClick: worldRenderer.media.handleUserClick.bind(worldRenderer.media),
+    addSectionAnimation(id: string, animation: typeof worldRenderer.sectionsOffsetsAnimations[string]) {
+      worldRenderer.sectionsOffsetsAnimations[id] = animation
+    },
+    removeSectionAnimation(id: string) {
+      delete worldRenderer.sectionsOffsetsAnimations[id]
+    },
+    shakeFromDamage: worldRenderer.cameraShake.shakeFromDamage.bind(worldRenderer.cameraShake),
+    onPageInteraction: worldRenderer.media.onPageInteraction.bind(worldRenderer.media),
+    downloadMesherLog: worldRenderer.downloadMesherLog.bind(worldRenderer),
+    // Fireworks methods
+    explodeFirework: worldRenderer.fireworksLegacy.explode.bind(worldRenderer.fireworksLegacy),
+    explodeFireworkFacingCamera: worldRenderer.fireworksLegacy.explodeFacingCamera.bind(worldRenderer.fireworksLegacy),
+    addWaypoint: worldRenderer.waypoints.addWaypoint.bind(worldRenderer.waypoints),
+    removeWaypoint: worldRenderer.waypoints.removeWaypoint.bind(worldRenderer.waypoints),
+    // Cinematic script methods
+    startCinimaticScript: worldRenderer.cinimaticScript.startScript.bind(worldRenderer.cinimaticScript),
+    stopCinimaticScript: worldRenderer.cinimaticScript.stopScript.bind(worldRenderer.cinimaticScript),
+    launchFirework: worldRenderer.fireworks.launchFirework.bind(worldRenderer.fireworks),
+    // New method for updating skybox
+    setSkyboxImage: worldRenderer.skyboxRenderer.setSkyboxImage.bind(worldRenderer.skyboxRenderer),
+    async loadGeometryExport(exportData: any) {
+      // Import dynamically to avoid circular dependencies
+      const { applyWorldGeometryExport } = await import('./worldGeometryExport')
+      return applyWorldGeometryExport(worldRenderer, exportData)
+    }
+  }
+}
+
+export type ThreeJsBackendMethods = ReturnType<typeof getBackendMethods>
+
+const initOptionsRestorers = [
+  ResourcesManager,
+  // WorldDataEmitterWorker
+]
+
+/**
+ * Creates the base graphics backend with core functionality.
+ */
+export const createGraphicsBackendBase = () => {
+  // Private state
+  let initOptions!: GraphicsInitOptions
+  let documentRenderer: DocumentRenderer | null = null
+  let panoramaRenderer: PanoramaRenderer | null = null
+  let worldRenderer: WorldRendererThree | null = null
+  let frameTimingCollector: FrameTimingCollector | null = null
+
+  const init = (initOptionsArg: GraphicsInitOptions, mainData?: ThreeRendererMainData) => {
+    if (isWebWorker) {
+      initOptions = restoreTransferred(initOptionsArg, initOptionsRestorers, globalThis as unknown as Worker)
+    } else {
+      initOptions = initOptionsArg
+    }
+
+    documentRenderer = new DocumentRenderer(initOptions, mainData?.canvas)
+      ; (globalThis as any).renderer = documentRenderer.renderer
+      ; (globalThis as any).documentRenderer = documentRenderer
+      ; (globalThis as any).threeJsBackend = backend
+      ; (globalThis as any).resourcesManager = initOptions.resourcesManager
+
+    callModsMethod('default', backend)
+  }
+
+  const startPanorama = async () => {
+    if (!documentRenderer) throw new Error('Document renderer not initialized')
+    if (worldRenderer) return
+
+    if (!panoramaRenderer) {
+      panoramaRenderer = new PanoramaRenderer(documentRenderer, initOptions, !!process.env.SINGLE_FILE_BUILD_MODE)
+        ; (globalThis as any).panoramaRenderer = panoramaRenderer
+
+      callModsMethod('panoramaCreated', panoramaRenderer)
+      await panoramaRenderer.start()
+      callModsMethod('panoramaReady', panoramaRenderer)
+    }
+  }
+
+  const startWorld = async (displayOptionsArg: DisplayWorldOptions) => {
+    const displayOptions: DisplayWorldOptions = isWebWorker ? restoreTransferred(displayOptionsArg, initOptionsRestorers, globalThis as unknown as Worker) : displayOptionsArg
+
+    if (!documentRenderer) throw new Error('Document renderer not initialized')
+
+    documentRenderer.nonReactiveState = displayOptions.nonReactiveState
+
+    if (panoramaRenderer) {
+      panoramaRenderer.dispose()
+      panoramaRenderer = null
+    }
+
+    worldRenderer = new WorldRendererThree(documentRenderer.renderer, initOptions, displayOptions)
+
+    await worldRenderer.worldReadyPromise
+
+    frameTimingCollector = new FrameTimingCollector(displayOptions.nonReactiveState)
+      ; (globalThis as any).frameTimingCollector = frameTimingCollector
+
+    const originalRender = documentRenderer.render
+
+    documentRenderer.render = function (sizeChanged: boolean) {
+      originalRender.call(this, sizeChanged)
+      frameTimingCollector?.markFrameStart()
+
+      if (!displayOptions.inWorldRenderingConfig.paused) {
+        worldRenderer?.render(sizeChanged)
+      }
+
+      frameTimingCollector?.markFrameEnd()
+      frameTimingCollector?.markFrameDisplay()
+    }
+
+    documentRenderer.inWorldRenderingConfig = displayOptions.inWorldRenderingConfig
+
+      ; (globalThis as any).world = worldRenderer
+
+    callModsMethod('worldReady', worldRenderer)
+  }
+
+  const disconnect = () => {
+    if (panoramaRenderer) {
+      panoramaRenderer.dispose()
+      panoramaRenderer = null
+    }
+
+    if (documentRenderer) {
+      documentRenderer.dispose()
+    }
+
+    if (worldRenderer) {
+      worldRenderer.destroy()
+      worldRenderer = null
+    }
+  }
+
+  // Public interface
+  const backend: GraphicsBackend = {
+    id: 'threejs',
+    displayName: `three.js ${THREE.REVISION}`,
+    startPanorama,
+    startWorld,
+    disconnect,
+    setRendering(rendering) {
+      documentRenderer!.setPaused(!rendering)
+      if (worldRenderer) worldRenderer.renderingActive = rendering
+    },
+    getDebugOverlay: () => ({
+      get entitiesString() {
+        return worldRenderer?.entities.getDebugString()
+      },
+    }),
+    updateCamera(pos: Vec3 | null, yaw: number, pitch: number) {
+      // Mark camera update event for frame timing visualization
+      frameTimingCollector?.markCameraUpdate(!pos)
+      worldRenderer?.setFirstPersonCamera(pos, yaw, pitch)
+    },
+    get soundSystem() {
+      return worldRenderer?.soundSystem
+    },
+    get backendMethods() {
+      if (!worldRenderer) return undefined
+      return getBackendMethods(worldRenderer)
+    }
+  }
+
+  return {
+    main: {
+      init,
+      backend
+    },
+    workerProxy() {
+      return createWorkerProxy({
+        init(initOptionsArg: GraphicsInitOptions, canvas: OffscreenCanvas) {
+          init(initOptionsArg, { canvas })
+        },
+        updateSizeExternal(width: number, height: number, pixelRatio: number) {
+          documentRenderer?.updateSizeExternal(width, height, pixelRatio)
+        },
+        startPanorama,
+        startWorld,
+        disconnect,
+        setRendering: backend.setRendering,
+        updateCamera(pos, yaw, pitch) {
+          const posVec = pos ? new Vec3(pos.x, pos.y, pos.z) : null
+          frameTimingCollector?.markCameraUpdate(!posVec)
+          backend.updateCamera(posVec, yaw, pitch)
+        },
+        async callBackendMethod<K extends keyof ThreeJsBackendMethods>(
+          method: K,
+          ...args: Parameters<ThreeJsBackendMethods[K]>
+        ): Promise<ReturnType<ThreeJsBackendMethods[K]> extends Promise<infer R> ? R : ReturnType<ThreeJsBackendMethods[K]>> {
+          if (!worldRenderer) {
+            throw new Error('World renderer not initialized')
+          }
+
+          const methods = getBackendMethods(worldRenderer)
+          const target = methods[method]
+
+          if (!target) {
+            throw new Error(`Backend method ${String(method)} is unavailable`)
+          }
+
+          return target(...args)
+        }
+      })
+    }
+  }
+}
+
+const createGraphicsBackend = (initOptions: GraphicsInitOptions) => {
+  const { main } = createGraphicsBackendBase()
+  main.init(initOptions)
+  return main.backend
+}
+
+const callModsMethod = (method: string, ...args: any[]) => {
+  for (const mod of Object.values((globalThis.loadedMods ?? {}) as Record<string, any>)) {
+    try {
+      mod.threeJsBackendModule?.[method]?.(...args)
+    } catch (err) {
+      const errorMessage = `[mod three.js] Error calling ${method} on ${mod.name}: ${err}`
+      throw new Error(errorMessage)
+    }
+  }
+}
+
+createGraphicsBackend.id = 'threejs'
+
+export default createGraphicsBackend

package/src/three/graphicsBackendOffThread.ts

@@ -0,0 +1,107 @@
+import * as THREE from 'three'
+import { GraphicsBackend, GraphicsBackendLoader } from '@/graphicsBackend'
+import { useWorkerProxy, deepPrepareForTransfer, findProblemTransfer } from '@/lib/workerProxy'
+import { initMesherWorker, meshersSendMcData } from '@/lib/worldrendererCommon'
+import { dynamicMcDataFiles } from '@/lib/buildSharedConfig.mjs'
+import { addNewStat } from '@/lib/ui/newStats'
+import { createGraphicsBackendBase, type ThreeJsBackendMethods } from './graphicsBackend'
+import { addCanvasForWorker } from './documentRenderer'
+
+export const createGraphicsBackendOffThread: GraphicsBackendLoader = async (initOptions) => {
+  const worker = initMesherWorker(() => { })
+  const promise = new Promise(resolve => {
+    worker.onmessage = ({ data }) => {
+      if (data.type === 'sideControlTookOver') {
+        resolve(data)
+      }
+    }
+  })
+  worker.postMessage({ type: 'sideControl', value: 'graphicsBackendThree' })
+  await promise
+  type WorkerType = ReturnType<ReturnType<typeof createGraphicsBackendBase>['workerProxy']>
+
+  const proxy = useWorkerProxy<WorkerType>(worker)
+  const canvas = addCanvasForWorker()
+  canvas.onSizeChanged((w, h) => {
+    proxy.updateSizeExternal(w, h, window.devicePixelRatio || 1)
+  })
+
+  const preparedInitOptions = deepPrepareForTransfer(initOptions, worker)
+  try {
+    proxy.init(preparedInitOptions, canvas.canvas)
+  } catch (err) {
+    findProblemTransfer(preparedInitOptions)
+    throw err
+  }
+
+  const backendMethodsProxy = new Proxy({} as ThreeJsBackendMethods, {
+    get(_target, prop) {
+      if (typeof prop !== 'string') {
+        return undefined
+      }
+      return async (...args: any[]) => proxy.callBackendMethod(prop as any, ...args)
+    }
+  })
+
+  const backend: GraphicsBackend = {
+    id: 'threejs',
+    displayName: `three.js ${THREE.REVISION}`,
+    // startPanorama: proxy.startPanorama,
+    async startPanorama() { },
+    async startWorld(options) {
+      meshersSendMcData([worker], options.version, [...dynamicMcDataFiles, 'items', 'itemsArray', 'entitiesByName', 'blocksByStateId'])
+
+      options.inWorldRenderingConfig['__syncToWorker'] = true
+
+      if (options.playerStateReactive) {
+        options.playerStateReactive['__syncToWorker'] = true
+      }
+
+      if (options.rendererState) {
+        options.rendererState['__syncFromWorker'] = true
+      }
+      if (options.nonReactiveState) {
+        options.nonReactiveState['__syncFromWorker'] = true
+      }
+      options.nonReactiveState['__syncFromWorkerInterval'] = 200
+      const prepared = deepPrepareForTransfer(options, worker)
+      try {
+        await proxy.startWorld(structuredClone(prepared))
+        console.log('startWorld done')
+      } catch (err) {
+        findProblemTransfer(prepared)
+        throw err
+      }
+      proxy.updateSizeExternal(canvas.size.width, canvas.size.height, window.devicePixelRatio || 1)
+
+
+      const fpsStat = addNewStat('fps')
+      setInterval(() => {
+        const { fps, avgRenderTime, worstRenderTime } = options.nonReactiveState
+        fpsStat.updateText(`FPS: ${fps.toFixed(0)} (${avgRenderTime.toFixed(0)}ms/${worstRenderTime.toFixed(0)}ms)`)
+        options.nonReactiveState.fps = 0
+      }, 1000)
+    },
+    disconnect() {
+      canvas.destroy()
+      proxy.disconnect()
+      worker.terminate()
+    },
+    setRendering(rendering) {
+      proxy.setRendering(rendering)
+    },
+    updateCamera(pos, yaw, pitch) {
+      proxy.updateCamera(pos ? { x: pos.x, y: pos.y, z: pos.z } : null, yaw, pitch)
+    },
+    soundSystem: undefined,
+    backendMethods: backendMethodsProxy
+  }
+
+  return backend
+}
+createGraphicsBackendOffThread.id = 'threejs-off-thread'
+
+export const isOffthreadRendererSupported = () => {
+  // check if toOffscreenCanvas is supported
+  return 'OffscreenCanvas' in window && 'transferControlToOffscreen' in HTMLCanvasElement.prototype && !process.env.SINGLE_FILE_BUILD_MODE
+}

package/src/three/hand.ts

@@ -0,0 +1,89 @@
+import * as THREE from 'three'
+import { loadSkinFromUsername, loadSkinImage } from '../lib/utils/skins'
+import { steveTexture } from './entities'
+
+
+export const getMyHand = async (image?: string, userName?: string) => {
+  let newMap: THREE.Texture
+  if (!image && !userName) {
+    newMap = await steveTexture
+  } else {
+    if (!image) {
+      image = await loadSkinFromUsername(userName!, 'skin')
+    }
+    if (!image) {
+      return
+    }
+    const { canvas } = await loadSkinImage(image)
+    newMap = new THREE.CanvasTexture(canvas)
+  }
+
+  newMap.magFilter = THREE.NearestFilter
+  newMap.minFilter = THREE.NearestFilter
+  // right arm
+  const box = new THREE.BoxGeometry()
+  const material = new THREE.MeshStandardMaterial()
+  const slim = false
+  const mesh = new THREE.Mesh(box, material)
+  mesh.scale.x = slim ? 3 : 4
+  mesh.scale.y = 12
+  mesh.scale.z = 4
+  setSkinUVs(box, 40, 16, slim ? 3 : 4, 12, 4)
+  material.map = newMap
+  material.needsUpdate = true
+  const group = new THREE.Group()
+  group.add(mesh)
+  group.scale.set(0.1, 0.1, 0.1)
+  mesh.rotation.z = Math.PI
+  return group
+}
+
+function setUVs (
+  box: THREE.BoxGeometry,
+  u: number,
+  v: number,
+  width: number,
+  height: number,
+  depth: number,
+  textureWidth: number,
+  textureHeight: number
+): void {
+  const toFaceVertices = (x1: number, y1: number, x2: number, y2: number) => [
+    new THREE.Vector2(x1 / textureWidth, 1 - y2 / textureHeight),
+    new THREE.Vector2(x2 / textureWidth, 1 - y2 / textureHeight),
+    new THREE.Vector2(x2 / textureWidth, 1 - y1 / textureHeight),
+    new THREE.Vector2(x1 / textureWidth, 1 - y1 / textureHeight),
+  ]
+
+  const top = toFaceVertices(u + depth, v, u + width + depth, v + depth)
+  const bottom = toFaceVertices(u + width + depth, v, u + width * 2 + depth, v + depth)
+  const left = toFaceVertices(u, v + depth, u + depth, v + depth + height)
+  const front = toFaceVertices(u + depth, v + depth, u + width + depth, v + depth + height)
+  const right = toFaceVertices(u + width + depth, v + depth, u + width + depth * 2, v + height + depth)
+  const back = toFaceVertices(u + width + depth * 2, v + depth, u + width * 2 + depth * 2, v + height + depth)
+
+  const uvAttr = box.attributes.uv as THREE.BufferAttribute
+  const uvRight = [right[3], right[2], right[0], right[1]]
+  const uvLeft = [left[3], left[2], left[0], left[1]]
+  const uvTop = [top[3], top[2], top[0], top[1]]
+  const uvBottom = [bottom[0], bottom[1], bottom[3], bottom[2]]
+  const uvFront = [front[3], front[2], front[0], front[1]]
+  const uvBack = [back[3], back[2], back[0], back[1]]
+
+  // Create a new array to hold the modified UV data
+  const newUVData = [] as number[]
+
+  // Iterate over the arrays and copy the data to uvData
+  for (const uvArray of [uvRight, uvLeft, uvTop, uvBottom, uvFront, uvBack]) {
+    for (const uv of uvArray) {
+      newUVData.push(uv.x, uv.y)
+    }
+  }
+
+  uvAttr.set(new Float32Array(newUVData))
+  uvAttr.needsUpdate = true
+}
+
+function setSkinUVs (box: THREE.BoxGeometry, u: number, v: number, width: number, height: number, depth: number): void {
+  setUVs(box, u, v, width, height, depth, 64, 64)
+}