FIX PERF fix critical perf issues with many waypoints

Author: zardoy

renderer/viewer/three/waypointSprite.ts

@@ -61,6 +61,10 @@ export function createWaypointSprite (options: {
   sprite.renderOrder = 10
   let currentLabel = options.label ?? ''
 
+  // Performance optimization: cache distance text to avoid unnecessary updates
+  let lastDistanceText = '0m'
+  let lastDistance = 0
+
   // Offscreen arrow (detached by default)
   let arrowSprite: THREE.Sprite | undefined
   let arrowParent: THREE.Object3D | null = null
@@ -94,6 +98,12 @@ export function createWaypointSprite (options: {
   }
 
   function updateDistanceText (label: string, distanceText: string) {
+    // Performance optimization: only update if distance text actually changed
+    if (distanceText === lastDistanceText) {
+      return
+    }
+    lastDistanceText = distanceText
+
     const canvas = drawCombinedCanvas(color, label, distanceText)
     const texture = new THREE.CanvasTexture(canvas)
     const mat = sprite.material
@@ -288,8 +298,14 @@ export function createWaypointSprite (options: {
     const distance = computeDistance(cameraPosition)
     // Keep constant pixel size
     updateScaleScreenPixels(cameraPosition, camera.fov, distance, viewportHeightPx)
-    // Update text
-    updateDistanceText(currentLabel, `${Math.round(distance)}m`)
+
+    // Performance optimization: only update distance text if distance changed significantly
+    const roundedDistance = Math.round(distance)
+    if (Math.abs(roundedDistance - lastDistance) >= 1) {
+      lastDistance = roundedDistance
+      updateDistanceText(currentLabel, `${roundedDistance}m`)
+    }
+
     // Update arrow and visibility
     const onScreen = updateOffscreenArrow(camera, viewportWidthPx, viewportHeightPx)
     setVisible(onScreen)

renderer/viewer/three/waypoints.ts

@@ -24,13 +24,31 @@ export class WaypointsRenderer {
   private readonly waypoints = new Map<string, Waypoint>()
   private readonly waypointScene = new THREE.Scene()
 
+  // Performance optimization: cache camera position to reduce update frequency
+  private readonly lastCameraPosition = new THREE.Vector3()
+  private lastUpdateTime = 0
+  private readonly UPDATE_THROTTLE_MS = 16 // ~60fps max update rate
+
   constructor (
     private readonly worldRenderer: WorldRendererThree
   ) {
   }
 
   private updateWaypoints () {
+    const currentTime = performance.now()
     const playerPos = this.worldRenderer.cameraObject.position
+
+    // Performance optimization: throttle updates and check for significant camera movement
+    const cameraMovedSignificantly = this.lastCameraPosition.distanceTo(playerPos) > 0.5
+    const timeToUpdate = currentTime - this.lastUpdateTime > this.UPDATE_THROTTLE_MS
+
+    if (!cameraMovedSignificantly && !timeToUpdate) {
+      return // Skip update if camera hasn't moved much and not enough time passed
+    }
+
+    this.lastCameraPosition.copy(playerPos)
+    this.lastUpdateTime = currentTime
+
     const sizeVec = this.worldRenderer.renderer.getSize(new THREE.Vector2())
 
     for (const waypoint of this.waypoints.values()) {
@@ -112,6 +130,8 @@ export class WaypointsRenderer {
     this.addWaypoint('Test Point', 0, 70, 0, { color: 0x00_FF_00, label: 'Test Point' })
     this.addWaypoint('Spawn', 0, 64, 0, { color: 0xFF_FF_00, label: 'Spawn' })
     this.addWaypoint('Far Point', 100, 70, 100, { color: 0x00_00_FF, label: 'Far Point' })
+    this.addWaypoint('Far Point 2', 180, 170, 100, { color: 0x00_00_FF, label: 'Far Point 2' })
+    this.addWaypoint('Far Point 3', 1000, 100, 1000, { color: 0x00_00_FF, label: 'Far Point 3' })
   }
 
   getWaypoint (id: string): Waypoint | undefined {