minecraft-renderer 0.1.86 → 0.1.88

package/package.json

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

package/src/three/chunkMeshManager.ts

@@ -159,6 +159,11 @@ export class ChunkMeshManager {
   private readonly _lastCullCamQuat = new THREE.Quaternion()
   private readonly _cullViewQuat = new THREE.Quaternion()
   private _cullCamInitialized = false
+  /** Visible blend section keys from last cull pass — used by per-quad blend sort. */
+  private _visibleBlendKeys: string[] = []
+  private readonly _lastBlendSortPos = new THREE.Vector3()
+  private _lastBlendSortLayoutVersion = -1
+  private _blendSortPosInitialized = false
   /** One instanced mesh for all shader-cube faces (single draw call). */
   globalBlockBuffer: GlobalBlockBuffer | null = null
   globalLegacyBuffer: GlobalLegacyBuffer | null = null
@@ -328,7 +333,8 @@ export class ChunkMeshManager {
       this.globalLegacyBlendBuffer = new GlobalLegacyBuffer(this.getGlobalLegacyBlendShaderMaterial(), this.scene, {
         name: 'globalLegacyBlend',
         initialCapacityQuads: 32_000,
-        growthIncrementQuads: 32_000
+        growthIncrementQuads: 32_000,
+        sortBlend: true
       })
       this.globalLegacyBlendBuffer.setRenderOrigin(this.renderOrigin)
     }
@@ -459,6 +465,7 @@ export class ChunkMeshManager {
     const blendVisible = visible.filter(v => blendBuf?.hasSection(v.key))
     blendVisible.sort((a, b) => b.distSq - a.distSq)
     const blendKeys = blendVisible.map(v => v.key)
+    this._visibleBlendKeys = blendKeys
 
     const cubeVisibleKeys: string[] = []
     const visibleSlots: Array<{ start: number; count: number }> = []
@@ -532,6 +539,33 @@ export class ChunkMeshManager {
     this.updatePooledLegacyCullState(cameraWorldX, cameraWorldY, cameraWorldZ)
   }
 
+  private static readonly BLEND_RESORT_DISTANCE = 1.0
+
+  /** Per-quad back-to-front reorder within visible blend sections; throttled by camera translation. */
+  sortVisibleBlendSections(camX: number, camY: number, camZ: number): void {
+    const blendBuf = this.globalLegacyBlendBuffer
+    if (!blendBuf || this._visibleBlendKeys.length === 0) return
+
+    const layoutVersion = blendBuf.getLayoutVersion()
+    const layoutChanged = layoutVersion !== this._lastBlendSortLayoutVersion
+    if (this._blendSortPosInitialized && !layoutChanged) {
+      const dx = camX - this._lastBlendSortPos.x
+      const dy = camY - this._lastBlendSortPos.y
+      const dz = camZ - this._lastBlendSortPos.z
+      if (dx * dx + dy * dy + dz * dz < ChunkMeshManager.BLEND_RESORT_DISTANCE * ChunkMeshManager.BLEND_RESORT_DISTANCE) {
+        return
+      }
+    }
+
+    for (const key of this._visibleBlendKeys) {
+      blendBuf.reorderSectionBlendIndices(key, camX, camY, camZ)
+    }
+
+    this._lastBlendSortPos.set(camX, camY, camZ)
+    this._blendSortPosInitialized = true
+    this._lastBlendSortLayoutVersion = layoutVersion
+  }
+
   private bufferStateKey(): string {
     const b = this.globalBlockBuffer
     const o = this.globalLegacyBuffer

package/src/three/entity/animations.js

@@ -147,27 +147,27 @@ export class WalkingGeneralSwing extends PlayerAnimation {
     }
 
     if (this.isRunning) {
-      player.skin.leftLeg.rotation.x = Math.cos(t + Math.PI) * 1.3
-      player.skin.rightLeg.rotation.x = Math.cos(t) * 1.3
+      player.skin.leftLeg.rotation.x += Math.cos(t + Math.PI) * 1.3 * this._moveBlend
+      player.skin.rightLeg.rotation.x += Math.cos(t) * 1.3 * this._moveBlend
     } else {
-      player.skin.leftLeg.rotation.x = Math.sin(t) * 0.5
-      player.skin.rightLeg.rotation.x = Math.sin(t + Math.PI) * 0.5
+      player.skin.leftLeg.rotation.x += Math.sin(t) * 0.5 * this._moveBlend
+      player.skin.rightLeg.rotation.x += Math.sin(t + Math.PI) * 0.5 * this._moveBlend
     }
 
     if (this.isRunning) {
-      player.skin.leftArm.rotation.x = Math.cos(t) * 1.5
-      player.skin.rightArm.rotation.x = Math.cos(t + Math.PI) * 1.5
+      player.skin.leftArm.rotation.x += Math.cos(t) * 1.5 * this._moveBlend
+      player.skin.rightArm.rotation.x += Math.cos(t + Math.PI) * 1.5 * this._moveBlend
 
       const basicArmRotationZ = Math.PI * 0.1
-      player.skin.leftArm.rotation.z = Math.cos(t) * 0.1 + basicArmRotationZ
-      player.skin.rightArm.rotation.z = Math.cos(t + Math.PI) * 0.1 - basicArmRotationZ
+      player.skin.leftArm.rotation.z += (Math.cos(t) * 0.1 + basicArmRotationZ) * this._moveBlend
+      player.skin.rightArm.rotation.z += (Math.cos(t + Math.PI) * 0.1 - basicArmRotationZ) * this._moveBlend
     } else {
-      player.skin.leftArm.rotation.x = Math.sin(t + Math.PI) * 0.5
-      player.skin.rightArm.rotation.x = Math.sin(t) * 0.5
+      player.skin.leftArm.rotation.x += Math.sin(t + Math.PI) * 0.5 * this._moveBlend
+      player.skin.rightArm.rotation.x += Math.sin(t) * 0.5 * this._moveBlend
 
       const basicArmRotationZ = Math.PI * 0.02
-      player.skin.leftArm.rotation.z = Math.cos(t) * 0.03 + basicArmRotationZ
-      player.skin.rightArm.rotation.z = Math.cos(t + Math.PI) * 0.03 - basicArmRotationZ
+      player.skin.leftArm.rotation.z += (Math.cos(t) * 0.03 + basicArmRotationZ) * this._moveBlend
+      player.skin.rightArm.rotation.z += (Math.cos(t + Math.PI) * 0.03 - basicArmRotationZ) * this._moveBlend
     }
 
     if (this._swingTime !== null) {
@@ -178,15 +178,15 @@ export class WalkingGeneralSwing extends PlayerAnimation {
     }
 
     if (this.isRunning) {
-      player.rotation.z = Math.cos(t + Math.PI) * 0.01
+      player.rotation.z = Math.cos(t + Math.PI) * 0.01 * this._moveBlend
     }
 
     if (this.isRunning) {
       const basicCapeRotationX = Math.PI * 0.3
-      player.cape.rotation.x = Math.sin(t * 2) * 0.1 + basicCapeRotationX
+      player.cape.rotation.x += (Math.sin(t * 2) * 0.1 + basicCapeRotationX) * this._moveBlend
     } else {
       const basicCapeRotationX = Math.PI * 0.06
-      player.cape.rotation.x = Math.sin(t / 1.5) * 0.06 + basicCapeRotationX
+      player.cape.rotation.x += (Math.sin(t / 1.5) * 0.06 + basicCapeRotationX) * this._moveBlend
     }
 
     if (reset) {

package/src/three/globalLegacyBuffer.ts

@@ -96,6 +96,8 @@ export type GlobalLegacyBufferOptions = {
   name?: string
   initialCapacityQuads?: number
   growthIncrementQuads?: number
+  /** When true, pre-sort blend indices on addSection and support per-quad reorder. */
+  sortBlend?: boolean
 }
 
 export type VisibleSectionSpan = { key: string; distSq: number }
@@ -126,6 +128,7 @@ export class GlobalLegacyBuffer {
   readonly material: THREE.ShaderMaterial
 
   private readonly growthIncrementQuads: number
+  private readonly blendSort: boolean
   private capacityQuads: number
   private positions: Float32Array
   private colors: Float32Array
@@ -134,10 +137,15 @@ export class GlobalLegacyBuffer {
   private uvs: Float32Array
   private aOrigin: Float32Array
   private indices: Uint32Array
+  /** Section-relative world centroid per physical quad (3 floats each). */
+  private quadCentroids: Float32Array
+  /** Per-quad local index template (6 bytes each, values 0..3). */
+  private quadIndexTemplate: Uint8Array
   private readonly sectionSlots = new Map<string, { start: number; count: number }>()
   private freeList: Array<{ start: number; count: number }> = []
   private highWatermark = 0
   private pendingRanges: Array<{ start: number; end: number }> = []
+  private indexPendingRanges: Array<{ start: number; end: number }> = []
   private readonly _spanScratch: Array<{ start: number; count: number }> = []
   private renderOrigin: RenderOrigin = { x: 0, y: 0, z: 0 }
   private layoutVersion = 0
@@ -146,12 +154,20 @@ export class GlobalLegacyBuffer {
   private uploadEpoch = 0
   private visibleIndexSpans: LegacyDrawSpan[] = []
   private readonly _drawScratch: LegacyMultiDrawScratch = createLegacyMultiDrawScratch()
+  /** Reusable scratch for applyBlendSort; grown on demand, never allocated per call. */
+  private _sortOrder: Uint32Array = new Uint32Array(0)
+  private _sortDistSq: Float64Array = new Float64Array(0)
   private multiDrawCaps: LegacyMultiDrawCaps | null = null
   private debugOverlay = false
+  private _camX = 0
+  private _camY = 0
+  private _camZ = 0
+  private _camInitialized = false
 
   constructor(material: THREE.ShaderMaterial, scene: THREE.Object3D, opts?: GlobalLegacyBufferOptions) {
     this.material = material
     this.growthIncrementQuads = opts?.growthIncrementQuads ?? DEFAULT_GROWTH_INCREMENT_QUADS
+    this.blendSort = opts?.sortBlend ?? false
     this.capacityQuads = opts?.initialCapacityQuads ?? DEFAULT_INITIAL_CAPACITY_QUADS
     const maxVerts = this.capacityQuads * VERTS_PER_QUAD
     this.positions = new Float32Array(maxVerts * FLOATS_PER_VERT)
@@ -161,6 +177,8 @@ export class GlobalLegacyBuffer {
     this.uvs = new Float32Array(maxVerts * FLOATS_PER_UV_VERT)
     this.aOrigin = new Float32Array(maxVerts * FLOATS_PER_VERT)
     this.indices = new Uint32Array(this.capacityQuads * INDICES_PER_QUAD)
+    this.quadCentroids = new Float32Array(this.capacityQuads * 3)
+    this.quadIndexTemplate = new Uint8Array(this.capacityQuads * INDICES_PER_QUAD)
 
     const geometry = new THREE.BufferGeometry()
     const mkAttr = (arr: Float32Array, itemSize: number, name: string) => {
@@ -305,10 +323,38 @@ export class GlobalLegacyBuffer {
       this.indices[dstIndexBase + i] = geo.indices[i]! + vertexBase
     }
 
+    for (let q = 0; q < quadCount; q++) {
+      const physQuad = slot.start + q
+      const localVertBase = q * VERTS_PER_QUAD
+      const posBase = localVertBase * FLOATS_PER_VERT
+      let cx = 0
+      let cy = 0
+      let cz = 0
+      for (let v = 0; v < VERTS_PER_QUAD; v++) {
+        const p = posBase + v * FLOATS_PER_VERT
+        cx += geo.positions[p]!
+        cy += geo.positions[p + 1]!
+        cz += geo.positions[p + 2]!
+      }
+      const centBase = physQuad * 3
+      this.quadCentroids[centBase] = cx / VERTS_PER_QUAD
+      this.quadCentroids[centBase + 1] = cy / VERTS_PER_QUAD
+      this.quadCentroids[centBase + 2] = cz / VERTS_PER_QUAD
+
+      const idxBase = q * INDICES_PER_QUAD
+      const tmplBase = physQuad * INDICES_PER_QUAD
+      for (let i = 0; i < INDICES_PER_QUAD; i++) {
+        this.quadIndexTemplate[tmplBase + i] = geo.indices[idxBase + i]! - localVertBase
+      }
+    }
+
     this.sectionSlots.set(sectionKey, slot)
     if (isRemesh && previousSlot) {
       this.pendingReplace.set(sectionKey, { oldStart: previousSlot.start, oldCount: previousSlot.count })
     }
+    if (this.blendSort && this._camInitialized && quadCount >= 2) {
+      this.applyBlendSort(slot.start, quadCount, this._camX, this._camY, this._camZ)
+    }
     this.markDirty(slot.start, slot.start + quadCount - 1)
     this.syncDefaultDrawGroups()
     this.layoutVersion++
@@ -558,6 +604,70 @@ export class GlobalLegacyBuffer {
     return this.pendingRanges.length > 0
   }
 
+  hasPendingIndexUploads(): boolean {
+    return this.indexPendingRanges.length > 0
+  }
+
+  /**
+   * Reorder a section's index buffer back-to-front by quad centroid distance to camera.
+   * Does not bump layoutVersion or uploadEpoch (draw spans unchanged).
+   */
+  reorderSectionBlendIndices(sectionKey: string, camX: number, camY: number, camZ: number): boolean {
+    const slot = this.sectionSlots.get(sectionKey)
+    if (!slot) return false
+    if (this.pendingMove?.key === sectionKey) return false
+    if (this.pendingReplace.has(sectionKey)) return false
+    if (!this.rangeFullyUploaded(slot.start, slot.start + slot.count - 1)) return false
+    if (slot.count < 2) return false
+
+    this.applyBlendSort(slot.start, slot.count, camX, camY, camZ)
+    this.markIndexDirty(slot.start, slot.start + slot.count - 1)
+    return true
+  }
+
+  /** Rewrite indices for [slotStart, slotStart+slotCount) back-to-front by quad centroid distance. */
+  private applyBlendSort(slotStart: number, slotCount: number, camX: number, camY: number, camZ: number): void {
+    const dstFloatBase = slotStart * VERTS_PER_QUAD * FLOATS_PER_VERT
+    const sx = this.aOrigin[dstFloatBase]! + this.renderOrigin.x
+    const sy = this.aOrigin[dstFloatBase + 1]! + this.renderOrigin.y
+    const sz = this.aOrigin[dstFloatBase + 2]! + this.renderOrigin.z
+
+    if (this._sortOrder.length < slotCount) {
+      this._sortOrder = new Uint32Array(slotCount)
+      this._sortDistSq = new Float64Array(slotCount)
+    }
+    const order = this._sortOrder
+    const distSq = this._sortDistSq
+    for (let p = 0; p < slotCount; p++) {
+      order[p] = p
+      const physQuad = slotStart + p
+      const centBase = physQuad * 3
+      const wx = sx + this.quadCentroids[centBase]!
+      const wy = sy + this.quadCentroids[centBase + 1]!
+      const wz = sz + this.quadCentroids[centBase + 2]!
+      const dx = wx - camX
+      const dy = wy - camY
+      const dz = wz - camZ
+      distSq[p] = dx * dx + dy * dy + dz * dz
+    }
+    const orderView = order.subarray(0, slotCount)
+    orderView.sort((a, b) => {
+      const d = distSq[b]! - distSq[a]!
+      if (d !== 0) return d
+      return a - b
+    })
+
+    for (let k = 0; k < slotCount; k++) {
+      const src = orderView[k]!
+      const srcVertBase = (slotStart + src) * VERTS_PER_QUAD
+      const dstIdxBase = (slotStart + k) * INDICES_PER_QUAD
+      const tmplBase = (slotStart + src) * INDICES_PER_QUAD
+      for (let i = 0; i < INDICES_PER_QUAD; i++) {
+        this.indices[dstIdxBase + i] = srcVertBase + this.quadIndexTemplate[tmplBase + i]!
+      }
+    }
+  }
+
   uploadDirtyRange(): void {
     const r = this.pendingRanges[0]
     if (!r) return
@@ -613,6 +723,27 @@ export class GlobalLegacyBuffer {
     this.uploadEpoch++
   }
 
+  uploadDirtyIndexRange(): void {
+    const r = this.indexPendingRanges[0]
+    if (!r) return
+
+    const quadOffset = r.start
+    const quadCount = Math.min(r.end - r.start + 1, MAX_UPLOAD_QUADS_PER_FRAME)
+    const indexOffset = quadOffset * INDICES_PER_QUAD
+    const indexCount = quadCount * INDICES_PER_QUAD
+
+    const indexAttr = this.mesh.geometry.index as THREE.BufferAttribute
+    indexAttr.clearUpdateRanges()
+    indexAttr.addUpdateRange(indexOffset, indexCount)
+    indexAttr.needsUpdate = true
+
+    if (quadOffset + quadCount > r.end) {
+      this.indexPendingRanges.shift()
+    } else {
+      r.start = quadOffset + quadCount
+    }
+  }
+
   setRenderOrigin(renderOrigin: RenderOrigin): void {
     this.renderOrigin = { ...renderOrigin }
   }
@@ -637,6 +768,10 @@ export class GlobalLegacyBuffer {
   }
 
   setCameraOrigin(x: number, y: number, z: number): void {
+    this._camX = x
+    this._camY = y
+    this._camZ = z
+    this._camInitialized = true
     const { originDelta, cameraOriginFrac } = computeCameraRelativeUniforms(this.renderOrigin, x, y, z)
     const u = this.material.uniforms.u_originDelta
     if (u?.value?.set) u.value.set(originDelta.x, originDelta.y, originDelta.z)
@@ -669,6 +804,7 @@ export class GlobalLegacyBuffer {
     this.freeList.length = 0
     this.highWatermark = 0
     this.pendingRanges.length = 0
+    this.indexPendingRanges.length = 0
     this.pendingMove = null
     this.pendingReplace.clear()
     this.uploadEpoch = 0
@@ -688,6 +824,29 @@ export class GlobalLegacyBuffer {
     this.mergePendingRanges()
   }
 
+  private markIndexDirty(start: number, end: number): void {
+    this.indexPendingRanges.push({ start, end })
+    this.indexPendingRanges.sort((a, b) => a.start - b.start)
+    this.mergeIndexPendingRanges()
+  }
+
+  private mergeIndexPendingRanges(): void {
+    if (this.indexPendingRanges.length < 2) return
+    const merged: Array<{ start: number; end: number }> = []
+    let cur = this.indexPendingRanges[0]!
+    for (let i = 1; i < this.indexPendingRanges.length; i++) {
+      const next = this.indexPendingRanges[i]!
+      if (next.start <= cur.end + 1) {
+        cur = { start: cur.start, end: Math.max(cur.end, next.end) }
+      } else {
+        merged.push(cur)
+        cur = next
+      }
+    }
+    merged.push(cur)
+    this.indexPendingRanges = merged
+  }
+
   private mergePendingRanges(): void {
     if (this.pendingRanges.length < 2) return
     const merged: Array<{ start: number; end: number }> = []
@@ -835,6 +994,14 @@ export class GlobalLegacyBuffer {
     for (let i = 0; i < indexLen; i++) {
       this.indices[newIndexBase + i] = this.indices[oldIndexBase + i]! + vertDelta
     }
+
+    const oldCentroidBase = oldStart * 3
+    const newCentroidBase = newStart * 3
+    this.quadCentroids.copyWithin(newCentroidBase, oldCentroidBase, oldCentroidBase + quadCount * 3)
+
+    const oldTemplateBase = oldStart * INDICES_PER_QUAD
+    const newTemplateBase = newStart * INDICES_PER_QUAD
+    this.quadIndexTemplate.copyWithin(newTemplateBase, oldTemplateBase, oldTemplateBase + quadCount * INDICES_PER_QUAD)
   }
 
   private rangeFullyUploaded(start: number, end: number): boolean {
@@ -898,6 +1065,8 @@ export class GlobalLegacyBuffer {
     const nUv = new Float32Array(newMaxVerts * FLOATS_PER_UV_VERT)
     const nOrigin = new Float32Array(newMaxVerts * FLOATS_PER_VERT)
     const nIdx = new Uint32Array(newCap * INDICES_PER_QUAD)
+    const nCentroids = new Float32Array(newCap * 3)
+    const nTemplate = new Uint8Array(newCap * INDICES_PER_QUAD)
 
     nPos.set(this.positions)
     nCol.set(this.colors)
@@ -906,6 +1075,8 @@ export class GlobalLegacyBuffer {
     nUv.set(this.uvs)
     nOrigin.set(this.aOrigin)
     nIdx.set(this.indices)
+    nCentroids.set(this.quadCentroids)
+    nTemplate.set(this.quadIndexTemplate)
 
     this.positions = nPos
     this.colors = nCol
@@ -914,6 +1085,8 @@ export class GlobalLegacyBuffer {
     this.uvs = nUv
     this.aOrigin = nOrigin
     this.indices = nIdx
+    this.quadCentroids = nCentroids
+    this.quadIndexTemplate = nTemplate
     this.capacityQuads = newCap
 
     const geometry = this.mesh.geometry
@@ -938,5 +1111,6 @@ export class GlobalLegacyBuffer {
     geometry.setIndex(indexAttr)
 
     this.pendingRanges.length = 0
+    this.indexPendingRanges.length = 0
   }
 }

package/src/three/shaders/legacyBlockShader.ts

@@ -228,7 +228,7 @@ export function createGlobalLegacyBlendMaterial(): THREE.ShaderMaterial {
     fragmentShader,
     uniforms: THREE.UniformsUtils.merge([THREE.UniformsLib.fog, legacyUniforms]),
     transparent: true,
-    depthWrite: true,
+    depthWrite: false,
     depthTest: true,
     vertexColors: true,
     glslVersion: THREE.GLSL3,

package/src/three/tests/globalLegacyBuffer.test.ts

@@ -22,8 +22,30 @@ function makeQuadGeometry(): {
   }
 }
 
+/** Two quads along +Z: quad 0 centered at z=0, quad 1 centered at z=8. */
+function makeTwoQuadGeometry(): {
+  positions: Float32Array
+  colors: Float32Array
+  skyLights: Float32Array
+  blockLights: Float32Array
+  uvs: Float32Array
+  indices: Uint32Array
+} {
+  return {
+    positions: new Float32Array([-1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, -1, 0, 7, 1, 0, 7, 1, 0, 9, -1, 0, 9]),
+    colors: new Float32Array(24).fill(1),
+    skyLights: new Float32Array(8).fill(1),
+    blockLights: new Float32Array(8).fill(0),
+    uvs: new Float32Array(16).fill(0),
+    indices: new Uint32Array([0, 1, 2, 0, 2, 3, 4, 6, 5, 4, 5, 6])
+  }
+}
+
 type BufferInternals = {
   pendingRanges: Array<{ start: number; end: number }>
+  indexPendingRanges: Array<{ start: number; end: number }>
+  quadCentroids: Float32Array
+  quadIndexTemplate: Uint8Array
   pendingMove: { key: string; oldStart: number; newStart: number; count: number } | null
   growCapacity: (minQuads: number) => void
 }
@@ -36,6 +58,10 @@ function drainUploads(buffer: GlobalLegacyBuffer): void {
   while (getInternals(buffer).pendingRanges.length) buffer.uploadDirtyRange()
 }
 
+function drainIndexUploads(buffer: GlobalLegacyBuffer): void {
+  while (buffer.hasPendingIndexUploads()) buffer.uploadDirtyIndexRange()
+}
+
 function finishCurrentMove(buffer: GlobalLegacyBuffer): void {
   drainUploads(buffer)
   buffer.compactStep()
@@ -760,3 +786,94 @@ test('GlobalLegacyBuffer: suppressThreeDraw uses minimal non-zero draw range', (
   buffer.dispose()
   mat.dispose()
 })
+
+test('GlobalLegacyBuffer: reorderSectionBlendIndices sorts quads back-to-front', () => {
+  const scene = new THREE.Scene()
+  const mat = createGlobalLegacyBlockMaterial()
+  const buffer = new GlobalLegacyBuffer(mat, scene)
+  const geo = makeTwoQuadGeometry()
+
+  buffer.addSection('blend', geo, 0, 0, 0)
+  drainUploads(buffer)
+
+  const layoutBefore = buffer.getLayoutVersion()
+  const slot = buffer.getSectionSlot('blend')!
+  const vertBase0 = slot.start * 4
+  const vertBase1 = (slot.start + 1) * 4
+
+  expect(buffer.reorderSectionBlendIndices('blend', 0, 0, -20)).toBe(true)
+  expect(buffer.getLayoutVersion()).toBe(layoutBefore)
+
+  let indices = readSectionIndices(buffer, 'blend')
+  expect(indices.slice(0, 6)).toEqual([vertBase1, vertBase1 + 2, vertBase1 + 1, vertBase1, vertBase1 + 1, vertBase1 + 2])
+  expect(indices.slice(6, 12)).toEqual([vertBase0, vertBase0 + 1, vertBase0 + 2, vertBase0, vertBase0 + 2, vertBase0 + 3])
+
+  expect(buffer.reorderSectionBlendIndices('blend', 0, 0, 20)).toBe(true)
+  indices = readSectionIndices(buffer, 'blend')
+  expect(indices.slice(0, 6)).toEqual([vertBase0, vertBase0 + 1, vertBase0 + 2, vertBase0, vertBase0 + 2, vertBase0 + 3])
+  expect(indices.slice(6, 12)).toEqual([vertBase1, vertBase1 + 2, vertBase1 + 1, vertBase1, vertBase1 + 1, vertBase1 + 2])
+
+  expect(getInternals(buffer).indexPendingRanges.length).toBeGreaterThan(0)
+  drainIndexUploads(buffer)
+  expect(buffer.hasPendingIndexUploads()).toBe(false)
+
+  buffer.dispose()
+  mat.dispose()
+})
+
+test('GlobalLegacyBuffer: sortBlend pre-sorts indices on addSection before upload', () => {
+  const scene = new THREE.Scene()
+  const mat = createGlobalLegacyBlockMaterial()
+  const buffer = new GlobalLegacyBuffer(mat, scene, { sortBlend: true })
+  const geo = makeTwoQuadGeometry()
+
+  buffer.setCameraOrigin(0, 0, -20)
+  buffer.addSection('blend', geo, 0, 0, 0)
+
+  const slot = buffer.getSectionSlot('blend')!
+  const vertBase0 = slot.start * 4
+  const vertBase1 = (slot.start + 1) * 4
+  const indices = readSectionIndices(buffer, 'blend')
+
+  expect(indices.slice(0, 6)).toEqual([vertBase1, vertBase1 + 2, vertBase1 + 1, vertBase1, vertBase1 + 1, vertBase1 + 2])
+  expect(indices.slice(6, 12)).toEqual([vertBase0, vertBase0 + 1, vertBase0 + 2, vertBase0, vertBase0 + 2, vertBase0 + 3])
+  expect(getInternals(buffer).indexPendingRanges.length).toBe(0)
+
+  buffer.dispose()
+  mat.dispose()
+})
+
+test('GlobalLegacyBuffer: blend reorder metadata survives compaction', () => {
+  const scene = new THREE.Scene()
+  const mat = createGlobalLegacyBlockMaterial()
+  const buffer = new GlobalLegacyBuffer(mat, scene)
+  const geo = makeQuadGeometry()
+  const twoGeo = makeTwoQuadGeometry()
+
+  buffer.addSection('a', geo, 0, 0, 0)
+  buffer.addSection('b', geo, 8, 0, 0)
+  buffer.addSection('blend', twoGeo, 16, 0, 0)
+  expect(buffer.getSectionSlot('blend')).toEqual({ start: 2, count: 2 })
+
+  buffer.removeSection('a')
+  buffer.removeSection('b')
+  drainUploads(buffer)
+  buffer.compactStep()
+  finishCurrentMove(buffer)
+
+  const slot = buffer.getSectionSlot('blend')!
+  expect(slot).toEqual({ start: 0, count: 2 })
+
+  const internals = getInternals(buffer)
+  expect(internals.quadCentroids[slot.start * 3 + 2]).toBeCloseTo(0, 5)
+  expect(internals.quadCentroids[(slot.start + 1) * 3 + 2]).toBeCloseTo(8, 5)
+  expect(Array.from(internals.quadIndexTemplate.slice((slot.start + 1) * 6, (slot.start + 1) * 6 + 6))).toEqual([0, 2, 1, 0, 1, 2])
+
+  expect(buffer.reorderSectionBlendIndices('blend', 0, 0, -20)).toBe(true)
+  const vertBase1 = (slot.start + 1) * 4
+  const indices = readSectionIndices(buffer, 'blend')
+  expect(indices[0]).toBe(vertBase1)
+
+  buffer.dispose()
+  mat.dispose()
+})

package/src/three/worldRendererThree.ts

@@ -1327,11 +1327,13 @@ export class WorldRendererThree extends WorldRendererCommon {
       globalLegacyBuffer.suppressThreeDraw()
     }
     const globalLegacyBlendBuffer = this.chunkMeshManager.globalLegacyBlendBuffer
+    let didBlendAllAttrUpload = false
     if (globalLegacyBlendBuffer) {
       globalLegacyBlendBuffer.setDebugOverlay(this.displayOptions.inWorldRenderingConfig.enableDebugOverlay)
       globalLegacyBlendBuffer.compactStep()
       if (globalLegacyBlendBuffer.hasPendingUploads()) {
         globalLegacyBlendBuffer.uploadDirtyRange()
+        didBlendAllAttrUpload = true
       }
       globalLegacyBlendBuffer.suppressThreeDraw()
     }
@@ -1342,6 +1344,10 @@ export class WorldRendererThree extends WorldRendererCommon {
       this.chunkMeshManager.updateSectionCullAndSort(cam, this.cameraWorldPos.x, this.cameraWorldPos.y, this.cameraWorldPos.z)
       this.chunkMeshManager.clearCullDirty()
     }
+    this.chunkMeshManager.sortVisibleBlendSections(camX, camY, camZ)
+    if (!didBlendAllAttrUpload && globalLegacyBlendBuffer?.hasPendingIndexUploads()) {
+      globalLegacyBlendBuffer.uploadDirtyIndexRange()
+    }
     this.renderer.render(this.scene, cam)
 
     if (