minecraft-renderer 0.1.75 → 0.1.77

package/package.json

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

package/src/lib/createPlayerObject.test.ts

@@ -0,0 +1,46 @@
+//@ts-nocheck
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('./utils/skins', () => ({
+  stevePngUrl: '',
+  loadSkinImage: vi.fn(),
+}))
+
+import { PlayerObject } from 'skinview3d'
+import { configurePlayerSkinMaterials } from './createPlayerObject'
+
+describe('configurePlayerSkinMaterials', () => {
+  it('configures cutout materials and log-depth bias on arm/leg mats only', () => {
+    const playerObject = new PlayerObject()
+    const skin = playerObject.skin as any
+
+    configurePlayerSkinMaterials(playerObject)
+
+    const allMaterials = [
+      skin.layer1Material,
+      skin.layer1MaterialBiased,
+      skin.layer2Material,
+      skin.layer2MaterialBiased,
+    ]
+    for (const mat of allMaterials) {
+      expect(mat.transparent).toBe(false)
+      expect(mat.alphaTest).toBe(0.1)
+      expect(mat.depthWrite).toBe(true)
+    }
+
+    expect(skin.layer1MaterialBiased.userData.logDepthBiasApplied).toBe(true)
+    expect(skin.layer2MaterialBiased.userData.logDepthBiasApplied).toBe(true)
+    expect(typeof skin.layer1MaterialBiased.onBeforeCompile).toBe('function')
+    expect(typeof skin.layer2MaterialBiased.onBeforeCompile).toBe('function')
+    expect(skin.layer1MaterialBiased.onBeforeCompile).toBe(skin.layer2MaterialBiased.onBeforeCompile)
+
+    expect(skin.layer1Material.userData.logDepthBiasApplied).toBeUndefined()
+    expect(skin.layer2Material.userData.logDepthBiasApplied).toBeUndefined()
+    expect(skin.layer1Material.onBeforeCompile).not.toBe(skin.layer1MaterialBiased.onBeforeCompile)
+    expect(skin.layer2Material.onBeforeCompile).not.toBe(skin.layer2MaterialBiased.onBeforeCompile)
+
+    const firstCompile = skin.layer1MaterialBiased.onBeforeCompile
+    configurePlayerSkinMaterials(playerObject)
+    expect(skin.layer1MaterialBiased.onBeforeCompile).toBe(firstCompile)
+  })
+})

package/src/lib/createPlayerObject.ts

@@ -10,7 +10,30 @@ export type PlayerObjectType = PlayerObject & {
   realUsername: string
 }
 
-/** Starfield + log-depth world: cutout skin mats need alphaTest and depthWrite (not mesh traverse). */
+const LOG_DEPTH_BIAS = -2e-4 // tune visually; negative ≈ polygonOffset “closer”
+
+function patchLogDepthBiasShader (shader: THREE.WebGLProgramParametersWithUniforms): void {
+  shader.uniforms.uLogDepthBias = { value: LOG_DEPTH_BIAS }
+  shader.fragmentShader = shader.fragmentShader.replace(
+    '#include <logdepthbuf_pars_fragment>',
+    `#include <logdepthbuf_pars_fragment>\nuniform float uLogDepthBias;`
+  )
+  shader.fragmentShader = shader.fragmentShader.replace(
+    '#include <logdepthbuf_fragment>',
+    `#if defined( USE_LOGARITHMIC_DEPTH_BUFFER )
+      gl_FragDepth = log2( vFragDepth ) * logDepthBufFC * 0.5 + uLogDepthBias;
+    #endif`
+  )
+}
+
+function applyLogDepthBias (material: THREE.Material): void {
+  if (material.userData.logDepthBiasApplied) return
+  material.userData.logDepthBiasApplied = true
+  material.onBeforeCompile = patchLogDepthBiasShader
+  material.needsUpdate = true
+}
+
+/** Log-depth world: opaque cutout mats (alphaTest + depthWrite, not transparent sort). */
 export function configurePlayerSkinMaterials (playerObject: PlayerObject): void {
   const skin = playerObject.skin as any
   const materials = [
@@ -20,10 +43,12 @@ export function configurePlayerSkinMaterials (playerObject: PlayerObject): void
     skin.layer2MaterialBiased,
   ]
   for (const mat of materials) {
-    mat.transparent = true
+    mat.transparent = false
     mat.alphaTest = 0.1
     mat.depthWrite = true
   }
+  applyLogDepthBias(skin.layer1MaterialBiased)
+  applyLogDepthBias(skin.layer2MaterialBiased)
 }
 
 export function createPlayerObject (options: {

package/src/lib/utils/skins.ts

@@ -8,6 +8,15 @@ import { createCanvas, loadImageFromUrl } from '../utils'
 export const stevePngUrl = stevePng
 export const steveTexture = loadThreeJsTextureFromUrl(stevePngUrl)
 
+const SKIN_TEXTURE_WIDTHS = [64, 128, 256, 512, 1024] as const
+
+/** Minecraft skin sheets: WxW or Wx(W/2) at standard power-of-two widths. */
+export const isLikelySkinImageSize = (width: number, height: number) => {
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return false
+  if (!(SKIN_TEXTURE_WIDTHS as readonly number[]).includes(width)) return false
+  return height === width || height === width / 2
+}
+
 const config = {
   apiEnabled: true,
 }

package/src/three/chunkMeshManager.ts

@@ -72,6 +72,21 @@ export interface SectionObject extends THREE.Group {
   _waitingForChunkDisplay?: boolean
 }
 
+/** Live vs allocated stats for one global GPU buffer (faces or legacy quads). */
+export type GlobalBufferSlotStats = {
+  used: number
+  capacity: number
+  sections: number
+  usedBytes: number
+  capacityBytes: number
+}
+
+export type GlobalBufferStats = {
+  shaderFaces: GlobalBufferSlotStats | null
+  legacyOpaque: GlobalBufferSlotStats | null
+  legacyBlend: GlobalBufferSlotStats | null
+}
+
 export class ChunkMeshManager {
   private static readonly REBASE_THRESHOLD = 65536
 
@@ -1513,6 +1528,34 @@ export class ChunkMeshManager {
   /**
    * Get pool statistics
    */
+  getGlobalBufferStats (): GlobalBufferStats {
+    const snapshotLegacy = (buffer: GlobalLegacyBuffer | null): GlobalBufferSlotStats | null => {
+      if (!buffer) return null
+      return {
+        used: buffer.getHighWatermark(),
+        capacity: buffer.getCapacityQuads(),
+        sections: buffer.getSectionCount(),
+        usedBytes: buffer.getUsedMemoryBytes(),
+        capacityBytes: buffer.getMemoryBytes(),
+      }
+    }
+
+    const cubes = this.globalBlockBuffer
+    return {
+      shaderFaces: cubes
+        ? {
+            used: cubes.getHighWatermark(),
+            capacity: cubes.getCapacityFaces(),
+            sections: cubes.getSectionCount(),
+            usedBytes: cubes.getUsedMemoryBytes(),
+            capacityBytes: cubes.getMemoryBytes(),
+          }
+        : null,
+      legacyOpaque: snapshotLegacy(this.globalLegacyBuffer),
+      legacyBlend: snapshotLegacy(this.globalLegacyBlendBuffer),
+    }
+  }
+
   getStats () {
     const freeCount = this.meshPool.filter(entry => !entry.inUse).length
     const hitRate = this.hits + this.misses > 0 ? (this.hits / (this.hits + this.misses) * 100).toFixed(1) : '0'

package/src/three/entities.ts

@@ -635,6 +635,17 @@ export class Entities {
     }
   }
 
+  /** Local preview override: hand + player model until server skin refresh or reconnect. */
+  async applyTemporaryPlayerSkinOverride (
+    skinUrl: string,
+    entityId: string | number,
+    username?: string,
+    uuid?: string
+  ) {
+    this.worldRenderer.playerStateReactive.playerSkin = skinUrl
+    await this.updatePlayerSkin(entityId, username, uuid, skinUrl, undefined)
+  }
+
   private async loadAndApplySkin(entityId: string | number, skinUrl: string, renderEars: boolean) {
     let playerObject = this.getPlayerObject(entityId)
     if (!playerObject) return

package/src/three/globalBlockBuffer.ts

@@ -35,6 +35,9 @@ const MAX_UPLOAD_FACES_PER_FRAME = 15_000   // face-indexed budget (chunksStorag
 const FRAGMENTATION_THRESHOLD = 0.25
 const EMPTY_W2 = packWord2Empty()
 
+/** CPU bytes per instanced cube face (a_w0..a_w3). */
+export const SHADER_CUBE_BYTES_PER_FACE = 16
+
 type PendingMove = { key: string, oldStart: number, newStart: number, count: number }
 
 export type GlobalBlockBufferShaderData = {
@@ -162,6 +165,22 @@ export class GlobalBlockBuffer {
     return this.highWatermark
   }
 
+  getCapacityFaces (): number {
+    return this.capacityFaces
+  }
+
+  getSectionCount (): number {
+    return this.sectionSlots.size
+  }
+
+  getMemoryBytes (): number {
+    return this.capacityFaces * SHADER_CUBE_BYTES_PER_FACE
+  }
+
+  getUsedMemoryBytes (): number {
+    return this.highWatermark * SHADER_CUBE_BYTES_PER_FACE
+  }
+
   hasPendingUploads (): boolean {
     return this.pendingRanges.length > 0
   }

package/src/three/globalLegacyBuffer.ts

@@ -12,6 +12,11 @@ const DEFAULT_INITIAL_CAPACITY_QUADS = 128_000
 const DEFAULT_GROWTH_INCREMENT_QUADS = 128_000
 const MAX_UPLOAD_QUADS_PER_FRAME = 5_000
 
+/** CPU bytes per allocated quad slot (all legacy vertex/index attrs). */
+export const LEGACY_BYTES_PER_QUAD =
+  VERTS_PER_QUAD * (FLOATS_PER_VERT * 3 + FLOATS_PER_LIGHT_VERT * 2 + FLOATS_PER_UV_VERT) * 4
+  + INDICES_PER_QUAD * 4
+
 export const FULL_DRAW_VISIBLE_FRACTION = 0.75
 export const SPAN_GAP_TOLERANCE_QUADS = 256
 export const MAX_OPAQUE_SPANS = 64
@@ -475,10 +480,24 @@ export class GlobalLegacyBuffer {
     return out
   }
 
+  getHighWatermark (): number {
+    return this.highWatermark
+  }
+
+  getCapacityQuads (): number {
+    return this.capacityQuads
+  }
+
+  getSectionCount (): number {
+    return this.sectionSlots.size
+  }
+
   getMemoryBytes (): number {
-    const verts = this.capacityQuads * VERTS_PER_QUAD
-    return verts * (FLOATS_PER_VERT * 3 + FLOATS_PER_LIGHT_VERT * 2 + FLOATS_PER_UV_VERT) * 4
-      + this.capacityQuads * INDICES_PER_QUAD * 4
+    return this.capacityQuads * LEGACY_BYTES_PER_QUAD
+  }
+
+  getUsedMemoryBytes (): number {
+    return this.highWatermark * LEGACY_BYTES_PER_QUAD
   }
 
   reset (): void {

package/src/three/graphicsBackendBase.ts

@@ -35,6 +35,7 @@ export const getBackendMethods = (worldRenderer: WorldRendererThree): any => {
     playEntityAnimation: worldRenderer.entities.playAnimation.bind(worldRenderer.entities),
     damageEntity: worldRenderer.entities.handleDamageEvent.bind(worldRenderer.entities),
     updatePlayerSkin: worldRenderer.entities.updatePlayerSkin.bind(worldRenderer.entities),
+    applyTemporaryPlayerSkinOverride: worldRenderer.entities.applyTemporaryPlayerSkinOverride.bind(worldRenderer.entities),
     changeHandSwingingState: worldRenderer.changeHandSwingingState.bind(worldRenderer),
     getHighestBlocks: worldRenderer.getHighestBlocks.bind(worldRenderer),
     reloadWorld: worldRenderer.reloadWorld.bind(worldRenderer),

package/src/three/graphicsBackendSingleThread.ts

@@ -19,7 +19,7 @@ const createGraphicsBackendSingleThread: GraphicsBackendLoader = (initOptions: G
 }
 
 createGraphicsBackendSingleThread.id = 'threejs'
-createGraphicsBackendSingleThread.displayName = 'three.js Blocking Beta'
+createGraphicsBackendSingleThread.displayName = 'three.js Blocking'
 createGraphicsBackendSingleThread.description = 'Simple, old and stable main thread graphics backend providing balanced performance on top of WebGL2.'
 
 export default createGraphicsBackendSingleThread

package/src/three/worldRendererThree.ts

@@ -758,11 +758,20 @@ export class WorldRendererThree extends WorldRendererCommon {
         const formatCompact = (num: number) => new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 }).format(num)
         let text = ''
         text += `TE: ${formatFull(this.renderer.info.memory.textures)} `
-        text += `F: ${formatCompact(this.tilesRendered)} `
-        text += `B: ${formatCompact(this.blocksRendered)} `
+        const gb = this.chunkMeshManager.getGlobalBufferStats()
+        if (gb.shaderFaces) {
+          const s = gb.shaderFaces
+          text += `CUBE: ${formatCompact(s.used)}/${formatCompact(s.capacity)}f `
+        }
+        if (gb.legacyOpaque) {
+          const s = gb.legacyOpaque
+          text += `LEG-O: ${formatCompact(s.used)}/${formatCompact(s.capacity)}q `
+        }
+        if (gb.legacyBlend) {
+          const s = gb.legacyBlend
+          text += `LEG-B: ${formatCompact(s.used)}/${formatCompact(s.capacity)}q `
+        }
         text += `MEM: ${this.chunkMeshManager.getEstimatedMemoryUsage().total} `
-        const poolStats = this.chunkMeshManager.getStats()
-        text += `POOL: ${poolStats.activeCount}/${poolStats.poolSize} `
         const pf = formatPerformanceFactorsDebug(this.reactiveState.world.instabilityFactors)
         if (pf) text += `PF: ${pf} `
         // entities can be seen in F3