minecraft-renderer 0.1.106 → 0.1.108

package/src/three/graphicsBackendBase.ts

@@ -87,15 +87,8 @@ export const getBackendMethods = (worldRenderer: WorldRendererThree): any => {
     },
     feedChunkPacket(payload: FeedChunkPacketPayload) {
       // Forward parsed/raw map_chunk + update_light packets from the
-      // web-client to all WASM mesher workers. The fan-out below uses
-      // structured clone (one Uint8Array can only be transferred to a
-      // single recipient); useWorkerProxy still gives zero-copy transfer
-      // from main into the off-thread renderer worker for free.
-      const { kind, ...rest } = payload
-      const message = { type: kind, ...rest }
-      for (const worker of worldRenderer.workers) {
-        worker.postMessage(message)
-      }
+      // web-client to WASM mesher workers (and the light owner when flagged).
+      worldRenderer.feedChunkPacket(payload)
     },
     getChunksDebugState() {
       const loadedSectionsChunks: Record<string, true> = {}

package/src/three/modules/clouds.ts

@@ -0,0 +1,191 @@
+//@ts-nocheck
+import * as THREE from 'three'
+import cloudsPng from 'mc-assets/dist/other-textures/latest/environment/clouds.png'
+import type { WorldRendererThree } from '../worldRendererThree'
+import type { RendererModuleController, RendererModuleManifest } from '../rendererModuleSystem'
+import { vanillaCelestialAngle, vanillaDayBrightness } from '../../lib/skyLight'
+
+// Vanilla: clouds.png is 256×256, each texel a 12×12 block cell, slab 4 blocks thick.
+const CELL_SIZE = 12
+const TEXTURE_CELLS = 256
+const PATTERN_PERIOD = CELL_SIZE * TEXTURE_CELLS
+const THICKNESS = 4
+/** Vanilla drifts the pattern 0.03 blocks per tick (20 TPS) toward -X. */
+const DRIFT_BLOCKS_PER_SECOND = 0.03 * 20
+/** Vanilla offsets the slab bottom by +0.33 from the dimension's cloud height. */
+const HEIGHT_BIAS = 0.33
+const MIN_RADIUS = 256
+const MAX_RADIUS = 768
+const OPACITY = 0.8
+/** Vanilla shades the underside darker than the top. */
+const BOTTOM_SHADE = 0.7
+
+const threeVersion = parseInt(THREE.REVISION.replaceAll(/\D+/g, ''), 10)
+
+const vertexShader = /* glsl */ `
+  #include <common>
+  #include <logdepthbuf_pars_vertex>
+  varying vec2 vLocal;
+  void main() {
+    vLocal = (modelMatrix * vec4(position, 1.0)).xz;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    #include <logdepthbuf_vertex>
+  }
+`
+
+const fragmentShader = /* glsl */ `
+  #include <common>
+  #include <logdepthbuf_pars_fragment>
+  uniform sampler2D map;
+  uniform vec2 patternOffset;
+  uniform vec3 color;
+  uniform float opacity;
+  uniform float fadeStart;
+  uniform float fadeEnd;
+  varying vec2 vLocal;
+  void main() {
+    #include <logdepthbuf_fragment>
+    float cover = texture2D(map, (vLocal + patternOffset) / ${PATTERN_PERIOD.toFixed(1)}).a;
+    if (cover < 0.5) discard;
+    float alpha = opacity * (1.0 - smoothstep(fadeStart, fadeEnd, length(vLocal)));
+    if (alpha <= 0.0) discard;
+    gl_FragColor = vec4(color, alpha);
+    #include <tonemapping_fragment>
+    #include <${threeVersion >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+  }
+`
+
+/**
+ * Flat "fast graphics" clouds: one camera-following quad, the cloud mask is sampled from
+ * vanilla clouds.png in the fragment shader, so there is no per-cell geometry to rebuild
+ * as the player moves or the pattern drifts.
+ */
+export class CloudsModule implements RendererModuleController {
+  private mesh?: THREE.Mesh<THREE.PlaneGeometry, THREE.ShaderMaterial>
+  private enabled = false
+  private drift = 0
+  private timeOfDay: number
+  private readonly linearColor = new THREE.Color()
+
+  constructor(private readonly worldRenderer: WorldRendererThree) {
+    this.timeOfDay = worldRenderer.timeOfTheDay
+  }
+
+  enable(): void {
+    if (this.enabled) return
+    this.enabled = true
+    if (!this.mesh) this.create()
+    this.mesh!.visible = true
+  }
+
+  disable(): void {
+    if (!this.enabled) return
+    this.enabled = false
+    if (this.mesh) this.mesh.visible = false
+  }
+
+  autoEnableCheck(): boolean {
+    const cfg = this.worldRenderer.worldRendererConfig
+    return cfg.clouds && cfg.cardinalLight !== 'nether'
+  }
+
+  updateTimeOfDay(time: number): void {
+    this.timeOfDay = time
+  }
+
+  render?: (deltaTime: number) => void = deltaTime => {
+    this.drift = (this.drift + deltaTime * DRIFT_BLOCKS_PER_SECOND) % PATTERN_PERIOD
+  }
+
+  dispose(): void {
+    if (!this.mesh) return
+    this.worldRenderer.scene.remove(this.mesh)
+    this.mesh.geometry.dispose()
+    this.mesh.material.uniforms.map.value?.dispose()
+    this.mesh.material.dispose()
+    this.mesh = undefined
+  }
+
+  private create(): void {
+    const map = new THREE.TextureLoader().load(cloudsPng)
+    map.wrapS = THREE.RepeatWrapping
+    map.wrapT = THREE.RepeatWrapping
+    map.magFilter = THREE.NearestFilter
+    map.minFilter = THREE.NearestFilter
+    map.generateMipmaps = false
+    // Keep png row 0 at -Z like vanilla's texture-to-world mapping.
+    map.flipY = false
+
+    const material = new THREE.ShaderMaterial({
+      uniforms: {
+        map: { value: map },
+        patternOffset: { value: new THREE.Vector2() },
+        color: { value: new THREE.Color(1, 1, 1) },
+        opacity: { value: OPACITY },
+        fadeStart: { value: MIN_RADIUS * 0.55 },
+        fadeEnd: { value: MIN_RADIUS }
+      },
+      vertexShader,
+      fragmentShader,
+      transparent: true,
+      depthWrite: false,
+      depthTest: true,
+      side: THREE.DoubleSide,
+      forceSinglePass: true
+    })
+
+    const geometry = new THREE.PlaneGeometry(2, 2)
+    geometry.rotateX(-Math.PI / 2)
+
+    const mesh = new THREE.Mesh(geometry, material)
+    mesh.name = 'clouds'
+    mesh.frustumCulled = false
+    // After sun/moon (-2) and stars (-1), before other transparents so water/glass composite on top.
+    mesh.renderOrder = -0.5
+    mesh.onBeforeRender = () => this.syncToCamera(mesh)
+    this.mesh = mesh
+    this.worldRenderer.scene.add(mesh)
+  }
+
+  private syncToCamera(mesh: THREE.Mesh<THREE.PlaneGeometry, THREE.ShaderMaterial>): void {
+    const { sceneOrigin, viewDistance, worldRendererConfig } = this.worldRenderer
+    const { uniforms } = mesh.material
+
+    const radius = THREE.MathUtils.clamp(viewDistance * 16 * 2, MIN_RADIUS, MAX_RADIUS)
+    uniforms.fadeStart.value = radius * 0.55
+    uniforms.fadeEnd.value = radius
+
+    // Show the slab bottom from below and its top from above, like a 4-block-thick cloud.
+    const bottom = worldRendererConfig.cloudHeight + HEIGHT_BIAS
+    const fromBelow = sceneOrigin.y < bottom + THICKNESS / 2
+    const planeY = fromBelow ? bottom : bottom + THICKNESS
+    mesh.position.set(0, planeY - sceneOrigin.y, 0)
+    mesh.scale.set(radius, 1, radius)
+    mesh.updateMatrixWorld()
+
+    // Wrap on the CPU in doubles so the shader never sees large world coordinates.
+    const wrap = (v: number) => ((v % PATTERN_PERIOD) + PATTERN_PERIOD) % PATTERN_PERIOD
+    uniforms.patternOffset.value.set(wrap(sceneOrigin.x + this.drift), wrap(sceneOrigin.z))
+
+    const day = vanillaDayBrightness(vanillaCelestialAngle(this.timeOfDay))
+    let r = day * 0.9 + 0.1
+    let g = day * 0.9 + 0.1
+    let b = day * 0.85 + 0.15
+    if (worldRendererConfig.isRaining) {
+      // Vanilla desaturates and darkens clouds toward grey while raining.
+      const grey = (r * 0.3 + g * 0.59 + b * 0.11) * 0.6
+      r = r * 0.05 + grey * 0.95
+      g = g * 0.05 + grey * 0.95
+      b = b * 0.05 + grey * 0.95
+    }
+    const shade = fromBelow ? BOTTOM_SHADE : 1
+    this.linearColor.setRGB(r * shade, g * shade, b * shade, THREE.SRGBColorSpace)
+    uniforms.color.value.copy(this.linearColor)
+  }
+}
+
+export const cloudsManifest: RendererModuleManifest = {
+  id: 'clouds',
+  controller: CloudsModule,
+  enabledDefault: true
+}

package/src/three/modules/index.ts

@@ -1,12 +1,16 @@
 //@ts-nocheck
 import { blockBreakParticlesManifest } from './blockBreakParticles'
 import { cameraBobbingManifest } from './cameraBobbing'
+import { cloudsManifest } from './clouds'
 import { rainManifest } from './rain'
 import { sciFiWorldRevealManifest } from './sciFiWorldReveal'
 import { starfieldManifest } from './starfield'
+import { sunMoonManifest } from './sunMoon'
 
 export const BUILTIN_MODULES = {
   starfield: starfieldManifest,
+  sunMoon: sunMoonManifest,
+  clouds: cloudsManifest,
   futuristicReveal: sciFiWorldRevealManifest,
   rain: rainManifest,
   cameraBobbing: cameraBobbingManifest,

package/src/three/modules/sunMoon.ts

@@ -0,0 +1,151 @@
+//@ts-nocheck
+import * as THREE from 'three'
+import sunPng from 'mc-assets/dist/other-textures/latest/environment/sun.png'
+import moonPhasesPng from 'mc-assets/dist/other-textures/latest/environment/moon_phases.png'
+import type { WorldRendererThree } from '../worldRendererThree'
+import type { RendererModuleController, RendererModuleManifest } from '../rendererModuleSystem'
+import { vanillaCelestialAngle } from '../../lib/skyLight'
+
+// Vanilla geometry: sun quad ±30 and moon quad ±20, both 100 blocks from the camera.
+const DISTANCE = 100
+const SUN_SIZE = 60
+const MOON_SIZE = 40
+/** moon_phases.png is a 4×2 grid. */
+const MOON_COLS = 4
+const MOON_ROWS = 2
+
+const loadPixelTexture = (url: string, onLoad?: (tex: THREE.Texture) => void): THREE.Texture => {
+  const tex = new THREE.TextureLoader().load(url, onLoad)
+  tex.colorSpace = THREE.SRGBColorSpace
+  tex.magFilter = THREE.NearestFilter
+  tex.minFilter = THREE.NearestFilter
+  tex.generateMipmaps = false
+  return tex
+}
+
+const createBodyMaterial = (map: THREE.Texture) =>
+  new THREE.MeshBasicMaterial({
+    map,
+    transparent: true,
+    // Vanilla blends celestial bodies with (SRC_ALPHA, ONE): additive over the sky colour.
+    blending: THREE.AdditiveBlending,
+    depthWrite: false,
+    // Terrain drawn in the opaque pass must still hide the sun/moon.
+    depthTest: true,
+    fog: false,
+    side: THREE.DoubleSide,
+    forceSinglePass: true
+  })
+
+export class SunMoonModule implements RendererModuleController {
+  private pivot?: THREE.Group
+  private sun?: THREE.Mesh<THREE.PlaneGeometry, THREE.MeshBasicMaterial>
+  private moon?: THREE.Mesh<THREE.PlaneGeometry, THREE.MeshBasicMaterial>
+  private moonTexture?: THREE.Texture
+  private enabled = false
+  private timeOfDay: number
+  private moonPhase = 0
+
+  constructor(private readonly worldRenderer: WorldRendererThree) {
+    this.timeOfDay = worldRenderer.timeOfTheDay
+  }
+
+  enable(): void {
+    if (this.enabled) return
+    this.enabled = true
+    if (!this.pivot) this.create()
+    this.pivot!.visible = true
+    this.applyTime()
+  }
+
+  disable(): void {
+    if (!this.enabled) return
+    this.enabled = false
+    if (this.pivot) this.pivot.visible = false
+  }
+
+  autoEnableCheck(): boolean {
+    const cfg = this.worldRenderer.worldRendererConfig
+    return cfg.defaultSkybox && cfg.cardinalLight !== 'nether'
+  }
+
+  updateTimeOfDay(time: number): void {
+    this.timeOfDay = time
+    if (this.enabled) this.applyTime()
+  }
+
+  updateMoonPhase(phase: number): void {
+    this.moonPhase = ((Math.trunc(phase) % 8) + 8) % 8
+    this.applyMoonPhase()
+  }
+
+  dispose(): void {
+    if (!this.pivot) return
+    this.worldRenderer.scene.remove(this.pivot)
+    for (const mesh of [this.sun, this.moon]) {
+      if (!mesh) continue
+      mesh.geometry.dispose()
+      mesh.material.map?.dispose()
+      mesh.material.dispose()
+    }
+    this.pivot = undefined
+    this.sun = undefined
+    this.moon = undefined
+    this.moonTexture = undefined
+  }
+
+  private create(): void {
+    this.pivot = new THREE.Group()
+    this.pivot.name = 'sun-moon'
+
+    const sunGeometry = new THREE.PlaneGeometry(SUN_SIZE, SUN_SIZE)
+    sunGeometry.rotateX(Math.PI / 2)
+    this.sun = new THREE.Mesh(sunGeometry, createBodyMaterial(loadPixelTexture(sunPng)))
+    this.sun.position.set(0, DISTANCE, 0)
+
+    this.moonTexture = loadPixelTexture(moonPhasesPng)
+    this.moonTexture.repeat.set(1 / MOON_COLS, 1 / MOON_ROWS)
+    const moonGeometry = new THREE.PlaneGeometry(MOON_SIZE, MOON_SIZE)
+    moonGeometry.rotateX(-Math.PI / 2)
+    this.moon = new THREE.Mesh(moonGeometry, createBodyMaterial(this.moonTexture))
+    this.moon.position.set(0, -DISTANCE, 0)
+
+    for (const mesh of [this.sun, this.moon]) {
+      mesh.frustumCulled = false
+      // Drawn before stars (-1) and clouds so both composite on top, like vanilla.
+      mesh.renderOrder = -2
+      this.pivot.add(mesh)
+    }
+
+    this.applyMoonPhase()
+    this.worldRenderer.scene.add(this.pivot)
+  }
+
+  private applyMoonPhase(): void {
+    if (!this.moonTexture) return
+    const col = this.moonPhase % MOON_COLS
+    const row = Math.floor(this.moonPhase / MOON_COLS)
+    // flipY textures put row 0 (top of the png) at v = 1 - 1/rows.
+    this.moonTexture.offset.set(col / MOON_COLS, 1 - (row + 1) / MOON_ROWS)
+  }
+
+  private applyTime(): void {
+    if (!this.pivot || !this.sun || !this.moon) return
+    // Rotating +Y about Z by θ gives (-sinθ, cosθ, 0): sunrise in the east (+X),
+    // overhead at noon, setting in the west (-X).
+    const theta = vanillaCelestialAngle(this.timeOfDay) * Math.PI * 2
+    this.pivot.rotation.z = theta
+
+    // There is no horizon occluder on the flat sky planes, so fade bodies out as they sink
+    // below it instead of letting them shine through the void colour.
+    const sunHeight = Math.cos(theta)
+    this.sun.material.opacity = THREE.MathUtils.smoothstep(sunHeight, -0.15, 0.02)
+    this.moon.material.opacity = THREE.MathUtils.smoothstep(-sunHeight, -0.15, 0.02)
+  }
+}
+
+export const sunMoonManifest: RendererModuleManifest = {
+  id: 'sunMoon',
+  controller: SunMoonModule,
+  enabledDefault: true
+}

package/src/three/skyboxRenderer.ts

@@ -1,6 +1,7 @@
 //@ts-nocheck
 import * as THREE from 'three'
 import { DebugGui } from '../lib/DebugGui'
+import { DEFAULT_WATER_FOG_COLOR, getWaterFogEnd, waterFogColorToRgb } from './waterFog'
 
 export const DEFAULT_TEMPERATURE = 0.75
 
@@ -17,6 +18,8 @@ export class SkyboxRenderer {
   private temperature = DEFAULT_TEMPERATURE
   private inWater = false
   private waterBreathing = false
+  private underwaterSeconds = 0
+  private readonly waterFogColor = DEFAULT_WATER_FOG_COLOR
   private fogBrightness = 0
   private prevFogBrightness = 0
   private readonly fogOrangeness = 0 // Debug property to control sky color orangeness
@@ -98,7 +101,8 @@ export class SkyboxRenderer {
     }
   }
 
-  update(cameraPosition: THREE.Vector3, newViewDistance: number) {
+  update(cameraPosition: THREE.Vector3, newViewDistance: number, deltaSeconds = 0) {
+    if (this.inWater) this.underwaterSeconds += deltaSeconds
     if (newViewDistance !== this.viewDistance) {
       this.viewDistance = newViewDistance
       this.updateSkyColors()
@@ -139,6 +143,8 @@ export class SkyboxRenderer {
   // Update water state
   updateWaterState(inWater: boolean, waterBreathing: boolean) {
     if (this.debugGui.visible) return
+    // Vanilla restarts the vision ramp every time the camera leaves the water.
+    if (!inWater) this.underwaterSeconds = 0
     this.inWater = inWater
     this.waterBreathing = waterBreathing
     this.updateSkyColors()
@@ -342,13 +348,14 @@ export class SkyboxRenderer {
 
     // Handle water fog
     if (this.inWater) {
-      const waterViewDistance = this.waterBreathing ? 100 : 5
-      this.scene.fog = new THREE.Fog(new THREE.Color(0, 0, 1), 0.0025, waterViewDistance)
-      this.scene.background = new THREE.Color(0, 0, 1)
-
-      // Update sky and void colors for underwater effect
-      ;(this.skyMesh.material as THREE.MeshBasicMaterial).color.set(new THREE.Color(0, 0, 1))
-      ;(this.voidMesh.material as THREE.MeshBasicMaterial).color.set(new THREE.Color(0, 0, 0.6))
+      const fogColor = new THREE.Color(...waterFogColorToRgb(this.waterFogColor))
+      const fogEnd = Math.min(getWaterFogEnd(this.underwaterSeconds, this.waterBreathing), this.viewDistance * 16 * this.distanceFactor)
+      this.scene.fog = new THREE.Fog(fogColor, 0, fogEnd)
+      this.scene.background = fogColor
+
+      // Looking at the sky or void from below the surface shows the water fog colour.
+      ;(this.skyMesh.material as THREE.MeshBasicMaterial).color.copy(fogColor)
+      ;(this.voidMesh.material as THREE.MeshBasicMaterial).color.copy(fogColor)
       return
     }
 

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

@@ -0,0 +1,59 @@
+//@ts-nocheck
+import * as THREE from 'three'
+import { afterEach, beforeEach, expect, test, vi } from 'vitest'
+import { CloudsModule } from '../modules/clouds'
+import { defaultWorldRendererConfig } from '../../graphicsBackend/config'
+
+beforeEach(() => {
+  // No image decoding in node; the module only needs a texture object.
+  vi.spyOn(THREE.TextureLoader.prototype, 'load').mockImplementation(() => new THREE.Texture())
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+function createModule(config: Partial<typeof defaultWorldRendererConfig> = {}) {
+  const scene = new THREE.Scene()
+  const worldRenderer = {
+    scene,
+    timeOfTheDay: 6000,
+    viewDistance: 8,
+    sceneOrigin: new THREE.Vector3(),
+    worldRendererConfig: { ...defaultWorldRendererConfig, ...config }
+  }
+  const module = new CloudsModule(worldRenderer as any)
+  return { module, scene, worldRenderer }
+}
+
+test('clouds are on by default and auto mode follows the clouds option', () => {
+  const { module, worldRenderer } = createModule()
+  expect(module.autoEnableCheck()).toBe(true)
+  worldRenderer.worldRendererConfig.clouds = false
+  expect(module.autoEnableCheck()).toBe(false)
+})
+
+test('clouds stay off in the nether even when enabled', () => {
+  expect(createModule({ cardinalLight: 'nether' }).module.autoEnableCheck()).toBe(false)
+})
+
+test('disable hides the cloud layer and enable shows the same mesh again', () => {
+  const { module, scene } = createModule()
+  module.enable()
+  const mesh = scene.getObjectByName('clouds')!
+  expect(mesh.visible).toBe(true)
+
+  module.disable()
+  expect(mesh.visible).toBe(false)
+
+  module.enable()
+  expect(scene.getObjectByName('clouds')).toBe(mesh)
+  expect(mesh.visible).toBe(true)
+})
+
+test('dispose removes the cloud layer from the scene', () => {
+  const { module, scene } = createModule()
+  module.enable()
+  module.dispose()
+  expect(scene.getObjectByName('clouds')).toBeUndefined()
+})

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

@@ -215,3 +215,101 @@ test('GlobalBlockBuffer: uploadEpoch increments when dirty range drains', () =>
   buffer.dispose()
   mat.dispose()
 })
+
+function faceWords(faceCount: number): Uint32Array {
+  return new Uint32Array(faceCount * 4)
+}
+
+function drawableCubeFaces(buffer: GlobalBlockBuffer, key: string): number {
+  const start = buffer.getSectionDrawStart(key)
+  const count = buffer.getSectionDrawCount(key)
+  if (start === undefined || count === undefined) return 0
+  const spans = buildVisibleCubeSpans([{ start, count }], buffer.getHighWatermark(), false, undefined, buffer.getPendingDirtyRanges())
+  return spans.reduce((sum, span) => sum + span.count, 0)
+}
+
+test('GlobalBlockBuffer: compaction must not hide pending-replace displayed faces', () => {
+  const scene = new THREE.Scene()
+  const mat = createCubeBlockMaterial()
+  const buffer = new GlobalBlockBuffer(mat, scene)
+
+  buffer.addSection('H', faceWords(20_000), 20_000)
+  buffer.addSection('A', faceWords(8000), 8000)
+  buffer.addSection('B', faceWords(1000), 1000)
+  drainUploads(buffer)
+  const original = buffer.getSectionDrawStart('A')
+
+  buffer.addSection('A', faceWords(8000), 8000)
+  buffer.removeSection('H')
+  buffer.compactStep()
+  buffer.uploadDirtyRange()
+
+  expect(drawableCubeFaces(buffer, 'A')).toBe(8000)
+  expect(buffer.getSectionDrawStart('A')).toBe(original)
+  const move = buffer.getPendingMove()
+  expect(move?.key === 'A').toBe(false)
+
+  buffer.dispose()
+  mat.dispose()
+})
+
+test('GlobalBlockBuffer: 27 simultaneous remeshes keep 8000 faces on every frame', () => {
+  const scene = new THREE.Scene()
+  const mat = createCubeBlockMaterial()
+  const buffer = new GlobalBlockBuffer(mat, scene)
+  const n = 27
+  const faces = 8000
+
+  for (let i = 0; i < n; i++) buffer.addSection(String(i), faceWords(faces), faces)
+  drainUploads(buffer)
+  for (let i = 0; i < n; i++) buffer.addSection(String(i), faceWords(faces), faces)
+
+  for (let frame = 1; frame <= 120; frame++) {
+    buffer.compactStep()
+    buffer.uploadDirtyRange()
+    for (let i = 0; i < n; i++) {
+      expect(drawableCubeFaces(buffer, String(i)), `section ${i} on frame ${frame}`).toBe(faces)
+    }
+    if (!buffer.hasPendingUploads() && !buffer.hasPendingReplace() && !buffer.getPendingMove()) break
+  }
+
+  buffer.dispose()
+  mat.dispose()
+})
+
+test('GlobalBlockBuffer: remesh during move keeps original displayed slot', () => {
+  const scene = new THREE.Scene()
+  const mat = createCubeBlockMaterial()
+  const buffer = new GlobalBlockBuffer(mat, scene)
+
+  buffer.addSection('H', faceWords(20_000), 20_000)
+  buffer.addSection('B', faceWords(1000), 1000)
+  buffer.addSection('A', faceWords(8000), 8000)
+  drainUploads(buffer)
+  buffer.removeSection('H')
+  drainUploads(buffer)
+  buffer.compactStep()
+  expect(buffer.getPendingMove()?.key).toBe('A')
+  const displayed = buffer.getSectionDrawStart('A')
+  expect(displayed).toBeDefined()
+
+  buffer.addSection('A', faceWords(8000), 8000)
+  expect(buffer.getSectionDrawStart('A')).toBe(displayed)
+  expect(buffer.getPendingMove()).toBeNull()
+  expect(buffer.hasPendingReplace()).toBe(true)
+  expect(drawableCubeFaces(buffer, 'A')).toBe(8000)
+
+  buffer.compactStep()
+  buffer.uploadDirtyRange()
+  expect(buffer.getSectionDrawStart('A')).toBe(displayed)
+  expect(buffer.getPendingMove()?.key === 'A').toBe(false)
+  expect(drawableCubeFaces(buffer, 'A')).toBe(8000)
+
+  drainUploads(buffer)
+  buffer.compactStep()
+  finishCurrentMove(buffer)
+  expect(drawableCubeFaces(buffer, 'A')).toBe(8000)
+
+  buffer.dispose()
+  mat.dispose()
+})