minecraft-renderer 0.1.72 → 0.1.73

package/src/three/cubeDrawSpans.ts

@@ -0,0 +1,74 @@
+//@ts-nocheck
+import {
+  FULL_DRAW_VISIBLE_FRACTION,
+  MAX_OPAQUE_SPANS,
+  SPAN_GAP_TOLERANCE_QUADS,
+} from './globalLegacyBuffer'
+
+export const MAX_CUBE_SPANS = MAX_OPAQUE_SPANS
+export const SPAN_GAP_TOLERANCE_FACES = SPAN_GAP_TOLERANCE_QUADS
+export { FULL_DRAW_VISIBLE_FRACTION }
+
+export type CubeDrawSpan = { start: number, count: number }
+
+export type VisibleCubeSlot = { start: number, count: number }
+
+function mergeCubeSpans (spans: CubeDrawSpan[]): void {
+  if (spans.length < 2) return
+  let i = 0
+  while (i < spans.length - 1) {
+    const cur = spans[i]!
+    const next = spans[i + 1]!
+    const gap = next.start - (cur.start + cur.count)
+    if (gap <= SPAN_GAP_TOLERANCE_FACES) {
+      cur.count = next.start + next.count - cur.start
+      spans.splice(i + 1, 1)
+    } else {
+      i++
+    }
+  }
+}
+
+function capCubeSpans (spans: CubeDrawSpan[]): void {
+  while (spans.length > MAX_CUBE_SPANS) {
+    let bestIdx = 0
+    let bestGap = Infinity
+    for (let i = 0; i < spans.length - 1; i++) {
+      const gap = spans[i + 1]!.start - (spans[i]!.start + spans[i]!.count)
+      if (gap < bestGap) {
+        bestGap = gap
+        bestIdx = i
+      }
+    }
+    const cur = spans[bestIdx]!
+    const next = spans[bestIdx + 1]!
+    cur.count = next.start + next.count - cur.start
+    spans.splice(bestIdx + 1, 1)
+  }
+}
+
+/**
+ * Merge/cap visible face-instance ranges for WEBGL_multi_draw (option B).
+ * Instance indices — no *6 scaling on span values.
+ */
+export function buildVisibleCubeSpans (
+  visibleSlots: VisibleCubeSlot[],
+  highWatermark: number,
+): CubeDrawSpan[] {
+  if (visibleSlots.length === 0 || highWatermark === 0) return []
+
+  let visibleFaceCount = 0
+  for (const slot of visibleSlots) {
+    visibleFaceCount += slot.count
+  }
+
+  if (visibleFaceCount >= highWatermark * FULL_DRAW_VISIBLE_FRACTION) {
+    return [{ start: 0, count: highWatermark }]
+  }
+
+  const spans = visibleSlots.map(s => ({ start: s.start, count: s.count }))
+  spans.sort((a, b) => a.start - b.start)
+  mergeCubeSpans(spans)
+  capCubeSpans(spans)
+  return spans
+}

package/src/three/cubeMultiDraw.ts

@@ -0,0 +1,119 @@
+//@ts-nocheck
+import type { CubeDrawSpan } from './cubeDrawSpans'
+import { MAX_CUBE_SPANS } from './cubeDrawSpans'
+import { VERTICES_PER_FACE } from './shaders/cubeBlockShader'
+
+export type MultiDrawTier = 'A' | 'B' | 'C'
+
+export type MultiDrawCaps = {
+  tier: MultiDrawTier
+  ext: MultiDrawInstancedExt | DrawInstancedBaseExt | null
+}
+
+type MultiDrawInstancedExt = {
+  multiDrawArraysInstancedBaseInstanceWEBGL: (
+    mode: number,
+    firsts: Int32Array,
+    firstsOffset: number,
+    counts: Int32Array,
+    countsOffset: number,
+    instanceCounts: Int32Array,
+    instanceCountsOffset: number,
+    baseInstances: Int32Array,
+    baseInstancesOffset: number,
+    drawCount: number,
+  ) => void
+}
+
+type DrawInstancedBaseExt = {
+  drawArraysInstancedBaseInstanceWEBGL: (
+    mode: number,
+    first: number,
+    count: number,
+    instanceCount: number,
+    baseInstance: number,
+  ) => void
+}
+
+export type CubeMultiDrawScratch = {
+  firsts: Int32Array
+  counts: Int32Array
+  instanceCounts: Int32Array
+  baseInstances: Int32Array
+}
+
+export function createCubeMultiDrawScratch (): CubeMultiDrawScratch {
+  return {
+    firsts: new Int32Array(MAX_CUBE_SPANS),
+    counts: new Int32Array(MAX_CUBE_SPANS),
+    instanceCounts: new Int32Array(MAX_CUBE_SPANS),
+    baseInstances: new Int32Array(MAX_CUBE_SPANS),
+  }
+}
+
+export function detectMultiDrawCaps (gl: WebGL2RenderingContext): MultiDrawCaps {
+  const tierA = gl.getExtension('WEBGL_multi_draw_instanced_base_vertex_base_instance')
+  if (tierA) {
+    return { tier: 'A', ext: tierA as MultiDrawInstancedExt }
+  }
+  const tierB = gl.getExtension('WEBGL_draw_instanced_base_vertex_base_instance')
+  if (tierB) {
+    return { tier: 'B', ext: tierB as DrawInstancedBaseExt }
+  }
+  return { tier: 'C', ext: null }
+}
+
+let tierLogged = false
+
+export function logMultiDrawTierOnce (tier: MultiDrawTier, debug: boolean): void {
+  if (tierLogged || !debug) return
+  tierLogged = true
+  console.info('[globalBlockBuffer] cube multi_draw tier', tier)
+}
+
+/**
+ * Issue instanced cube draws for visible spans. Tier C delegates to buffer-owned VAO path.
+ */
+export function drawCubeSpans (
+  gl: WebGL2RenderingContext,
+  caps: MultiDrawCaps,
+  spans: readonly CubeDrawSpan[],
+  scratch: CubeMultiDrawScratch,
+  tierCDraw?: (gl: WebGL2RenderingContext, spans: readonly CubeDrawSpan[]) => void,
+): void {
+  const drawCount = spans.length
+  if (drawCount === 0) return
+
+  const mode = gl.TRIANGLES
+
+  if (caps.tier === 'A' && caps.ext) {
+    const ext = caps.ext as MultiDrawInstancedExt
+    for (let i = 0; i < drawCount; i++) {
+      const span = spans[i]!
+      scratch.firsts[i] = 0
+      scratch.counts[i] = VERTICES_PER_FACE
+      scratch.instanceCounts[i] = span.count
+      scratch.baseInstances[i] = span.start
+    }
+    ext.multiDrawArraysInstancedBaseInstanceWEBGL(
+      mode,
+      scratch.firsts, 0,
+      scratch.counts, 0,
+      scratch.instanceCounts, 0,
+      scratch.baseInstances, 0,
+      drawCount,
+    )
+    return
+  }
+
+  if (caps.tier === 'B' && caps.ext) {
+    const ext = caps.ext as DrawInstancedBaseExt
+    for (let i = 0; i < drawCount; i++) {
+      const span = spans[i]!
+      ext.drawArraysInstancedBaseInstanceWEBGL(mode, 0, VERTICES_PER_FACE, span.count, span.start)
+    }
+    return
+  }
+
+  tierCDraw?.(gl, spans)
+}

package/src/three/documentRenderer.ts

@@ -216,8 +216,6 @@ export class DocumentRenderer {
       throw err
     }
 
-    // @ts-ignore - legacy lights API
-    this.renderer.useLegacyLights = true
     this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace
 
     if (!externalCanvas) {

package/src/three/entities.ts

@@ -265,7 +265,7 @@ export class Entities {
   }
   debugMode: string
   onSkinUpdate: () => void
-  clock = new THREE.Clock()
+  clock = new THREE.Timer()
   currentlyRendering = true
   cachedMapsImages = {} as Record<number, string>
   itemFrameMaps = {} as Record<number, Array<THREE.Mesh<THREE.PlaneGeometry, THREE.MeshLambertMaterial>>>
@@ -405,6 +405,7 @@ export class Entities {
       this.setRendering(renderEntitiesConfig)
     }
 
+    this.clock.update(performance.now())
     const dt = Math.min(this.clock.getDelta(), 1 / 30)
     const botPos = this.worldRenderer.viewerChunkPosition
     const VISIBLE_DISTANCE = 10 * 10
@@ -678,7 +679,6 @@ export class Entities {
         earsTexture.magFilter = THREE.NearestFilter
         earsTexture.minFilter = THREE.NearestFilter
         earsTexture.needsUpdate = true
-        //@ts-expect-error
         playerObject.ears.map = earsTexture
         playerObject.ears.visible = true
       } else {
@@ -706,10 +706,8 @@ export class Entities {
       capeTexture.magFilter = THREE.NearestFilter
       capeTexture.minFilter = THREE.NearestFilter
       capeTexture.needsUpdate = true
-      //@ts-expect-error
       playerObject.cape.map = capeTexture
       playerObject.cape.visible = true
-      //@ts-expect-error
       playerObject.elytra.map = capeTexture
       this.onSkinUpdate?.()
 
@@ -902,9 +900,10 @@ export class Entities {
             // mesh.position.set(targetPos.x + 0.5 + 2, targetPos.y + 0.5, targetPos.z + 0.5)
             // viewer.scene.add(mesh)
             if (entity.name === 'item') {
-              const clock = new THREE.Clock()
+              const itemTimer = new THREE.Timer()
               mesh.onBeforeRender = () => {
-                const delta = clock.getDelta()
+                itemTimer.update(performance.now())
+                const delta = itemTimer.getDelta()
                 mesh!.rotation.y += delta
               }
             }

package/src/three/entity/EntityMesh.ts

@@ -261,7 +261,7 @@ export function getMesh(
   let textureHeight = jsonModel.textureheight ?? 64
   let textureOffset: number[] | undefined
   const useBlockTexture = texture.startsWith('block:')
-  const blocksTexture = worldRenderer?.material.map
+  const blocksTexture = worldRenderer?.material.map as THREE.Texture<HTMLImageElement | ImageBitmap> | null | undefined
   if (useBlockTexture) {
     if (!worldRenderer) throw new Error('worldRenderer is required for block textures')
     const blockName = texture.slice(6)
@@ -369,13 +369,15 @@ export function getMesh(
       material.map = loadedTexture
     }, () => {
       // This callback runs after the texture is fully loaded
-      const actualWidth = material.map!.image.width
+      const map = material.map as THREE.Texture<HTMLImageElement | ImageBitmap> | null
+      if (!map) return
+      const actualWidth = map.image.width
       if (actualWidth && textureWidth !== actualWidth) {
-        material.map!.repeat.x = textureWidth / actualWidth
+        map.repeat.x = textureWidth / actualWidth
       }
-      const actualHeight = material.map!.image.height
+      const actualHeight = map.image.height
       if (actualHeight && textureHeight !== actualHeight) {
-        material.map!.repeat.y = textureHeight / actualHeight
+        map.repeat.y = textureHeight / actualHeight
       }
       material.needsUpdate = true
     })

package/src/three/entity/gltfAnimationUtils.ts

@@ -10,7 +10,7 @@ export interface AnimationState {
 }
 
 export class AnimationManager {
-  private readonly clock = new THREE.Clock()
+  private readonly timer = new THREE.Timer()
   private readonly animatedObjects = new Set<THREE.Object3D>()
   state!: AnimationState
 
@@ -47,7 +47,8 @@ export class AnimationManager {
       if (child instanceof THREE.Mesh || child instanceof THREE.Line || child instanceof THREE.Points || child instanceof THREE.Sprite) {
         const originalOnBeforeRender = child.onBeforeRender
         child.onBeforeRender = (renderer, scene, camera, geometry, material, group) => {
-          const delta = this.clock.getDelta()
+          this.timer.update(performance.now())
+          const delta = this.timer.getDelta()
           mixer.update(delta)
           // Call original onBeforeRender if it existed
           originalOnBeforeRender?.(renderer, scene, camera, geometry, material, group)
@@ -123,7 +124,8 @@ export class AnimationManager {
    * Gets the current clock delta (useful for manual updates)
    */
   getDelta(): number {
-    return this.clock.getDelta()
+    this.timer.update(performance.now())
+    return this.timer.getDelta()
   }
 }
 

package/src/three/globalBlockBuffer.ts

@@ -1,8 +1,32 @@
 //@ts-nocheck
 import * as THREE from 'three'
-import { VERTICES_PER_FACE } from './shaders/cubeBlockShader'
+import type { CubeDrawSpan } from './cubeDrawSpans'
+import {
+  createCubeMultiDrawScratch,
+  detectMultiDrawCaps,
+  drawCubeSpans,
+  logMultiDrawTierOnce,
+  type CubeMultiDrawScratch,
+  type MultiDrawCaps,
+} from './cubeMultiDraw'
+import { VERTICES_PER_FACE, computeSectionOriginRel } from './shaders/cubeBlockShader'
+import { computeCameraRelativeUniforms, type RenderOrigin } from './shaders/legacyBlockShader'
 import { packWord2Empty } from '../wasm-mesher/bridge/shaderCubeBridge'
 
+type WebGLRendererInternals = THREE.WebGLRenderer & {
+  properties: {
+    get: (material: THREE.Material) => { currentProgram: { program: WebGLProgram } }
+  }
+}
+
+type TierCAttrBinding = { loc: number, buffer: WebGLBuffer }
+type TierCAttrState = {
+  w0: TierCAttrBinding
+  w1: TierCAttrBinding
+  w2: TierCAttrBinding
+  w3: TierCAttrBinding
+}
+
 // Linear growth (NOT doubling) to keep iOS allocation spikes bounded to one increment.
 // Reference: prismarine-web-client PR #90 (webgl) and #120 (webgpu) both grow by +1M faces.
 const INITIAL_CAPACITY_FACES = 512_000      // ~8 MB up front (4 words × 4 B), well under 1M
@@ -20,7 +44,7 @@ export type GlobalBlockBufferShaderData = {
 
 /**
  * Single GPU instanced mesh for all shader-cube faces in the world.
- * Camera-relative positioning via u_cameraOrigin; no sceneOrigin tracking.
+ * Camera-relative positioning via u_originDelta + u_sectionOriginRel; no sceneOrigin tracking.
  */
 export class GlobalBlockBuffer {
   readonly mesh: THREE.Mesh<THREE.InstancedBufferGeometry, THREE.ShaderMaterial>
@@ -35,6 +59,13 @@ export class GlobalBlockBuffer {
   private highWatermark = 0
   private pendingRanges: Array<{ start: number, end: number }> = []
   private pendingMove: PendingMove | null = null
+  private visibleSpans: CubeDrawSpan[] = []
+  private readonly _drawScratch: CubeMultiDrawScratch = createCubeMultiDrawScratch()
+  private multiDrawCaps: MultiDrawCaps | null = null
+  private tierCVao: WebGLVertexArrayObject | null = null
+  private tierCAttrs: TierCAttrState | null = null
+  private tierCGl: WebGL2RenderingContext | null = null
+  private debugOverlay = false
 
   constructor (
     material: THREE.ShaderMaterial,
@@ -70,6 +101,73 @@ export class GlobalBlockBuffer {
     this.mesh.matrix.identity()
     this.mesh.position.set(0, 0, 0)
     scene.add(this.mesh)
+
+    this.mesh.onAfterRender = (renderer, _scene, _camera, _geometry, material) => {
+      if (this.visibleSpans.length === 0) return
+      const shaderMaterial = material as THREE.ShaderMaterial
+      const gl = renderer.getContext() as WebGL2RenderingContext
+      if (!this.multiDrawCaps) {
+        this.multiDrawCaps = detectMultiDrawCaps(gl)
+        logMultiDrawTierOnce(this.multiDrawCaps.tier, this.debugOverlay)
+      }
+      drawCubeSpans(
+        gl,
+        this.multiDrawCaps,
+        this.visibleSpans,
+        this._drawScratch,
+        this.multiDrawCaps.tier === 'C'
+          ? (g, spans) => this.drawTierCSpans(g, spans, renderer, shaderMaterial)
+          : undefined,
+      )
+    }
+  }
+
+  setDebugOverlay (enabled: boolean): void {
+    this.debugOverlay = enabled
+  }
+
+  /**
+   * Suppress three's full-buffer instanced draw; onAfterRender issues visible spans only.
+   * setDrawRange(0,0) skips bindingStates.setup in r0.184 — use 6 verts + instanceCount=0
+   * so program/VAO stay bound while renderInstances no-ops at primcount===0.
+   */
+  suppressThreeDraw (): void {
+    const geometry = this.mesh.geometry
+    geometry.setDrawRange(0, VERTICES_PER_FACE)
+    geometry.instanceCount = 0
+  }
+
+  setVisibleSpans (spans: CubeDrawSpan[]): void {
+    this.visibleSpans = spans
+  }
+
+  getVisibleSpans (): readonly CubeDrawSpan[] {
+    return this.visibleSpans
+  }
+
+  forEachSectionSlot (cb: (key: string, slot: { start: number, count: number }) => void): void {
+    for (const [key, slot] of this.sectionSlots) {
+      cb(key, slot)
+    }
+  }
+
+  getSectionDrawStart (sectionKey: string): number | undefined {
+    const slot = this.sectionSlots.get(sectionKey)
+    if (!slot) return undefined
+    if (this.pendingMove?.key === sectionKey) return this.pendingMove.oldStart
+    return slot.start
+  }
+
+  getHighWatermark (): number {
+    return this.highWatermark
+  }
+
+  hasPendingUploads (): boolean {
+    return this.pendingRanges.length > 0
+  }
+
+  getPendingMove (): PendingMove | null {
+    return this.pendingMove
   }
 
   addSection (sectionKey: string, words: Uint32Array, faceCount: number): void {
@@ -213,8 +311,8 @@ export class GlobalBlockBuffer {
 
     for (const name of ['a_w0', 'a_w1', 'a_w2', 'a_w3'] as const) {
       const attr = geometry.getAttribute(name) as THREE.InstancedBufferAttribute
-      attr.updateRange.offset = offset
-      attr.updateRange.count = count
+      attr.clearUpdateRanges()
+      attr.addUpdateRange(offset, count)
       attr.needsUpdate = true
     }
 
@@ -222,18 +320,20 @@ export class GlobalBlockBuffer {
     else r.start = offset + count
   }
 
-  setCameraOrigin (x: number, y: number, z: number): void {
-    // Integer + fractional parts — see cubeBlockShader position math.
-    const ix = Math.floor(x)
-    const iy = Math.floor(y)
-    const iz = Math.floor(z)
-    const u = this.mesh.material.uniforms.u_cameraOrigin
+  setCameraOrigin (renderOrigin: RenderOrigin, x: number, y: number, z: number): void {
+    const { originDelta, cameraOriginFrac } = computeCameraRelativeUniforms(renderOrigin, x, y, z)
+    const sectionOriginRel = computeSectionOriginRel(renderOrigin)
+    const u = this.mesh.material.uniforms.u_originDelta
     if (u?.value?.set) {
-      u.value.set(ix, iy, iz)
+      u.value.set(originDelta.x, originDelta.y, originDelta.z)
     }
     const uf = this.mesh.material.uniforms.u_cameraOriginFrac
     if (uf?.value?.set) {
-      uf.value.set(x - ix, y - iy, z - iz)
+      uf.value.set(cameraOriginFrac.x, cameraOriginFrac.y, cameraOriginFrac.z)
+    }
+    const us = this.mesh.material.uniforms.u_sectionOriginRel
+    if (us?.value?.set) {
+      us.value.set(sectionOriginRel.x, sectionOriginRel.y, sectionOriginRel.z)
     }
   }
 
@@ -243,19 +343,114 @@ export class GlobalBlockBuffer {
     this.highWatermark = 0
     this.pendingRanges.length = 0
     this.pendingMove = null
+    this.visibleSpans = []
     this.w0.fill(0)
     this.w1.fill(0)
     this.w2.fill(EMPTY_W2)
     this.w3.fill(0)
     this.mesh.geometry.instanceCount = 0
+    this.invalidateTierCVao()
   }
 
   dispose (): void {
+    this.invalidateTierCVao()
     this.mesh.parent?.remove(this.mesh)
     this.mesh.geometry.dispose()
     this.reset()
   }
 
+  private invalidateTierCVao (): void {
+    if (this.tierCVao && this.tierCGl) {
+      this.tierCGl.deleteVertexArray(this.tierCVao)
+    }
+    this.tierCVao = null
+    this.tierCAttrs = null
+  }
+
+  private drawTierCSpans (
+    gl: WebGL2RenderingContext,
+    spans: readonly CubeDrawSpan[],
+    renderer: THREE.WebGLRenderer,
+    material: THREE.ShaderMaterial,
+  ): void {
+    this.ensureTierCVao(gl, renderer, material)
+    if (!this.tierCVao || !this.tierCAttrs) return
+
+    const attrs = this.tierCAttrs
+    gl.bindVertexArray(this.tierCVao)
+    for (const span of spans) {
+      const byteOffset = span.start * 4
+      const repointWord = (binding: TierCAttrBinding) => {
+        gl.bindBuffer(gl.ARRAY_BUFFER, binding.buffer)
+        gl.vertexAttribIPointer(binding.loc, 1, gl.UNSIGNED_INT, 4, byteOffset)
+      }
+      repointWord(attrs.w0)
+      repointWord(attrs.w1)
+      repointWord(attrs.w2)
+      repointWord(attrs.w3)
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, VERTICES_PER_FACE, span.count)
+    }
+    gl.bindVertexArray(null)
+  }
+
+  private ensureTierCVao (
+    gl: WebGL2RenderingContext,
+    renderer: THREE.WebGLRenderer,
+    material: THREE.ShaderMaterial,
+  ): void {
+    this.tierCGl = gl
+    const internals = renderer as WebGLRendererInternals
+    const materialProps = internals.properties.get(material) as { currentProgram: { program: WebGLProgram } }
+    const program = materialProps.currentProgram.program
+
+    const w0Loc = gl.getAttribLocation(program, 'a_w0')
+    const w1Loc = gl.getAttribLocation(program, 'a_w1')
+    const w2Loc = gl.getAttribLocation(program, 'a_w2')
+    const w3Loc = gl.getAttribLocation(program, 'a_w3')
+
+    const readBoundBuffer = (loc: number): WebGLBuffer | null => {
+      if (loc < 0) return null
+      return gl.getVertexAttrib(loc, gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING) as WebGLBuffer | null
+    }
+
+    const liveW0 = readBoundBuffer(w0Loc)
+    if (this.tierCVao && this.tierCAttrs && liveW0 && this.tierCAttrs.w0.buffer !== liveW0) {
+      this.invalidateTierCVao()
+    }
+    if (this.tierCVao) return
+
+    const w0Buf = readBoundBuffer(w0Loc)
+    const w1Buf = readBoundBuffer(w1Loc)
+    const w2Buf = readBoundBuffer(w2Loc)
+    const w3Buf = readBoundBuffer(w3Loc)
+    if (!w0Buf || !w1Buf || !w2Buf || !w3Buf) return
+
+    const vao = gl.createVertexArray()
+    if (!vao) return
+
+    gl.bindVertexArray(vao)
+
+    const bindInstancedWord = (loc: number, buffer: WebGLBuffer) => {
+      gl.enableVertexAttribArray(loc)
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+      gl.vertexAttribIPointer(loc, 1, gl.UNSIGNED_INT, 4, 0)
+      gl.vertexAttribDivisor(loc, 1)
+    }
+    bindInstancedWord(w0Loc, w0Buf)
+    bindInstancedWord(w1Loc, w1Buf)
+    bindInstancedWord(w2Loc, w2Buf)
+    bindInstancedWord(w3Loc, w3Buf)
+
+    gl.bindVertexArray(null)
+    this.tierCVao = vao
+    this.tierCAttrs = {
+      w0: { loc: w0Loc, buffer: w0Buf },
+      w1: { loc: w1Loc, buffer: w1Buf },
+      w2: { loc: w2Loc, buffer: w2Buf },
+      w3: { loc: w3Loc, buffer: w3Buf },
+    }
+  }
+
   private markDirty (start: number, end: number): void {
     this.pendingRanges.push({ start, end })
     this.pendingRanges.sort((a, b) => a.start - b.start)
@@ -462,5 +657,6 @@ export class GlobalBlockBuffer {
     mkAttr(this.w3, 'a_w3')
 
     this.pendingRanges.length = 0
+    this.invalidateTierCVao()
   }
 }