minecraft-renderer 0.1.0

package/src/playground/mobileControls.tsx

@@ -0,0 +1,268 @@
+import { CSSProperties, PointerEvent, useEffect, useRef } from 'react'
+import { proxy, ref, useSnapshot } from 'valtio'
+
+export type ButtonName = 'jump' | 'sneak'
+
+export const joystickPointer = proxy({
+  pointer: null as { x: number, y: number, pointerId: number } | null,
+  joystickInner: null as HTMLDivElement | null,
+})
+
+export const cameraPointer = proxy({
+  pointer: null as { x: number, y: number, pointerId: number } | null,
+})
+
+export const handleMovementStickDelta = (e?: { clientX: number, clientY: number }) => {
+  const max = 32
+  let x = 0
+  let y = 0
+
+  if (e && joystickPointer.pointer) {
+    x = e.clientX - joystickPointer.pointer.x
+    y = e.clientY - joystickPointer.pointer.y
+    x = Math.min(Math.max(x, -max), max)
+    y = Math.min(Math.max(y, -max), max)
+  }
+
+  if (joystickPointer.joystickInner) {
+    joystickPointer.joystickInner.style.transform = `translate(${x}px, ${y}px)`
+  }
+
+  const vector = {
+    x: x / max,
+    y: 0,
+    z: y / max,
+  }
+
+  console.log('Movement vector:', vector)
+}
+
+export const handleCameraRotation = (deltaX: number, deltaY: number) => {
+  console.log('Camera rotation:', { deltaX, deltaY })
+}
+
+export const MobileControls = () => {
+  const usingTouch = navigator.maxTouchPoints > 0
+  const joystickOuter = useRef<HTMLDivElement>(null)
+  const joystickInner = useRef<HTMLDivElement>(null)
+  const { pointer: movementPointer } = useSnapshot(joystickPointer)
+  const { pointer: cameraPointerState } = useSnapshot(cameraPointer)
+
+  const joystickSize = 80
+  const Z_INDEX_INTERACTIBLE = 8
+
+  const buttonProps = (name: ButtonName) => {
+    const holdDown = {
+      jump() {
+        console.log('Jump button pressed')
+      },
+      sneak() {
+        console.log('Sneak button pressed')
+      }
+    }
+
+    const holdUp = {
+      jump() {
+        console.log('Jump button released')
+      },
+      sneak() {
+        console.log('Sneak button released')
+      }
+    }
+
+    type PType = PointerEvent<HTMLDivElement>
+
+    const pointerup = (e: PType) => {
+      const elem = e.currentTarget as HTMLElement
+      elem.releasePointerCapture(e.pointerId)
+      holdUp[name]()
+      elem.style.background = 'rgba(0, 0, 0, 0.5)'
+    }
+
+    const buttonPositions = {
+      jump: [85, 60],
+      sneak: [85, 75],
+    }
+
+    const buttonIcons = {
+      jump: '↑',
+      sneak: '↓',
+    }
+
+    return {
+      style: {
+        position: 'fixed',
+        left: `${buttonPositions[name][0]}%`,
+        top: `${buttonPositions[name][1]}%`,
+        borderRadius: '50%',
+        width: '50px',
+        height: '50px',
+        background: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        transition: 'background 0.1s',
+        zIndex: Z_INDEX_INTERACTIBLE,
+        color: 'white',
+        fontSize: '16px',
+        userSelect: 'none',
+        transform: 'translate(-50%, -50%)',
+        border: '2px solid rgba(255, 255, 255, 0.3)',
+      } satisfies CSSProperties,
+      onPointerDown(e: PType) {
+        const elem = e.currentTarget as HTMLElement
+        elem.setPointerCapture(e.pointerId)
+        holdDown[name]()
+        elem.style.background = 'rgba(0, 0, 0, 0.8)'
+      },
+      onPointerUp: pointerup,
+      onLostPointerCapture: pointerup,
+      children: buttonIcons[name],
+    }
+  }
+
+  useEffect(() => {
+    if (joystickInner.current) {
+      joystickPointer.joystickInner = ref(joystickInner.current)
+    }
+  }, [])
+
+  if (!usingTouch) return null
+
+  return <div>
+    {/* Movement Joystick */}
+    <div
+      className='movement_joystick_outer'
+      ref={joystickOuter}
+      style={{
+        display: movementPointer ? 'flex' : 'none',
+        borderRadius: '50%',
+        width: joystickSize,
+        height: joystickSize,
+        border: '2px solid rgba(0, 0, 0, 0.5)',
+        backgroundColor: 'rgba(255, 255, 255, 0.3)',
+        position: 'fixed',
+        justifyContent: 'center',
+        alignItems: 'center',
+        transform: 'translate(-50%, -50%)',
+        zIndex: Z_INDEX_INTERACTIBLE,
+        ...(movementPointer ? {
+          left: `${movementPointer.x / window.innerWidth * 100}%`,
+          top: `${movementPointer.y / window.innerHeight * 100}%`
+        } : {}),
+      }}
+    >
+      <div
+        className='movement_joystick_inner'
+        style={{
+          borderRadius: '50%',
+          width: joystickSize * 0.35,
+          height: joystickSize * 0.35,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          position: 'absolute',
+        }}
+        ref={joystickInner}
+      />
+    </div>
+
+    {/* Up/Down Action Buttons */}
+    <div {...buttonProps('jump')} />
+    <div {...buttonProps('sneak')} />
+
+    {/* Movement touch area (left half of screen) */}
+    <div
+      style={{
+        position: 'fixed',
+        left: '0',
+        top: '0',
+        width: '50%',
+        height: '100%',
+        zIndex: Z_INDEX_INTERACTIBLE - 1,
+      }}
+      onPointerDown={(e) => {
+        if (joystickPointer.pointer) return
+
+        joystickPointer.pointer = {
+          x: e.clientX,
+          y: e.clientY,
+          pointerId: e.pointerId,
+        }
+
+        const elem = e.currentTarget as HTMLElement
+        elem.setPointerCapture(e.pointerId)
+      }}
+      onPointerMove={(e) => {
+        if (!joystickPointer.pointer || e.pointerId !== joystickPointer.pointer.pointerId) return
+
+        handleMovementStickDelta({
+          clientX: e.clientX,
+          clientY: e.clientY,
+        })
+      }}
+      onPointerUp={(e) => {
+        if (!joystickPointer.pointer || e.pointerId !== joystickPointer.pointer.pointerId) return
+
+        joystickPointer.pointer = null
+        handleMovementStickDelta() // Reset position
+
+        const elem = e.currentTarget as HTMLElement
+        elem.releasePointerCapture(e.pointerId)
+      }}
+      onLostPointerCapture={(e) => {
+        if (!joystickPointer.pointer || e.pointerId !== joystickPointer.pointer.pointerId) return
+
+        joystickPointer.pointer = null
+        handleMovementStickDelta() // Reset position
+      }}
+    />
+
+    {/* Camera rotation touch area (right half of screen, excluding buttons) */}
+    <div
+      style={{
+        position: 'fixed',
+        right: '0',
+        top: '0',
+        width: '50%',
+        height: '100%',
+        zIndex: Z_INDEX_INTERACTIBLE - 2,
+      }}
+      onPointerDown={(e) => {
+        if (cameraPointer.pointer) return
+
+        cameraPointer.pointer = {
+          x: e.clientX,
+          y: e.clientY,
+          pointerId: e.pointerId,
+        }
+
+        const elem = e.currentTarget as HTMLElement
+        elem.setPointerCapture(e.pointerId)
+      }}
+      onPointerMove={(e) => {
+        if (!cameraPointer.pointer || e.pointerId !== cameraPointer.pointer.pointerId) return
+
+        const deltaX = e.clientX - cameraPointer.pointer.x
+        const deltaY = e.clientY - cameraPointer.pointer.y
+
+        handleCameraRotation(deltaX, deltaY)
+
+        // Update pointer position for continuous rotation
+        cameraPointer.pointer.x = e.clientX
+        cameraPointer.pointer.y = e.clientY
+      }}
+      onPointerUp={(e) => {
+        if (!cameraPointer.pointer || e.pointerId !== cameraPointer.pointer.pointerId) return
+
+        cameraPointer.pointer = null
+
+        const elem = e.currentTarget as HTMLElement
+        elem.releasePointerCapture(e.pointerId)
+      }}
+      onLostPointerCapture={(e) => {
+        if (!cameraPointer.pointer || e.pointerId !== cameraPointer.pointer.pointerId) return
+
+        cameraPointer.pointer = null
+      }}
+    />
+  </div>
+}

package/src/playground/playground.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Minecraft Renderer Playground</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: #1a1a1a;
+    }
+
+    #viewer-canvas {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .lil-gui {
+      position: fixed !important;
+      top: 10px;
+      right: 10px;
+      z-index: 1000;
+    }
+
+    .loading-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: #1a1a1a;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 10000;
+      color: #fff;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .loading-overlay.hidden {
+      display: none;
+    }
+
+    .loading-spinner {
+      width: 50px;
+      height: 50px;
+      border: 3px solid #333;
+      border-top-color: #4ade80;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .loading-text {
+      margin-top: 16px;
+      font-size: 14px;
+      color: #888;
+    }
+  </style>
+</head>
+<body>
+  <div id="react-root"></div>
+  <div class="loading-overlay" id="loading">
+    <div class="loading-spinner"></div>
+    <div class="loading-text">Loading Minecraft Renderer...</div>
+  </div>
+</body>
+</html>

package/src/playground/playground.ts

@@ -0,0 +1,11 @@
+import { BasePlaygroundScene } from './baseScene'
+import { playgroundGlobalUiState } from './playgroundUi'
+import * as scenes from './scenes'
+
+const qsScene = new URLSearchParams(window.location.search).get('scene')
+const Scene: typeof BasePlaygroundScene = qsScene ? scenes[qsScene] : scenes.main
+playgroundGlobalUiState.scenes = ['main', 'railsCobweb', 'floorRandom', 'lightingStarfield', 'transparencyIssue', 'entities', 'frequentUpdates', 'slabsOptimization', 'allEntities', 'geometryExport']
+playgroundGlobalUiState.selected = qsScene ?? 'main'
+
+const scene = new Scene()
+globalThis.scene = scene

package/src/playground/playgroundUi.tsx

@@ -0,0 +1,140 @@
+import { isMobile } from '@/lib/simpleUtils'
+import useLongPress from '@/playground/reactUtils'
+import { renderToDom } from '@zardoy/react-util'
+import { useEffect, useState } from 'react'
+import { proxy, useSnapshot } from 'valtio'
+import { Vec3 } from 'vec3'
+import { MobileControls } from './mobileControls'
+
+export const playgroundGlobalUiState = proxy({
+  scenes: [] as string[],
+  selected: '',
+  selectorOpened: false,
+  actions: {} as Record<string, () => void>,
+})
+
+
+renderToDom(<Playground />, {
+  strictMode: false,
+  selector: '#react-root',
+})
+
+function Playground () {
+  useEffect(() => {
+    const style = document.createElement('style')
+    style.innerHTML = /* css */ `
+      .lil-gui {
+        top: 60px !important;
+        right: 0 !important;
+      }
+    `
+    document.body.appendChild(style)
+
+    // Hide the loading overlay once the playground UI is ready
+    const loadingOverlay = document.getElementById('loading')
+    if (loadingOverlay) {
+      loadingOverlay.classList.add('hidden')
+    }
+
+    return () => {
+      style.remove()
+    }
+  }, [])
+
+  return <div style={{
+    fontFamily: 'monospace',
+    color: 'white',
+  }}>
+    <Controls />
+    <SceneSelector />
+    <ActionsSelector />
+  </div>
+}
+
+function SceneSelector () {
+  const mobile = isMobile()
+  const { scenes, selected } = useSnapshot(playgroundGlobalUiState)
+  const [hidden, setHidden] = useState(false)
+  const longPressEvents = useLongPress(() => {
+    playgroundGlobalUiState.selectorOpened = true
+  }, () => { })
+
+  if (hidden) return null
+
+  return <div
+    style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      display: 'flex',
+      alignItems: 'flex-start',
+    }} {...longPressEvents}>
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      {scenes.map(scene => <div
+        key={scene}
+        style={{
+          padding: mobile ? '5px' : '2px 5px',
+          cursor: 'pointer',
+          userSelect: 'none',
+          background: scene === selected ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.6)',
+          fontWeight: scene === selected ? 'bold' : 'normal',
+        }}
+        onClick={() => {
+          const qs = new URLSearchParams(window.location.search)
+          qs.set('scene', scene)
+          location.search = qs.toString()
+        }}
+      >{scene}</div>)}
+    </div>
+    <div
+      style={{
+        padding: mobile ? '5px' : '2px 5px',
+        cursor: 'pointer',
+        userSelect: 'none',
+        background: 'rgba(0, 0, 0, 0.6)',
+        fontSize: '14px',
+        lineHeight: '1',
+      }}
+      onClick={() => setHidden(true)}
+    >×</div>
+  </div>
+}
+
+const ActionsSelector = () => {
+  const { actions, selectorOpened } = useSnapshot(playgroundGlobalUiState)
+
+  if (!selectorOpened) return null
+  return <div style={{
+    position: 'fixed',
+    inset: 0,
+    background: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 10,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 5,
+    fontSize: 24,
+  }}>{Object.entries({
+      ...actions,
+      'Close' () {
+        playgroundGlobalUiState.selectorOpened = false
+      }
+    }).map(([name, action]) => <div
+      key={name}
+      style={{
+        padding: '2px 5px',
+        cursor: 'pointer',
+        userSelect: 'none',
+        background: 'rgba(0, 0, 0, 0.5)',
+      }}
+      onClick={() => {
+        action()
+        playgroundGlobalUiState.selectorOpened = false
+      }}
+    >{name}</div>)}</div>
+}
+
+const Controls = () => {
+  return <MobileControls />
+}

package/src/playground/reactUtils.ts

@@ -0,0 +1,71 @@
+import { useCallback, useRef, useState } from 'react'
+
+interface LongPressOptions {
+  shouldPreventDefault?: boolean;
+  delay?: number;
+}
+
+const useLongPress = (
+  onLongPress: () => void,
+  onClick: () => void,
+  { shouldPreventDefault = false, delay = 300 }: LongPressOptions = {}
+) => {
+  const [longPressTriggered, setLongPressTriggered] = useState(false)
+  const timeout = useRef<number | undefined>(null)
+  const target = useRef<EventTarget | null>(null)
+
+  const start = useCallback(
+    (event: React.MouseEvent | React.TouchEvent) => {
+      if (shouldPreventDefault && event.target) {
+        event.target.addEventListener('touchend', preventDefault, {
+          passive: false
+        })
+        target.current = event.target
+      }
+      timeout.current = window.setTimeout(() => {
+        onLongPress()
+        setLongPressTriggered(true)
+      }, delay)
+    },
+    [onLongPress, delay, shouldPreventDefault]
+  )
+
+  const clear = useCallback(
+    (event: React.MouseEvent | React.TouchEvent) => {
+      if (timeout.current) {
+        clearTimeout(timeout.current)
+        timeout.current = undefined
+      }
+
+      setLongPressTriggered(false)
+
+      if (shouldPreventDefault && target.current) {
+        target.current.removeEventListener('touchend', preventDefault)
+        target.current = null
+      }
+    },
+    [shouldPreventDefault, onClick, longPressTriggered]
+  )
+
+  return {
+    onMouseDown: (e: React.MouseEvent) => start(e),
+    onTouchStart: (e: React.TouchEvent) => start(e),
+    onMouseUp: (e: React.MouseEvent) => clear(e),
+    onMouseLeave: (e: React.MouseEvent) => clear(e),
+    onTouchEnd: (e: React.TouchEvent) => clear(e),
+    onClick(e: React.MouseEvent) {
+      onClick()
+    }
+  }
+}
+
+const preventDefault = (event: Event) => {
+  if (!('touches' in event)) return
+
+  const touchEvent = event as TouchEvent
+  if (touchEvent.touches.length < 2 && event.preventDefault) {
+    event.preventDefault()
+  }
+}
+
+export default useLongPress

package/src/playground/scenes/allEntities.ts

@@ -0,0 +1,13 @@
+import { BasePlaygroundScene } from '../baseScene'
+import { EntityDebugFlags, EntityMesh, rendererSpecialHandled } from '../../viewer/three/entity/EntityMesh'
+import { displayEntitiesDebugList } from '../allEntitiesDebug'
+
+export default class AllEntities extends BasePlaygroundScene {
+  continuousRender = false
+  enableCameraControls = false
+
+  async initData () {
+    await super.initData()
+    displayEntitiesDebugList(this.version)
+  }
+}

package/src/playground/scenes/entities.ts

@@ -0,0 +1,37 @@
+//@ts-nocheck
+import * as THREE from 'three'
+import { Vec3 } from 'vec3'
+import { BasePlaygroundScene } from '../baseScene'
+import { WorldRendererThree } from '../../viewer/three/worldrendererThree'
+
+export default class extends BasePlaygroundScene {
+  continuousRender = true
+
+  override initGui (): void {
+    this.params = {
+      starfield: false,
+      entity: 'player',
+      count: 4
+    }
+  }
+
+  override renderFinish (): void {
+    if (this.params.starfield) {
+      ;(viewer.world as WorldRendererThree).scene.background = new THREE.Color(0x00_00_00)
+      ;(viewer.world as WorldRendererThree).starField.enabled = true
+      ;(viewer.world as WorldRendererThree).starField.addToScene()
+    }
+
+    for (let i = 0; i < this.params.count; i++) {
+      for (let j = 0; j < this.params.count; j++) {
+        for (let k = 0; k < this.params.count; k++) {
+          viewer.entities.update({
+            id: i * 1000 + j * 100 + k,
+            name: this.params.entity,
+            pos: this.targetPos.offset(i, j, k)
+          } as any, {})
+        }
+      }
+    }
+  }
+}

package/src/playground/scenes/floorRandom.ts

@@ -0,0 +1,33 @@
+import { BasePlaygroundScene } from '../baseScene'
+
+export default class RailsCobwebScene extends BasePlaygroundScene {
+  viewDistance = 5
+  continuousRender = true
+
+  override initGui (): void {
+    this.params = {
+      squareSize: 50
+    }
+
+    super.initGui()
+  }
+
+  setupWorld () {
+    const squareSize = this.params.squareSize ?? 30
+    const maxSquareSize = this.viewDistance * 16 * 2
+    if (squareSize > maxSquareSize) throw new Error(`Square size too big, max is ${maxSquareSize}`)
+    // const fullBlocks = loadedData.blocksArray.map(x => x.name)
+    const fullBlocks = loadedData.blocksArray.filter(block => {
+      const b = this.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
+    })
+    for (let x = -squareSize; x <= squareSize; x++) {
+      for (let z = -squareSize; z <= squareSize; z++) {
+        const i = Math.abs(x + z) * squareSize
+        worldView!.world.setBlock(this.targetPos.offset(x, 0, z), this.Block.fromStateId(fullBlocks[i % fullBlocks.length].defaultState, 0))
+      }
+    }
+  }
+}