minecraft-renderer 0.1.0

package/src/sign-renderer/playground.ts

@@ -0,0 +1,38 @@
+import PrismarineChatLoader from 'prismarine-chat'
+import { renderSign } from '.'
+
+const PrismarineChat = PrismarineChatLoader({ language: {} } as any)
+
+const img = new Image()
+img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAYAAAB4MH11AAABbElEQVR4AY3BQY6cMBBA0Q+yQZZVi+ndcJVcKGfMgegdvShKVtuokzGSWwwiUd7rfv388Vst0UgMXCobmgsSA5VaQmKgUks0EgNHji8SA9W8GJCQwVNpLhzJ4KFs4B1HEgPVvBiQkMFTaS44tYTEQDXdIkfiHbuyobmguaDPFzIWGrWExEA13SJH4h1uzS/WbPyvroM1v6jWbFRrNv7GfX5EdmXjzTvUEjJ4zjQXjiQGdmXjzTvUEjJ4HF/UEt/kQqW5UEkMzIshY08jg6dRS3yTC5XmgpsXY7pFztQSEgPNJCNv3lGpJVSfTLfImVpCYsB1HdwfxpU1G9eeNF0H94dxZc2G+/yI7MoG3vEv82LI2NNIDLyVDbzjzFE2mnkxZOy5IoNnkpFGc2FXNpp5MWTsOXJ4h1qikrGnkhjYlY1m1icy9lQSA+TCzjvUEpWMPZXEwK5suPvDOFuzcdZ1sOYX1ZqNas3GlTUbzR+jQbEAcs8ZQAAAAABJRU5ErkJggg=='
+
+await new Promise<void>(resolve => {
+  img.onload = () => resolve()
+})
+
+const blockEntity = {
+  'GlowingText': 0,
+  'Color': 'black',
+  'Text4': '{"text":""}',
+  'Text3': '{"text":""}',
+  'Text2': '{"text":""}',
+  'Text1': '{"extra":[{"color":"dark_green","text":"Minecraft "},{"text":"Tools"}],"text":""}'
+} as const
+
+await document.fonts.load('1em mojangles')
+
+const canvas = renderSign(blockEntity, false, PrismarineChat, (ctx) => {
+  ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height)
+}, (width, height) => {
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  return canvas as unknown as OffscreenCanvas
+}) as unknown as HTMLCanvasElement
+
+if (canvas) {
+  canvas.style.imageRendering = 'pixelated'
+  document.body.appendChild(canvas)
+} else {
+  console.log('Render skipped')
+}

package/src/sign-renderer/tests.test.ts

@@ -0,0 +1,69 @@
+import { test, expect } from 'vitest'
+import PrismarineChatLoader from 'prismarine-chat'
+import { renderSign } from '.'
+
+const PrismarineChat = PrismarineChatLoader({ language: {} } as any)
+let ctxTexts = [] as any[]
+
+globalThis.document = {
+  createElement() {
+    return {
+      getContext() {
+        return {
+          fillText(text, x, y) {
+            ctxTexts.push({ text, x, y })
+          },
+          measureText() { return 0 }
+        }
+      }
+    }
+  }
+} as any
+
+const render = (entity) => {
+  ctxTexts = []
+  renderSign(entity, true, PrismarineChat)
+  return ctxTexts.map(({ text, y }) => [y / 64, text])
+}
+
+test('sign renderer', () => {
+  let blockEntity = {
+    'GlowingText': 0,
+    'Color': 'black',
+    'Text4': '{"text":""}',
+    'Text3': '{"text":""}',
+    'Text2': '{"text":""}',
+    'Text1': '{"extra":[{"color":"dark_green","text":"Minecraft "},{"text":"Tools"}],"text":""}'
+  } as any
+  expect(render(blockEntity)).toMatchInlineSnapshot(`
+    [
+      [
+        1,
+        "Minecraft ",
+      ],
+      [
+        1,
+        "Tools",
+      ],
+    ]
+  `)
+
+  blockEntity = { // pre flatenning
+    'Text1': 'Welcome to',
+    'Text2': '',
+    'Text3': 'null',
+    'Text4': '"Version 2.1"',
+  } as const
+  expect(render(blockEntity)).toMatchInlineSnapshot(`
+    [
+      [
+        1,
+        "Welcome to",
+      ],
+      [
+        4,
+        "Version 2.1",
+      ],
+    ]
+  `)
+})

package/src/sign-renderer/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      'prismarine-registry': './noop.js',
+      'prismarine-nbt': './noop.js'
+    },
+  },
+})

package/src/three/appShared.ts

@@ -0,0 +1,75 @@
+import { BlockModel } from 'mc-assets/dist/types'
+import { ItemSpecificContextProperties } from '@/playerState/types'
+import { PlayerStateRenderer } from '@/playerState/playerState'
+import { GeneralInputItem, getItemModelName } from '@/lib/items'
+import { ResourcesManager, ResourcesManagerTransferred } from '@/resourcesManager'
+import { renderSlot } from './renderSlot'
+
+export const getItemUv = (item: Record<string, any>, specificProps: ItemSpecificContextProperties, resourcesManager: ResourcesManagerTransferred, playerState: PlayerStateRenderer): {
+  u: number
+  v: number
+  su: number
+  sv: number
+  renderInfo?: ReturnType<typeof renderSlot>
+  // texture: ImageBitmap
+  modelName: string
+} | {
+  resolvedModel: BlockModel
+  modelName: string
+} => {
+  const resources = resourcesManager.currentResources
+  if (!resources) throw new Error('Resources not loaded')
+  const idOrName = item.itemId ?? item.blockId ?? item.name
+  const { blockState } = item
+  try {
+    const name =
+      blockState
+        ? loadedData.blocksByStateId[blockState]?.name
+        : typeof idOrName === 'number' ? loadedData.items[idOrName]?.name : idOrName
+    if (!name) throw new Error(`Item not found: ${idOrName}`)
+
+    const model = getItemModelName({
+      ...item,
+      name,
+    } as GeneralInputItem, specificProps, resourcesManager, playerState)
+
+    const renderInfo = renderSlot({
+      modelName: model,
+    }, resourcesManager, false, true)
+
+    if (!renderInfo) throw new Error(`Failed to get render info for item ${name}`)
+
+    const img = renderInfo.texture === 'blocks' ? resources.blocksAtlasImage : resources.itemsAtlasImage
+
+    if (renderInfo.blockData) {
+      return {
+        resolvedModel: renderInfo.blockData.resolvedModel,
+        modelName: renderInfo.modelName!
+      }
+    }
+    if (renderInfo.slice) {
+      // Get slice coordinates from either block or item texture
+      const [x, y, w, h] = renderInfo.slice
+      const [u, v, su, sv] = [x / img.width, y / img.height, (w / img.width), (h / img.height)]
+      return {
+        u, v, su, sv,
+        renderInfo,
+        // texture: img,
+        modelName: renderInfo.modelName!
+      }
+    }
+
+    throw new Error(`Invalid render info for item ${name}`)
+  } catch (err) {
+    reportError?.(err)
+    // Return default UV coordinates for missing texture
+    return {
+      u: 0,
+      v: 0,
+      su: 16 / resources.blocksAtlasImage.width,
+      sv: 16 / resources.blocksAtlasImage.width,
+      // texture: resources.blocksAtlasImage,
+      modelName: 'missing'
+    }
+  }
+}

package/src/three/bannerRenderer.ts

@@ -0,0 +1,275 @@
+import * as THREE from 'three'
+import { Vec3 } from 'vec3'
+import { createCanvas } from '../lib/utils'
+import type { WorldRendererThree } from './worldRendererThree'
+
+type BannerBlockEntity = {
+  Patterns?: Array<{
+    Color?: number
+    Pattern?: string
+  }>
+}
+
+// Banner cloth size is 20x40
+const BANNER_WIDTH = 20
+const BANNER_HEIGHT = 40
+
+// Map banner block names to base color IDs
+const BANNER_NAME_TO_COLOR: Record<string, number> = {
+  'white_banner': 15,
+  'orange_banner': 14,
+  'magenta_banner': 13,
+  'light_blue_banner': 12,
+  'yellow_banner': 11,
+  'lime_banner': 10,
+  'pink_banner': 9,
+  'gray_banner': 8,
+  'light_gray_banner': 7,
+  'cyan_banner': 6,
+  'purple_banner': 5,
+  'blue_banner': 4,
+  'brown_banner': 3,
+  'green_banner': 2,
+  'red_banner': 1,
+  'black_banner': 0,
+}
+
+// Basic Minecraft banner colors (DyeColor enum values)
+const BANNER_COLORS: Record<number, string> = {
+  0: '#1d1d21', // black
+  1: '#b02e26', // red
+  2: '#5e7c16', // green
+  3: '#835432', // brown
+  4: '#3c44aa', // blue
+  5: '#8932b8', // purple
+  6: '#169c9c', // cyan
+  7: '#9d9d97', // light_gray
+  8: '#474f52', // gray
+  9: '#f38baa', // pink
+  10: '#80c71f', // lime
+  11: '#fed83d', // yellow
+  12: '#3ab3da', // light_blue
+  13: '#c74ebd', // magenta
+  14: '#f9801d', // orange
+  15: '#f9fffe', // white
+}
+
+// Extract base color from banner block name
+function getBannerBaseColor(blockName: string): number {
+  // Remove _wall_banner suffix if present
+  const baseName = blockName.replace('_wall_banner', '_banner')
+  return BANNER_NAME_TO_COLOR[baseName] ?? 15 // Default to white
+}
+
+// Basic pattern rendering (simplified - just solid colors for now)
+const renderPattern = (
+  ctx: OffscreenCanvasRenderingContext2D,
+  pattern: string,
+  color: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number
+) => {
+  ctx.fillStyle = color
+  // For now, just render basic patterns as solid colors
+  // TODO: Implement actual pattern shapes (stripes, crosses, etc.)
+  switch (pattern) {
+    case 'bs': // Base
+      ctx.fillRect(x, y, width, height)
+      break
+    case 'ls': // Left stripe
+      ctx.fillRect(x, y, width / 3, height)
+      break
+    case 'rs': // Right stripe
+      ctx.fillRect(x + (width * 2 / 3), y, width / 3, height)
+      break
+    case 'ts': // Top stripe
+      ctx.fillRect(x, y, width, height / 3)
+      break
+    case 'ms': // Middle stripe
+      ctx.fillRect(x, y + (height / 3), width, height / 3)
+      break
+    case 'drs': // Down-right stripe
+      ctx.fillRect(x, y, width / 2, height / 2)
+      break
+    case 'dls': // Down-left stripe
+      ctx.fillRect(x + (width / 2), y, width / 2, height / 2)
+      break
+    case 'ss': // Small stripes
+      for (let i = 0; i < width; i += 2) {
+        ctx.fillRect(x + i, y, 1, height)
+      }
+      break
+    case 'cr': // Cross
+      ctx.fillRect(x, y + (height / 3), width, height / 3)
+      ctx.fillRect(x + (width / 3), y, width / 3, height)
+      break
+    case 'sc': // Straight cross
+      ctx.fillRect(x, y + (height / 2) - 1, width, 2)
+      ctx.fillRect(x + (width / 2) - 1, y, 2, height)
+      break
+    default:
+      // Default: fill entire area
+      ctx.fillRect(x, y, width, height)
+  }
+}
+
+// Create a cache key from banner content (base color + patterns)
+function createBannerCacheKey(baseColor: number, patterns: Array<{ Color?: number, Pattern?: string }> | undefined): string {
+  if (!patterns || patterns.length === 0) {
+    return `banner_${baseColor}_empty`
+  }
+  const patternStr = patterns.map(p => `${p.Pattern ?? 'bs'}_${p.Color ?? 0}`).join(',')
+  return `banner_${baseColor}_${patternStr}`
+}
+
+export const renderBanner = (
+  baseColor: number,
+  blockEntity: BannerBlockEntity,
+  canvasCreator = (width: number, height: number): OffscreenCanvas => {
+    return createCanvas(width, height)
+  }
+) => {
+  // Create canvas with banner cloth size (20x40)
+  const scale = 1
+  const canvas = canvasCreator(BANNER_WIDTH * scale, BANNER_HEIGHT * scale)
+  const ctx = canvas.getContext('2d')!
+
+  if (!ctx) {
+    console.warn('Failed to get 2d context for banner rendering')
+    return undefined
+  }
+
+  ctx.imageSmoothingEnabled = false
+
+  // Always render base color first (even if no patterns)
+  const baseColorHex = BANNER_COLORS[baseColor] || BANNER_COLORS[15]
+  ctx.fillStyle = baseColorHex
+  ctx.fillRect(0, 0, BANNER_WIDTH * scale, BANNER_HEIGHT * scale)
+
+  // Render patterns on top of base color (if any)
+  if (blockEntity?.Patterns && blockEntity.Patterns.length > 0) {
+    for (const patternData of blockEntity.Patterns) {
+      const colorId = patternData.Color ?? 0
+      const pattern = patternData.Pattern ?? 'bs'
+      const color = BANNER_COLORS[colorId] || BANNER_COLORS[0]
+
+      // Render each pattern on top of previous ones
+      renderPattern(
+        ctx,
+        pattern,
+        color,
+        0,
+        0,
+        BANNER_WIDTH * scale,
+        BANNER_HEIGHT * scale
+      )
+    }
+  }
+
+  return canvas
+}
+
+
+// Banner texture cache with reference counting
+const bannerTextureCache = new Map<string, { texture: THREE.Texture, refCount: number }>()
+
+export function getBannerTexture(
+  worldRenderer: WorldRendererThree,
+  blockName: string,
+  blockEntity: any
+): THREE.Texture | undefined {
+  // Extract base color from block name
+  const baseColor = getBannerBaseColor(blockName)
+
+  // Create cache key from banner content (not position)
+  const cacheKey = createBannerCacheKey(baseColor, blockEntity?.Patterns)
+
+  // Check cache
+  const cached = bannerTextureCache.get(cacheKey)
+  if (cached) {
+    cached.refCount++
+    return cached.texture
+  }
+
+  // Render new banner
+  const canvas = renderBanner(baseColor, blockEntity)
+  if (!canvas) return undefined
+
+  const tex = new THREE.Texture(canvas)
+  tex.magFilter = THREE.NearestFilter
+  tex.minFilter = THREE.NearestFilter
+  tex.needsUpdate = true
+
+  // Store in cache with reference count
+  bannerTextureCache.set(cacheKey, { texture: tex, refCount: 1 })
+  return tex
+}
+
+export function releaseBannerTexture(texture: THREE.Texture): void {
+  // Find and decrement reference count
+  for (const [key, cached] of bannerTextureCache.entries()) {
+    if (cached.texture === texture) {
+      cached.refCount--
+      if (cached.refCount <= 0) {
+        // Cleanup unused texture
+        cached.texture.dispose()
+        bannerTextureCache.delete(key)
+      }
+      return
+    }
+  }
+}
+
+export function createBannerMesh(
+  position: Vec3,
+  rotation: number,
+  isWall: boolean,
+  texture: THREE.Texture
+): THREE.Group & { bannerTexture?: THREE.Texture } {
+  const bannerWidth = 13.6 / 16
+  const bannerHeight = 28 / 16
+  const clothXOffset = 0
+
+  let clothYOffset: number
+  let clothZPosition: number
+  let heightOffset: number
+
+  if (isWall) {
+    // Wall banner: Cloth from [1.2, -14.6, 14.5] to [14.8, 13.4, 15]
+    clothYOffset = (-14.6 + 13.4) / 2 / 16 - 0.5
+    clothZPosition = 1 - 14.75 / 16 - 0.5
+    heightOffset = 1 / 2
+  } else {
+    // Standing banner: Cloth from [1.2, 1.4, 7] to [14.8, 29.4, 7.5]
+    clothYOffset = (1.4 + 29.4) / 2 / 16
+    clothZPosition = 1 - 7.25 / 16 - 0.5
+    heightOffset = 0
+  }
+
+  const mesh = new THREE.Mesh(
+    new THREE.PlaneGeometry(bannerWidth, bannerHeight),
+    new THREE.MeshBasicMaterial({ map: texture, transparent: true })
+  )
+  mesh.renderOrder = 999
+
+  const thickness = 0.5 / 16
+  const wallSpacing = 0.25 / 16
+  if (isWall) {
+    mesh.position.set(clothXOffset, clothYOffset, clothZPosition + wallSpacing + 0.004)
+  } else {
+    mesh.position.set(clothXOffset, clothYOffset, clothZPosition + thickness / 2 + 0.004)
+  }
+
+  const group = new THREE.Group() as THREE.Group & { bannerTexture?: THREE.Texture }
+  group.rotation.set(
+    0,
+    -THREE.MathUtils.degToRad(rotation * (isWall ? 90 : 45 / 2)),
+    0
+  )
+  group.add(mesh)
+  group.bannerTexture = texture
+  group.position.set(position.x + 0.5, position.y + heightOffset, position.z + 0.5)
+  return group
+}

package/src/three/cameraShake.ts

@@ -0,0 +1,120 @@
+import * as THREE from 'three'
+import { WorldRendererThree } from './worldRendererThree'
+
+export class CameraShake {
+  private rollAngle = 0
+  private get damageRollAmount() { return 5 }
+  private get damageAnimDuration() { return 200 }
+  private rollAnimation?: { startTime: number, startRoll: number, targetRoll: number, duration: number, returnToZero?: boolean }
+  private basePitch = 0
+  private baseYaw = 0
+
+  constructor(public worldRenderer: WorldRendererThree, public onRenderCallbacks: Array<() => void>) {
+    onRenderCallbacks.push(() => {
+      this.update()
+    })
+  }
+
+  setBaseRotation(pitch: number, yaw: number) {
+    this.basePitch = pitch
+    this.baseYaw = yaw
+    this.update()
+  }
+
+  getBaseRotation() {
+    return { pitch: this.basePitch, yaw: this.baseYaw }
+  }
+
+  shakeFromDamage(yaw?: number) {
+    // Add roll animation
+    const startRoll = this.rollAngle
+    const targetRoll = startRoll + (yaw ?? (Math.random() < 0.5 ? -1 : 1)) * this.damageRollAmount
+
+    this.rollAnimation = {
+      startTime: performance.now(),
+      startRoll,
+      targetRoll,
+      duration: this.damageAnimDuration / 2
+    }
+  }
+
+  update() {
+    if (this.worldRenderer.playerStateUtils.isSpectatingEntity()) {
+      // Remove any shaking when spectating
+      this.rollAngle = 0
+      this.rollAnimation = undefined
+    }
+    // Update roll animation
+    if (this.rollAnimation) {
+      const now = performance.now()
+      const elapsed = now - this.rollAnimation.startTime
+      const progress = Math.min(elapsed / this.rollAnimation.duration, 1)
+
+      if (this.rollAnimation.returnToZero) {
+        // Ease back to zero
+        this.rollAngle = this.rollAnimation.startRoll * (1 - this.easeInOut(progress))
+        if (progress === 1) {
+          this.rollAnimation = undefined
+        }
+      } else {
+        // Initial roll
+        this.rollAngle = this.rollAnimation.startRoll + (this.rollAnimation.targetRoll - this.rollAnimation.startRoll) * this.easeOut(progress)
+        if (progress === 1) {
+          // Start return to zero animation
+          this.rollAnimation = {
+            startTime: now,
+            startRoll: this.rollAngle,
+            targetRoll: 0,
+            duration: this.damageAnimDuration / 2,
+            returnToZero: true
+          }
+        }
+      }
+    }
+
+    const camera = this.worldRenderer.cameraObject
+
+    if (this.worldRenderer.cameraGroupVr) {
+      // For VR camera, only apply yaw rotation
+      const yawQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), this.baseYaw)
+      camera.setRotationFromQuaternion(yawQuat)
+    } else {
+      // For regular camera, apply all rotations
+      // Add tiny offsets to prevent z-fighting at ideal angles (90, 180, 270 degrees)
+      const pitchOffset = this.addAntiZfightingOffset(this.basePitch)
+      const yawOffset = this.addAntiZfightingOffset(this.baseYaw)
+
+      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.setRotationFromQuaternion(finalQuat)
+    }
+  }
+
+  private easeOut(t: number): number {
+    return 1 - (1 - t) * (1 - t)
+  }
+
+  private easeInOut(t: number): number {
+    return t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2
+  }
+
+  private addAntiZfightingOffset(angle: number): number {
+    const offset = 0.001 // Very small offset in radians (about 0.057 degrees)
+
+    // Check if the angle is close to ideal angles (0, π/2, π, 3π/2)
+    const normalizedAngle = ((angle % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2)
+    const tolerance = 0.01 // Tolerance for considering an angle "ideal"
+
+    if (Math.abs(normalizedAngle) < tolerance ||
+      Math.abs(normalizedAngle - Math.PI / 2) < tolerance ||
+      Math.abs(normalizedAngle - Math.PI) < tolerance ||
+      Math.abs(normalizedAngle - 3 * Math.PI / 2) < tolerance) {
+      return angle + offset
+    }
+
+    return angle
+  }
+}