minecraft-renderer 0.1.30 → 0.1.32

package/package.json

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

package/src/graphicsBackend/config.ts

@@ -45,6 +45,7 @@ export const defaultWorldRendererConfig = {
   // Camera visual related settings
   showHand: false,
   viewBobbing: false,
+  handRenderer: 'vanilla' as 'vanilla' | 'legacy',
   renderEars: true,
   highlightBlockColor: 'blue' as 'blue' | 'classic' | 'auto' | undefined,
 

package/src/graphicsBackend/playerState.ts

@@ -25,6 +25,10 @@ export const getInitialPlayerState = (): PlayerStateReactive => proxy({
   sneaking: false,
   flying: false,
   sprinting: false,
+  walkDist: 0,
+  prevWalkDist: 0,
+  bob: 0,
+  prevBob: 0,
   itemUsageTicks: 0,
   username: '',
   onlineMode: false,

package/src/lib/cameraBobbing.ts

@@ -1,95 +1,39 @@
 //@ts-nocheck
-export class CameraBobbing {
-  private walkDistance = 0
-  private prevWalkDistance = 0
-  private bobAmount = 0
-  private prevBobAmount = 0
-  private readonly gameTimer = new GameTimer()
-
-  // eslint-disable-next-line max-params
-  constructor (
-    private readonly BOB_FREQUENCY: number = Math.PI, // How fast the bob cycles
-    private readonly BOB_BASE_AMPLITUDE: number = 0.5, // Base amplitude of the bob
-    private readonly VERTICAL_MULTIPLIER: number = 1, // Vertical movement multiplier
-    private readonly ROTATION_MULTIPLIER_Z: number = 3, // Roll rotation multiplier
-    private readonly ROTATION_MULTIPLIER_X: number = 5 // Pitch rotation multiplier
-  ) {}
-
-  // Call this when player is moving
-  public updateWalkDistance (distance: number): void {
-    this.prevWalkDistance = this.walkDistance
-    this.walkDistance = distance
-  }
-
-  // Call this when player is moving to update bob amount
-  public updateBobAmount (isMoving: boolean): void {
-    const targetBob = isMoving ? 1 : 0
-    this.prevBobAmount = this.bobAmount
-
-    // Update timing
-    const ticks = this.gameTimer.update()
-    const deltaTime = ticks / 20 // Convert ticks to seconds assuming 20 TPS
-
-    // Smooth transition for bob amount
-    const bobDelta = (targetBob - this.bobAmount) * Math.min(1, deltaTime * 10)
-    this.bobAmount += bobDelta
-  }
-
-  // Call this in your render/animation loop
-  public getBobbing (): { position: { x: number, y: number }, rotation: { x: number, z: number } } {
-    // Interpolate walk distance
-    const walkDist = this.prevWalkDistance +
-      (this.walkDistance - this.prevWalkDistance) * this.gameTimer.partialTick
-
-    // Interpolate bob amount
-    const bob = this.prevBobAmount +
-      (this.bobAmount - this.prevBobAmount) * this.gameTimer.partialTick
-
-    // Calculate total distance for bob cycle
-    const totalDist = -(walkDist * this.BOB_FREQUENCY)
-
-    // Calculate offsets
-    const xOffset = Math.sin(totalDist) * bob * this.BOB_BASE_AMPLITUDE
-    const yOffset = -Math.abs(Math.cos(totalDist) * bob) * this.VERTICAL_MULTIPLIER
-
-    // Calculate rotations (in radians)
-    const zRot = (Math.sin(totalDist) * bob * this.ROTATION_MULTIPLIER_Z) * (Math.PI / 180)
-    const xRot = (Math.abs(Math.cos(totalDist - 0.2) * bob) * this.ROTATION_MULTIPLIER_X) * (Math.PI / 180)
-
-    return {
-      position: { x: xOffset, y: yOffset },
-      rotation: { x: xRot, z: zRot }
-    }
-  }
+export interface CameraBobResult {
+  position: { x: number; y: number }
+  rotation: { x: number; z: number }
 }
 
-class GameTimer {
-  private readonly msPerTick: number
-  private lastMs: number
-  public partialTick = 0
-
-  constructor (tickRate = 20) {
-    this.msPerTick = 1000 / tickRate
-    this.lastMs = performance.now()
-  }
-
-  update (): number {
-    const currentMs = performance.now()
-    const deltaSinceLastTick = currentMs - this.lastMs
+export interface CameraBobInput {
+  walkDist: number
+  prevWalkDist: number
+  bob: number
+  prevBob: number
+  partialTick: number
+}
 
-    // Calculate how much of a tick has passed
-    const tickDelta = deltaSinceLastTick / this.msPerTick
-    this.lastMs = currentMs
+const DEG_TO_RAD = Math.PI / 180
 
-    // Add to accumulated partial ticks
-    this.partialTick += tickDelta
+export function computeCameraBob (input: CameraBobInput): CameraBobResult {
+  const { walkDist, prevWalkDist, bob, prevBob, partialTick } = input
 
-    // Get whole number of ticks that should occur
-    const wholeTicks = Math.floor(this.partialTick)
+  // Vanilla uses "backwards interpolation": -(walkDist + delta * partialTick)
+  // See ClientAvatarState.getBackwardsInterpolatedWalkDistance()
+  const walkDelta = walkDist - prevWalkDist
+  const interpolatedWalkDist = -(walkDist + walkDelta * partialTick)
+  const interpolatedBob = prevBob + (bob - prevBob) * partialTick
 
-    // Keep the remainder as the new partial tick
-    this.partialTick -= wholeTicks
+  const sinWalk = Math.sin(interpolatedWalkDist * Math.PI)
+  const cosWalk = Math.cos(interpolatedWalkDist * Math.PI)
 
-    return wholeTicks
+  return {
+    position: {
+      x: sinWalk * interpolatedBob * 0.5,
+      y: -Math.abs(cosWalk * interpolatedBob)
+    },
+    rotation: {
+      x: Math.abs(Math.cos(interpolatedWalkDist * Math.PI - 0.2) * interpolatedBob) * 5 * DEG_TO_RAD,
+      z: sinWalk * interpolatedBob * 3 * DEG_TO_RAD
+    }
   }
 }

package/src/lib/worldrendererCommon.ts

@@ -288,7 +288,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
     if (initial) {
       callback(this.playerStateReactive[key])
     }
-    subscribeKey(this.playerStateReactive, key, callback)
+    return subscribeKey(this.playerStateReactive, key, callback)
   }
 
   onReactiveConfigUpdated<T extends keyof typeof this.worldRendererConfig>(key: T, callback: (value: typeof this.worldRendererConfig[T]) => void) {

package/src/playerState/playerState.ts

@@ -32,6 +32,10 @@ export const getInitialPlayerState = () => proxy({
   sneaking: false,
   flying: false,
   sprinting: false,
+  walkDist: 0,
+  prevWalkDist: 0,
+  bob: 0,
+  prevBob: 0,
   itemUsageTicks: 0,
   username: '',
   onlineMode: false,

package/src/three/cameraShake.ts

@@ -1,5 +1,6 @@
 //@ts-nocheck
 import * as THREE from 'three'
+import { computeCameraBob, type CameraBobInput } from '../lib/cameraBobbing'
 import { WorldRendererThree } from './worldRendererThree'
 
 export class CameraShake {
@@ -9,6 +10,11 @@ export class CameraShake {
   private rollAnimation?: { startTime: number, startRoll: number, targetRoll: number, duration: number, returnToZero?: boolean }
   private basePitch = 0
   private baseYaw = 0
+  private cameraBobInput: CameraBobInput | null = null
+
+  setCameraBobInput(input: CameraBobInput | null) {
+    this.cameraBobInput = input
+  }
 
   constructor(public worldRenderer: WorldRendererThree, public onRenderCallbacks: Array<(deltaTime: number) => void>) {
     onRenderCallbacks.push(() => {
@@ -88,8 +94,26 @@ export class CameraShake {
       const pitchQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), pitchOffset)
       const yawQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), yawOffset)
       const rollQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), THREE.MathUtils.degToRad(this.rollAngle))
-      // Combine rotations in the correct order: pitch -> yaw -> roll
-      const finalQuat = yawQuat.multiply(pitchQuat).multiply(rollQuat)
+
+      // Camera bobbing rotation
+      let bobRollQuat = new THREE.Quaternion()
+      let bobPitchQuat = new THREE.Quaternion()
+      const perspective = this.worldRenderer.playerStateReactive.perspective
+      if (this.cameraBobInput) {
+        const bob = computeCameraBob(this.cameraBobInput)
+        bobRollQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), bob.rotation.z)
+        bobPitchQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), bob.rotation.x)
+
+        // Apply position bobbing to the camera child (not cameraContainer) in first-person only
+        if (perspective === 'first_person') {
+          this.worldRenderer.camera.position.set(bob.position.x, bob.position.y, 0)
+        }
+      } else if (perspective === 'first_person') {
+        this.worldRenderer.camera.position.set(0, 0, 0)
+      }
+
+      // Combine: yaw * pitch * damageRoll * bobRoll(Z) * bobPitch(X) — vanilla applies Z then X
+      const finalQuat = yawQuat.multiply(pitchQuat).multiply(rollQuat).multiply(bobRollQuat).multiply(bobPitchQuat)
       camera.setRotationFromQuaternion(finalQuat)
     }
   }

package/src/three/hand.ts

@@ -21,70 +21,121 @@ export const getMyHand = async (image?: string, userName?: string) => {
 
   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)
+  const pixelWidth = slim ? 3 : 4
+
+  // Exact replica of vanilla's Cube: addBox(-3, -2, -2, 4, 12, 4) at texOffs(40, 16)
+  const box = createVanillaCubeGeometry(
+    40, 16,
+    slim ? -2 : -3, -2, -2,
+    pixelWidth, 12, 4,
+    64, 64
+  )
+
+  const material = new THREE.MeshStandardMaterial()
   material.map = newMap
   material.needsUpdate = true
+
+  const mesh = new THREE.Mesh(box, material)
+
   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),
+/**
+ * Creates a BufferGeometry replicating vanilla Minecraft's ModelPart.Cube exactly.
+ * Vertices, face winding, normals, and UV mapping match the decompiled Java source.
+ * Position coordinates are in pixels, divided by 16 for block units.
+ */
+function createVanillaCubeGeometry (
+  texU: number, texV: number,
+  originX: number, originY: number, originZ: number,
+  sizeX: number, sizeY: number, sizeZ: number,
+  texWidth: number, texHeight: number,
+  mirror = false
+): THREE.BufferGeometry {
+  let minX = originX / 16
+  let minY = originY / 16
+  let minZ = originZ / 16
+  let maxX = (originX + sizeX) / 16
+  let maxY = (originY + sizeY) / 16
+  let maxZ = (originZ + sizeZ) / 16
+
+  if (mirror) {
+    [minX, maxX] = [maxX, minX]
+  }
+
+  // 8 corner vertices matching vanilla's Cube constructor
+  const V = [
+    [minX, minY, minZ], // 0
+    [maxX, minY, minZ], // 1
+    [maxX, maxY, minZ], // 2
+    [minX, maxY, minZ], // 3
+    [minX, minY, maxZ], // 4
+    [maxX, minY, maxZ], // 5
+    [maxX, maxY, maxZ], // 6
+    [minX, maxY, maxZ], // 7
   ]
 
-  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)
+  // UV grid (pixel coords)
+  const u0 = texU
+  const u1 = texU + sizeZ
+  const u2 = texU + sizeZ + sizeX
+  const u3 = texU + sizeZ + sizeX + sizeX
+  const u4 = texU + sizeZ + sizeX + sizeZ
+  const u5 = texU + sizeZ + sizeX + sizeZ + sizeX
+  const v0 = texV
+  const v1 = texV + sizeZ
+  const v2 = texV + sizeZ + sizeY
+
+  // 6 faces: vanilla vertex order + UV rect + normal
+  const faces: { vi: number[]; uv: number[]; n: number[] }[] = [
+    { vi: [5, 4, 0, 1], uv: [u1, v0, u2, v1], n: [0, -1, 0] },  // DOWN
+    { vi: [2, 3, 7, 6], uv: [u2, v1, u3, v0], n: [0, 1, 0] },   // UP
+    { vi: [0, 4, 7, 3], uv: [u0, v1, u1, v2], n: [-1, 0, 0] },  // WEST
+    { vi: [1, 0, 3, 2], uv: [u1, v1, u2, v2], n: [0, 0, -1] },  // NORTH
+    { vi: [5, 1, 2, 6], uv: [u2, v1, u4, v2], n: [1, 0, 0] },   // EAST
+    { vi: [4, 5, 6, 7], uv: [u4, v1, u5, v2], n: [0, 0, 1] },   // SOUTH
+  ]
+
+  const positions: number[] = []
+  const uvs: number[] = []
+  const normals: number[] = []
+  const indices: number[] = []
+
+  for (let fi = 0; fi < faces.length; fi++) {
+    const face = faces[fi]
+    const base = fi * 4
+
+    const [uL, vT, uR, vB] = face.uv
+    // Vanilla vertex UV order: top-right, top-left, bottom-left, bottom-right
+    const fUV = [
+      [uR / texWidth, 1 - vT / texHeight],
+      [uL / texWidth, 1 - vT / texHeight],
+      [uL / texWidth, 1 - vB / texHeight],
+      [uR / texWidth, 1 - vB / texHeight],
+    ]
+
+    const order = mirror ? [3, 2, 1, 0] : [0, 1, 2, 3]
+    const nx = mirror ? -face.n[0] : face.n[0]
+
+    for (let i = 0; i < 4; i++) {
+      const vert = V[face.vi[order[i]]]
+      positions.push(vert[0], vert[1], vert[2])
+      uvs.push(fUV[i][0], fUV[i][1])
+      normals.push(nx, face.n[1], face.n[2])
     }
+
+    indices.push(base, base + 1, base + 2, base, base + 2, base + 3)
   }
 
-  uvAttr.set(new Float32Array(newUVData))
-  uvAttr.needsUpdate = true
-}
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
+  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2))
+  geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3))
+  geometry.setIndex(indices)
 
-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)
+  return geometry
 }

package/src/three/handLegacy.ts

@@ -0,0 +1,90 @@
+//@ts-nocheck
+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)
+}