minecraft-renderer 0.1.43 → 0.1.45

package/src/three/menuBackground/index.ts

@@ -0,0 +1,36 @@
+//@ts-nocheck
+export { MENU_BACKGROUND_MC_VERSION } from './shared'
+export type { MenuBackgroundView } from './activeView'
+export { resizeMenuBackgroundCamera } from './activeView'
+export type { MenuBackgroundMode, MenuBackgroundOptions } from './types'
+export { resolveMenuBackgroundMode } from './types'
+export { ClassicMenuBackground } from './classic'
+export type {
+  FuturisticSceneId,
+  FuturisticCameraId,
+  FuturisticMenuBackgroundOptions,
+  MinecraftBlockGroupId
+} from './futuristic'
+export {
+  FuturisticMenuBackground,
+  FUTURISTIC_SCENE_IDS,
+  FUTURISTIC_CAMERA_IDS,
+  FUTURISTIC_SCENE_LABELS,
+  FUTURISTIC_CAMERA_LABELS,
+  MINECRAFT_BLOCK_GROUPS,
+  MINECRAFT_BLOCK_GROUP_IDS,
+  MINECRAFT_BLOCK_GROUP_LABELS
+} from './futuristic'
+export { WorldBlocksMenuBackground } from './worldBlocks'
+export { MenuBackgroundRenderer } from './renderer'
+export {
+  MENU_BACKGROUND_OPTION_DEFAULTS,
+  MENU_BACKGROUND_MOTION_DEFAULTS,
+  menuBackgroundSpeedToMultiplier
+} from './config'
+export {
+  RENDERER_DEFAULT_OPTIONS,
+  RENDERER_OPTIONS_META,
+  RENDERER_RENDER_GUI_SECTIONS
+} from './defaultOptions'
+export type { RendererDefaultOptionKey, RendererOptionMeta } from './defaultOptions'

package/src/three/menuBackground/renderer.ts

@@ -0,0 +1,97 @@
+//@ts-nocheck
+import * as THREE from 'three'
+import type { GraphicsInitOptions } from '../../graphicsBackend/types'
+import type { DocumentRenderer } from '../documentRenderer'
+import { ClassicMenuBackground } from './classic'
+import { FuturisticMenuBackground } from './futuristic'
+import { WorldBlocksMenuBackground } from './worldBlocks'
+import type { MenuBackgroundView } from './activeView'
+import type { MenuBackgroundOptions } from './types'
+import { resolveMenuBackgroundMode } from './types'
+
+/**
+ * Orchestrates main-menu background rendering (dispatches to classic / futuristic / world-blocks).
+ */
+export class MenuBackgroundRenderer {
+  private active?: MenuBackgroundView
+  private readonly abortController = new AbortController()
+  private readonly mode: ReturnType<typeof resolveMenuBackgroundMode>
+  private lastFrameTime = 0
+
+  constructor(
+    private readonly documentRenderer: DocumentRenderer,
+    private readonly options: GraphicsInitOptions,
+    menuBackgroundOptions: MenuBackgroundOptions = {},
+    singleFileBuild = false
+  ) {
+    this.mode = resolveMenuBackgroundMode(menuBackgroundOptions, singleFileBuild)
+  }
+
+  /** Active futuristic instance when that style is running. */
+  get futuristic(): FuturisticMenuBackground | undefined {
+    return this.active instanceof FuturisticMenuBackground ? this.active : undefined
+  }
+
+  get scene(): THREE.Scene | undefined {
+    return this.active?.scene
+  }
+
+  get camera(): THREE.PerspectiveCamera | undefined {
+    return this.active?.camera
+  }
+
+  async start(menuBackgroundOptions: MenuBackgroundOptions = {}) {
+    this.active = this.createImplementation(menuBackgroundOptions)
+    await this.active.init()
+
+    if (this.active.scene.background instanceof THREE.Color) {
+      this.documentRenderer.renderer.setClearColor(this.active.scene.background)
+    }
+
+    this.lastFrameTime = performance.now()
+    this.documentRenderer.render = (sizeChanged = false) => {
+      const now = performance.now()
+      const dt = Math.min((now - this.lastFrameTime) / 1000, 0.05)
+      this.lastFrameTime = now
+
+      const view = this.active
+      if (!view) return
+
+      view.update(dt, sizeChanged)
+      this.documentRenderer.renderer.render(view.scene, view.camera)
+    }
+  }
+
+  private createImplementation(options: MenuBackgroundOptions): MenuBackgroundView {
+    switch (this.mode) {
+      case 'futuristic':
+        return new FuturisticMenuBackground(
+          this.documentRenderer,
+          {
+            useMinecraftTextures: options.useMinecraftTextures,
+            initialScene: options.futuristicScene,
+            initialCamera: options.futuristicCamera,
+            initialBlockGroup: options.futuristicBlockGroup,
+            initialCameraSpeed: options.futuristicCameraSpeed,
+            initialBlockSpeed: options.futuristicBlockSpeed,
+            resourcesManager: options.resourcesManager
+          },
+          this.abortController.signal
+        )
+      case 'worldBlocks':
+        return new WorldBlocksMenuBackground(
+          this.documentRenderer,
+          this.options,
+          this.abortController.signal
+        )
+      default:
+        return new ClassicMenuBackground(this.documentRenderer)
+    }
+  }
+
+  dispose() {
+    this.active?.dispose()
+    this.active = undefined
+    this.abortController.abort()
+  }
+}

package/src/three/menuBackground/shared.ts

@@ -0,0 +1,3 @@
+//@ts-nocheck
+/** Minecraft version used when the menu background loads block assets (world-blocks / textured cubes). */
+export const MENU_BACKGROUND_MC_VERSION = '1.21.4'

package/src/three/menuBackground/types.ts

@@ -0,0 +1,37 @@
+//@ts-nocheck
+import type { ResourcesManager } from '../../resourcesManager/resourcesManager'
+import type { FuturisticCameraId, FuturisticSceneId, MinecraftBlockGroupId } from './futuristic'
+import { MENU_BACKGROUND_OPTION_DEFAULTS } from './config'
+
+export type { FuturisticCameraId, FuturisticSceneId, MinecraftBlockGroupId } from './futuristic'
+
+export type MenuBackgroundMode = 'classic' | 'futuristic' | 'worldBlocks'
+
+export interface MenuBackgroundOptions {
+  /** Visual style. Defaults to {@link MENU_BACKGROUND_OPTION_DEFAULTS.mode}, or `worldBlocks` in single-file build. */
+  mode?: MenuBackgroundMode
+  /** Futuristic style: load block atlas and render textured cubes (requires assets / mcData). */
+  useMinecraftTextures?: boolean
+  futuristicScene?: FuturisticSceneId
+  futuristicCamera?: FuturisticCameraId
+  /** Block pool when {@link useMinecraftTextures} is enabled. */
+  futuristicBlockGroup?: MinecraftBlockGroupId
+  /** Camera path speed (1 = 100%). */
+  futuristicCameraSpeed?: number
+  /** Block fly-through + sky drift speed (1 = 100%). */
+  futuristicBlockSpeed?: number
+  /**
+   * Optional shared resource manager (e.g. appViewer.resourcesManager).
+   * Caller should run `updateAssetsData` after mcData is loaded when using textured cubes.
+   */
+  resourcesManager?: ResourcesManager
+}
+
+export function resolveMenuBackgroundMode(
+  options?: MenuBackgroundOptions,
+  singleFileBuild = false
+): MenuBackgroundMode {
+  if (options?.mode) return options.mode
+  if (singleFileBuild) return 'worldBlocks'
+  return MENU_BACKGROUND_OPTION_DEFAULTS.mode
+}

package/src/three/menuBackground/worldBlocks.ts

@@ -0,0 +1,144 @@
+//@ts-nocheck
+import * as THREE from 'three'
+import { Vec3 } from 'vec3'
+import * as tweenJs from '@tweenjs/tween.js'
+import { getSyncWorld } from '../../playground/shared'
+import type { GraphicsInitOptions } from '../../graphicsBackend/types'
+import { WorldRendererCommon } from '../../lib/worldrendererCommon'
+import { defaultWorldRendererConfig, getDefaultRendererState } from '../../graphicsBackend/config'
+import { ResourcesManager, ResourcesManagerTransferred } from '../../resourcesManager/resourcesManager'
+import { getInitialPlayerStateRenderer } from '../../graphicsBackend/playerState'
+import { WorldRendererThree } from '../worldRendererThree'
+import type { DocumentRenderer } from '../documentRenderer'
+import { MENU_BACKGROUND_MC_VERSION } from './shared'
+import { WorldView } from '../../worldView'
+import type { MenuBackgroundView } from './activeView'
+import { resizeMenuBackgroundCamera } from './activeView'
+
+/**
+ * Menu background built from a wall of random stained-glass blocks (single-file / demo style).
+ */
+export class WorldBlocksMenuBackground implements MenuBackgroundView {
+  private _scene: THREE.Scene
+  private _camera: THREE.PerspectiveCamera
+
+  get scene() { return this._scene }
+  get camera() { return this._camera }
+
+  private worldRenderer?: WorldRendererCommon | WorldRendererThree
+  WorldRendererClass = WorldRendererThree
+
+  constructor(
+    private readonly documentRenderer: DocumentRenderer,
+    private readonly options: GraphicsInitOptions,
+    private readonly abortSignal: AbortSignal
+  ) {
+    this._scene = new THREE.Scene()
+    this._scene.background = new THREE.Color(0x32_45_68)
+    this._camera = new THREE.PerspectiveCamera(
+      85,
+      documentRenderer.canvas.width / documentRenderer.canvas.height,
+      0.05,
+      1000
+    )
+    this.camera.position.set(0, 0, 0)
+    this.camera.rotation.set(0, 0, 0)
+  }
+
+  async init() {
+    const version = MENU_BACKGROUND_MC_VERSION
+    const fullResourceManager = new ResourcesManager()
+    fullResourceManager.currentConfig = { version, noInventoryGui: true }
+    await fullResourceManager.updateAssetsData?.({})
+    if (this.abortSignal.aborted) return
+
+    console.time('load menu background scene')
+    const world = getSyncWorld(version)
+    const PrismarineBlock = require('prismarine-block')
+    const Block = PrismarineBlock(version)
+    const mcData = (globalThis as any).mcData
+    const fullBlocks = mcData.blocksArray.filter((block: { name: string, defaultState: number }) => {
+      if (!block.name.includes('stained_glass')) return false
+      const b = Block.fromStateId(block.defaultState, 0)
+      if (b.shapes?.length !== 1) return false
+      const shape = b.shapes[0]
+      return shape[0] === 0 && shape[1] === 0 && shape[2] === 0 && shape[3] === 1 && shape[4] === 1 && shape[5] === 1
+    })
+
+    const Z = -15
+    const sizeX = 100
+    const sizeY = 100
+    for (let x = -sizeX; x < sizeX; x++) {
+      for (let y = -sizeY; y < sizeY; y++) {
+        const block = fullBlocks[Math.floor(Math.random() * fullBlocks.length)]
+        world.setBlockStateId(new Vec3(x, y, Z), block.defaultState)
+      }
+    }
+
+    this._camera.updateProjectionMatrix()
+    this._camera.position.set(0.5, sizeY / 2 + 0.5, 0.5)
+    this._camera.rotation.set(0, 0, 0)
+    const initPos = new Vec3(...this._camera.position.toArray())
+    const worldView = new WorldView(world, 2, initPos)
+    if (this.abortSignal.aborted) return
+
+    this.worldRenderer = new this.WorldRendererClass(
+      this.documentRenderer.renderer,
+      this.options,
+      {
+        version,
+        worldView,
+        inWorldRenderingConfig: defaultWorldRendererConfig,
+        playerStateReactive: getInitialPlayerStateRenderer().reactive,
+        rendererState: getDefaultRendererState().reactive,
+        nonReactiveState: getDefaultRendererState().nonReactive,
+        resourcesManager: fullResourceManager as ResourcesManagerTransferred
+      }
+    )
+
+    if (this.worldRenderer instanceof WorldRendererThree) {
+      this._scene = this.worldRenderer.realScene
+      this._camera = this.worldRenderer.camera
+    }
+
+    void worldView.init(initPos)
+    await this.worldRenderer.waitForChunksToRender()
+    if (this.abortSignal.aborted) return
+
+    this.setupMouseParallax()
+    console.timeEnd('load menu background scene')
+  }
+
+  update(_dt: number, sizeChanged: boolean) {
+    if (sizeChanged) {
+      resizeMenuBackgroundCamera(this.camera, this.documentRenderer.canvas)
+    }
+  }
+
+  dispose() {
+    this.worldRenderer?.destroy()
+    this.worldRenderer = undefined
+    this._scene.clear()
+  }
+
+  private setupMouseParallax() {
+    const camera = this._camera
+    const initX = camera.position.x
+    const initY = camera.position.y
+    let prevTween: tweenJs.Tween<THREE.Vector3> | undefined
+
+    document.body.addEventListener('pointermove', (e) => {
+      if (e.pointerType !== 'mouse') return
+      const SCALE = 0.2
+      const xRel = e.clientX / window.innerWidth - 0.5
+      const yRel = -(e.clientY / window.innerHeight - 0.5)
+      prevTween?.stop()
+      prevTween = new tweenJs.Tween(camera.position).to({
+        x: initX + xRel * SCALE,
+        y: initY + yRel * SCALE
+      }, 0)
+      prevTween.start()
+      camera.updateProjectionMatrix()
+    }, { signal: this.abortSignal })
+  }
+}

package/src/three/modules/rain.ts

@@ -58,7 +58,9 @@ export class RainModule implements RendererModuleController {
   }
 
   render?: (deltaTime: number) => void = (deltaTime) => {
-    if (!this.enabled || !this.instancedMesh) return
+    if (!this.enabled || !this.instancedMesh || !this.material) return
+
+    this.syncMaterialToSceneFog()
 
     const cameraPos = this.worldRenderer.getCameraPosition()
     this.instancedMesh.position.set(0, 0, 0)
@@ -135,16 +137,32 @@ export class RainModule implements RendererModuleController {
     this.particles = []
   }
 
+  /** Match scene fog so rain fades with distance instead of a flat blue sheet. */
+  private syncMaterialToSceneFog(): void {
+    if (!this.material) return
+    const fog = this.worldRenderer.scene.fog
+    if (fog instanceof THREE.Fog || fog instanceof THREE.FogExp2) {
+      this.material.color.copy(fog.color)
+    } else {
+      this.material.color.set(0xcc_dd_ee)
+    }
+    this.material.fog = true
+  }
+
   private createRain(): void {
     this.geometry = new THREE.BoxGeometry(0.03, 0.3, 0.03)
     this.material = new THREE.MeshBasicMaterial({
-      color: 0x44_66_99,
+      color: 0xcc_dd_ee,
       transparent: true,
-      opacity: 0.6,
+      opacity: 0.35,
+      depthWrite: false,
+      fog: true,
     })
 
     this.instancedMesh = new THREE.InstancedMesh(this.geometry, this.material, PARTICLE_COUNT)
     this.instancedMesh.name = 'rain-particles'
+    this.instancedMesh.frustumCulled = false
+    this.syncMaterialToSceneFog()
 
     const dummy = new THREE.Matrix4()
     const position = new THREE.Vector3()