fix(tessellation): force re-bake only when enabling auto or when caps change while auto is ON; keep manual slider semantics; tests green

Author: flyingrobots

src/App.tsx

@@ -491,15 +491,15 @@ function Demo() {
   }, [tessellationSegments])
 
   useEffect(() => {
-    ;(controllerRef.current as any)?.setTessellationAutoEnabled?.(autoTessellation)
+    controllerRef.current?.setTessellationAutoEnabled?.(autoTessellation)
   }, [autoTessellation])
 
   useEffect(() => {
-    ;(controllerRef.current as any)?.setTessellationMinMax?.(tessellationMin, tessellationMax)
+    controllerRef.current?.setTessellationMinMax?.(tessellationMin, tessellationMax)
   }, [tessellationMin, tessellationMax])
 
   useEffect(() => {
-    ;(controllerRef.current as any)?.setWorldSleepGuardEnabled?.(worldSleepGuard)
+    controllerRef.current?.setWorldSleepGuardEnabled?.(worldSleepGuard)
   }, [worldSleepGuard])
 
   useEffect(() => {
@@ -614,7 +614,7 @@ function Demo() {
           setSubsteps(1)
           setCameraZoom(1)
           setPointerColliderVisible(false)
-          setPinMode("top")
+          setPinMode("none")
           controllerRef.current?.setSleepConfig({ velocityThreshold: 0.001, frameThreshold: 60 })
           actionsRef.current?.setSleepConfig(0.001, 60)
         }}

src/engine/render/DebugOverlaySystem.ts

@@ -79,25 +79,38 @@ export class DebugOverlaySystem implements EngineSystem {
     if (visible) {
       mesh.position.set(this.state.pointer.x, this.state.pointer.y, 0.2)
       const r = Math.max(0.0005, Math.min(0.2, this.state.pointerRadius || 0.01))
-      // Compensate for orthographic anisotropy so the circle renders round on any viewport aspect.
-      // px/m along X = viewportWidth / worldWidth; px/m along Y = viewportHeight / worldHeight
-      const cam = this.view.camera
-      const worldWidth = Math.max(1e-6, (cam.right as number) - (cam.left as number))
-      const worldHeight = Math.max(1e-6, (cam.top as number) - (cam.bottom as number))
-      let viewportWidth = 1
-      let viewportHeight = 1
-      const anyView = this.view as unknown as { getViewportPixels?: () => { width: number; height: number } }
-      try {
-        const vp = anyView.getViewportPixels?.()
-        if (vp && vp.width && vp.height) {
-          viewportWidth = vp.width
-          viewportHeight = vp.height
+      // Try to compensate for orthographic anisotropy; fall back to uniform if anything is invalid.
+      const cam = this.view.camera as THREE.Camera & Partial<THREE.OrthographicCamera>
+      const maybeOrtho = cam as Partial<THREE.OrthographicCamera>
+      const left = Number((maybeOrtho.left as unknown) ?? NaN)
+      const right = Number((maybeOrtho.right as unknown) ?? NaN)
+      const top = Number((maybeOrtho.top as unknown) ?? NaN)
+      const bottom = Number((maybeOrtho.bottom as unknown) ?? NaN)
+      const hasOrthoExtents = [left, right, top, bottom].every((v) => Number.isFinite(v))
+      if (hasOrthoExtents) {
+        const worldWidth = Math.max(1e-6, right - left)
+        const worldHeight = Math.max(1e-6, top - bottom)
+        let viewportWidth = 1
+        let viewportHeight = 1
+        const anyView = this.view as unknown as { getViewportPixels?: () => { width: number; height: number } }
+        try {
+          const vp = anyView.getViewportPixels?.()
+          if (vp && Number.isFinite(vp.width) && Number.isFinite(vp.height) && vp.width > 0 && vp.height > 0) {
+            viewportWidth = vp.width
+            viewportHeight = vp.height
+          }
+        } catch { /* no-op */ }
+        const pxPerMeterX = viewportWidth / worldWidth
+        const pxPerMeterY = viewportHeight / worldHeight
+        const k = pxPerMeterX / pxPerMeterY
+        if (Number.isFinite(k) && k > 0) {
+          mesh.scale.set(r, r * k, 1)
+        } else {
+          mesh.scale.set(r, r, 1)
         }
-      } catch {}
-      const pxPerMeterX = viewportWidth / worldWidth
-      const pxPerMeterY = viewportHeight / worldHeight
-      const k = pxPerMeterX / pxPerMeterY // scale Y to match X pixels-per-meter
-      mesh.scale.set(r, r * k, 1)
+      } else {
+        mesh.scale.set(r, r, 1)
+      }
     }
     // Render other gizmos independently of pointer visibility
     this.drawAABBs(!!this.state.drawAABBs)

src/lib/clothSceneController.ts

@@ -587,10 +587,26 @@ export class ClothSceneController {
 
     // Defensive: recycle static mount before switching the mesh into "cloth" mode to avoid any
     // possibility of a duplicate staying behind due to external mounts.
-    try { this.pool.recycle(element) } catch {}
+    try {
+      this.pool.recycle(element)
+    } catch (e) {
+      // Non-fatal: log and continue activation path
+      console.warn('ClothSceneController: failed to recycle static mesh before activation', {
+        elementId: element.id,
+        error: e,
+      })
+    }
     this.pool.resetGeometry(element)
     // Re-attach the same mesh explicitly so the scene contains exactly one instance.
-    try { this.domToWebGL.addMesh(record.mesh) } catch {}
+    try {
+      this.domToWebGL.addMesh(record.mesh)
+    } catch (e) {
+      // Non-fatal: log and continue; the mesh may already be attached
+      console.warn('ClothSceneController: failed to add mesh after recycle during activation', {
+        elementId: element.id,
+        error: e,
+      })
+    }
 
     const cloth = new ClothPhysics(record.mesh, {
       damping: 0.985,
@@ -949,11 +965,11 @@ export class ClothSceneController {
     }
   }
 
-  async setTessellationSegments(segments: number) {
+  async setTessellationSegments(segments: number, force = false) {
     const pool = this.pool
     if (!pool) return
     const clamped = Math.max(1, Math.min(segments, 32))
-    if (this.debug.tessellationSegments === clamped) return
+    if (!force && this.debug.tessellationSegments === clamped) return
     this.debug.tessellationSegments = clamped
 
     const tasks: Promise<void>[] = []
@@ -982,6 +998,9 @@ export class ClothSceneController {
   /** Enables/disables automatic tessellation based on on-screen size. */
   setTessellationAutoEnabled(enabled: boolean) {
     this.debug.autoTessellation = !!enabled
+    if (this.debug.autoTessellation) {
+      void this.setTessellationSegments(this.debug.tessellationSegments, true)
+    }
   }
 
   /** Sets the min/max caps used by auto tessellation. */
@@ -990,6 +1009,9 @@ export class ClothSceneController {
     const ma = Math.max(mi + 2, Math.min(48, Math.round(max)))
     this.debug.tessellationMin = mi
     this.debug.tessellationMax = ma
+    if (this.debug.autoTessellation) {
+      void this.setTessellationSegments(this.debug.tessellationSegments, true)
+    }
   }
 
   // setPointerColliderVisible removed in favour of DebugOverlaySystem