@ifc-lite/viewer 1.1.7 → 1.6.0

package/src/components/viewer/Viewport.tsx

@@ -6,56 +6,176 @@
  * 3D viewport component
  */
 
-import { useEffect, useRef, useState } from 'react';
-import { Renderer, MathUtils } from '@ifc-lite/renderer';
+import { useEffect, useRef, useState, useMemo } from 'react';
+import { Renderer, MathUtils, type SnapTarget, type PickResult } from '@ifc-lite/renderer';
 import type { MeshData, CoordinateInfo } from '@ifc-lite/geometry';
-import { useViewerStore, type MeasurePoint } from '@/store';
+import { useViewerStore, type MeasurePoint, type SnapVisualization } from '@/store';
+import {
+  useSelectionState,
+  useVisibilityState,
+  useToolState,
+  useMeasurementState,
+  useCameraState,
+  useHoverState,
+  useThemeState,
+  useContextMenuState,
+  useColorUpdateState,
+  useIfcDataState,
+} from '../../hooks/useViewerSelectors.js';
+import { useModelSelection } from '../../hooks/useModelSelection.js';
+import {
+  getEntityBounds,
+  getEntityCenter,
+  buildRenderOptions,
+  getRenderThrottleMs,
+  getThemeClearColor,
+  calculateScaleBarSize,
+  type ViewportStateRefs,
+} from '../../utils/viewportUtils.js';
+import { setGlobalCanvasRef, setGlobalRendererRef, clearGlobalRefs } from '../../hooks/useBCF.js';
 
 interface ViewportProps {
   geometry: MeshData[] | null;
   coordinateInfo?: CoordinateInfo;
+  computedIsolatedIds?: Set<number> | null;
+  modelIdToIndex?: Map<string, number>;
 }
 
-export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
+export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelIdToIndex }: ViewportProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
-  const selectedEntityId = useViewerStore((state) => state.selectedEntityId);
-  const setSelectedEntityId = useViewerStore((state) => state.setSelectedEntityId);
-  const hiddenEntities = useViewerStore((state) => state.hiddenEntities);
-  const isolatedEntities = useViewerStore((state) => state.isolatedEntities);
-  const activeTool = useViewerStore((state) => state.activeTool);
-  const updateCameraRotationRealtime = useViewerStore((state) => state.updateCameraRotationRealtime);
-  const updateScaleRealtime = useViewerStore((state) => state.updateScaleRealtime);
-  const setCameraCallbacks = useViewerStore((state) => state.setCameraCallbacks);
-  const theme = useViewerStore((state) => state.theme);
-
-  // New store subscriptions for enhanced features
-  const setHoverState = useViewerStore((state) => state.setHoverState);
-  const clearHover = useViewerStore((state) => state.clearHover);
-  const hoverTooltipsEnabled = useViewerStore((state) => state.hoverTooltipsEnabled);
-  const openContextMenu = useViewerStore((state) => state.openContextMenu);
-  const startBoxSelect = useViewerStore((state) => state.startBoxSelect);
-  const updateBoxSelect = useViewerStore((state) => state.updateBoxSelect);
-  const endBoxSelect = useViewerStore((state) => state.endBoxSelect);
-  const boxSelect = useViewerStore((state) => state.boxSelect);
-  const setSelectedEntityIds = useViewerStore((state) => state.setSelectedEntityIds);
-  const toggleSelection = useViewerStore((state) => state.toggleSelection);
-  const pendingMeasurePoint = useViewerStore((state) => state.pendingMeasurePoint);
-  const addMeasurePoint = useViewerStore((state) => state.addMeasurePoint);
-  const completeMeasurement = useViewerStore((state) => state.completeMeasurement);
-  const sectionPlane = useViewerStore((state) => state.sectionPlane);
+
+  // Selection state
+  const { selectedEntityId, selectedEntityIds, setSelectedEntityId, setSelectedEntity, toggleSelection, models } = useSelectionState();
+  const selectedEntity = useViewerStore((s) => s.selectedEntity);
+  // Get the bulletproof store-based resolver (more reliable than singleton)
+  const resolveGlobalIdFromModels = useViewerStore((s) => s.resolveGlobalIdFromModels);
+
+  // Sync selectedEntityId with model-aware selectedEntity for PropertiesPanel
+  useModelSelection();
+
+  // Create reverse mapping from modelIndex to modelId for selection
+  const modelIndexToId = useMemo(() => {
+    if (!modelIdToIndex) return new Map<number, string>();
+    const reverse = new Map<number, string>();
+    for (const [modelId, index] of modelIdToIndex) {
+      reverse.set(index, modelId);
+    }
+    return reverse;
+  }, [modelIdToIndex]);
+
+  // Compute selectedModelIndex for renderer (multi-model selection highlighting)
+  const selectedModelIndex = selectedEntity && modelIdToIndex
+    ? modelIdToIndex.get(selectedEntity.modelId) ?? undefined
+    : undefined;
+
+  // Helper to handle pick result and set selection properly
+  // IMPORTANT: pickResult.expressId is now a globalId (transformed at load time)
+  // We use the store-based resolver to find (modelId, originalExpressId)
+  // This is more reliable than the singleton registry which can have bundling issues
+  const handlePickForSelection = (pickResult: PickResult | null) => {
+    if (!pickResult) {
+      setSelectedEntityId(null);
+      return;
+    }
+
+    const globalId = pickResult.expressId;
+
+    // Set globalId for renderer (highlighting uses globalIds directly)
+    setSelectedEntityId(globalId);
+
+    // Resolve globalId -> (modelId, originalExpressId) for property panel
+    // Use store-based resolver instead of singleton for reliability
+    const resolved = resolveGlobalIdFromModels(globalId);
+    if (resolved) {
+      // Set the EntityRef with ORIGINAL expressId (for property lookup in IfcDataStore)
+      setSelectedEntity({ modelId: resolved.modelId, expressId: resolved.expressId });
+    } else {
+      // Fallback for single-model mode (offset = 0, globalId = expressId)
+      // Try to find model from the old modelIndex if available
+      if (pickResult.modelIndex !== undefined && modelIndexToId) {
+        const modelId = modelIndexToId.get(pickResult.modelIndex);
+        if (modelId) {
+          setSelectedEntity({ modelId, expressId: globalId });
+        }
+      }
+    }
+  };
+
+  // Visibility state - use computedIsolatedIds from parent (includes storey selection)
+  // Fall back to store isolation if computedIsolatedIds is not provided
+  const { hiddenEntities, isolatedEntities: storeIsolatedEntities } = useVisibilityState();
+  const isolatedEntities = computedIsolatedIds ?? storeIsolatedEntities ?? null;
+
+  // Tool state
+  const { activeTool, sectionPlane } = useToolState();
+
+  // Camera state
+  const { updateCameraRotationRealtime, updateScaleRealtime, setCameraCallbacks } = useCameraState();
+
+  // Theme state
+  const { theme } = useThemeState();
+
+  // Hover state
+  const { hoverTooltipsEnabled, setHoverState, clearHover } = useHoverState();
+
+  // Context menu state
+  const { openContextMenu } = useContextMenuState();
+
+  // Measurement state
+  const {
+    measurements,
+    pendingMeasurePoint,
+    activeMeasurement,
+    addMeasurePoint,
+    completeMeasurement,
+    startMeasurement,
+    updateMeasurement,
+    finalizeMeasurement,
+    cancelMeasurement,
+    updateMeasurementScreenCoords,
+    snapEnabled,
+    setSnapTarget,
+    setSnapVisualization,
+    edgeLockState,
+    setEdgeLock,
+    updateEdgeLockPosition,
+    clearEdgeLock,
+    incrementEdgeLockStrength,
+    measurementConstraintEdge,
+    setMeasurementConstraintEdge,
+    updateConstraintActiveAxis,
+  } = useMeasurementState();
+
+  // Color update state
+  const { pendingColorUpdates, clearPendingColorUpdates } = useColorUpdateState();
+
+  // IFC data state
+  const { ifcDataStore } = useIfcDataState();
+
+  // Calculate section plane range based on actual geometry bounds for current axis
+  const sectionRange = useMemo(() => {
+    if (!coordinateInfo?.shiftedBounds) return null;
+
+    const bounds = coordinateInfo.shiftedBounds;
+
+    // Map semantic axis to coordinate axis
+    const axisKey = sectionPlane.axis === 'side' ? 'x' : sectionPlane.axis === 'down' ? 'y' : 'z';
+
+    const min = bounds.min[axisKey];
+    const max = bounds.max[axisKey];
+
+    return Number.isFinite(min) && Number.isFinite(max) ? { min, max } : null;
+  }, [coordinateInfo, sectionPlane.axis]);
 
   // Theme-aware clear color ref (updated when theme changes)
-  const clearColorRef = useRef<[number, number, number, number]>([0.1, 0.1, 0.1, 1]);
+  // Tokyo Night storm: #1a1b26 = rgb(26, 27, 38)
+  const clearColorRef = useRef<[number, number, number, number]>([0.102, 0.106, 0.149, 1]);
 
   useEffect(() => {
     // Update clear color when theme changes
-    if (theme === 'light') {
-      clearColorRef.current = [0.95, 0.95, 0.95, 1]; // Light gray/white for light mode
-    } else {
-      clearColorRef.current = [0.1, 0.1, 0.1, 1]; // Dark gray for dark mode
-    }
+    clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark');
     // Re-render with new clear color
     const renderer = rendererRef.current;
     if (renderer && isInitialized) {
@@ -63,6 +183,7 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         hiddenIds: hiddenEntitiesRef.current,
         isolatedIds: isolatedEntitiesRef.current,
         selectedId: selectedEntityIdRef.current,
+        selectedModelIndex: selectedModelIndexRef.current,
         clearColor: clearColorRef.current,
       });
     }
@@ -89,6 +210,12 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
     touches: [] as Touch[],
     lastDistance: 0,
     lastCenter: { x: 0, y: 0 },
+    // Tap detection for mobile selection
+    tapStartTime: 0,
+    tapStartPos: { x: 0, y: 0 },
+    didMove: false,
+    // Track if multi-touch occurred (prevents false tap-select after pinch/zoom)
+    multiTouch: false,
   });
 
   // Double-click detection
@@ -110,14 +237,23 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
     max: { x: 100, y: 100, z: 100 },
   });
 
+  // Coordinate info ref for camera callbacks (to access latest buildingRotation)
+  const coordinateInfoRef = useRef<CoordinateInfo | undefined>(coordinateInfo);
+
   // Visibility state refs for animation loop
   const hiddenEntitiesRef = useRef<Set<number>>(hiddenEntities);
   const isolatedEntitiesRef = useRef<Set<number> | null>(isolatedEntities);
   const selectedEntityIdRef = useRef<number | null>(selectedEntityId);
+  const selectedEntityIdsRef = useRef<Set<number> | undefined>(selectedEntityIds);
+  const selectedModelIndexRef = useRef<number | undefined>(selectedModelIndex);
   const activeToolRef = useRef<string>(activeTool);
   const pendingMeasurePointRef = useRef<MeasurePoint | null>(pendingMeasurePoint);
+  const activeMeasurementRef = useRef(activeMeasurement);
+  const snapEnabledRef = useRef(snapEnabled);
+  const edgeLockStateRef = useRef(edgeLockState);
+  const measurementConstraintEdgeRef = useRef(measurementConstraintEdge);
   const sectionPlaneRef = useRef(sectionPlane);
-  const boxSelectRef = useRef(boxSelect);
+  const sectionRangeRef = useRef<{ min: number; max: number } | null>(null);
   const geometryRef = useRef<MeshData[] | null>(geometry);
 
   // Hover throttling
@@ -125,15 +261,51 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
   const hoverThrottleMs = 50; // Check hover every 50ms
   const hoverTooltipsEnabledRef = useRef(hoverTooltipsEnabled);
 
+  // Measure tool throttling (adaptive based on raycast performance)
+  const measureRaycastPendingRef = useRef(false);
+  const measureRaycastFrameRef = useRef<number | null>(null);
+  const lastMeasureRaycastDurationRef = useRef<number>(0);
+  // Hover-only snap detection throttling (100ms = 10fps max for hover, 60fps for active measurement)
+  const lastHoverSnapTimeRef = useRef<number>(0);
+  const HOVER_SNAP_THROTTLE_MS = 100;
+  // Skip visualization updates if raycast was slow (prevents UI freezes)
+  const SLOW_RAYCAST_THRESHOLD_MS = 50;
+
+  // Render throttling during orbit/pan
+  // Adaptive: 16ms (60fps) for small models, up to 33ms (30fps) for very large models
+  const lastRenderTimeRef = useRef<number>(0);
+  const renderPendingRef = useRef<boolean>(false);
+  const RENDER_THROTTLE_MS_SMALL = 16;  // ~60fps for models < 10K meshes
+  const RENDER_THROTTLE_MS_LARGE = 25;  // ~40fps for models 10K-50K meshes
+  const RENDER_THROTTLE_MS_HUGE = 33;   // ~30fps for models > 50K meshes
+
+  // Camera state tracking for measurement updates (only update when camera actually moved)
+  const lastCameraStateRef = useRef<{
+    position: { x: number; y: number; z: number };
+    rotation: { azimuth: number; elevation: number };
+    distance: number;
+    canvasWidth: number;
+    canvasHeight: number;
+  } | null>(null);
+
   // Keep refs in sync
+  useEffect(() => { coordinateInfoRef.current = coordinateInfo; }, [coordinateInfo]);
   useEffect(() => { hiddenEntitiesRef.current = hiddenEntities; }, [hiddenEntities]);
   useEffect(() => { isolatedEntitiesRef.current = isolatedEntities; }, [isolatedEntities]);
   useEffect(() => { selectedEntityIdRef.current = selectedEntityId; }, [selectedEntityId]);
+  useEffect(() => { selectedEntityIdsRef.current = selectedEntityIds; }, [selectedEntityIds]);
+  useEffect(() => { selectedModelIndexRef.current = selectedModelIndex; }, [selectedModelIndex]);
   useEffect(() => { activeToolRef.current = activeTool; }, [activeTool]);
   useEffect(() => { pendingMeasurePointRef.current = pendingMeasurePoint; }, [pendingMeasurePoint]);
+  useEffect(() => { activeMeasurementRef.current = activeMeasurement; }, [activeMeasurement]);
+  useEffect(() => { snapEnabledRef.current = snapEnabled; }, [snapEnabled]);
+  useEffect(() => { edgeLockStateRef.current = edgeLockState; }, [edgeLockState]);
+  useEffect(() => { measurementConstraintEdgeRef.current = measurementConstraintEdge; }, [measurementConstraintEdge]);
   useEffect(() => { sectionPlaneRef.current = sectionPlane; }, [sectionPlane]);
-  useEffect(() => { boxSelectRef.current = boxSelect; }, [boxSelect]);
-  useEffect(() => { geometryRef.current = geometry; }, [geometry]);
+  useEffect(() => { sectionRangeRef.current = sectionRange; }, [sectionRange]);
+  useEffect(() => {
+    geometryRef.current = geometry;
+  }, [geometry]);
   useEffect(() => {
     hoverTooltipsEnabledRef.current = hoverTooltipsEnabled;
     if (!hoverTooltipsEnabled) {
@@ -142,6 +314,34 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
     }
   }, [hoverTooltipsEnabled, clearHover]);
 
+  // Cleanup measurement state when tool changes + set cursor
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    if (activeTool !== 'measure') {
+      // Cancel any active measurement
+      if (activeMeasurement) {
+        cancelMeasurement();
+      }
+      // Clear pending raycast requests
+      if (measureRaycastFrameRef.current !== null) {
+        cancelAnimationFrame(measureRaycastFrameRef.current);
+        measureRaycastFrameRef.current = null;
+        measureRaycastPendingRef.current = false;
+      }
+    }
+
+    // Set cursor based on active tool
+    if (activeTool === 'measure') {
+      canvas.style.cursor = 'crosshair';
+    } else if (activeTool === 'pan' || activeTool === 'orbit') {
+      canvas.style.cursor = 'grab';
+    } else {
+      canvas.style.cursor = 'default';
+    }
+  }, [activeTool, activeMeasurement, cancelMeasurement]);
+
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -151,8 +351,15 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
     let aborted = false;
     let resizeObserver: ResizeObserver | null = null;
 
+    // Helper to align canvas dimensions to WebGPU requirements
+    // WebGPU texture row pitch must be aligned to 256 bytes
+    // For RGBA (4 bytes/pixel), width should be multiple of 64 pixels
+    const alignToWebGPU = (size: number): number => {
+      return Math.max(64, Math.floor(size / 64) * 64);
+    };
+
     const rect = canvas.getBoundingClientRect();
-    const width = Math.max(1, Math.floor(rect.width));
+    const width = alignToWebGPU(Math.max(1, Math.floor(rect.width)));
     const height = Math.max(1, Math.floor(rect.height));
     canvas.width = width;
     canvas.height = height;
@@ -160,6 +367,10 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
     const renderer = new Renderer(canvas);
     rendererRef.current = renderer;
 
+    // Register refs for BCF hook access (snapshot capture, camera control)
+    setGlobalCanvasRef(canvasRef);
+    setGlobalRendererRef(rendererRef);
+
     renderer.init().then(() => {
       if (aborted) return;
 
@@ -169,74 +380,94 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
       const mouseState = mouseStateRef.current;
       const touchState = touchStateRef.current;
 
-      // Helper function to get entity bounds (min/max) - defined early for callbacks
-      function getEntityBounds(
-        geom: MeshData[] | null,
-        entityId: number
-      ): { min: { x: number; y: number; z: number }; max: { x: number; y: number; z: number } } | null {
-        if (!geom) {
-          console.warn('[Viewport] getEntityBounds: geometry is null');
-          return null;
-        }
-        const mesh = geom.find(m => m.expressId === entityId);
-        if (!mesh) {
-          console.warn(`[Viewport] getEntityBounds: mesh not found for entityId ${entityId}`);
-          return null;
-        }
-        if (mesh.positions.length < 3) {
-          console.warn(`[Viewport] getEntityBounds: mesh has insufficient positions for entityId ${entityId}`);
-          return null;
-        }
-
-        let minX = Infinity, minY = Infinity, minZ = Infinity;
-        let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
-
-        for (let i = 0; i < mesh.positions.length; i += 3) {
-          const x = mesh.positions[i];
-          const y = mesh.positions[i + 1];
-          const z = mesh.positions[i + 2];
-          minX = Math.min(minX, x);
-          minY = Math.min(minY, y);
-          minZ = Math.min(minZ, z);
-          maxX = Math.max(maxX, x);
-          maxY = Math.max(maxY, y);
-          maxZ = Math.max(maxZ, z);
-        }
-
+      // Helper function to get current pick options with visibility filtering
+      // This ensures users can only select visible elements (respects hide/isolate/type visibility)
+      function getPickOptions() {
+        const currentProgress = useViewerStore.getState().progress;
+        const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
         return {
-          min: { x: minX, y: minY, z: minZ },
-          max: { x: maxX, y: maxY, z: maxZ },
+          isStreaming: currentIsStreaming,
+          hiddenIds: hiddenEntitiesRef.current,
+          isolatedIds: isolatedEntitiesRef.current,
         };
       }
 
-      // Helper function to get entity center from geometry (uses bounding box center)
-      function getEntityCenter(
-        geom: MeshData[] | null,
-        entityId: number
-      ): { x: number; y: number; z: number } | null {
-        const bounds = getEntityBounds(geom, entityId);
-        if (bounds) {
-          return {
-            x: (bounds.min.x + bounds.max.x) / 2,
-            y: (bounds.min.y + bounds.max.y) / 2,
-            z: (bounds.min.z + bounds.max.z) / 2,
+      // Helper function to compute snap visualization (edge highlights, sliding dot, corner rings, plane indicators)
+      // Stores 3D coordinates so edge highlights stay positioned correctly during camera rotation
+      function updateSnapVisualization(snapTarget: SnapTarget | null, edgeLockInfo?: { edgeT: number; isCorner: boolean; cornerValence: number }) {
+        if (!snapTarget || !canvas) {
+          setSnapVisualization(null);
+          return;
+        }
+
+        const viz: Partial<SnapVisualization> = {};
+
+        // For edge snaps: store 3D world coordinates (will be projected to screen by ToolOverlays)
+        if ((snapTarget.type === 'edge' || snapTarget.type === 'vertex') && snapTarget.metadata?.vertices) {
+          const [v0, v1] = snapTarget.metadata.vertices;
+
+          // Store 3D coordinates - these will be projected dynamically during rendering
+          viz.edgeLine3D = {
+            v0: { x: v0.x, y: v0.y, z: v0.z },
+            v1: { x: v1.x, y: v1.y, z: v1.z },
           };
+
+          // Add sliding dot t-parameter along the edge
+          if (edgeLockInfo) {
+            viz.slidingDot = { t: edgeLockInfo.edgeT };
+
+            // Add corner rings if at a corner with high valence
+            if (edgeLockInfo.isCorner && edgeLockInfo.cornerValence >= 2) {
+              viz.cornerRings = {
+                atStart: edgeLockInfo.edgeT < 0.5,
+                valence: edgeLockInfo.cornerValence,
+              };
+            }
+          } else {
+            // No edge lock info - calculate t from snap position
+            const edge = { x: v1.x - v0.x, y: v1.y - v0.y, z: v1.z - v0.z };
+            const toSnap = { x: snapTarget.position.x - v0.x, y: snapTarget.position.y - v0.y, z: snapTarget.position.z - v0.z };
+            const edgeLenSq = edge.x * edge.x + edge.y * edge.y + edge.z * edge.z;
+            const t = edgeLenSq > 0 ? (toSnap.x * edge.x + toSnap.y * edge.y + toSnap.z * edge.z) / edgeLenSq : 0.5;
+            viz.slidingDot = { t: Math.max(0, Math.min(1, t)) };
+          }
+        }
+
+        // For face snaps: show plane indicator (still screen-space since it's just an indicator)
+        if ((snapTarget.type === 'face' || snapTarget.type === 'face_center') && snapTarget.normal) {
+          const pos = camera.projectToScreen(snapTarget.position, canvas.width, canvas.height);
+          if (pos) {
+            viz.planeIndicator = {
+              x: pos.x,
+              y: pos.y,
+              normal: snapTarget.normal,
+            };
+          }
         }
-        return null;
+
+        setSnapVisualization(viz);
       }
 
+      // Note: getEntityBounds and getEntityCenter are now imported from viewportUtils.ts
+
       // Register camera callbacks for ViewCube and other controls
       setCameraCallbacks({
         setPresetView: (view) => {
           // Pass actual geometry bounds to avoid distance drift
-          camera.setPresetView(view, geometryBoundsRef.current);
+          const rotation = coordinateInfoRef.current?.buildingRotation;
+          camera.setPresetView(view, geometryBoundsRef.current, rotation);
           // Initial render - animation loop will continue rendering during animation
           renderer.render({
             hiddenIds: hiddenEntitiesRef.current,
             isolatedIds: isolatedEntitiesRef.current,
             selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
-            sectionPlane: sectionPlaneRef.current.enabled ? sectionPlaneRef.current : undefined,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
           });
           calculateScale();
         },
@@ -256,8 +487,13 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
             hiddenIds: hiddenEntitiesRef.current,
             isolatedIds: isolatedEntitiesRef.current,
             selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
-            sectionPlane: sectionPlaneRef.current.enabled ? sectionPlaneRef.current : undefined,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
           });
           calculateScale();
         },
@@ -267,8 +503,13 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
             hiddenIds: hiddenEntitiesRef.current,
             isolatedIds: isolatedEntitiesRef.current,
             selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
-            sectionPlane: sectionPlaneRef.current.enabled ? sectionPlaneRef.current : undefined,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
           });
           calculateScale();
         },
@@ -295,12 +536,23 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
             hiddenIds: hiddenEntitiesRef.current,
             isolatedIds: isolatedEntitiesRef.current,
             selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
-            sectionPlane: sectionPlaneRef.current.enabled ? sectionPlaneRef.current : undefined,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
           });
           updateCameraRotationRealtime(camera.getRotation());
           calculateScale();
         },
+        projectToScreen: (worldPos: { x: number; y: number; z: number }) => {
+          // Project 3D world position to 2D screen coordinates
+          const canvas = canvasRef.current;
+          if (!canvas) return null;
+          return camera.projectToScreen(worldPos, canvas.width, canvas.height);
+        },
       });
 
       // Calculate scale bar value (world-space size for 96px scale bar)
@@ -333,24 +585,73 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
             hiddenIds: hiddenEntitiesRef.current,
             isolatedIds: isolatedEntitiesRef.current,
             selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
-            sectionPlane: sectionPlaneRef.current.enabled ? sectionPlaneRef.current : undefined,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
           });
           // Update ViewCube during camera animation (e.g., preset view transitions)
           updateCameraRotationRealtime(camera.getRotation());
           calculateScale();
-        } else if (!mouseState.isDragging && currentTime - lastRotationUpdate > 100) {
-          // Update camera rotation for ViewCube when not dragging (throttled)
+        } else if (!mouseState.isDragging && currentTime - lastRotationUpdate > 500) {
+          // Update camera rotation for ViewCube when not dragging (throttled to every 500ms when idle)
           updateCameraRotationRealtime(camera.getRotation());
           lastRotationUpdate = currentTime;
         }
 
-        // Update scale bar (throttled to every 100ms)
-        if (currentTime - lastScaleUpdate > 100) {
+        // Update scale bar (throttled to every 500ms - scale rarely needs frequent updates)
+        if (currentTime - lastScaleUpdate > 500) {
           calculateScale();
           lastScaleUpdate = currentTime;
         }
 
+        // Update measurement screen coordinates only when:
+        // 1. Measure tool is active (not in other modes)
+        // 2. Measurements exist
+        // 3. Camera actually changed
+        // This prevents unnecessary store updates and re-renders when not measuring
+        if (activeToolRef.current === 'measure') {
+          const state = useViewerStore.getState();
+          if (state.measurements.length > 0 || state.activeMeasurement) {
+            const canvas = canvasRef.current;
+            if (canvas) {
+              const cameraPos = camera.getPosition();
+              const cameraRot = camera.getRotation();
+              const cameraDist = camera.getDistance();
+              const currentCameraState = {
+                position: cameraPos,
+                rotation: cameraRot,
+                distance: cameraDist,
+                canvasWidth: canvas.width,
+                canvasHeight: canvas.height,
+              };
+
+              // Check if camera state changed
+              const lastState = lastCameraStateRef.current;
+              const cameraChanged =
+                !lastState ||
+                lastState.position.x !== currentCameraState.position.x ||
+                lastState.position.y !== currentCameraState.position.y ||
+                lastState.position.z !== currentCameraState.position.z ||
+                lastState.rotation.azimuth !== currentCameraState.rotation.azimuth ||
+                lastState.rotation.elevation !== currentCameraState.rotation.elevation ||
+                lastState.distance !== currentCameraState.distance ||
+                lastState.canvasWidth !== currentCameraState.canvasWidth ||
+                lastState.canvasHeight !== currentCameraState.canvasHeight;
+
+              if (cameraChanged) {
+                lastCameraStateRef.current = currentCameraState;
+                updateMeasurementScreenCoords((worldPos) => {
+                  return camera.projectToScreen(worldPos, canvas.width, canvas.height);
+                });
+              }
+            }
+          }
+        }
+
         animationFrameRef.current = requestAnimationFrame(animate);
       };
       lastFrameTimeRef.current = performance.now();
@@ -370,13 +671,6 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         // Determine action based on active tool and mouse button
         const tool = activeToolRef.current;
 
-        // Box selection tool
-        if (tool === 'boxselect' && e.button === 0) {
-          startBoxSelect(e.clientX, e.clientY);
-          canvas.style.cursor = 'crosshair';
-          return;
-        }
-
         const willOrbit = !(tool === 'pan' || e.button === 1 || e.button === 2 ||
           (tool === 'select' && e.shiftKey) ||
           (tool !== 'orbit' && tool !== 'select' && e.shiftKey));
@@ -389,11 +683,10 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           const y = e.clientY - rect.top;
 
           // Pick at cursor position - orbit around what user is clicking on
-          const currentProgress = useViewerStore.getState().progress;
-          const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
-          const pickedId = await renderer.pick(x, y, { isStreaming: currentIsStreaming });
-          if (pickedId !== null) {
-            const center = getEntityCenter(geometryRef.current, pickedId);
+          // Uses visibility filtering so hidden elements don't affect orbit pivot
+          const pickResult = await renderer.pick(x, y, getPickOptions());
+          if (pickResult !== null) {
+            const center = getEntityCenter(geometryRef.current, pickResult.expressId);
             if (center) {
               camera.setOrbitPivot(center);
             } else {
@@ -416,8 +709,99 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           mouseState.isPanning = e.shiftKey;
           canvas.style.cursor = e.shiftKey ? 'move' : 'grabbing';
         } else if (tool === 'measure') {
-          // Measure tool - cursor indicates measurement mode
-          canvas.style.cursor = 'crosshair';
+          // Measure tool - shift+drag = orbit, normal drag = measure
+          if (e.shiftKey) {
+            // Shift pressed: allow orbit (not pan) when no measurement is active
+            mouseState.isDragging = true;
+            mouseState.isPanning = false;
+            canvas.style.cursor = 'grabbing';
+            // Fall through to allow orbit handling in mousemove
+          } else {
+            // Normal drag: start measurement
+            mouseState.isDragging = true; // Mark as dragging for measure tool
+            canvas.style.cursor = 'crosshair';
+
+            // Calculate canvas-relative coordinates
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+
+            // Use magnetic snap for better edge locking
+            const currentLock = edgeLockStateRef.current;
+            const result = renderer.raycastSceneMagnetic(x, y, {
+              edge: currentLock.edge,
+              meshExpressId: currentLock.meshExpressId,
+              lockStrength: currentLock.lockStrength,
+            }, {
+              hiddenIds: hiddenEntitiesRef.current,
+              isolatedIds: isolatedEntitiesRef.current,
+              snapOptions: snapEnabled ? {
+                snapToVertices: true,
+                snapToEdges: true,
+                snapToFaces: true,
+                screenSnapRadius: 60,
+              } : {
+                snapToVertices: false,
+                snapToEdges: false,
+                snapToFaces: false,
+                screenSnapRadius: 0,
+              },
+            });
+
+            if (result.intersection || result.snapTarget) {
+              const snapPoint = result.snapTarget || result.intersection;
+              const pos = snapPoint ? ('position' in snapPoint ? snapPoint.position : snapPoint.point) : null;
+
+              if (pos) {
+                // Project snapped 3D position to screen - measurement starts from indicator, not cursor
+                const screenPos = camera.projectToScreen(pos, canvas.width, canvas.height);
+                const measurePoint: MeasurePoint = {
+                  x: pos.x,
+                  y: pos.y,
+                  z: pos.z,
+                  screenX: screenPos?.x ?? x,
+                  screenY: screenPos?.y ?? y,
+                };
+
+                startMeasurement(measurePoint);
+
+                if (result.snapTarget) {
+                  setSnapTarget(result.snapTarget);
+                }
+
+                // Update edge lock state
+                if (result.edgeLock.shouldRelease) {
+                  clearEdgeLock();
+                  updateSnapVisualization(result.snapTarget || null);
+                } else if (result.edgeLock.shouldLock && result.edgeLock.edge) {
+                  setEdgeLock(result.edgeLock.edge, result.edgeLock.meshExpressId, result.edgeLock.edgeT);
+                  updateSnapVisualization(result.snapTarget, {
+                    edgeT: result.edgeLock.edgeT,
+                    isCorner: result.edgeLock.isCorner,
+                    cornerValence: result.edgeLock.cornerValence,
+                  });
+                } else {
+                  updateSnapVisualization(result.snapTarget);
+                }
+
+                // Set up orthogonal constraint for shift+drag - always use world axes
+                setMeasurementConstraintEdge({
+                  axes: {
+                    axis1: { x: 1, y: 0, z: 0 },  // World X
+                    axis2: { x: 0, y: 1, z: 0 },  // World Y (vertical)
+                    axis3: { x: 0, y: 0, z: 1 },  // World Z
+                  },
+                  colors: {
+                    axis1: '#F44336',  // Red - X axis
+                    axis2: '#8BC34A',  // Lime - Y axis (vertical)
+                    axis3: '#2196F3',  // Blue - Z axis
+                  },
+                  activeAxis: null,
+                });
+              }
+            }
+            return; // Early return for measure tool (non-shift)
+          }
         } else {
           // Default behavior
           mouseState.isPanning = e.shiftKey;
@@ -429,11 +813,259 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         const rect = canvas.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
+        const tool = activeToolRef.current;
+
+        // Handle measure tool live preview while dragging
+        // IMPORTANT: Check tool first, not activeMeasurement, to prevent orbit conflict
+        if (tool === 'measure' && mouseState.isDragging && activeMeasurementRef.current) {
+          // Only process measurement dragging if we have an active measurement
+          // If shift is held without active measurement, fall through to orbit handling
+
+          // Check if shift is held for orthogonal constraint
+          const useOrthogonalConstraint = e.shiftKey && measurementConstraintEdgeRef.current;
+
+          // Throttle raycasting to 60fps max using requestAnimationFrame
+          if (!measureRaycastPendingRef.current) {
+            measureRaycastPendingRef.current = true;
+
+            measureRaycastFrameRef.current = requestAnimationFrame(() => {
+              measureRaycastPendingRef.current = false;
+              measureRaycastFrameRef.current = null;
+
+              const raycastStart = performance.now();
+
+              // When using orthogonal constraint (shift held), use simpler raycasting
+              // since the final position will be projected onto an axis anyway
+              const snapEnabled = snapEnabledRef.current && !useOrthogonalConstraint;
+
+              // If last raycast was slow, reduce complexity to prevent UI freezes
+              const wasSlowLastTime = lastMeasureRaycastDurationRef.current > SLOW_RAYCAST_THRESHOLD_MS;
+              const reduceComplexity = wasSlowLastTime && !useOrthogonalConstraint;
+
+              // Use magnetic snap for edge sliding behavior (only when not in orthogonal mode)
+              const currentLock = useOrthogonalConstraint
+                ? { edge: null, meshExpressId: null, lockStrength: 0 }
+                : edgeLockStateRef.current;
+
+              const result = renderer.raycastSceneMagnetic(x, y, {
+                edge: currentLock.edge,
+                meshExpressId: currentLock.meshExpressId,
+                lockStrength: currentLock.lockStrength,
+              }, {
+                hiddenIds: hiddenEntitiesRef.current,
+                isolatedIds: isolatedEntitiesRef.current,
+                // Reduce snap complexity when using orthogonal constraint or when slow
+                snapOptions: snapEnabled ? {
+                  snapToVertices: !reduceComplexity, // Skip vertex snapping when slow
+                  snapToEdges: true,
+                  snapToFaces: true,
+                  screenSnapRadius: reduceComplexity ? 40 : 60, // Smaller radius when slow
+                } : useOrthogonalConstraint ? {
+                  // In orthogonal mode, snap to edges and vertices only (no faces)
+                  snapToVertices: true,
+                  snapToEdges: true,
+                  snapToFaces: false,
+                  screenSnapRadius: 40,
+                } : {
+                  snapToVertices: false,
+                  snapToEdges: false,
+                  snapToFaces: false,
+                  screenSnapRadius: 0,
+                },
+              });
+
+              // Track raycast duration for adaptive throttling
+              lastMeasureRaycastDurationRef.current = performance.now() - raycastStart;
+
+              if (result.intersection || result.snapTarget) {
+                const snapPoint = result.snapTarget || result.intersection;
+                let pos = snapPoint ? ('position' in snapPoint ? snapPoint.position : snapPoint.point) : null;
+
+                if (pos) {
+                  // Apply orthogonal constraint if shift is held and we have a constraint
+                  if (useOrthogonalConstraint && activeMeasurementRef.current) {
+                    const constraint = measurementConstraintEdgeRef.current!;
+                    const start = activeMeasurementRef.current.start;
+
+                    // Vector from start to cursor position
+                    const dx = pos.x - start.x;
+                    const dy = pos.y - start.y;
+                    const dz = pos.z - start.z;
+
+                    // Calculate dot product with each orthogonal axis
+                    const { axis1, axis2, axis3 } = constraint.axes;
+                    const dot1 = dx * axis1.x + dy * axis1.y + dz * axis1.z;
+                    const dot2 = dx * axis2.x + dy * axis2.y + dz * axis2.z;
+                    const dot3 = dx * axis3.x + dy * axis3.y + dz * axis3.z;
+
+                    // Find the axis with the largest absolute dot product (closest to cursor direction)
+                    const absDot1 = Math.abs(dot1);
+                    const absDot2 = Math.abs(dot2);
+                    const absDot3 = Math.abs(dot3);
+
+                    let activeAxis: 'axis1' | 'axis2' | 'axis3';
+                    let chosenDot: number;
+                    let chosenDir: { x: number; y: number; z: number };
+
+                    if (absDot1 >= absDot2 && absDot1 >= absDot3) {
+                      activeAxis = 'axis1';
+                      chosenDot = dot1;
+                      chosenDir = axis1;
+                    } else if (absDot2 >= absDot3) {
+                      activeAxis = 'axis2';
+                      chosenDot = dot2;
+                      chosenDir = axis2;
+                    } else {
+                      activeAxis = 'axis3';
+                      chosenDot = dot3;
+                      chosenDir = axis3;
+                    }
+
+                    // Project cursor position onto the chosen axis
+                    pos = {
+                      x: start.x + chosenDot * chosenDir.x,
+                      y: start.y + chosenDot * chosenDir.y,
+                      z: start.z + chosenDot * chosenDir.z,
+                    };
+
+                    // Update active axis for visualization
+                    updateConstraintActiveAxis(activeAxis);
+                  } else if (!useOrthogonalConstraint && measurementConstraintEdgeRef.current?.activeAxis) {
+                    // Clear active axis when shift is released
+                    updateConstraintActiveAxis(null);
+                  }
+
+                  // Project snapped 3D position to screen - indicator position, not raw cursor
+                  const screenPos = camera.projectToScreen(pos, canvas.width, canvas.height);
+                  const measurePoint: MeasurePoint = {
+                    x: pos.x,
+                    y: pos.y,
+                    z: pos.z,
+                    screenX: screenPos?.x ?? x,
+                    screenY: screenPos?.y ?? y,
+                  };
+
+                  updateMeasurement(measurePoint);
+                  setSnapTarget(result.snapTarget || null);
+
+                  // Update edge lock state and snap visualization (even in orthogonal mode)
+                  if (result.edgeLock.shouldRelease) {
+                    clearEdgeLock();
+                    updateSnapVisualization(result.snapTarget || null);
+                  } else if (result.edgeLock.shouldLock && result.edgeLock.edge) {
+                    // Check if we're on the same edge to preserve lock strength (hysteresis)
+                    const sameDirection = currentLock.edge &&
+                      Math.abs(currentLock.edge.v0.x - result.edgeLock.edge.v0.x) < 0.0001 &&
+                      Math.abs(currentLock.edge.v0.y - result.edgeLock.edge.v0.y) < 0.0001 &&
+                      Math.abs(currentLock.edge.v0.z - result.edgeLock.edge.v0.z) < 0.0001 &&
+                      Math.abs(currentLock.edge.v1.x - result.edgeLock.edge.v1.x) < 0.0001 &&
+                      Math.abs(currentLock.edge.v1.y - result.edgeLock.edge.v1.y) < 0.0001 &&
+                      Math.abs(currentLock.edge.v1.z - result.edgeLock.edge.v1.z) < 0.0001;
+                    const reversedDirection = currentLock.edge &&
+                      Math.abs(currentLock.edge.v0.x - result.edgeLock.edge.v1.x) < 0.0001 &&
+                      Math.abs(currentLock.edge.v0.y - result.edgeLock.edge.v1.y) < 0.0001 &&
+                      Math.abs(currentLock.edge.v0.z - result.edgeLock.edge.v1.z) < 0.0001 &&
+                      Math.abs(currentLock.edge.v1.x - result.edgeLock.edge.v0.x) < 0.0001 &&
+                      Math.abs(currentLock.edge.v1.y - result.edgeLock.edge.v0.y) < 0.0001 &&
+                      Math.abs(currentLock.edge.v1.z - result.edgeLock.edge.v0.z) < 0.0001;
+                    const isSameEdge = currentLock.edge &&
+                      currentLock.meshExpressId === result.edgeLock.meshExpressId &&
+                      (sameDirection || reversedDirection);
+
+                    if (isSameEdge) {
+                      updateEdgeLockPosition(result.edgeLock.edgeT, result.edgeLock.isCorner, result.edgeLock.cornerValence);
+                      incrementEdgeLockStrength();
+                    } else {
+                      setEdgeLock(result.edgeLock.edge, result.edgeLock.meshExpressId, result.edgeLock.edgeT);
+                      updateEdgeLockPosition(result.edgeLock.edgeT, result.edgeLock.isCorner, result.edgeLock.cornerValence);
+                    }
+                    updateSnapVisualization(result.snapTarget, {
+                      edgeT: result.edgeLock.edgeT,
+                      isCorner: result.edgeLock.isCorner,
+                      cornerValence: result.edgeLock.cornerValence,
+                    });
+                  } else {
+                    updateSnapVisualization(result.snapTarget || null);
+                  }
+                }
+              }
+            });
+          }
+
+          // Mark as dragged (any movement counts for measure tool)
+          mouseState.didDrag = true;
+          return;
+        }
+
+        // Handle measure tool hover preview (BEFORE dragging starts)
+        // Show snap indicators to help user see where they can snap
+        if (tool === 'measure' && !mouseState.isDragging && snapEnabledRef.current) {
+          // Throttle hover snap detection more aggressively (100ms) to avoid performance issues
+          // Active measurement still uses 60fps throttling via requestAnimationFrame
+          const now = Date.now();
+          if (now - lastHoverSnapTimeRef.current < HOVER_SNAP_THROTTLE_MS) {
+            return; // Skip hover snap detection if throttled
+          }
+          lastHoverSnapTimeRef.current = now;
+
+          // Throttle raycasting to avoid performance issues
+          if (!measureRaycastPendingRef.current) {
+            measureRaycastPendingRef.current = true;
+
+            measureRaycastFrameRef.current = requestAnimationFrame(() => {
+              measureRaycastPendingRef.current = false;
+              measureRaycastFrameRef.current = null;
+
+              // Use magnetic snap for hover preview
+              const currentLock = edgeLockStateRef.current;
+              const result = renderer.raycastSceneMagnetic(x, y, {
+                edge: currentLock.edge,
+                meshExpressId: currentLock.meshExpressId,
+                lockStrength: currentLock.lockStrength,
+              }, {
+                hiddenIds: hiddenEntitiesRef.current,
+                isolatedIds: isolatedEntitiesRef.current,
+                snapOptions: {
+                  snapToVertices: true,
+                  snapToEdges: true,
+                  snapToFaces: true,
+                  screenSnapRadius: 40, // Good radius for hover snap detection
+                },
+              });
 
-        if (mouseState.isDragging) {
+              // Update snap target for visual feedback
+              if (result.snapTarget) {
+                setSnapTarget(result.snapTarget);
+
+                // Update edge lock state for hover
+                if (result.edgeLock.shouldRelease) {
+                  // Clear stale lock when release is signaled
+                  clearEdgeLock();
+                  updateSnapVisualization(result.snapTarget);
+                } else if (result.edgeLock.shouldLock && result.edgeLock.edge) {
+                  setEdgeLock(result.edgeLock.edge, result.edgeLock.meshExpressId, result.edgeLock.edgeT);
+                  updateSnapVisualization(result.snapTarget, {
+                    edgeT: result.edgeLock.edgeT,
+                    isCorner: result.edgeLock.isCorner,
+                    cornerValence: result.edgeLock.cornerValence,
+                  });
+                } else {
+                  updateSnapVisualization(result.snapTarget);
+                }
+              } else {
+                setSnapTarget(null);
+                clearEdgeLock();
+                updateSnapVisualization(null);
+              }
+            });
+          }
+          return; // Don't fall through to other tool handlers
+        }
+
+        // Handle orbit/pan for other tools (or measure tool with shift+drag or no active measurement)
+        if (mouseState.isDragging && (tool !== 'measure' || !activeMeasurementRef.current)) {
           const dx = e.clientX - mouseState.lastX;
           const dy = e.clientY - mouseState.lastY;
-          const tool = activeToolRef.current;
 
           // Check if this counts as a drag (moved more than 5px from start)
           const totalDx = e.clientX - mouseState.startX;
@@ -442,14 +1074,10 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
             mouseState.didDrag = true;
           }
 
-          // Handle box selection
-          if (tool === 'boxselect' && mouseState.button === 0) {
-            updateBoxSelect(e.clientX, e.clientY);
-            return;
-          }
-
+          // Always update camera state immediately (feels responsive)
           if (mouseState.isPanning || tool === 'pan') {
-            camera.pan(dx, dy, false);
+            // Negate dy: mouse Y increases downward, but we want upward drag to pan up
+            camera.pan(dx, -dy, false);
           } else if (tool === 'walk') {
             // Walk mode: left/right rotates, up/down moves forward/backward
             camera.orbit(dx * 0.5, 0, false); // Only horizontal rotation
@@ -462,16 +1090,54 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
 
           mouseState.lastX = e.clientX;
           mouseState.lastY = e.clientY;
-          renderer.render({
-            hiddenIds: hiddenEntitiesRef.current,
-            isolatedIds: isolatedEntitiesRef.current,
-            selectedId: selectedEntityIdRef.current,
-            clearColor: clearColorRef.current,
-            sectionPlane: sectionPlaneRef.current.enabled ? sectionPlaneRef.current : undefined,
-          });
-          // Update ViewCube rotation in real-time during drag
-          updateCameraRotationRealtime(camera.getRotation());
-          calculateScale();
+
+          // PERFORMANCE: Adaptive throttle based on model size
+          // Small models: 60fps, Large: 40fps, Huge: 30fps
+          const meshCount = geometryRef.current?.length ?? 0;
+          const throttleMs = meshCount > 50000 ? RENDER_THROTTLE_MS_HUGE
+            : meshCount > 10000 ? RENDER_THROTTLE_MS_LARGE
+              : RENDER_THROTTLE_MS_SMALL;
+
+          const now = performance.now();
+          if (now - lastRenderTimeRef.current >= throttleMs) {
+            lastRenderTimeRef.current = now;
+            renderer.render({
+              hiddenIds: hiddenEntitiesRef.current,
+              isolatedIds: isolatedEntitiesRef.current,
+              selectedId: selectedEntityIdRef.current,
+              selectedModelIndex: selectedModelIndexRef.current,
+              clearColor: clearColorRef.current,
+              sectionPlane: activeToolRef.current === 'section' ? {
+                ...sectionPlaneRef.current,
+                min: sectionRangeRef.current?.min,
+                max: sectionRangeRef.current?.max,
+              } : undefined,
+            });
+            // Update ViewCube rotation in real-time during drag
+            updateCameraRotationRealtime(camera.getRotation());
+            calculateScale();
+          } else if (!renderPendingRef.current) {
+            // Schedule a final render for when throttle expires
+            // This ensures we always render the final position
+            renderPendingRef.current = true;
+            requestAnimationFrame(() => {
+              renderPendingRef.current = false;
+              renderer.render({
+                hiddenIds: hiddenEntitiesRef.current,
+                isolatedIds: isolatedEntitiesRef.current,
+                selectedId: selectedEntityIdRef.current,
+                selectedModelIndex: selectedModelIndexRef.current,
+                clearColor: clearColorRef.current,
+                sectionPlane: activeToolRef.current === 'section' ? {
+                  ...sectionPlaneRef.current,
+                  min: sectionRangeRef.current?.min,
+                  max: sectionRangeRef.current?.max,
+                } : undefined,
+              });
+              updateCameraRotationRealtime(camera.getRotation());
+              calculateScale();
+            });
+          }
           // Clear hover while dragging
           clearHover();
         } else if (hoverTooltipsEnabledRef.current) {
@@ -479,11 +1145,10 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           const now = Date.now();
           if (now - lastHoverCheckRef.current > hoverThrottleMs) {
             lastHoverCheckRef.current = now;
-            const currentProgress = useViewerStore.getState().progress;
-            const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
-            const pickedId = await renderer.pick(x, y, { isStreaming: currentIsStreaming });
-            if (pickedId) {
-              setHoverState({ entityId: pickedId, screenX: e.clientX, screenY: e.clientY });
+            // Uses visibility filtering so hidden elements don't show hover tooltips
+            const pickResult = await renderer.pick(x, y, getPickOptions());
+            if (pickResult) {
+              setHoverState({ entityId: pickResult.expressId, screenX: e.clientX, screenY: e.clientY });
             } else {
               clearHover();
             }
@@ -491,21 +1156,143 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         }
       });
 
-      canvas.addEventListener('mouseup', () => {
+      canvas.addEventListener('mouseup', (e) => {
+        const tool = activeToolRef.current;
+
+        // Handle measure tool completion
+        if (tool === 'measure' && activeMeasurementRef.current) {
+          // Cancel any pending raycast to avoid stale updates
+          if (measureRaycastFrameRef.current) {
+            cancelAnimationFrame(measureRaycastFrameRef.current);
+            measureRaycastFrameRef.current = null;
+            measureRaycastPendingRef.current = false;
+          }
+
+          // Do a final synchronous raycast at the mouseup position to ensure accurate end point
+          const rect = canvas.getBoundingClientRect();
+          const x = e.clientX - rect.left;
+          const y = e.clientY - rect.top;
+
+          const useOrthogonalConstraint = e.shiftKey && measurementConstraintEdgeRef.current;
+          const currentLock = edgeLockStateRef.current;
+
+          // Use simpler snap options in orthogonal mode (no magnetic locking needed)
+          const finalLock = useOrthogonalConstraint
+            ? { edge: null, meshExpressId: null, lockStrength: 0 }
+            : currentLock;
+
+          const result = renderer.raycastSceneMagnetic(x, y, {
+            edge: finalLock.edge,
+            meshExpressId: finalLock.meshExpressId,
+            lockStrength: finalLock.lockStrength,
+          }, {
+            hiddenIds: hiddenEntitiesRef.current,
+            isolatedIds: isolatedEntitiesRef.current,
+            snapOptions: snapEnabledRef.current && !useOrthogonalConstraint ? {
+              snapToVertices: true,
+              snapToEdges: true,
+              snapToFaces: true,
+              screenSnapRadius: 60,
+            } : useOrthogonalConstraint ? {
+              // In orthogonal mode, snap to edges and vertices only (no faces)
+              snapToVertices: true,
+              snapToEdges: true,
+              snapToFaces: false,
+              screenSnapRadius: 40,
+            } : {
+              snapToVertices: false,
+              snapToEdges: false,
+              snapToFaces: false,
+              screenSnapRadius: 0,
+            },
+          });
+
+          // Update measurement with final position before finalizing
+          if (result.intersection || result.snapTarget) {
+            const snapPoint = result.snapTarget || result.intersection;
+            let pos = snapPoint ? ('position' in snapPoint ? snapPoint.position : snapPoint.point) : null;
+
+            if (pos) {
+              // Apply orthogonal constraint if shift is held
+              if (useOrthogonalConstraint && activeMeasurementRef.current) {
+                const constraint = measurementConstraintEdgeRef.current!;
+                const start = activeMeasurementRef.current.start;
+
+                const dx = pos.x - start.x;
+                const dy = pos.y - start.y;
+                const dz = pos.z - start.z;
+
+                const { axis1, axis2, axis3 } = constraint.axes;
+                const dot1 = dx * axis1.x + dy * axis1.y + dz * axis1.z;
+                const dot2 = dx * axis2.x + dy * axis2.y + dz * axis2.z;
+                const dot3 = dx * axis3.x + dy * axis3.y + dz * axis3.z;
+
+                const absDot1 = Math.abs(dot1);
+                const absDot2 = Math.abs(dot2);
+                const absDot3 = Math.abs(dot3);
+
+                let chosenDot: number;
+                let chosenDir: { x: number; y: number; z: number };
+
+                if (absDot1 >= absDot2 && absDot1 >= absDot3) {
+                  chosenDot = dot1;
+                  chosenDir = axis1;
+                } else if (absDot2 >= absDot3) {
+                  chosenDot = dot2;
+                  chosenDir = axis2;
+                } else {
+                  chosenDot = dot3;
+                  chosenDir = axis3;
+                }
+
+                pos = {
+                  x: start.x + chosenDot * chosenDir.x,
+                  y: start.y + chosenDot * chosenDir.y,
+                  z: start.z + chosenDot * chosenDir.z,
+                };
+              }
+
+              const screenPos = camera.projectToScreen(pos, canvas.width, canvas.height);
+              const measurePoint: MeasurePoint = {
+                x: pos.x,
+                y: pos.y,
+                z: pos.z,
+                screenX: screenPos?.x ?? x,
+                screenY: screenPos?.y ?? y,
+              };
+              updateMeasurement(measurePoint);
+            }
+          }
+
+          finalizeMeasurement();
+          clearEdgeLock(); // Clear edge lock after measurement complete
+          mouseState.isDragging = false;
+          mouseState.didDrag = false;
+          canvas.style.cursor = 'crosshair';
+          return;
+        }
+
         mouseState.isDragging = false;
         mouseState.isPanning = false;
-        const tool = activeToolRef.current;
-        canvas.style.cursor = tool === 'pan' ? 'grab' : (tool === 'orbit' ? 'grab' : 'default');
+        canvas.style.cursor = tool === 'pan' ? 'grab' : (tool === 'orbit' ? 'grab' : (tool === 'measure' ? 'crosshair' : 'default'));
         // Clear orbit pivot after each orbit operation
         camera.setOrbitPivot(null);
       });
 
       canvas.addEventListener('mouseleave', () => {
+        const tool = activeToolRef.current;
         mouseState.isDragging = false;
         mouseState.isPanning = false;
         camera.stopInertia();
         camera.setOrbitPivot(null);
-        canvas.style.cursor = 'default';
+        // Restore cursor based on active tool
+        if (tool === 'measure') {
+          canvas.style.cursor = 'crosshair';
+        } else if (tool === 'pan' || tool === 'orbit') {
+          canvas.style.cursor = 'grab';
+        } else {
+          canvas.style.cursor = 'default';
+        }
         clearHover();
       });
 
@@ -514,8 +1301,9 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         const rect = canvas.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        const pickedId = await renderer.pick(x, y);
-        openContextMenu(pickedId, e.clientX, e.clientY);
+        // Uses visibility filtering so hidden elements don't appear in context menu
+        const pickResult = await renderer.pick(x, y, getPickOptions());
+        openContextMenu(pickResult?.expressId ?? null, e.clientX, e.clientY);
       });
 
       canvas.addEventListener('wheel', (e) => {
@@ -528,9 +1316,35 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           hiddenIds: hiddenEntitiesRef.current,
           isolatedIds: isolatedEntitiesRef.current,
           selectedId: selectedEntityIdRef.current,
+          selectedModelIndex: selectedModelIndexRef.current,
           clearColor: clearColorRef.current,
-          sectionPlane: sectionPlaneRef.current.enabled ? sectionPlaneRef.current : undefined,
+          sectionPlane: activeToolRef.current === 'section' ? {
+            ...sectionPlaneRef.current,
+            min: sectionRangeRef.current?.min,
+            max: sectionRangeRef.current?.max,
+          } : undefined,
         });
+        // Update measurement screen coordinates immediately during zoom (only in measure mode)
+        if (activeToolRef.current === 'measure') {
+          const state = useViewerStore.getState();
+          if (state.measurements.length > 0 || state.activeMeasurement) {
+            updateMeasurementScreenCoords((worldPos) => {
+              return camera.projectToScreen(worldPos, canvas.width, canvas.height);
+            });
+            // Update camera state tracking to prevent duplicate update in animation loop
+            const cameraPos = camera.getPosition();
+            const cameraRot = camera.getRotation();
+            const cameraDist = camera.getDistance();
+            lastCameraStateRef.current = {
+              position: cameraPos,
+              rotation: cameraRot,
+              distance: cameraDist,
+              canvasWidth: canvas.width,
+              canvasHeight: canvas.height,
+            };
+          }
+        }
+        calculateScale();
       });
 
       // Click handling
@@ -550,107 +1364,9 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           return;
         }
 
-        // Handle measure tool clicks
+        // Measure tool now uses drag interaction (see mousedown/mousemove/mouseup)
         if (tool === 'measure') {
-          const currentProgress = useViewerStore.getState().progress;
-          const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
-          const pickedId = await renderer.pick(x, y, { isStreaming: currentIsStreaming });
-          if (pickedId) {
-            // Get 3D position from mesh vertices (simplified - uses center of clicked entity)
-            // In a full implementation, you'd use ray-triangle intersection
-            const worldPos = getApproximateWorldPosition(geometryRef.current, pickedId, x, y, canvas.width, canvas.height);
-            const measurePoint: MeasurePoint = {
-              x: worldPos.x,
-              y: worldPos.y,
-              z: worldPos.z,
-              screenX: e.clientX,
-              screenY: e.clientY,
-            };
-
-            if (pendingMeasurePointRef.current) {
-              // Complete the measurement
-              completeMeasurement(measurePoint);
-            } else {
-              // Start a new measurement
-              addMeasurePoint(measurePoint);
-            }
-          }
-          return;
-        }
-
-        // Handle box selection completion
-        if (tool === 'boxselect') {
-          // Get box selection coordinates (in screen space relative to viewport)
-          const bs = boxSelectRef.current;
-          const geom = geometryRef.current;
-          if (bs.isSelecting && geom) {
-            const selectionRect = {
-              left: Math.min(bs.startX, bs.currentX),
-              right: Math.max(bs.startX, bs.currentX),
-              top: Math.min(bs.startY, bs.currentY),
-              bottom: Math.max(bs.startY, bs.currentY),
-            };
-
-            // Check if selection is large enough
-            const selectionWidth = selectionRect.right - selectionRect.left;
-            const selectionHeight = selectionRect.bottom - selectionRect.top;
-
-            if (selectionWidth > 5 && selectionHeight > 5) {
-              // Convert selection rect from viewport to canvas coordinates
-              const canvasRect = canvas.getBoundingClientRect();
-              const canvasLeft = selectionRect.left - canvasRect.left;
-              const canvasRight = selectionRect.right - canvasRect.left;
-              const canvasTop = selectionRect.top - canvasRect.top;
-              const canvasBottom = selectionRect.bottom - canvasRect.top;
-
-              // Find all entities whose center projects into the selection box
-              const selectedIds: number[] = [];
-
-              for (const mesh of geom) {
-                // Calculate mesh bounding box center
-                if (mesh.positions.length >= 3) {
-                  let minX = Infinity, minY = Infinity, minZ = Infinity;
-                  let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
-
-                  for (let i = 0; i < mesh.positions.length; i += 3) {
-                    const x = mesh.positions[i];
-                    const y = mesh.positions[i + 1];
-                    const z = mesh.positions[i + 2];
-                    minX = Math.min(minX, x);
-                    minY = Math.min(minY, y);
-                    minZ = Math.min(minZ, z);
-                    maxX = Math.max(maxX, x);
-                    maxY = Math.max(maxY, y);
-                    maxZ = Math.max(maxZ, z);
-                  }
-
-                  const center = {
-                    x: (minX + maxX) / 2,
-                    y: (minY + maxY) / 2,
-                    z: (minZ + maxZ) / 2,
-                  };
-
-                  // Project center to screen space
-                  const screenPos = camera.projectToScreen(center, canvas.width, canvas.height);
-
-                  if (screenPos) {
-                    // Check if screen position is within selection box
-                    if (screenPos.x >= canvasLeft && screenPos.x <= canvasRight &&
-                      screenPos.y >= canvasTop && screenPos.y <= canvasBottom) {
-                      selectedIds.push(mesh.expressId);
-                    }
-                  }
-                }
-              }
-
-              // Select all found entities
-              if (selectedIds.length > 0) {
-                setSelectedEntityIds(selectedIds);
-              }
-            }
-          }
-          endBoxSelect();
-          return;
+          return; // Skip click handling for measure tool
         }
 
         const now = Date.now();
@@ -662,28 +1378,24 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           Math.abs(clickPos.x - lastClickPosRef.current.x) < 5 &&
           Math.abs(clickPos.y - lastClickPosRef.current.y) < 5) {
           // Double-click - isolate element
-          const currentProgress = useViewerStore.getState().progress;
-          const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
-          const pickedId = await renderer.pick(x, y, { isStreaming: currentIsStreaming });
-          if (pickedId) {
-            setSelectedEntityId(pickedId);
+          // Uses visibility filtering so only visible elements can be selected
+          const pickResult = await renderer.pick(x, y, getPickOptions());
+          if (pickResult) {
+            handlePickForSelection(pickResult);
           }
           lastClickTimeRef.current = 0;
           lastClickPosRef.current = null;
         } else {
-          // Single click
-          // Get current progress state (not from closure)
-          const currentProgress = useViewerStore.getState().progress;
-          const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
-          const pickedId = await renderer.pick(x, y, { isStreaming: currentIsStreaming });
+          // Single click - uses visibility filtering so only visible elements can be selected
+          const pickResult = await renderer.pick(x, y, getPickOptions());
 
           // Multi-selection with Ctrl/Cmd
           if (e.ctrlKey || e.metaKey) {
-            if (pickedId) {
-              toggleSelection(pickedId);
+            if (pickResult) {
+              toggleSelection(pickResult.expressId);
             }
           } else {
-            setSelectedEntityId(pickedId);
+            handlePickForSelection(pickResult);
           }
 
           lastClickTimeRef.current = now;
@@ -709,22 +1421,33 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         e.preventDefault();
         touchState.touches = Array.from(e.touches);
 
-        if (touchState.touches.length === 1) {
+        // Track multi-touch to prevent false tap-select after pinch/zoom
+        if (touchState.touches.length > 1) {
+          touchState.multiTouch = true;
+        }
+
+        if (touchState.touches.length === 1 && !touchState.multiTouch) {
           touchState.lastCenter = {
             x: touchState.touches[0].clientX,
             y: touchState.touches[0].clientY,
           };
+          // Record tap start for tap-to-select detection
+          touchState.tapStartTime = Date.now();
+          touchState.tapStartPos = {
+            x: touchState.touches[0].clientX,
+            y: touchState.touches[0].clientY,
+          };
+          touchState.didMove = false;
 
           // Set orbit pivot to what user touches (same as mouse click behavior)
           const rect = canvas.getBoundingClientRect();
           const x = touchState.touches[0].clientX - rect.left;
           const y = touchState.touches[0].clientY - rect.top;
 
-          const currentProgress = useViewerStore.getState().progress;
-          const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
-          const pickedId = await renderer.pick(x, y, { isStreaming: currentIsStreaming });
-          if (pickedId !== null) {
-            const center = getEntityCenter(geometryRef.current, pickedId);
+          // Uses visibility filtering so hidden elements don't affect orbit pivot
+          const pickResult = await renderer.pick(x, y, getPickOptions());
+          if (pickResult !== null) {
+            const center = getEntityCenter(geometryRef.current, pickResult.expressId);
             if (center) {
               camera.setOrbitPivot(center);
             } else {
@@ -733,6 +1456,12 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           } else {
             camera.setOrbitPivot(null);
           }
+        } else if (touchState.touches.length === 1) {
+          // Single touch after multi-touch - just update center for orbit
+          touchState.lastCenter = {
+            x: touchState.touches[0].clientX,
+            y: touchState.touches[0].clientY,
+          };
         } else if (touchState.touches.length === 2) {
           const dx = touchState.touches[1].clientX - touchState.touches[0].clientX;
           const dy = touchState.touches[1].clientY - touchState.touches[0].clientY;
@@ -751,6 +1480,14 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         if (touchState.touches.length === 1) {
           const dx = touchState.touches[0].clientX - touchState.lastCenter.x;
           const dy = touchState.touches[0].clientY - touchState.lastCenter.y;
+
+          // Mark as moved if significant movement (prevents tap-select during drag)
+          const totalDx = touchState.touches[0].clientX - touchState.tapStartPos.x;
+          const totalDy = touchState.touches[0].clientY - touchState.tapStartPos.y;
+          if (Math.abs(totalDx) > 10 || Math.abs(totalDy) > 10) {
+            touchState.didMove = true;
+          }
+
           camera.orbit(dx, dy, false);
           touchState.lastCenter = {
             x: touchState.touches[0].clientX,
@@ -760,7 +1497,13 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
             hiddenIds: hiddenEntitiesRef.current,
             isolatedIds: isolatedEntitiesRef.current,
             selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
           });
         } else if (touchState.touches.length === 2) {
           const dx1 = touchState.touches[1].clientX - touchState.touches[0].clientX;
@@ -783,18 +1526,56 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
             hiddenIds: hiddenEntitiesRef.current,
             isolatedIds: isolatedEntitiesRef.current,
             selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
-            sectionPlane: sectionPlaneRef.current.enabled ? sectionPlaneRef.current : undefined,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
           });
         }
       });
 
-      canvas.addEventListener('touchend', (e) => {
+      canvas.addEventListener('touchend', async (e) => {
         e.preventDefault();
+        const previousTouchCount = touchState.touches.length;
+        const wasMultiTouch = touchState.multiTouch;
         touchState.touches = Array.from(e.touches);
+
         if (touchState.touches.length === 0) {
           camera.stopInertia();
           camera.setOrbitPivot(null);
+
+          // Tap-to-select: detect quick tap without significant movement
+          const tapDuration = Date.now() - touchState.tapStartTime;
+          const tool = activeToolRef.current;
+
+          // Only select if:
+          // - Was a single-finger touch (not after multi-touch gesture)
+          // - Tap was quick (< 300ms)
+          // - Didn't move significantly
+          // - Tool supports selection (not orbit/pan/walk/measure)
+          if (
+            previousTouchCount === 1 &&
+            !wasMultiTouch &&
+            tapDuration < 300 &&
+            !touchState.didMove &&
+            tool !== 'orbit' &&
+            tool !== 'pan' &&
+            tool !== 'walk' &&
+            tool !== 'measure'
+          ) {
+            const rect = canvas.getBoundingClientRect();
+            const x = touchState.tapStartPos.x - rect.left;
+            const y = touchState.tapStartPos.y - rect.top;
+
+            const pickResult = await renderer.pick(x, y, getPickOptions());
+            handlePickForSelection(pickResult);
+          }
+
+          // Reset multi-touch flag when all touches end
+          touchState.multiTouch = false;
         }
       });
 
@@ -811,12 +1592,19 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
 
         // Preset views - set view and re-render
         const setViewAndRender = (view: 'top' | 'bottom' | 'front' | 'back' | 'left' | 'right') => {
-          camera.setPresetView(view, geometryBoundsRef.current);
+          const rotation = coordinateInfoRef.current?.buildingRotation;
+          camera.setPresetView(view, geometryBoundsRef.current, rotation);
           renderer.render({
             hiddenIds: hiddenEntitiesRef.current,
             isolatedIds: isolatedEntitiesRef.current,
             selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
           });
           updateCameraRotationRealtime(camera.getRotation());
           calculateScale();
@@ -879,19 +1667,17 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         const zoomSpeed = 0.1;
 
         if (firstPersonModeRef.current) {
-          if (keyState['w'] || keyState['arrowup']) { camera.moveFirstPerson(1, 0, 0); moved = true; }
-          if (keyState['s'] || keyState['arrowdown']) { camera.moveFirstPerson(-1, 0, 0); moved = true; }
-          if (keyState['a'] || keyState['arrowleft']) { camera.moveFirstPerson(0, -1, 0); moved = true; }
-          if (keyState['d'] || keyState['arrowright']) { camera.moveFirstPerson(0, 1, 0); moved = true; }
-          if (keyState['q']) { camera.moveFirstPerson(0, 0, -1); moved = true; }
-          if (keyState['e']) { camera.moveFirstPerson(0, 0, 1); moved = true; }
+          // Arrow keys for first-person navigation (camera-relative)
+          if (keyState['arrowup']) { camera.moveFirstPerson(-1, 0, 0); moved = true; }
+          if (keyState['arrowdown']) { camera.moveFirstPerson(1, 0, 0); moved = true; }
+          if (keyState['arrowleft']) { camera.moveFirstPerson(0, 1, 0); moved = true; }
+          if (keyState['arrowright']) { camera.moveFirstPerson(0, -1, 0); moved = true; }
         } else {
-          if (keyState['w'] || keyState['arrowup']) { camera.pan(0, panSpeed, false); moved = true; }
-          if (keyState['s'] || keyState['arrowdown']) { camera.pan(0, -panSpeed, false); moved = true; }
-          if (keyState['a'] || keyState['arrowleft']) { camera.pan(-panSpeed, 0, false); moved = true; }
-          if (keyState['d'] || keyState['arrowright']) { camera.pan(panSpeed, 0, false); moved = true; }
-          if (keyState['q']) { camera.zoom(-zoomSpeed * 100, false); moved = true; }
-          if (keyState['e']) { camera.zoom(zoomSpeed * 100, false); moved = true; }
+          // Arrow keys for panning (camera-relative: arrow direction = camera movement)
+          if (keyState['arrowup']) { camera.pan(0, -panSpeed, false); moved = true; }
+          if (keyState['arrowdown']) { camera.pan(0, panSpeed, false); moved = true; }
+          if (keyState['arrowleft']) { camera.pan(panSpeed, 0, false); moved = true; }
+          if (keyState['arrowright']) { camera.pan(-panSpeed, 0, false); moved = true; }
         }
 
         if (moved) {
@@ -899,8 +1685,13 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
             hiddenIds: hiddenEntitiesRef.current,
             isolatedIds: isolatedEntitiesRef.current,
             selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
-            sectionPlane: sectionPlaneRef.current.enabled ? sectionPlaneRef.current : undefined,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
           });
         }
         requestAnimationFrame(keyboardMove);
@@ -913,14 +1704,21 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
       resizeObserver = new ResizeObserver(() => {
         if (aborted) return;
         const rect = canvas.getBoundingClientRect();
-        const width = Math.max(1, Math.floor(rect.width));
+        // Use same WebGPU alignment as initialization
+        const width = alignToWebGPU(Math.max(1, Math.floor(rect.width)));
         const height = Math.max(1, Math.floor(rect.height));
         renderer.resize(width, height);
         renderer.render({
           hiddenIds: hiddenEntitiesRef.current,
           isolatedIds: isolatedEntitiesRef.current,
           selectedId: selectedEntityIdRef.current,
+          selectedModelIndex: selectedModelIndexRef.current,
           clearColor: clearColorRef.current,
+          sectionPlane: activeToolRef.current === 'section' ? {
+            ...sectionPlaneRef.current,
+            min: sectionRangeRef.current?.min,
+            max: sectionRangeRef.current?.max,
+          } : undefined,
         });
       });
       resizeObserver.observe(canvas);
@@ -929,7 +1727,13 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         hiddenIds: hiddenEntitiesRef.current,
         isolatedIds: isolatedEntitiesRef.current,
         selectedId: selectedEntityIdRef.current,
+        selectedModelIndex: selectedModelIndexRef.current,
         clearColor: clearColorRef.current,
+        sectionPlane: activeToolRef.current === 'section' ? {
+          ...sectionPlaneRef.current,
+          min: sectionRangeRef.current?.min,
+          max: sectionRangeRef.current?.max,
+        } : undefined,
       });
     });
 
@@ -947,8 +1751,15 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
       if (keyboardHandlersRef.current.handleKeyUp) {
         window.removeEventListener('keyup', keyboardHandlersRef.current.handleKeyUp);
       }
+      // Cancel pending raycast requests
+      if (measureRaycastFrameRef.current !== null) {
+        cancelAnimationFrame(measureRaycastFrameRef.current);
+        measureRaycastFrameRef.current = null;
+      }
       setIsInitialized(false);
       rendererRef.current = null;
+      // Clear BCF global refs to prevent memory leaks
+      clearGlobalRefs();
     };
     // Note: selectedEntityId is intentionally NOT in dependencies
     // The click handler captures setSelectedEntityId via closure
@@ -956,22 +1767,45 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
   }, [setSelectedEntityId]);
 
   // Track processed meshes for incremental updates
-  const processedMeshIdsRef = useRef<Set<number>>(new Set());
+  // Uses string keys to support compound keys (expressId:color) for submeshes
+  const processedMeshIdsRef = useRef<Set<string>>(new Set());
   const lastGeometryLengthRef = useRef<number>(0);
   const lastGeometryRef = useRef<MeshData[] | null>(null);
   const cameraFittedRef = useRef<boolean>(false);
   const finalBoundsRefittedRef = useRef<boolean>(false); // Track if we've refitted after streaming
 
   // Render throttling during streaming
-  const lastRenderTimeRef = useRef<number>(0);
-  const RENDER_THROTTLE_MS = 200; // Render at most every 200ms during streaming
+  const lastStreamRenderTimeRef = useRef<number>(0);
+  const STREAM_RENDER_THROTTLE_MS = 200; // Render at most every 200ms during streaming
   const progress = useViewerStore((state) => state.progress);
   const isStreaming = progress !== null && progress.percent < 100;
 
   useEffect(() => {
     const renderer = rendererRef.current;
 
-    if (!renderer || !geometry || !isInitialized) return;
+    // Handle geometry cleared/null - reset refs so next load is treated as new file
+    if (!geometry) {
+      if (lastGeometryLengthRef.current > 0 || lastGeometryRef.current !== null) {
+        // Geometry was cleared - reset tracking refs
+        lastGeometryLengthRef.current = 0;
+        lastGeometryRef.current = null;
+        processedMeshIdsRef.current.clear();
+        cameraFittedRef.current = false;
+        finalBoundsRefittedRef.current = false;
+        // Clear scene if renderer is ready
+        if (renderer && isInitialized) {
+          renderer.getScene().clear();
+          renderer.getCamera().reset();
+          geometryBoundsRef.current = {
+            min: { x: -100, y: -100, z: -100 },
+            max: { x: 100, y: 100, z: 100 },
+          };
+        }
+      }
+      return;
+    }
+
+    if (!renderer || !isInitialized) return;
 
     const device = renderer.getGPUDevice();
     if (!device) return;
@@ -984,24 +1818,18 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
     // React creates new array references on every appendGeometryBatch call,
     // so reference comparison would always trigger scene.clear()
     const isIncremental = currentLength > lastLength && lastLength > 0;
-    const isNewFile = currentLength > 0 && lastLength === 0 && lastGeometryRef.current !== null;
+    const isNewFile = currentLength > 0 && lastLength === 0;
     const isCleared = currentLength === 0;
 
     if (isCleared) {
-      // Geometry cleared - reset camera and bounds
+      // Geometry cleared (could be visibility change or file unload)
+      // Clear scene but DON'T reset camera - user may just be hiding models
       scene.clear();
       processedMeshIdsRef.current.clear();
-      cameraFittedRef.current = false;
-      finalBoundsRefittedRef.current = false;
+      // Keep cameraFittedRef to preserve camera position when models are shown again
       lastGeometryLengthRef.current = 0;
       lastGeometryRef.current = null;
-      // Reset camera state
-      renderer.getCamera().reset();
-      // Reset geometry bounds to default
-      geometryBoundsRef.current = {
-        min: { x: -100, y: -100, z: -100 },
-        max: { x: 100, y: 100, z: 100 },
-      };
+      // Note: Don't reset camera or bounds - preserve user's view
       return;
     } else if (isNewFile) {
       // New file loaded - reset camera and bounds
@@ -1019,20 +1847,35 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         max: { x: 100, y: 100, z: 100 },
       };
     } else if (!isIncremental && currentLength !== lastLength) {
-      // Length decreased (shouldn't happen during streaming) - reset
-      scene.clear();
-      processedMeshIdsRef.current.clear();
-      cameraFittedRef.current = false;
-      finalBoundsRefittedRef.current = false;
-      lastGeometryLengthRef.current = 0;
-      lastGeometryRef.current = geometry;
-      // Reset camera state
-      renderer.getCamera().reset();
-      // Reset geometry bounds to default
-      geometryBoundsRef.current = {
-        min: { x: -100, y: -100, z: -100 },
-        max: { x: 100, y: 100, z: 100 },
-      };
+      // Length changed but not incremental - could be:
+      // 1. Length decreased (model hidden) - DON'T reset camera
+      // 2. Length increased but lastLength > 0 (new file loaded while another was open) - DO reset
+      const isLengthDecrease = currentLength < lastLength;
+
+      if (isLengthDecrease) {
+        // Model visibility changed (hidden) - rebuild scene but keep camera
+        scene.clear();
+        processedMeshIdsRef.current.clear();
+        // Don't reset cameraFittedRef - keep current camera position
+        lastGeometryLengthRef.current = 0; // Reset so meshes get re-added
+        lastGeometryRef.current = geometry;
+        // Note: Don't reset camera or bounds - user wants to keep their view
+      } else {
+        // New file loaded while another was open - full reset
+        scene.clear();
+        processedMeshIdsRef.current.clear();
+        cameraFittedRef.current = false;
+        finalBoundsRefittedRef.current = false;
+        lastGeometryLengthRef.current = 0;
+        lastGeometryRef.current = geometry;
+        // Reset camera state
+        renderer.getCamera().reset();
+        // Reset geometry bounds to default
+        geometryBoundsRef.current = {
+          min: { x: -100, y: -100, z: -100 },
+          max: { x: 100, y: 100, z: 100 },
+        };
+      }
     } else if (currentLength === lastLength) {
       // No geometry change - but check if we need to update bounds when streaming completes
       if (cameraFittedRef.current && !isStreaming && !finalBoundsRefittedRef.current && coordinateInfo?.shiftedBounds) {
@@ -1061,11 +1904,6 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
             const boundsExpanded = newMaxSize > oldMaxSize * 1.1;
 
             if (boundsExpanded) {
-              console.log('[Viewport] Refitting camera after streaming complete - bounds expanded:', {
-                oldMaxSize: oldMaxSize.toFixed(1),
-                newMaxSize: newMaxSize.toFixed(1),
-                expansion: ((newMaxSize / oldMaxSize - 1) * 100).toFixed(0) + '%'
-              });
               renderer.getCamera().fitToBounds(shiftedBounds.min, shiftedBounds.max);
             }
           }
@@ -1085,15 +1923,28 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
       lastGeometryRef.current = geometry;
     }
 
-    const startIndex = lastGeometryLengthRef.current;
-    const meshesToAdd = geometry.slice(startIndex);
+    // FIX: When not streaming (type visibility toggle), new meshes can be ANYWHERE in the array,
+    // not just at the end. During streaming, new meshes ARE appended, so slice is safe.
+    // After streaming completes, filter changes can insert meshes at any position.
+    const meshesToAdd = isStreaming
+      ? geometry.slice(lastGeometryLengthRef.current)  // Streaming: new meshes at end
+      : geometry;  // Post-streaming: scan entire array for unprocessed meshes
 
     // Filter out already processed meshes
+    // NOTE: Multiple meshes can share the same expressId AND same color (e.g., door inner framing pieces),
+    // so we use expressId + array index as a compound key to ensure all submeshes are processed.
     const newMeshes: MeshData[] = [];
-    for (const meshData of meshesToAdd) {
-      if (!processedMeshIdsRef.current.has(meshData.expressId)) {
+    const startIndex = isStreaming ? lastGeometryLengthRef.current : 0;
+    for (let i = 0; i < meshesToAdd.length; i++) {
+      const meshData = meshesToAdd[i];
+      // Use expressId + global array index as key to ensure each mesh is unique
+      // (same expressId can have multiple submeshes with same color, e.g., door framing)
+      const globalIndex = startIndex + i;
+      const compoundKey = `${meshData.expressId}:${globalIndex}`;
+
+      if (!processedMeshIdsRef.current.has(compoundKey)) {
         newMeshes.push(meshData);
-        processedMeshIdsRef.current.add(meshData.expressId);
+        processedMeshIdsRef.current.add(compoundKey);
       }
     }
 
@@ -1103,15 +1954,10 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
       const pipeline = renderer.getPipeline();
       if (pipeline) {
         // Use batched rendering - groups meshes by color into single draw calls
-        (scene as any).appendToBatches(newMeshes, device, pipeline);
+        // Pass isStreaming flag to enable throttled batch rebuilding (reduces O(N²) cost)
+        (scene as any).appendToBatches(newMeshes, device, pipeline, isStreaming);
 
-        // Store mesh data for on-demand selection rendering
-        // We DON'T create GPU buffers here during streaming - that's 2x the overhead!
-        // Instead, store MeshData references and create buffers lazily when selected
-        for (const meshData of newMeshes) {
-          // Store minimal mesh data for picker and lazy selection buffer creation
-          scene.addMeshData(meshData);
-        }
+        // Note: addMeshData is now called inside appendToBatches, no need to duplicate
       } else {
         // Fallback: add individual meshes if pipeline not ready
         for (const meshData of newMeshes) {
@@ -1150,6 +1996,9 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           });
         }
       }
+
+      // Invalidate caches when new geometry is added
+      renderer.clearCaches();
     }
 
     lastGeometryLengthRef.current = currentLength;
@@ -1181,12 +2030,19 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         max: { x: -Infinity, y: -Infinity, z: -Infinity },
       };
 
+      // Max coordinate threshold - matches CoordinateHandler's NORMAL_COORD_THRESHOLD
+      // Coordinates beyond this are likely corrupted or unshifted original coordinates
+      const MAX_VALID_COORD = 10000;
+
       for (const meshData of geometry) {
         for (let i = 0; i < meshData.positions.length; i += 3) {
           const x = meshData.positions[i];
           const y = meshData.positions[i + 1];
           const z = meshData.positions[i + 2];
-          if (Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(z)) {
+          // Filter out corrupted/unshifted vertices (> 10km from origin)
+          const isValid = Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(z) &&
+            Math.abs(x) < MAX_VALID_COORD && Math.abs(y) < MAX_VALID_COORD && Math.abs(z) < MAX_VALID_COORD;
+          if (isValid) {
             fallbackBounds.min.x = Math.min(fallbackBounds.min.x, x);
             fallbackBounds.min.y = Math.min(fallbackBounds.min.y, y);
             fallbackBounds.min.z = Math.min(fallbackBounds.min.z, z);
@@ -1215,15 +2071,15 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
     // Instancing conversion would require preserving actual mesh transforms, which is complex
     // For now, we render regular meshes directly (fast enough for most cases)
 
-    // Render throttling: During streaming, only render every RENDER_THROTTLE_MS
+    // Render throttling: During streaming, only render every STREAM_RENDER_THROTTLE_MS
     // This prevents rendering 28K+ meshes from blocking WASM batch processing
     const now = Date.now();
-    const timeSinceLastRender = now - lastRenderTimeRef.current;
-    const shouldRender = !isStreaming || timeSinceLastRender >= RENDER_THROTTLE_MS;
+    const timeSinceLastRender = now - lastStreamRenderTimeRef.current;
+    const shouldRender = !isStreaming || timeSinceLastRender >= STREAM_RENDER_THROTTLE_MS;
 
     if (shouldRender) {
       renderer.render();
-      lastRenderTimeRef.current = now;
+      lastStreamRenderTimeRef.current = now;
     }
   }, [geometry, coordinateInfo, isInitialized, isStreaming]);
 
@@ -1233,16 +2089,94 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
     const renderer = rendererRef.current;
     if (!renderer || !isInitialized) return;
 
-    // If streaming just completed (was streaming, now not), force immediate render
+    // If streaming just completed (was streaming, now not), rebuild pending batches and render
     if (prevIsStreamingRef.current && !isStreaming) {
+      const device = renderer.getGPUDevice();
+      const pipeline = renderer.getPipeline();
+      const scene = renderer.getScene();
+
+      // Rebuild any pending batches that were deferred during streaming
+      if (device && pipeline && (scene as any).hasPendingBatches?.()) {
+        (scene as any).rebuildPendingBatches(device, pipeline);
+      }
+
       renderer.render();
-      lastRenderTimeRef.current = Date.now();
+      lastStreamRenderTimeRef.current = Date.now();
     }
     prevIsStreamingRef.current = isStreaming;
   }, [isStreaming, isInitialized]);
 
-  // Get selectedEntityIds from store for multi-selection
-  const selectedEntityIds = useViewerStore((state) => state.selectedEntityIds);
+  // Apply pending color updates to WebGPU scene
+  // Note: Color updates may arrive before viewport is initialized, so we wait
+  useEffect(() => {
+    if (!pendingColorUpdates || pendingColorUpdates.size === 0) return;
+
+    // Wait until viewport is initialized before applying color updates
+    if (!isInitialized) return;
+
+    const renderer = rendererRef.current;
+    if (!renderer) return;
+
+    const device = renderer.getGPUDevice();
+    const pipeline = renderer.getPipeline();
+    const scene = renderer.getScene();
+
+    if (device && pipeline && (scene as any).updateMeshColors) {
+      (scene as any).updateMeshColors(pendingColorUpdates, device, pipeline);
+      renderer.render();
+      clearPendingColorUpdates();
+    }
+  }, [pendingColorUpdates, isInitialized, clearPendingColorUpdates]);
+
+  // 2D section overlay: upload drawing data to renderer when available
+  const drawing2D = useViewerStore((s) => s.drawing2D);
+  const show3DOverlay = useViewerStore((s) => s.drawing2DDisplayOptions.show3DOverlay);
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    if (!renderer || !isInitialized) return;
+
+    // Only show overlay when section tool is active, we have a drawing, AND 3D overlay is enabled
+    if (activeTool === 'section' && drawing2D && drawing2D.cutPolygons.length > 0 && show3DOverlay) {
+      // Convert Drawing2D format to renderer format
+      const polygons = drawing2D.cutPolygons.map((cp) => ({
+        polygon: cp.polygon,
+        ifcType: cp.ifcType,
+        expressId: cp.entityId,  // DrawingPolygon uses entityId
+      }));
+
+      // No hatching lines for 3D overlay (too dense)
+      const lines: Array<{ line: { start: { x: number; y: number }; end: { x: number; y: number } }; category: string }> = [];
+
+      // Upload to renderer - will be drawn on the section plane
+      // Pass sectionRange to match exactly what render() uses for section plane position
+      renderer.uploadSection2DOverlay(
+        polygons,
+        lines,
+        sectionPlane.axis,
+        sectionPlane.position,
+        sectionRangeRef.current ?? undefined,  // Same range as section plane
+        sectionPlane.flipped
+      );
+    } else {
+      // Clear overlay when not in section mode, no drawing, or overlay disabled
+      renderer.clearSection2DOverlay();
+    }
+
+    // Re-render to show/hide overlay
+    renderer.render({
+      hiddenIds: hiddenEntitiesRef.current,
+      isolatedIds: isolatedEntitiesRef.current,
+      selectedId: selectedEntityIdRef.current,
+      selectedIds: selectedEntityIdsRef.current,
+      selectedModelIndex: selectedModelIndexRef.current,
+      clearColor: clearColorRef.current,
+      sectionPlane: activeTool === 'section' ? {
+        ...sectionPlane,
+        min: sectionRangeRef.current?.min,
+        max: sectionRangeRef.current?.max,
+      } : undefined,
+    });
+  }, [drawing2D, activeTool, sectionPlane, isInitialized, coordinateInfo, show3DOverlay]);
 
   // Re-render when visibility, selection, or section plane changes
   useEffect(() => {
@@ -1254,10 +2188,16 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
       isolatedIds: isolatedEntities,
       selectedId: selectedEntityId,
       selectedIds: selectedEntityIds,
+      selectedModelIndex,
       clearColor: clearColorRef.current,
-      sectionPlane: sectionPlane.enabled ? sectionPlane : undefined,
+      sectionPlane: activeTool === 'section' ? {
+        ...sectionPlane,
+        min: sectionRange?.min,
+        max: sectionRange?.max,
+      } : undefined,
+      buildingRotation: coordinateInfo?.buildingRotation,
     });
-  }, [hiddenEntities, isolatedEntities, selectedEntityId, selectedEntityIds, isInitialized, sectionPlane]);
+  }, [hiddenEntities, isolatedEntities, selectedEntityId, selectedEntityIds, selectedModelIndex, isInitialized, sectionPlane, activeTool, sectionRange, coordinateInfo?.buildingRotation]);
 
   return (
     <canvas