minecraft-renderer 0.1.79 → 0.1.80

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

@@ -1,12 +1,8 @@
 //@ts-nocheck
 import { expect, test, vi } from 'vitest'
-import {
-  createLegacyMultiDrawScratch,
-  detectLegacyMultiDrawCaps,
-  drawLegacySpans,
-} from '../legacyMultiDraw'
+import { createLegacyMultiDrawScratch, detectLegacyMultiDrawCaps, drawLegacySpans } from '../legacyMultiDraw'
 
-function makeMockGl (opts?: { multiDraw?: boolean }): WebGL2RenderingContext {
+function makeMockGl(opts?: { multiDraw?: boolean }): WebGL2RenderingContext {
   const multiDrawElementsWEBGL = vi.fn()
   const drawElements = vi.fn()
   return {
@@ -18,7 +14,7 @@ function makeMockGl (opts?: { multiDraw?: boolean }): WebGL2RenderingContext {
       }
       return null
     },
-    drawElements,
+    drawElements
   } as unknown as WebGL2RenderingContext
 }
 
@@ -42,7 +38,7 @@ test('drawLegacySpans: tier A uses multiDrawElementsWEBGL with byte offsets', ()
   const scratch = createLegacyMultiDrawScratch()
   const spans = [
     { indexStart: 12, indexCount: 6 },
-    { indexStart: 30, indexCount: 12 },
+    { indexStart: 30, indexCount: 12 }
   ]
 
   drawLegacySpans(gl, caps, spans, scratch)
@@ -54,13 +50,7 @@ test('drawLegacySpans: tier A uses multiDrawElementsWEBGL with byte offsets', ()
 
   const ext = caps.ext as { multiDrawElementsWEBGL: ReturnType<typeof vi.fn> }
   expect(ext.multiDrawElementsWEBGL).toHaveBeenCalledTimes(1)
-  expect(ext.multiDrawElementsWEBGL).toHaveBeenCalledWith(
-    gl.TRIANGLES,
-    scratch.counts, 0,
-    gl.UNSIGNED_INT,
-    scratch.offsets, 0,
-    2,
-  )
+  expect(ext.multiDrawElementsWEBGL).toHaveBeenCalledWith(gl.TRIANGLES, scratch.counts, 0, gl.UNSIGNED_INT, scratch.offsets, 0, 2)
 })
 
 test('drawLegacySpans: tier B loops drawElements per span', () => {
@@ -71,12 +61,7 @@ test('drawLegacySpans: tier B loops drawElements per span', () => {
 
   drawLegacySpans(gl, caps, spans, scratch)
 
-  expect((gl as unknown as { drawElements: ReturnType<typeof vi.fn> }).drawElements).toHaveBeenCalledWith(
-    gl.TRIANGLES,
-    6,
-    gl.UNSIGNED_INT,
-    16,
-  )
+  expect((gl as unknown as { drawElements: ReturnType<typeof vi.fn> }).drawElements).toHaveBeenCalledWith(gl.TRIANGLES, 6, gl.UNSIGNED_INT, 16)
 })
 
 test('drawLegacySpans: grows scratch past MAX_OPAQUE_SPANS for uncapped blend sets', () => {
@@ -88,7 +73,7 @@ test('drawLegacySpans: grows scratch past MAX_OPAQUE_SPANS for uncapped blend se
   const spanCount = 70
   const spans = Array.from({ length: spanCount }, (_, i) => ({
     indexStart: i * 6,
-    indexCount: 6,
+    indexCount: 6
   }))
 
   drawLegacySpans(gl, caps, spans, scratch)
@@ -99,11 +84,5 @@ test('drawLegacySpans: grows scratch past MAX_OPAQUE_SPANS for uncapped blend se
   expect(scratch.offsets[69]).toBe(69 * 6 * 4)
 
   const ext = caps.ext as { multiDrawElementsWEBGL: ReturnType<typeof vi.fn> }
-  expect(ext.multiDrawElementsWEBGL).toHaveBeenCalledWith(
-    gl.TRIANGLES,
-    scratch.counts, 0,
-    gl.UNSIGNED_INT,
-    scratch.offsets, 0,
-    spanCount,
-  )
+  expect(ext.multiDrawElementsWEBGL).toHaveBeenCalledWith(gl.TRIANGLES, scratch.counts, 0, gl.UNSIGNED_INT, scratch.offsets, 0, spanCount)
 })

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

@@ -3,7 +3,7 @@ import { test, expect, vi, afterEach } 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 { GlobalLegacyBuffer } from '../globalLegacyBuffer'
 import type { WorldRendererThree } from '../worldRendererThree'
 import type { MesherGeometryOutput } from '../../mesher-shared/shared'
 
-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 makeOpaqueOnlyGeometry (sx = 8, sy = 8, sz = 8): MesherGeometryOutput {
+function makeOpaqueOnlyGeometry(sx = 8, sy = 8, sz = 8): MesherGeometryOutput {
   const opaque = makeQuadArrays()
   return {
     sectionYNumber: 0,
@@ -95,11 +90,11 @@ function makeOpaqueOnlyGeometry (sx = 8, sy = 8, sz = 8): MesherGeometryOutput {
     signs: {},
     banners: {},
     hadErrors: false,
-    blocksCount: 1,
+    blocksCount: 1
   }
 }
 
-function makeMixedGeometry (): MesherGeometryOutput {
+function makeMixedGeometry(): MesherGeometryOutput {
   const opaque = makeQuadArrays()
   const blend = makeQuadArrays()
   return {
@@ -136,12 +131,12 @@ function makeMixedGeometry (): MesherGeometryOutput {
       skyLights: blend.skyLights,
       blockLights: blend.blockLights,
       uvs: blend.uvs,
-      indices: blend.indices,
-    },
+      indices: blend.indices
+    }
   }
 }
 
-function createManager (): ChunkMeshManager {
+function createManager(): ChunkMeshManager {
   const scene = new THREE.Scene()
   const material = new THREE.MeshBasicMaterial()
   const worldRenderer = {
@@ -150,25 +145,25 @@ function createManager (): ChunkMeshManager {
     sceneOrigin: {
       track: () => {},
       removeAndUntrack: () => {},
-      removeAndUntrackAll: () => {},
+      removeAndUntrackAll: () => {}
     },
     blockEntities: {},
-    worldRendererConfig: {},
+    worldRendererConfig: {}
   } as unknown as WorldRendererThree
   return new ChunkMeshManager(worldRenderer, scene, material, 256, 1)
 }
 
 type ManagerInternals = {
-  legacyCullSections: Map<string, { worldX: number, worldY: number, worldZ: number }>
+  legacyCullSections: Map<string, { worldX: number; worldY: number; worldZ: number }>
   registerLegacyCullSection: (key: string, wx: number, wy: number, wz: number) => void
   maybeUnregisterLegacyCullSection: (key: string) => void
 }
 
-function getLegacyCullSections (manager: ChunkMeshManager): Map<string, { worldX: number, worldY: number, worldZ: number }> {
+function getLegacyCullSections(manager: ChunkMeshManager): Map<string, { worldX: number; worldY: number; worldZ: number }> {
   return (manager as unknown as ManagerInternals).legacyCullSections
 }
 
-function makeCamera (x: number, y: number, z: number): THREE.PerspectiveCamera {
+function makeCamera(x: number, y: number, z: number): THREE.PerspectiveCamera {
   const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000)
   camera.position.set(x, y, z)
   camera.lookAt(8, 8, 8)
@@ -225,9 +220,14 @@ test('updateSectionCullAndSort: same visible set skips span rebuild on camera mo
   manager.updateSectionCullAndSort(camera1, 8, 8, 20)
   expect(updateDrawSpansSpy).toHaveBeenCalledTimes(1)
 
+  while (blendBuffer.hasPendingUploads()) blendBuffer.uploadDirtyRange()
+
+  manager.updateSectionCullAndSort(camera1, 8, 8, 20)
+  expect(updateDrawSpansSpy).toHaveBeenCalledTimes(2)
+
   const camera2 = makeCamera(8, 8, 18)
   manager.updateSectionCullAndSort(camera2, 8, 8, 18)
-  expect(updateDrawSpansSpy).toHaveBeenCalledTimes(1)
+  expect(updateDrawSpansSpy).toHaveBeenCalledTimes(2)
 
   manager.cleanupSection(key)
   manager.dispose()
@@ -246,11 +246,7 @@ test('updateSectionCullAndSort: layoutVersion change forces span rebuild', () =>
   expect(updateDrawSpansSpy).toHaveBeenCalledTimes(1)
 
   blendBuffer.removeSection(key)
-  blendBuffer.addSection(
-    key,
-    makeBlendOnlyGeometry().blend!,
-    8, 8, 8,
-  )
+  blendBuffer.addSection(key, makeBlendOnlyGeometry().blend!, 8, 8, 8)
   ;(manager as unknown as ManagerInternals).registerLegacyCullSection(key, 8, 8, 8)
 
   manager.updateSectionCullAndSort(camera, 8, 8, 20)
@@ -260,10 +256,91 @@ test('updateSectionCullAndSort: layoutVersion change forces span rebuild', () =>
   manager.dispose()
 })
 
-function drainLegacyUploads (buffer: GlobalLegacyBuffer): void {
+function drainLegacyUploads(buffer: GlobalLegacyBuffer): void {
   while (buffer.hasPendingUploads()) buffer.uploadDirtyRange()
 }
 
+function simulateRenderCullGate(manager: ChunkMeshManager, camera: THREE.PerspectiveCamera, x: number, y: number, z: number): void {
+  for (const buf of [manager.globalLegacyBuffer, manager.globalLegacyBlendBuffer, manager.globalBlockBuffer]) {
+    if (!buf) continue
+    buf.compactStep()
+    if (buf.hasPendingUploads()) buf.uploadDirtyRange()
+  }
+  manager.markCullDirtyIfBufferStateChanged()
+  if (manager.cullDirty) {
+    manager.updateSectionCullAndSort(camera, x, y, z)
+    manager.clearCullDirty()
+  }
+}
+
+test('markCullDirtyIfBufferStateChanged: finalize layout bump marks cull dirty', () => {
+  const manager = createManager()
+  const key = '0,0,0'
+  manager.updateSection(key, makeOpaqueOnlyGeometry(8, 8, 8))
+
+  const opaqueBuf = manager.globalLegacyBuffer!
+  drainLegacyUploads(opaqueBuf)
+
+  const camera = makeCamera(8, 8, 20)
+  manager.updateSectionCullAndSort(camera, 8, 8, 20)
+  manager.clearCullDirty()
+
+  opaqueBuf.addSection(
+    key,
+    {
+      positions: makeQuadArrays().positions,
+      colors: makeQuadArrays().colors,
+      skyLights: makeQuadArrays().skyLights,
+      blockLights: makeQuadArrays().blockLights,
+      uvs: makeQuadArrays().uvs,
+      indices: makeQuadArrays().indices
+    },
+    16,
+    8,
+    8
+  )
+  drainLegacyUploads(opaqueBuf)
+  opaqueBuf.compactStep()
+  expect(opaqueBuf.hasPendingReplace()).toBe(false)
+
+  manager.markCullDirtyIfBufferStateChanged()
+  expect(manager.cullDirty).toBe(true)
+
+  manager.cleanupSection(key)
+  manager.dispose()
+})
+
+test('simulateRenderCullGate: finalize remesh refreshes visible spans without camera move', () => {
+  const manager = createManager()
+  const key = '0,0,0'
+  const camera = makeCamera(8, 8, 20)
+
+  manager.updateSection(key, makeOpaqueOnlyGeometry(8, 8, 8))
+  const opaqueBuf = manager.globalLegacyBuffer!
+  drainLegacyUploads(opaqueBuf)
+  simulateRenderCullGate(manager, camera, 8, 8, 20)
+
+  const slotA = opaqueBuf.getSectionSlot(key)!.start
+  opaqueBuf.updateDrawSpans([{ key, distSq: 1 }], 'opaque')
+  expect(opaqueBuf.getVisibleIndexSpans()[0]!.indexStart).toBe(slotA * 6)
+
+  manager.updateSection(key, makeOpaqueOnlyGeometry(16, 8, 8))
+  for (let i = 0; i < 32 && (manager.hasPendingBufferWork() || opaqueBuf.hasPendingReplace() || opaqueBuf.hasPendingUploads()); i++) {
+    simulateRenderCullGate(manager, camera, 8, 8, 20)
+  }
+
+  expect(opaqueBuf.hasPendingReplace()).toBe(false)
+  expect(opaqueBuf.hasPendingUploads()).toBe(false)
+
+  const drawStart = opaqueBuf.getSectionDrawStart(key)!
+  const spans = opaqueBuf.getVisibleIndexSpans()
+  expect(spans.length).toBeGreaterThan(0)
+  expect(spans[0]!.indexStart).toBe(drawStart * 6)
+
+  manager.cleanupSection(key)
+  manager.dispose()
+})
+
 test('updateSectionCullAndSort: defrag finalize forces span rebuild with static camera', () => {
   const manager = createManager()
   const keys = ['0,0,0', '1,0,0', '2,0,0'] as const

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

@@ -4,21 +4,21 @@ import * as THREE from 'three'
 
 const renderSignMock = vi.fn()
 vi.mock('../../sign-renderer', () => ({
-  renderSign: (...args: unknown[]) => renderSignMock(...args),
+  renderSign: (...args: unknown[]) => renderSignMock(...args)
 }))
 
 vi.mock('prismarine-chat', () => ({
-  default: () => () => ({}),
+  default: () => () => ({})
 }))
 
 import { getSignTexture, releaseSignTexture, disposeAllSignTextures } from '../signTextureCache'
 import type { WorldRendererThree } from '../worldRendererThree'
 
-function createWorldRenderer (): WorldRendererThree {
+function createWorldRenderer(): WorldRendererThree {
   return { version: '1.20' } as WorldRendererThree
 }
 
-function stubCanvas () {
+function stubCanvas() {
   return { width: 64, height: 32 } as HTMLCanvasElement
 }
 

package/src/three/threeJsMedia.ts

@@ -11,14 +11,14 @@ type ControlModeConfig = {
 }
 
 interface MediaProperties {
-  position: { x: number, y: number, z: number }
-  size: { width: number, height: number }
+  position: { x: number; y: number; z: number }
+  size: { width: number; height: number }
   src: string
   rotation?: 0 | 1 | 2 | 3 // 0-3 for 0°, 90°, 180°, 270°
   doubleSide?: boolean
   background?: number // Hexadecimal color (e.g., 0x000000 for black)
   opacity?: number // 0-1 value for transparency
-  uvMapping?: { startU: number, endU: number, startV: number, endV: number }
+  uvMapping?: { startU: number; endU: number; startV: number; endV: number }
   allowOrigins?: string[] | boolean
   loop?: boolean
   volume?: number
@@ -34,12 +34,7 @@ interface MediaData {
   video: HTMLVideoElement | undefined
   pausedBecuaseHidden: boolean
   texture: THREE.Texture
-  updateUVMapping: (config: {
-    startU: number
-    endU: number
-    startV: number
-    endV: number
-  }) => void
+  updateUVMapping: (config: { startU: number; endU: number; startV: number; endV: number }) => void
   positionalAudio?: THREE.PositionalAudio
   hadAutoPlayError?: boolean
   ended?: boolean
@@ -95,7 +90,7 @@ export class ThreeJsMedia {
     ctx.clearRect(0, 0, canvas.width, canvas.height)
 
     // Add background color
-    ctx.fillStyle = `rgba(${background >> 16 & 255}, ${background >> 8 & 255}, ${background & 255}, 1)`
+    ctx.fillStyle = `rgba(${(background >> 16) & 255}, ${(background >> 8) & 255}, ${background & 255}, 1)`
     ctx.fillRect(0, 0, canvas.width, canvas.height)
 
     // Add red text with size relative to canvas dimensions
@@ -167,7 +162,13 @@ export class ThreeJsMedia {
 
     const originSecurityError = props.allowOrigins !== undefined && !this.validateOrigin(props.src, props.allowOrigins)
     if (originSecurityError) {
-      console.warn('Remote resource blocked due to security policy', props.src, 'allowed origins:', props.allowOrigins, 'you can control it with `remoteContentNotSameOrigin` option')
+      console.warn(
+        'Remote resource blocked due to security policy',
+        props.src,
+        'allowed origins:',
+        props.allowOrigins,
+        'you can control it with `remoteContentNotSameOrigin` option'
+      )
       props.src = ''
     }
 
@@ -247,12 +248,11 @@ export class ThreeJsMedia {
       })
     }
 
-
     // Create background texture first
     const backgroundTexture = this.createBackgroundTexture(
       props.size.width,
       props.size.height,
-      props.background,
+      props.background
       // props.opacity ?? 1
     )
 
@@ -278,30 +278,32 @@ export class ThreeJsMedia {
     if (video) {
       texture = new THREE.VideoTexture(video)
     } else if (workerVideoUnsupported) {
-      texture = this.createErrorTexture(
-        props.size.width,
-        props.size.height,
-        props.background,
-        'Video unavailable (multi-thread)',
-      )
+      texture = this.createErrorTexture(props.size.width, props.size.height, props.background, 'Video unavailable (multi-thread)')
     } else if (isWebWorker) {
       const loaded = loadThreeJsTextureFromUrlSync(props.src)
       texture = loaded.texture
       texture.minFilter = THREE.NearestFilter
       texture.magFilter = THREE.NearestFilter
-      void loaded.promise.then(() => {
-        if (this.customMedia.get(id)?.texture === texture) {
-          material.map = texture
-          material.needsUpdate = true
-        }
-      }).catch(() => handleError())
+      void loaded.promise
+        .then(() => {
+          if (this.customMedia.get(id)?.texture === texture) {
+            material.map = texture
+            material.needsUpdate = true
+          }
+        })
+        .catch(() => handleError())
     } else {
-      texture = new THREE.TextureLoader().load(props.src, () => {
-        if (this.customMedia.get(id)?.texture === texture) {
-          material.map = texture
-          material.needsUpdate = true
-        }
-      }, undefined, () => handleError()) // todo cache
+      texture = new THREE.TextureLoader().load(
+        props.src,
+        () => {
+          if (this.customMedia.get(id)?.texture === texture) {
+            material.map = texture
+            material.needsUpdate = true
+          }
+        },
+        undefined,
+        () => handleError()
+      ) // todo cache
     }
     texture.minFilter = THREE.NearestFilter
     texture.magFilter = THREE.NearestFilter
@@ -312,7 +314,13 @@ export class ThreeJsMedia {
     // Create inner mesh for offsets
     const mesh = new THREE.Mesh(geometry, material)
 
-    const { mesh: panel } = this.positionMeshExact(mesh, THREE.MathUtils.degToRad((props.rotation ?? 0) * 90), props.position, props.size.width, props.size.height)
+    const { mesh: panel } = this.positionMeshExact(
+      mesh,
+      THREE.MathUtils.degToRad((props.rotation ?? 0) * 90),
+      props.position,
+      props.size.width,
+      props.size.height
+    )
 
     scene.add(panel)
 
@@ -336,7 +344,7 @@ export class ThreeJsMedia {
     }
 
     // UV mapping configuration
-    const updateUVMapping = (config: { startU: number, endU: number, startV: number, endV: number }) => {
+    const updateUVMapping = (config: { startU: number; endU: number; startV: number; endV: number }) => {
       const uvs = geometry.attributes.uv.array as Float32Array
       uvs[0] = config.startU
       uvs[1] = config.startV
@@ -368,7 +376,7 @@ export class ThreeJsMedia {
         if (videoData.destroyed) return
         console.error(`Failed to play video ${id}:`, err)
         // TODO!
-        const t = /* translate ??  */(txt => txt)
+        const t = /* translate ??  */ txt => txt
         handleError(err.name === 'NotAllowedError' || err.name === 'AbortError' ? t('Waiting for user interaction') : t('Failed to auto play'))
       }
     }
@@ -398,14 +406,15 @@ export class ThreeJsMedia {
         return
       }
 
-      void videoData.video.play()
+      void videoData.video
+        .play()
         .then(() => {
           videoData.hadAutoPlayError = false
           console.log(`Playing video ${id}`)
         })
         .catch(err => {
           if (videoData.pausedBecuaseHidden) return
-          if (err.name === 'NotAllowedError' || err.name === 'AbortError' || err.message?.includes('not allowed') && !videoData.pausedBecuaseHidden) {
+          if (err.name === 'NotAllowedError' || err.name === 'AbortError' || (err.message?.includes('not allowed') && !videoData.pausedBecuaseHidden)) {
             videoData.hadAutoPlayError = true
           }
           videoData.handleError(err)
@@ -518,14 +527,7 @@ export class ThreeJsMedia {
    * @param depth Depth of the mesh (default: 1)
    * @returns The positioned mesh for chaining
    */
-  positionMeshExact(
-    mesh: THREE.Mesh,
-    rotation: number,
-    startPosition: { x: number, y: number, z: number },
-    width: number,
-    height: number,
-    depth = 1
-  ) {
+  positionMeshExact(mesh: THREE.Mesh, rotation: number, startPosition: { x: number; y: number; z: number }, width: number, height: number, depth = 1) {
     // avoid z-fighting with the ground plane
     if (rotation === 0) {
       startPosition.z += 0.001
@@ -536,7 +538,7 @@ export class ThreeJsMedia {
     if (rotation === Math.PI) {
       startPosition.z -= 0.001
     }
-    if (rotation === 3 * Math.PI / 2) {
+    if (rotation === (3 * Math.PI) / 2) {
       startPosition.x += 0.001
     }
 
@@ -547,12 +549,11 @@ export class ThreeJsMedia {
     if (rotation === Math.PI) {
       startPosition.x += 1
     }
-    if (rotation === 3 * Math.PI / 2) {
+    if (rotation === (3 * Math.PI) / 2) {
       startPosition.z += 1
       startPosition.x += 1
     }
 
-
     // First, clean up any previous transformations
     mesh.matrix.identity()
     mesh.position.set(0, 0, 0)
@@ -563,7 +564,7 @@ export class ThreeJsMedia {
     // We need to set up the proper orientation for our use case
     // Rotate the plane to face the correct direction based on the rotation parameter
     mesh.rotateY(rotation)
-    if (rotation === Math.PI / 2 || rotation === 3 * Math.PI / 2) {
+    if (rotation === Math.PI / 2 || rotation === (3 * Math.PI) / 2) {
       mesh.rotateZ(-Math.PI)
       mesh.rotateX(-Math.PI)
     }
@@ -585,36 +586,24 @@ export class ThreeJsMedia {
     debugGroup.add(mesh)
 
     // Add a marker at the starting position (should be exactly at pos)
-    const startMarker = new THREE.Mesh(
-      new THREE.BoxGeometry(0.1, 0.1, 0.1),
-      new THREE.MeshBasicMaterial({ color: 0xff_00_00 })
-    )
+    const startMarker = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xff_00_00 }))
     startMarker.position.set(startPosition.x, startPosition.y, startPosition.z)
     debugGroup.add(startMarker)
 
     // Add a marker at the end position (width units away in the rotated direction)
     const endX = startPosition.x + Math.cos(rotation) * width
     const endZ = startPosition.z + Math.sin(rotation) * width
-    const endYMarker = new THREE.Mesh(
-      new THREE.BoxGeometry(0.1, 0.1, 0.1),
-      new THREE.MeshBasicMaterial({ color: 0x00_00_ff })
-    )
+    const endYMarker = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0x00_00_ff }))
     endYMarker.position.set(startPosition.x, startPosition.y + height, startPosition.z)
     debugGroup.add(endYMarker)
 
     // Add a marker at the width endpoint
-    const endWidthMarker = new THREE.Mesh(
-      new THREE.BoxGeometry(0.1, 0.1, 0.1),
-      new THREE.MeshBasicMaterial({ color: 0xff_ff_00 })
-    )
+    const endWidthMarker = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xff_ff_00 }))
     endWidthMarker.position.set(endX, startPosition.y, endZ)
     debugGroup.add(endWidthMarker)
 
     // Add a marker at the corner diagonal endpoint (both width and height)
-    const endCornerMarker = new THREE.Mesh(
-      new THREE.BoxGeometry(0.1, 0.1, 0.1),
-      new THREE.MeshBasicMaterial({ color: 0xff_00_ff })
-    )
+    const endCornerMarker = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xff_00_ff }))
     endCornerMarker.position.set(endX, startPosition.y + height, endZ)
     debugGroup.add(endCornerMarker)
 
@@ -624,12 +613,7 @@ export class ThreeJsMedia {
       this.worldRenderer.sceneOrigin.toSceneY(startPosition.y),
       this.worldRenderer.sceneOrigin.toSceneZ(startPosition.z)
     )
-    const directionHelper = new THREE.ArrowHelper(
-      new THREE.Vector3(Math.cos(rotation), 0, Math.sin(rotation)),
-      sceneStartPos,
-      1,
-      0xff_00_00
-    )
+    const directionHelper = new THREE.ArrowHelper(new THREE.Vector3(Math.cos(rotation), 0, Math.sin(rotation)), sceneStartPos, 1, 0xff_00_00)
     debugGroup.add(directionHelper)
 
     return {
@@ -708,8 +692,7 @@ export class ThreeJsMedia {
       // Find if this object belongs to any media
       for (const [id, videoData] of this.customMedia.entries()) {
         // Check if the intersected object is part of our media mesh
-        if (intersectedObject === videoData.mesh ||
-          videoData.mesh.children.includes(intersectedObject)) {
+        if (intersectedObject === videoData.mesh || videoData.mesh.children.includes(intersectedObject)) {
           const { uv } = intersection
           if (uv) {
             const result = {