npm - @ifc-lite/viewer - Versions diffs - 1.0.0 → 1.1.0 - Mend

@ifc-lite/viewer 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/assets/{geometry.worker-DpnHtNr3.ts → geometry.worker-CiROVpKV.ts} +6 -9
package/dist/assets/ifc-lite_bg-BQVS1Fh7.wasm +0 -0
package/dist/assets/index-CvYpbxNF.js +728 -0
package/dist/ifc-lite_bg.wasm +0 -0
package/dist/index.html +1 -1
package/package.json +9 -9
package/public/ifc-lite_bg.wasm +0 -0
package/src/components/viewer/Viewport.tsx +198 -66
package/src/components/viewer/ViewportContainer.tsx +1 -1
package/src/hooks/useIfc.ts +235 -20
package/src/services/ifc-cache.ts +251 -0
package/src/store.ts +55 -4
package/tsconfig.json +5 -1
package/vite.config.ts +15 -1
package/dist/assets/ifc_lite_wasm_bg-Cd3m3f2h.wasm +0 -0
package/dist/assets/index-Dzz3WVwq.js +0 -637
package/dist/ifc_lite_wasm_bg.wasm +0 -0
package/public/ifc_lite_wasm_bg.wasm +0 -0

package/dist/ifc-lite_bg.wasm ADDED Viewed

Binary file

package/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>IFC-Lite Viewer</title>
-  <script type="module" crossorigin src="/assets/index-Dzz3WVwq.js"></script>
+  <script type="module" crossorigin src="/assets/index-CvYpbxNF.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-DKe9Oy-s.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ifc-lite/viewer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "IFC-Lite viewer application",
   "type": "module",
   "dependencies": {
@@ -27,13 +27,14 @@
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "zustand": "^4.4.0",
-    "@ifc-lite/data": "1.0.0",
-    "@ifc-lite/geometry": "1.0.0",
-    "@ifc-lite/parser": "1.0.0",
-    "@ifc-lite/export": "1.0.0",
-    "@ifc-lite/query": "1.0.0",
-    "@ifc-lite/renderer": "1.0.0",
-    "@ifc-lite/spatial": "1.0.0"
+    "@ifc-lite/cache": "1.1.0",
+    "@ifc-lite/export": "1.1.0",
+    "@ifc-lite/geometry": "1.1.0",
+    "@ifc-lite/parser": "1.1.0",
+    "@ifc-lite/renderer": "1.1.0",
+    "@ifc-lite/spatial": "1.1.0",
+    "@ifc-lite/data": "1.1.0",
+    "@ifc-lite/query": "1.1.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
@@ -45,7 +46,6 @@
   },
   "scripts": {
     "dev": "vite",
-    "prebuild": "cp ../../packages/wasm/ifc_lite_wasm_bg.wasm public/ifc_lite_wasm_bg.wasm",
     "build": "(tsc || true) && vite build",
     "preview": "vite preview"
   }

package/public/ifc-lite_bg.wasm ADDED Viewed

Binary file

package/src/components/viewer/Viewport.tsx CHANGED Viewed

@@ -389,7 +389,9 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           const y = e.clientY - rect.top;
           // Pick at cursor position - orbit around what user is clicking on
-          const pickedId = await renderer.pick(x, y);
+          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);
             if (center) {
@@ -477,7 +479,9 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           const now = Date.now();
           if (now - lastHoverCheckRef.current > hoverThrottleMs) {
             lastHoverCheckRef.current = now;
-            const pickedId = await renderer.pick(x, y);
+            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 });
             } else {
@@ -548,7 +552,9 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         // Handle measure tool clicks
         if (tool === 'measure') {
-          const pickedId = await renderer.pick(x, y);
+          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
@@ -656,7 +662,9 @@ 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 pickedId = await renderer.pick(x, y);
+          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);
           }
@@ -664,7 +672,10 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           lastClickPosRef.current = null;
         } else {
           // Single click
-          const pickedId = await renderer.pick(x, y);
+          // 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 });
           // Multi-selection with Ctrl/Cmd
           if (e.ctrlKey || e.metaKey) {
@@ -709,7 +720,9 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
           const x = touchState.touches[0].clientX - rect.left;
           const y = touchState.touches[0].clientY - rect.top;
-          const pickedId = await renderer.pick(x, y);
+          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);
             if (center) {
@@ -947,6 +960,13 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
   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 progress = useViewerStore((state) => state.progress);
+  const isStreaming = progress !== null && progress.percent < 100;
   useEffect(() => {
     const renderer = rendererRef.current;
@@ -958,46 +978,52 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
     const scene = renderer.getScene();
     const currentLength = geometry.length;
-    const geometryChanged = lastGeometryRef.current !== geometry;
+    const lastLength = lastGeometryLengthRef.current;
-    if (geometryChanged && lastGeometryRef.current !== null) {
-      // New file loaded - reset camera and bounds
+    // Use length-based detection instead of reference comparison
+    // 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 isCleared = currentLength === 0;
+    if (isCleared) {
+      // Geometry cleared - reset camera and bounds
       scene.clear();
       processedMeshIdsRef.current.clear();
       cameraFittedRef.current = false;
+      finalBoundsRefittedRef.current = false;
       lastGeometryLengthRef.current = 0;
-      lastGeometryRef.current = geometry;
-      // Reset camera state (clear orbit pivot, stop inertia, cancel animations)
+      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 },
       };
-    } else if (currentLength > lastGeometryLengthRef.current) {
-      lastGeometryRef.current = geometry;
-    } else if (currentLength === 0) {
-      // Geometry cleared - reset camera and bounds
+      return;
+    } else if (isNewFile) {
+      // New file loaded - reset camera and bounds
       scene.clear();
       processedMeshIdsRef.current.clear();
       cameraFittedRef.current = false;
+      finalBoundsRefittedRef.current = false;
       lastGeometryLengthRef.current = 0;
-      lastGeometryRef.current = null;
-      // Reset camera state
+      lastGeometryRef.current = geometry;
+      // Reset camera state (clear orbit pivot, stop inertia, cancel animations)
       renderer.getCamera().reset();
       // Reset geometry bounds to default
       geometryBoundsRef.current = {
         min: { x: -100, y: -100, z: -100 },
         max: { x: 100, y: 100, z: 100 },
       };
-      return;
-    } else if (currentLength === lastGeometryLengthRef.current && !geometryChanged) {
-      return;
-    } else {
-      // Length changed or other scenario - reset camera and bounds
+    } 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
@@ -1007,58 +1033,130 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         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) {
+        const shiftedBounds = coordinateInfo.shiftedBounds;
+        const newMaxSize = Math.max(
+          shiftedBounds.max.x - shiftedBounds.min.x,
+          shiftedBounds.max.y - shiftedBounds.min.y,
+          shiftedBounds.max.z - shiftedBounds.min.z
+        );
+        if (newMaxSize > 0 && Number.isFinite(newMaxSize)) {
+          // Only refit camera for LARGE models (>1000 meshes) where geometry streamed in multiple batches
+          // Small models complete in one batch, so their initial camera fit is already correct
+          const isLargeModel = geometry.length > 1000;
+          if (isLargeModel) {
+            const oldBounds = geometryBoundsRef.current;
+            const oldMaxSize = Math.max(
+              oldBounds.max.x - oldBounds.min.x,
+              oldBounds.max.y - oldBounds.min.y,
+              oldBounds.max.z - oldBounds.min.z
+            );
+            // Refit camera if bounds expanded significantly (>10% larger)
+            // This handles skyscrapers where upper floors arrive in later batches
+            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);
+            }
+          }
+          // Always update bounds for accurate zoom-to-fit, home view, etc.
+          geometryBoundsRef.current = { min: { ...shiftedBounds.min }, max: { ...shiftedBounds.max } };
+          finalBoundsRefittedRef.current = true;
+        }
+      }
+      return;
     }
-    if (lastGeometryRef.current === null) {
+    // For incremental batches: update reference and continue to add new meshes
+    if (isIncremental) {
+      lastGeometryRef.current = geometry;
+    } else if (lastGeometryRef.current === null) {
       lastGeometryRef.current = geometry;
     }
     const startIndex = lastGeometryLengthRef.current;
     const meshesToAdd = geometry.slice(startIndex);
+    // Filter out already processed meshes
+    const newMeshes: MeshData[] = [];
     for (const meshData of meshesToAdd) {
-      if (processedMeshIdsRef.current.has(meshData.expressId)) continue;
-      const vertexCount = meshData.positions.length / 3;
-      const interleaved = new Float32Array(vertexCount * 6);
-      for (let i = 0; i < vertexCount; i++) {
-        const base = i * 6;
-        const posBase = i * 3;
-        interleaved[base] = meshData.positions[posBase];
-        interleaved[base + 1] = meshData.positions[posBase + 1];
-        interleaved[base + 2] = meshData.positions[posBase + 2];
-        interleaved[base + 3] = meshData.normals[posBase];
-        interleaved[base + 4] = meshData.normals[posBase + 1];
-        interleaved[base + 5] = meshData.normals[posBase + 2];
+      if (!processedMeshIdsRef.current.has(meshData.expressId)) {
+        newMeshes.push(meshData);
+        processedMeshIdsRef.current.add(meshData.expressId);
       }
+    }
-      const vertexBuffer = device.createBuffer({
-        size: interleaved.byteLength,
-        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-      });
-      device.queue.writeBuffer(vertexBuffer, 0, interleaved);
+    if (newMeshes.length > 0) {
+      // Batch meshes by color for efficient rendering (reduces draw calls from N to ~100-500)
+      // This dramatically improves performance for large models (50K+ meshes)
+      const pipeline = renderer.getPipeline();
+      if (pipeline) {
+        // Use batched rendering - groups meshes by color into single draw calls
+        (scene as any).appendToBatches(newMeshes, device, pipeline);
+        // 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);
+        }
+      } else {
+        // Fallback: add individual meshes if pipeline not ready
+        for (const meshData of newMeshes) {
+          const vertexCount = meshData.positions.length / 3;
+          const interleaved = new Float32Array(vertexCount * 6);
+          for (let i = 0; i < vertexCount; i++) {
+            const base = i * 6;
+            const posBase = i * 3;
+            interleaved[base] = meshData.positions[posBase];
+            interleaved[base + 1] = meshData.positions[posBase + 1];
+            interleaved[base + 2] = meshData.positions[posBase + 2];
+            interleaved[base + 3] = meshData.normals[posBase];
+            interleaved[base + 4] = meshData.normals[posBase + 1];
+            interleaved[base + 5] = meshData.normals[posBase + 2];
+          }
-      const indexBuffer = device.createBuffer({
-        size: meshData.indices.byteLength,
-        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-      });
-      device.queue.writeBuffer(indexBuffer, 0, meshData.indices);
-      scene.addMesh({
-        expressId: meshData.expressId,
-        vertexBuffer,
-        indexBuffer,
-        indexCount: meshData.indices.length,
-        transform: MathUtils.identity(),
-        color: meshData.color,
-      });
+          const vertexBuffer = device.createBuffer({
+            size: interleaved.byteLength,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+          });
+          device.queue.writeBuffer(vertexBuffer, 0, interleaved);
-      processedMeshIdsRef.current.add(meshData.expressId);
+          const indexBuffer = device.createBuffer({
+            size: meshData.indices.byteLength,
+            usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+          });
+          device.queue.writeBuffer(indexBuffer, 0, meshData.indices);
+          scene.addMesh({
+            expressId: meshData.expressId,
+            vertexBuffer,
+            indexBuffer,
+            indexCount: meshData.indices.length,
+            transform: MathUtils.identity(),
+            color: meshData.color,
+          });
+        }
+      }
     }
     lastGeometryLengthRef.current = currentLength;
     // Fit camera and store bounds
+    // IMPORTANT: Fit camera immediately when we have valid bounds to avoid starting inside model
+    // The default camera position (50, 50, 100) is inside most models that are shifted to origin
     if (!cameraFittedRef.current && coordinateInfo?.shiftedBounds) {
       const shiftedBounds = coordinateInfo.shiftedBounds;
       const maxSize = Math.max(
@@ -1066,12 +1164,18 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         shiftedBounds.max.y - shiftedBounds.min.y,
         shiftedBounds.max.z - shiftedBounds.min.z
       );
+      // Fit camera immediately when we have valid bounds
+      // For streaming: the first batch already has complete bounds from coordinate handler
+      // (bounds are calculated from ALL geometry before streaming starts)
+      // Waiting for streaming to complete causes the camera to start inside the model
       if (maxSize > 0 && Number.isFinite(maxSize)) {
         renderer.getCamera().fitToBounds(shiftedBounds.min, shiftedBounds.max);
         geometryBoundsRef.current = { min: { ...shiftedBounds.min }, max: { ...shiftedBounds.max } };
         cameraFittedRef.current = true;
       }
-    } else if (!cameraFittedRef.current && geometry.length > 0) {
+    } else if (!cameraFittedRef.current && geometry.length > 0 && !isStreaming) {
+      // Fallback: calculate bounds from geometry array (only when streaming is complete)
+      // This ensures we have complete bounds before fitting camera
       const fallbackBounds = {
         min: { x: Infinity, y: Infinity, z: Infinity },
         max: { x: -Infinity, y: -Infinity, z: -Infinity },
@@ -1093,21 +1197,49 @@ export function Viewport({ geometry, coordinateInfo }: ViewportProps) {
         }
       }
-      if (fallbackBounds.min.x !== Infinity) {
+      const maxSize = Math.max(
+        fallbackBounds.max.x - fallbackBounds.min.x,
+        fallbackBounds.max.y - fallbackBounds.min.y,
+        fallbackBounds.max.z - fallbackBounds.min.z
+      );
+      if (fallbackBounds.min.x !== Infinity && maxSize > 0 && Number.isFinite(maxSize)) {
         renderer.getCamera().fitToBounds(fallbackBounds.min, fallbackBounds.max);
         geometryBoundsRef.current = fallbackBounds;
         cameraFittedRef.current = true;
       }
     }
-    renderer.render({
-      hiddenIds: hiddenEntitiesRef.current,
-      isolatedIds: isolatedEntitiesRef.current,
-      selectedId: selectedEntityIdRef.current,
-      clearColor: clearColorRef.current,
-    });
-    // Note: visibility states are NOT in dependencies - they use refs and trigger re-render via separate effect
-  }, [geometry, isInitialized, coordinateInfo]);
+    // Note: Background instancing conversion removed
+    // Regular MeshData meshes are rendered directly with their correct positions
+    // 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
+    // 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;
+    if (shouldRender) {
+      renderer.render();
+      lastRenderTimeRef.current = now;
+    }
+  }, [geometry, coordinateInfo, isInitialized, isStreaming]);
+  // Force render when streaming completes (progress goes from <100% to 100% or null)
+  const prevIsStreamingRef = useRef(isStreaming);
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    if (!renderer || !isInitialized) return;
+    // If streaming just completed (was streaming, now not), force immediate render
+    if (prevIsStreamingRef.current && !isStreaming) {
+      renderer.render();
+      lastRenderTimeRef.current = Date.now();
+    }
+    prevIsStreamingRef.current = isStreaming;
+  }, [isStreaming, isInitialized]);
   // Get selectedEntityIds from store for multi-selection
   const selectedEntityIds = useViewerStore((state) => state.selectedEntityIds);

package/src/components/viewer/ViewportContainer.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ export function ViewportContainer() {
   const { geometryResult, ifcDataStore } = useIfc();
   const selectedStorey = useViewerStore((s) => s.selectedStorey);
-  // Filter geometry based on selected storey
+  // Filter geometry based on selected storey (for non-instanced fallback)
   const filteredGeometry = useMemo(() => {
     if (!geometryResult?.meshes || !ifcDataStore?.spatialHierarchy) {
       return geometryResult?.meshes || null;