minecraft-renderer 0.1.79 → 0.1.81

package/src/three/skyboxRenderer.ts

@@ -25,22 +25,23 @@ export class SkyboxRenderer {
   private readonly brightnessAtPosition = 1
   debugGui: DebugGui
 
-  constructor (private readonly scene: THREE.Scene, public defaultSkybox: boolean, public initialImage: string | null) {
-    this.debugGui = new DebugGui('skybox_renderer', this, [
-      'temperature',
-      'worldTime',
-      'inWater',
-      'waterBreathing',
-      'fogOrangeness',
-      'brightnessAtPosition',
-      'distanceFactor'
-    ], {
-      brightnessAtPosition: { min: 0, max: 1, step: 0.01 },
-      temperature: { min: 0, max: 1, step: 0.01 },
-      worldTime: { min: 0, max: 24_000, step: 1 },
-      fogOrangeness: { min: -1, max: 1, step: 0.01 },
-      distanceFactor: { min: 0, max: 5, step: 0.01 },
-    })
+  constructor(
+    private readonly scene: THREE.Scene,
+    public defaultSkybox: boolean,
+    public initialImage: string | null
+  ) {
+    this.debugGui = new DebugGui(
+      'skybox_renderer',
+      this,
+      ['temperature', 'worldTime', 'inWater', 'waterBreathing', 'fogOrangeness', 'brightnessAtPosition', 'distanceFactor'],
+      {
+        brightnessAtPosition: { min: 0, max: 1, step: 0.01 },
+        temperature: { min: 0, max: 1, step: 0.01 },
+        worldTime: { min: 0, max: 24_000, step: 1 },
+        fogOrangeness: { min: -1, max: 1, step: 0.01 },
+        distanceFactor: { min: 0, max: 5, step: 0.01 }
+      }
+    )
 
     if (!initialImage) {
       this.createGradientSky()
@@ -48,13 +49,13 @@ export class SkyboxRenderer {
     // this.debugGui.activate()
   }
 
-  async init () {
+  async init() {
     if (this.initialImage) {
       await this.setSkyboxImage(this.initialImage)
     }
   }
 
-  async setSkyboxImage (imageUrl: string) {
+  async setSkyboxImage(imageUrl: string) {
     // Dispose old textures if they exist
     if (this.texture) {
       this.texture.dispose()
@@ -62,19 +63,16 @@ export class SkyboxRenderer {
 
     // Load the equirectangular texture
     const textureLoader = new THREE.TextureLoader()
-    this.texture = await new Promise((resolve) => {
-      textureLoader.load(
-        imageUrl,
-        (texture) => {
-          texture.mapping = THREE.EquirectangularReflectionMapping
-          texture.colorSpace = THREE.SRGBColorSpace
-          // Keep pixelated look
-          texture.minFilter = THREE.NearestFilter
-          texture.magFilter = THREE.NearestFilter
-          texture.needsUpdate = true
-          resolve(texture)
-        }
-      )
+    this.texture = await new Promise(resolve => {
+      textureLoader.load(imageUrl, texture => {
+        texture.mapping = THREE.EquirectangularReflectionMapping
+        texture.colorSpace = THREE.SRGBColorSpace
+        // Keep pixelated look
+        texture.minFilter = THREE.NearestFilter
+        texture.magFilter = THREE.NearestFilter
+        texture.needsUpdate = true
+        resolve(texture)
+      })
     })
 
     // Create or update the skybox
@@ -100,7 +98,7 @@ export class SkyboxRenderer {
     }
   }
 
-  update (cameraPosition: THREE.Vector3, newViewDistance: number) {
+  update(cameraPosition: THREE.Vector3, newViewDistance: number) {
     if (newViewDistance !== this.viewDistance) {
       this.viewDistance = newViewDistance
       this.updateSkyColors()
@@ -118,7 +116,7 @@ export class SkyboxRenderer {
   }
 
   // Update world time
-  updateTime (timeOfDay: number, partialTicks = 0) {
+  updateTime(timeOfDay: number, partialTicks = 0) {
     if (this.debugGui.visible) return
     this.worldTime = timeOfDay
     this.partialTicks = partialTicks
@@ -126,20 +124,20 @@ export class SkyboxRenderer {
   }
 
   // Update view distance
-  updateViewDistance (viewDistance: number) {
+  updateViewDistance(viewDistance: number) {
     this.viewDistance = viewDistance
     this.updateSkyColors()
   }
 
   // Update temperature (for biome support)
-  updateTemperature (temperature: number) {
+  updateTemperature(temperature: number) {
     if (this.debugGui.visible) return
     this.temperature = temperature
     this.updateSkyColors()
   }
 
   // Update water state
-  updateWaterState (inWater: boolean, waterBreathing: boolean) {
+  updateWaterState(inWater: boolean, waterBreathing: boolean) {
     if (this.debugGui.visible) return
     this.inWater = inWater
     this.waterBreathing = waterBreathing
@@ -147,13 +145,13 @@ export class SkyboxRenderer {
   }
 
   // Update default skybox setting
-  updateDefaultSkybox (defaultSkybox: boolean) {
+  updateDefaultSkybox(defaultSkybox: boolean) {
     if (this.debugGui.visible) return
     this.defaultSkybox = defaultSkybox
     this.updateSkyColors()
   }
 
-  private createGradientSky () {
+  private createGradientSky() {
     const size = 64
     const scale = 256 / size + 2
 
@@ -190,7 +188,7 @@ export class SkyboxRenderer {
     this.updateSkyColors()
   }
 
-  private getFogColor (partialTicks = 0): THREE.Vector3 {
+  private getFogColor(partialTicks = 0): THREE.Vector3 {
     const angle = this.getCelestialAngle(partialTicks)
     let rotation = Math.cos(angle * Math.PI * 2) * 2 + 0.5
     rotation = Math.max(0, Math.min(1, rotation))
@@ -199,14 +197,14 @@ export class SkyboxRenderer {
     let y = 0.847_058_83
     let z = 1
 
-    x *= (rotation * 0.94 + 0.06)
-    y *= (rotation * 0.94 + 0.06)
-    z *= (rotation * 0.91 + 0.09)
+    x *= rotation * 0.94 + 0.06
+    y *= rotation * 0.94 + 0.06
+    z *= rotation * 0.91 + 0.09
 
     return new THREE.Vector3(x, y, z)
   }
 
-  private getSkyColor (x = 0, z = 0, partialTicks = 0): THREE.Vector3 {
+  private getSkyColor(x = 0, z = 0, partialTicks = 0): THREE.Vector3 {
     const angle = this.getCelestialAngle(partialTicks)
     let brightness = Math.cos(angle * 3.141_593 * 2) * 2 + 0.5
 
@@ -220,15 +218,11 @@ export class SkyboxRenderer {
     const green = ((rgb >> 8) & 0xff) / 255
     const blue = (rgb & 0xff) / 255
 
-    return new THREE.Vector3(
-      red * brightness,
-      green * brightness,
-      blue * brightness
-    )
+    return new THREE.Vector3(red * brightness, green * brightness, blue * brightness)
   }
 
-  private calculateCelestialAngle (time: number, partialTicks: number): number {
-    const modTime = (time % 24_000)
+  private calculateCelestialAngle(time: number, partialTicks: number): number {
+    const modTime = time % 24_000
     let angle = (modTime + partialTicks) / 24_000 - 0.25
 
     if (angle < 0) {
@@ -238,21 +232,21 @@ export class SkyboxRenderer {
       angle--
     }
 
-    angle = 1 - ((Math.cos(angle * Math.PI) + 1) / 2)
+    angle = 1 - (Math.cos(angle * Math.PI) + 1) / 2
     angle += (angle - angle) / 3
 
     return angle
   }
 
-  private getCelestialAngle (partialTicks: number): number {
+  private getCelestialAngle(partialTicks: number): number {
     return this.calculateCelestialAngle(this.worldTime, partialTicks)
   }
 
-  private getTemperature (x: number, z: number): number {
+  private getTemperature(x: number, z: number): number {
     return this.temperature
   }
 
-  private getSkyColorByTemp (temperature: number): number {
+  private getSkyColorByTemp(temperature: number): number {
     temperature /= 3
     if (temperature < -1) temperature = -1
     if (temperature > 1) temperature = 1
@@ -262,17 +256,20 @@ export class SkyboxRenderer {
     // Orange is around hue 0.08-0.15, so we need to shift from blue-purple (0.62) toward orange
     // Use a more dramatic shift and also increase saturation for more noticeable effect
     const orangeHue = 0.12 // Orange hue value
-    const hue = this.fogOrangeness > 0
-      ? baseHue + (orangeHue - baseHue) * this.fogOrangeness * 0.8 // Blend toward orange
-      : baseHue + this.fogOrangeness * 0.1 // Subtle shift for negative values
+    const hue =
+      this.fogOrangeness > 0
+        ? baseHue + (orangeHue - baseHue) * this.fogOrangeness * 0.8 // Blend toward orange
+        : baseHue + this.fogOrangeness * 0.1 // Subtle shift for negative values
     const saturation = 0.5 + temperature * 0.1 + Math.abs(this.fogOrangeness) * 0.3 // Increase saturation with orangeness
     const brightness = 1
 
     return this.hsbToRgb(hue, saturation, brightness)
   }
 
-  private hsbToRgb (hue: number, saturation: number, brightness: number): number {
-    let r = 0; let g = 0; let b = 0
+  private hsbToRgb(hue: number, saturation: number, brightness: number): number {
+    let r = 0
+    let g = 0
+    let b = 0
     if (saturation === 0) {
       r = g = b = Math.floor(brightness * 255 + 0.5)
     } else {
@@ -280,7 +277,7 @@ export class SkyboxRenderer {
       const f = h - Math.floor(h)
       const p = brightness * (1 - saturation)
       const q = brightness * (1 - saturation * f)
-      const t = brightness * (1 - (saturation * (1 - f)))
+      const t = brightness * (1 - saturation * (1 - f))
       switch (Math.floor(h)) {
         case 0:
           r = Math.floor(brightness * 255 + 0.5)
@@ -314,10 +311,10 @@ export class SkyboxRenderer {
           break
       }
     }
-    return 0xff_00_00_00 | (r << 16) | (g << 8) | (Math.trunc(b))
+    return 0xff_00_00_00 | (r << 16) | (g << 8) | Math.trunc(b)
   }
 
-  private updateSkyColors () {
+  private updateSkyColors() {
     if (!this.skyMesh || !this.voidMesh) return
 
     // If default skybox is disabled, hide the skybox meshes
@@ -357,7 +354,7 @@ export class SkyboxRenderer {
 
     // Normal sky colors
     const viewDistance = this.viewDistance * 16
-    const viewFactor = 1 - (0.25 + 0.75 * this.viewDistance / 32) ** 0.25
+    const viewFactor = 1 - (0.25 + (0.75 * this.viewDistance) / 32) ** 0.25
 
     const angle = this.getCelestialAngle(this.partialTicks)
     const skyColor = this.getSkyColor(0, 0, this.partialTicks)
@@ -375,16 +372,11 @@ export class SkyboxRenderer {
 
     this.scene.background = new THREE.Color(red, green, blue)
     this.scene.fog = new THREE.Fog(new THREE.Color(red, green, blue), 0.0025, viewDistance * this.distanceFactor)
-
     ;(this.skyMesh.material as THREE.MeshBasicMaterial).color.set(new THREE.Color(skyColor.x, skyColor.y, skyColor.z))
-    ;(this.voidMesh.material as THREE.MeshBasicMaterial).color.set(new THREE.Color(
-      skyColor.x * 0.2 + 0.04,
-      skyColor.y * 0.2 + 0.04,
-      skyColor.z * 0.6 + 0.1
-    ))
+    ;(this.voidMesh.material as THREE.MeshBasicMaterial).color.set(new THREE.Color(skyColor.x * 0.2 + 0.04, skyColor.y * 0.2 + 0.04, skyColor.z * 0.6 + 0.1))
   }
 
-  dispose () {
+  dispose() {
     if (this.texture) {
       this.texture.dispose()
     }

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

@@ -3,7 +3,7 @@ import { test, expect, vi } from 'vitest'
 import * as THREE from 'three'
 
 vi.mock('../entity/EntityMesh', () => ({
-  getMesh: vi.fn(),
+  getMesh: vi.fn()
 }))
 
 import { ChunkMeshManager } from '../chunkMeshManager'
@@ -11,13 +11,8 @@ import type { WorldRendererThree } from '../worldRendererThree'
 import type { MesherGeometryOutput } from '../../mesher-shared/shared'
 import { renderWasmOutputToGeometry } from '../../wasm-mesher/bridge/render-from-wasm'
 
-function makeQuadArrays () {
-  const positions = new Float32Array([
-    -1, -1, -1,
-    -1, 1, -1,
-    -1, 1, 1,
-    -1, -1, 1,
-  ])
+function makeQuadArrays() {
+  const positions = new Float32Array([-1, -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1])
   const colors = new Float32Array(12).fill(1)
   const skyLights = new Float32Array(4).fill(1)
   const blockLights = new Float32Array(4).fill(0)
@@ -26,7 +21,7 @@ function makeQuadArrays () {
   return { positions, colors, skyLights, blockLights, uvs, indices }
 }
 
-function makeBlendOnlyGeometry (): MesherGeometryOutput {
+function makeBlendOnlyGeometry(): MesherGeometryOutput {
   const blend = makeQuadArrays()
   return {
     sectionYNumber: 0,
@@ -62,12 +57,12 @@ function makeBlendOnlyGeometry (): MesherGeometryOutput {
       skyLights: blend.skyLights,
       blockLights: blend.blockLights,
       uvs: blend.uvs,
-      indices: blend.indices,
-    },
+      indices: blend.indices
+    }
   }
 }
 
-function makeMixedGeometry (): MesherGeometryOutput {
+function makeMixedGeometry(): MesherGeometryOutput {
   const opaque = makeQuadArrays()
   const blend = makeQuadArrays()
   return {
@@ -104,12 +99,12 @@ function makeMixedGeometry (): MesherGeometryOutput {
       skyLights: blend.skyLights,
       blockLights: blend.blockLights,
       uvs: blend.uvs,
-      indices: blend.indices,
-    },
+      indices: blend.indices
+    }
   }
 }
 
-function makeInvalidBlendGeometry (): MesherGeometryOutput {
+function makeInvalidBlendGeometry(): MesherGeometryOutput {
   const geo = makeBlendOnlyGeometry()
   const blend = geo.blend!
   return {
@@ -117,8 +112,8 @@ function makeInvalidBlendGeometry (): MesherGeometryOutput {
     blend: {
       ...blend,
       positions: new Float32Array([0, 0, 0, 1, 0, 0, 2, 0, 0]),
-      indices: new Uint32Array([0, 1, 2, 0, 2, 1, 3]),
-    },
+      indices: new Uint32Array([0, 1, 2, 0, 2, 1, 3])
+    }
   }
 }
 
@@ -128,23 +123,18 @@ type ManagerOptions = {
   finishedChunks?: Record<string, boolean>
 }
 
-function makeShaderCubeOnlyGeometry (): MesherGeometryOutput {
+function makeShaderCubeOnlyGeometry(): MesherGeometryOutput {
   const block = {
     position: [0, 0, 0] as [number, number, number],
     block_state_id: 1,
     visible_faces: (1 << 0) | (1 << 1) | (1 << 2) | (1 << 3) | (1 << 4) | (1 << 5),
     ao_data: Array.from({ length: 6 }, () => [3, 3, 3, 3]),
     light_data: Array.from({ length: 6 }, () => [1, 1, 1, 1]),
-    light_combined: Array.from({ length: 6 }, () => [255, 255, 255, 255]),
+    light_combined: Array.from({ length: 6 }, () => [255, 255, 255, 255])
   }
-  const out = renderWasmOutputToGeometry(
-    { blocks: [block], block_count: 1, block_iterations: 0 },
-    '1.16.5',
-    '0,0,0',
-    { x: 8, y: 8, z: 8 },
-    undefined,
-    { shaderCubes: true },
-  )
+  const out = renderWasmOutputToGeometry({ blocks: [block], block_count: 1, block_iterations: 0 }, '1.16.5', '0,0,0', { x: 8, y: 8, z: 8 }, undefined, {
+    shaderCubes: true
+  })
   return {
     sectionYNumber: 0,
     chunkKey: '0,0',
@@ -172,11 +162,11 @@ function makeShaderCubeOnlyGeometry (): MesherGeometryOutput {
     banners: {},
     hadErrors: false,
     blocksCount: 1,
-    shaderCubes: out.shaderCubes,
+    shaderCubes: out.shaderCubes
   }
 }
 
-function makeCullCamera (): THREE.PerspectiveCamera {
+function makeCullCamera(): THREE.PerspectiveCamera {
   const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000)
   camera.position.set(8, 8, 20)
   camera.lookAt(8, 8, 8)
@@ -184,13 +174,19 @@ function makeCullCamera (): THREE.PerspectiveCamera {
   return camera
 }
 
-function createManager (opts: ManagerOptions = {}): ChunkMeshManager {
+function drainCubeUploads(manager: ChunkMeshManager): void {
+  const gb = manager.globalBlockBuffer
+  if (!gb) return
+  while (gb.hasPendingUploads()) gb.uploadDirtyRange()
+}
+
+function createManager(opts: ManagerOptions = {}): ChunkMeshManager {
   const scene = new THREE.Scene()
   const material = new THREE.MeshBasicMaterial()
   const revealModule = opts.revealDefer
     ? {
-      shouldDeferSectionGeometry: () => true,
-    }
+        shouldDeferSectionGeometry: () => true
+      }
     : undefined
   const worldRenderer = {
     shaderCubeBlocksEnabled: () => opts.shaderCubes ?? false,
@@ -198,12 +194,12 @@ function createManager (opts: ManagerOptions = {}): ChunkMeshManager {
     sceneOrigin: {
       track: () => {},
       removeAndUntrack: () => {},
-      removeAndUntrackAll: () => {},
+      removeAndUntrackAll: () => {}
     },
     blockEntities: {},
     worldRendererConfig: opts.shaderCubes ? { wasmMesher: true } : {},
     displayOptions: { inWorldRenderingConfig: {} },
-    finishedChunks: opts.finishedChunks ?? (opts.shaderCubes ? { '0,0': true } : {}),
+    finishedChunks: opts.finishedChunks ?? (opts.shaderCubes ? { '0,0': true } : {})
   } as unknown as WorldRendererThree
   return new ChunkMeshManager(worldRenderer, scene, material, 256, 1)
 }
@@ -251,6 +247,8 @@ test('ChunkMeshManager: hidden section excluded from draw spans', () => {
   expect(manager.globalLegacyBlendBuffer?.getVisibleIndexSpans().length).toBe(0)
 
   section.visible = true
+  const blendBuf = manager.globalLegacyBlendBuffer!
+  while (blendBuf.hasPendingUploads()) blendBuf.uploadDirtyRange()
   manager.updateSectionCullAndSort(camera, 8, 8, 20)
   expect(manager.globalLegacyBlendBuffer?.getVisibleIndexSpans().length).toBeGreaterThan(0)
 
@@ -298,36 +296,6 @@ test('ChunkMeshManager: invalid blend geometry falls back to pooled mesh', () =>
   manager.dispose()
 })
 
-test('ChunkMeshManager: raycastGlobalLegacySections rejects off-ray sections within center distance', () => {
-  const manager = createManager()
-  const onRayKey = '0,0,0'
-  const offRayKey = '0,2,0'
-
-  manager.updateSection(onRayKey, makeBlendOnlyGeometry())
-
-  const offRayGeo = makeBlendOnlyGeometry()
-  offRayGeo.sz = 40
-  manager.updateSection(offRayKey, offRayGeo)
-
-  expect(manager.globalLegacyBlendBuffer?.hasSection(onRayKey)).toBe(true)
-  expect(manager.globalLegacyBlendBuffer?.hasSection(offRayKey)).toBe(true)
-  expect(manager.sectionObjects[offRayKey]?.worldZ).toBe(40)
-
-  const origin = new THREE.Vector3(4, 8, 8)
-  const direction = new THREE.Vector3(1, 0, 0).normalize()
-  const raycaster = new THREE.Raycaster(origin, direction)
-  raycaster.far = 4
-
-  const hit = manager.raycastGlobalLegacySections(raycaster, origin, 80)
-  expect(hit).toBeDefined()
-  expect(hit!).toBeGreaterThan(2)
-  expect(hit!).toBeLessThan(4)
-
-  manager.cleanupSection(onRayKey)
-  manager.cleanupSection(offRayKey)
-  manager.dispose()
-})
-
 test('ChunkMeshManager: mixed opaque and blend route to separate global buffers', () => {
   const manager = createManager()
   const key = '0,0,0'
@@ -352,6 +320,7 @@ test('ChunkMeshManager: hidden cube section excluded from draw spans', () => {
   manager.updateSection(key, makeShaderCubeOnlyGeometry())
   const section = manager.sectionObjects[key]!
   expect(manager.globalBlockBuffer?.hasSection(key)).toBe(true)
+  drainCubeUploads(manager)
 
   const camera = makeCullCamera()
   manager.updateSectionCullAndSort(camera, 8, 8, 20)
@@ -385,6 +354,7 @@ test('ChunkMeshManager: finishChunkDisplay reveals cube spans and marks cull dir
   expect(manager.sectionObjects[key]?.visible).toBe(true)
   expect(markCullDirtySpy).toHaveBeenCalled()
 
+  drainCubeUploads(manager)
   manager.updateSectionCullAndSort(camera, 8, 8, 20)
   expect(manager.globalBlockBuffer?.getVisibleSpans().length).toBeGreaterThan(0)
 

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

@@ -1,46 +1,76 @@
 //@ts-nocheck
 import { describe, expect, test } from 'vitest'
-import {
-  buildVisibleCubeSpans,
-  MAX_CUBE_SPANS,
-  SPAN_GAP_TOLERANCE_FACES,
-} from '../cubeDrawSpans'
+import { buildVisibleCubeSpans } from '../cubeDrawSpans'
 
 describe('buildVisibleCubeSpans', () => {
   test('contiguous slots merge into one span', () => {
-    const spans = buildVisibleCubeSpans([
-      { start: 0, count: 4 },
-      { start: 4, count: 2 },
-    ], 6)
+    const spans = buildVisibleCubeSpans(
+      [
+        { start: 0, count: 4 },
+        { start: 4, count: 2 }
+      ],
+      6
+    )
     expect(spans.length).toBe(1)
     expect(spans[0]).toEqual({ start: 0, count: 6 })
   })
 
   test('scattered slots stay as multiple spans', () => {
-    const gap = SPAN_GAP_TOLERANCE_FACES + 1
-    const spans = buildVisibleCubeSpans([
-      { start: 0, count: 1 },
-      { start: 1 + gap, count: 1 },
-    ], 1 + gap + 1)
+    const spans = buildVisibleCubeSpans(
+      [
+        { start: 0, count: 1 },
+        { start: 10, count: 1 }
+      ],
+      11
+    )
     expect(spans.length).toBe(2)
     expect(spans[0]).toEqual({ start: 0, count: 1 })
-    expect(spans[1]).toEqual({ start: 1 + gap, count: 1 })
+    expect(spans[1]).toEqual({ start: 10, count: 1 })
   })
 
   test('full draw when most faces visible', () => {
-    const spans = buildVisibleCubeSpans([
-      { start: 0, count: 3 },
-      { start: 3, count: 3 },
-      { start: 6, count: 2 },
-    ], 8)
+    const spans = buildVisibleCubeSpans(
+      [
+        { start: 0, count: 3 },
+        { start: 3, count: 3 },
+        { start: 6, count: 2 }
+      ],
+      8
+    )
     expect(spans.length).toBe(1)
     expect(spans[0]).toEqual({ start: 0, count: 8 })
   })
 
-  test('caps at MAX_CUBE_SPANS with full coverage', () => {
-    const visibleSectionCount = MAX_CUBE_SPANS + 5
-    const padFaces = SPAN_GAP_TOLERANCE_FACES + 1
-    const visibleSlots: Array<{ start: number, count: number }> = []
+  test('full draw blocked when canFullDraw is false', () => {
+    const spans = buildVisibleCubeSpans([{ start: 0, count: 6 }], 8, false)
+    expect(spans).toEqual([{ start: 0, count: 6 }])
+  })
+
+  test('carves pending interior range from full-draw span', () => {
+    const spans = buildVisibleCubeSpans([{ start: 0, count: 6 }], 8, true, undefined, [{ start: 2, end: 3 }])
+    expect(spans).toEqual([
+      { start: 0, count: 2 },
+      { start: 4, count: 4 }
+    ])
+  })
+
+  test('does not merge across interior gap', () => {
+    const spans = buildVisibleCubeSpans(
+      [
+        { start: 0, count: 1 },
+        { start: 2, count: 1 }
+      ],
+      3
+    )
+    expect(spans.length).toBe(2)
+    expect(spans[0]).toEqual({ start: 0, count: 1 })
+    expect(spans[1]).toEqual({ start: 2, count: 1 })
+  })
+
+  test('does not cap span count when many scattered sections', () => {
+    const visibleSectionCount = 69
+    const padFaces = 10
+    const visibleSlots: Array<{ start: number; count: number }> = []
     let cursor = 0
 
     for (let i = 0; i < visibleSectionCount; i++) {
@@ -53,7 +83,7 @@ describe('buildVisibleCubeSpans', () => {
 
     const highWatermark = cursor
     const spans = buildVisibleCubeSpans(visibleSlots, highWatermark)
-    expect(spans.length).toBe(MAX_CUBE_SPANS)
+    expect(spans.length).toBe(visibleSectionCount)
 
     const covered = new Set<number>()
     for (const span of spans) {