@ifc-lite/renderer 1.1.7 → 1.2.1

package/dist/index.js

@@ -11,7 +11,12 @@ export { Scene } from './scene.js';
 export { Picker } from './picker.js';
 export { MathUtils } from './math.js';
 export { SectionPlaneRenderer } from './section-plane.js';
+export { Raycaster } from './raycaster.js';
+export { SnapDetector, SnapType } from './snap-detector.js';
+export { BVH } from './bvh.js';
 export * from './types.js';
+// Zero-copy GPU upload (new - faster, less memory)
+export { ZeroCopyGpuUploader, createZeroCopyUploader, } from './zero-copy-uploader.js';
 import { WebGPUDevice } from './device.js';
 import { RenderPipeline, InstancedRenderPipeline } from './pipeline.js';
 import { Camera } from './camera.js';
@@ -21,6 +26,9 @@ import { FrustumUtils } from '@ifc-lite/spatial';
 import { SectionPlaneRenderer } from './section-plane.js';
 import { deduplicateMeshes } from '@ifc-lite/geometry';
 import { MathUtils } from './math.js';
+import { Raycaster } from './raycaster.js';
+import { SnapDetector } from './snap-detector.js';
+import { BVH } from './bvh.js';
 /**
  * Main renderer class
  */
@@ -34,11 +42,22 @@ export class Renderer {
     canvas;
     sectionPlaneRenderer = null;
     modelBounds = null;
+    raycaster;
+    snapDetector;
+    bvh;
+    // BVH cache
+    bvhCache = null;
+    // Performance constants
+    BVH_THRESHOLD = 100;
     constructor(canvas) {
         this.canvas = canvas;
         this.device = new WebGPUDevice();
         this.camera = new Camera();
         this.scene = new Scene();
+        this.raycaster = new Raycaster();
+        this.snapDetector = new SnapDetector();
+        this.bvh = new BVH();
+        this.bvhCache = null;
     }
     /**
      * Initialize renderer
@@ -57,7 +76,7 @@ export class Renderer {
         this.pipeline = new RenderPipeline(this.device, width, height);
         this.instancedPipeline = new InstancedRenderPipeline(this.device, width, height);
         this.picker = new Picker(this.device, width, height);
-        this.sectionPlaneRenderer = new SectionPlaneRenderer(this.device.getDevice(), this.device.getFormat());
+        this.sectionPlaneRenderer = new SectionPlaneRenderer(this.device.getDevice(), this.device.getFormat(), this.pipeline.getSampleCount());
         this.camera.setAspect(width / height);
     }
     /**
@@ -366,44 +385,17 @@ export class Renderer {
         }
         const device = this.device.getDevice();
         const viewProj = this.camera.getViewProjMatrix().m;
-        // Ensure all meshes have GPU resources (in case they were added before pipeline was ready)
-        this.ensureMeshResources();
         let meshes = this.scene.getMeshes();
         // Check if visibility filtering is active
         const hasHiddenFilter = options.hiddenIds && options.hiddenIds.size > 0;
         const hasIsolatedFilter = options.isolatedIds !== null && options.isolatedIds !== undefined;
         const hasVisibilityFiltering = hasHiddenFilter || hasIsolatedFilter;
-        // When using batched rendering with visibility filtering, we need individual meshes
-        // Create them lazily from stored MeshData for visible elements only
-        const batchedMeshes = this.scene.getBatchedMeshes();
-        if (hasVisibilityFiltering && batchedMeshes.length > 0 && meshes.length === 0) {
-            // Collect all expressIds from batched meshes
-            const allExpressIds = new Set();
-            for (const batch of batchedMeshes) {
-                for (const expressId of batch.expressIds) {
-                    allExpressIds.add(expressId);
-                }
-            }
-            // Filter to get visible expressIds
-            const visibleExpressIds = [];
-            for (const expressId of allExpressIds) {
-                const isHidden = options.hiddenIds?.has(expressId) ?? false;
-                const isIsolated = !hasIsolatedFilter || options.isolatedIds.has(expressId);
-                if (!isHidden && isIsolated) {
-                    visibleExpressIds.push(expressId);
-                }
-            }
-            // Create individual meshes for visible elements only
-            const existingMeshIds = new Set(meshes.map(m => m.expressId));
-            for (const expressId of visibleExpressIds) {
-                if (!existingMeshIds.has(expressId) && this.scene.hasMeshData(expressId)) {
-                    const meshData = this.scene.getMeshData(expressId);
-                    this.createMeshFromData(meshData);
-                }
-            }
-            // Get updated meshes list
-            meshes = this.scene.getMeshes();
-        }
+        // PERFORMANCE FIX: Use batch-level visibility filtering instead of creating individual meshes
+        // Only create individual meshes for selected elements (for highlighting)
+        // Batches are filtered at render time - fully visible batches render normally,
+        // partially visible batches are skipped (their visible elements will be in other batches or individual meshes)
+        // Ensure all existing meshes have GPU resources
+        this.ensureMeshResources();
         // Frustum culling (if enabled and spatial index available)
         if (options.enableFrustumCulling && options.spatialIndex) {
             try {
@@ -467,50 +459,64 @@ export class Renderer {
             const allMeshes = [...opaqueMeshes, ...transparentMeshes];
             const selectedId = options.selectedId;
             const selectedIds = options.selectedIds;
-            // Calculate section plane parameters if enabled
+            // Calculate section plane parameters and model bounds
+            // Always calculate bounds when sectionPlane is provided (for preview and active mode)
             let sectionPlaneData;
-            if (options.sectionPlane?.enabled) {
-                // Calculate plane normal based on axis
-                const normal = [0, 0, 0];
-                if (options.sectionPlane.axis === 'x')
-                    normal[0] = 1;
-                else if (options.sectionPlane.axis === 'y')
-                    normal[1] = 1;
-                else
-                    normal[2] = 1;
-                // Get model bounds for calculating plane position and visual
+            if (options.sectionPlane) {
+                // Get model bounds from ALL geometry sources: individual meshes AND batched meshes
                 const boundsMin = { x: Infinity, y: Infinity, z: Infinity };
                 const boundsMax = { x: -Infinity, y: -Infinity, z: -Infinity };
-                if (meshes.length > 0) {
-                    for (const mesh of meshes) {
-                        if (mesh.bounds) {
-                            boundsMin.x = Math.min(boundsMin.x, mesh.bounds.min[0]);
-                            boundsMin.y = Math.min(boundsMin.y, mesh.bounds.min[1]);
-                            boundsMin.z = Math.min(boundsMin.z, mesh.bounds.min[2]);
-                            boundsMax.x = Math.max(boundsMax.x, mesh.bounds.max[0]);
-                            boundsMax.y = Math.max(boundsMax.y, mesh.bounds.max[1]);
-                            boundsMax.z = Math.max(boundsMax.z, mesh.bounds.max[2]);
-                        }
+                // Check individual meshes
+                for (const mesh of meshes) {
+                    if (mesh.bounds) {
+                        boundsMin.x = Math.min(boundsMin.x, mesh.bounds.min[0]);
+                        boundsMin.y = Math.min(boundsMin.y, mesh.bounds.min[1]);
+                        boundsMin.z = Math.min(boundsMin.z, mesh.bounds.min[2]);
+                        boundsMax.x = Math.max(boundsMax.x, mesh.bounds.max[0]);
+                        boundsMax.y = Math.max(boundsMax.y, mesh.bounds.max[1]);
+                        boundsMax.z = Math.max(boundsMax.z, mesh.bounds.max[2]);
                     }
-                    if (!Number.isFinite(boundsMin.x)) {
-                        boundsMin.x = boundsMin.y = boundsMin.z = -100;
-                        boundsMax.x = boundsMax.y = boundsMax.z = 100;
+                }
+                // Check batched meshes (most geometry is here!)
+                const batchedMeshes = this.scene.getBatchedMeshes();
+                for (const batch of batchedMeshes) {
+                    if (batch.bounds) {
+                        boundsMin.x = Math.min(boundsMin.x, batch.bounds.min[0]);
+                        boundsMin.y = Math.min(boundsMin.y, batch.bounds.min[1]);
+                        boundsMin.z = Math.min(boundsMin.z, batch.bounds.min[2]);
+                        boundsMax.x = Math.max(boundsMax.x, batch.bounds.max[0]);
+                        boundsMax.y = Math.max(boundsMax.y, batch.bounds.max[1]);
+                        boundsMax.z = Math.max(boundsMax.z, batch.bounds.max[2]);
                     }
                 }
-                else {
+                // Fallback if no bounds found
+                if (!Number.isFinite(boundsMin.x)) {
                     boundsMin.x = boundsMin.y = boundsMin.z = -100;
                     boundsMax.x = boundsMax.y = boundsMax.z = 100;
                 }
                 // Store bounds for section plane visual
                 this.modelBounds = { min: boundsMin, max: boundsMax };
-                // Get axis-specific range
-                const axisIdx = options.sectionPlane.axis === 'x' ? 'x' : options.sectionPlane.axis === 'y' ? 'y' : 'z';
-                const minVal = boundsMin[axisIdx];
-                const maxVal = boundsMax[axisIdx];
-                // Calculate plane distance from position percentage
-                const range = maxVal - minVal;
-                const distance = minVal + (options.sectionPlane.position / 100) * range;
-                sectionPlaneData = { normal, distance, enabled: true };
+                // Only calculate clipping data if section is enabled
+                if (options.sectionPlane.enabled) {
+                    // Calculate plane normal based on semantic axis
+                    // down = Y axis (horizontal cut), front = Z axis, side = X axis
+                    const normal = [0, 0, 0];
+                    if (options.sectionPlane.axis === 'side')
+                        normal[0] = 1; // X axis
+                    else if (options.sectionPlane.axis === 'down')
+                        normal[1] = 1; // Y axis (horizontal)
+                    else
+                        normal[2] = 1; // Z axis (front)
+                    // Get axis-specific range based on semantic axis
+                    // Use min/max overrides from sectionPlane if provided (storey-based range)
+                    const axisIdx = options.sectionPlane.axis === 'side' ? 'x' : options.sectionPlane.axis === 'down' ? 'y' : 'z';
+                    const minVal = options.sectionPlane.min ?? boundsMin[axisIdx];
+                    const maxVal = options.sectionPlane.max ?? boundsMax[axisIdx];
+                    // Calculate plane distance from position percentage
+                    const range = maxVal - minVal;
+                    const distance = minVal + (options.sectionPlane.position / 100) * range;
+                    sectionPlaneData = { normal, distance, enabled: true };
+                }
             }
             for (const mesh of allMeshes) {
                 if (mesh.uniformBuffer) {
@@ -551,30 +557,92 @@ export class Renderer {
             }
             // Now record draw commands
             const encoder = device.createCommandEncoder();
+            // Set up MSAA rendering if enabled
+            const msaaView = this.pipeline.getMultisampleTextureView();
+            const useMSAA = msaaView !== null && this.pipeline.getSampleCount() > 1;
             const pass = encoder.beginRenderPass({
                 colorAttachments: [
                     {
-                        view: textureView,
+                        // If MSAA enabled: render to multisample texture, resolve to swap chain
+                        // If MSAA disabled: render directly to swap chain
+                        view: useMSAA ? msaaView : textureView,
+                        resolveTarget: useMSAA ? textureView : undefined,
                         loadOp: 'clear',
                         clearValue: clearColor,
-                        storeOp: 'store',
+                        storeOp: useMSAA ? 'discard' : 'store', // Discard MSAA buffer after resolve
                     },
                 ],
                 depthStencilAttachment: {
                     view: this.pipeline.getDepthTextureView(),
-                    depthClearValue: 1.0,
+                    depthClearValue: 0.0, // Reverse-Z: clear to 0.0 (far plane)
                     depthLoadOp: 'clear',
                     depthStoreOp: 'store',
                 },
             });
             pass.setPipeline(this.pipeline.getPipeline());
             // Check if we have batched meshes (preferred for performance)
-            // When visibility filtering is active, we need to render individual meshes instead of batches
-            // because batches merge geometry by color and can't be partially rendered
             const allBatchedMeshes = this.scene.getBatchedMeshes();
-            if (allBatchedMeshes.length > 0 && !hasVisibilityFiltering) {
-                // Separate batches into selected and non-selected
-                const nonSelectedBatches = [];
+            // PERFORMANCE FIX: Always use batch rendering when we have batches
+            // Apply visibility filtering at the BATCH level instead of creating individual meshes
+            // This keeps draw calls at ~50-200 instead of 60K+
+            if (allBatchedMeshes.length > 0) {
+                // Pre-compute visibility for each batch (only when filtering is active)
+                // A batch is visible if ANY of its elements are visible
+                // A batch is fully visible if ALL of its elements are visible
+                const batchVisibility = new Map();
+                if (hasVisibilityFiltering) {
+                    for (const batch of allBatchedMeshes) {
+                        let visibleCount = 0;
+                        const total = batch.expressIds.length;
+                        for (const expressId of batch.expressIds) {
+                            const isHidden = options.hiddenIds?.has(expressId) ?? false;
+                            const isIsolated = !hasIsolatedFilter || options.isolatedIds.has(expressId);
+                            if (!isHidden && isIsolated) {
+                                visibleCount++;
+                            }
+                        }
+                        batchVisibility.set(batch.colorKey, {
+                            visible: visibleCount > 0,
+                            fullyVisible: visibleCount === total,
+                        });
+                    }
+                }
+                // Separate batches into opaque and transparent, filtering by visibility
+                // IMPORTANT: Only render FULLY visible batches - partially visible batches
+                // need individual mesh rendering to show only the visible elements
+                const opaqueBatches = [];
+                const transparentBatches = [];
+                // Collect visible expressIds from partially visible batches
+                // These need individual mesh rendering instead of batch rendering
+                const partiallyVisibleExpressIds = new Set();
+                for (const batch of allBatchedMeshes) {
+                    // Check visibility
+                    if (hasVisibilityFiltering) {
+                        const vis = batchVisibility.get(batch.colorKey);
+                        if (!vis || !vis.visible)
+                            continue; // Skip completely hidden batches
+                        // FIX: Skip partially visible batches - their visible elements
+                        // will be rendered individually below
+                        if (!vis.fullyVisible) {
+                            // Collect the visible expressIds from this batch
+                            for (const expressId of batch.expressIds) {
+                                const isHidden = options.hiddenIds?.has(expressId) ?? false;
+                                const isIsolated = !hasIsolatedFilter || options.isolatedIds.has(expressId);
+                                if (!isHidden && isIsolated) {
+                                    partiallyVisibleExpressIds.add(expressId);
+                                }
+                            }
+                            continue; // Don't add batch to render list
+                        }
+                    }
+                    const alpha = batch.color[3];
+                    if (alpha < 0.99) {
+                        transparentBatches.push(batch);
+                    }
+                    else {
+                        opaqueBatches.push(batch);
+                    }
+                }
                 const selectedExpressIds = new Set();
                 if (selectedId !== undefined && selectedId !== null) {
                     selectedExpressIds.add(selectedId);
@@ -584,11 +652,10 @@ export class Renderer {
                         selectedExpressIds.add(id);
                     }
                 }
-                // Render ALL batches normally (non-selected meshes will render normally)
-                // Selected meshes will be rendered individually on top with highlight
-                for (const batch of allBatchedMeshes) {
+                // Helper function to render a batch
+                const renderBatch = (batch) => {
                     if (!batch.bindGroup || !batch.uniformBuffer)
-                        continue;
+                        return;
                     // Update uniform buffer for this batch
                     const buffer = new Float32Array(48);
                     const flagBuffer = new Uint32Array(buffer.buffer, 176, 4);
@@ -621,21 +688,109 @@ export class Renderer {
                     pass.setVertexBuffer(0, batch.vertexBuffer);
                     pass.setIndexBuffer(batch.indexBuffer, 'uint32');
                     pass.drawIndexed(batch.indexCount);
+                };
+                // Render opaque batches first with opaque pipeline
+                pass.setPipeline(this.pipeline.getPipeline());
+                for (const batch of opaqueBatches) {
+                    renderBatch(batch);
+                }
+                // Render partially visible elements individually (from batches that had mixed visibility)
+                // This is the FIX for hide/isolate showing wrong batches
+                const allMeshes = this.scene.getMeshes();
+                const existingMeshIds = new Set(allMeshes.map(m => m.expressId));
+                if (partiallyVisibleExpressIds.size > 0) {
+                    // Create GPU resources lazily for partially visible meshes
+                    for (const pvId of partiallyVisibleExpressIds) {
+                        if (!existingMeshIds.has(pvId) && this.scene.hasMeshData(pvId)) {
+                            const meshData = this.scene.getMeshData(pvId);
+                            this.createMeshFromData(meshData);
+                            existingMeshIds.add(pvId);
+                        }
+                    }
+                    // Get partially visible meshes and render them
+                    const partialMeshes = this.scene.getMeshes().filter(mesh => partiallyVisibleExpressIds.has(mesh.expressId));
+                    // Ensure partial meshes have uniform buffers and bind groups
+                    for (const mesh of partialMeshes) {
+                        if (!mesh.uniformBuffer && this.pipeline) {
+                            mesh.uniformBuffer = device.createBuffer({
+                                size: this.pipeline.getUniformBufferSize(),
+                                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+                            });
+                            mesh.bindGroup = device.createBindGroup({
+                                layout: this.pipeline.getBindGroupLayout(),
+                                entries: [
+                                    {
+                                        binding: 0,
+                                        resource: { buffer: mesh.uniformBuffer },
+                                    },
+                                ],
+                            });
+                        }
+                    }
+                    // Render partially visible meshes (not selected, normal rendering)
+                    for (const mesh of partialMeshes) {
+                        if (!mesh.bindGroup || !mesh.uniformBuffer) {
+                            continue;
+                        }
+                        const buffer = new Float32Array(48);
+                        const flagBuffer = new Uint32Array(buffer.buffer, 176, 4);
+                        buffer.set(viewProj, 0);
+                        buffer.set(mesh.transform.m, 16);
+                        buffer.set(mesh.color, 32);
+                        buffer[36] = mesh.material?.metallic ?? 0.0;
+                        buffer[37] = mesh.material?.roughness ?? 0.6;
+                        // Section plane data
+                        if (sectionPlaneData) {
+                            buffer[40] = sectionPlaneData.normal[0];
+                            buffer[41] = sectionPlaneData.normal[1];
+                            buffer[42] = sectionPlaneData.normal[2];
+                            buffer[43] = sectionPlaneData.distance;
+                        }
+                        // Flags (not selected)
+                        flagBuffer[0] = 0;
+                        flagBuffer[1] = sectionPlaneData?.enabled ? 1 : 0;
+                        flagBuffer[2] = 0;
+                        flagBuffer[3] = 0;
+                        device.queue.writeBuffer(mesh.uniformBuffer, 0, buffer);
+                        // Use opaque or transparent pipeline based on alpha
+                        const isTransparent = mesh.color[3] < 0.99;
+                        if (isTransparent) {
+                            pass.setPipeline(this.pipeline.getTransparentPipeline());
+                        }
+                        else {
+                            pass.setPipeline(this.pipeline.getPipeline());
+                        }
+                        pass.setBindGroup(0, mesh.bindGroup);
+                        pass.setVertexBuffer(0, mesh.vertexBuffer);
+                        pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
+                        pass.drawIndexed(mesh.indexCount, 1, 0, 0, 0);
+                    }
                 }
                 // Render selected meshes individually for proper highlighting
                 // First, check if we have Mesh objects for selected IDs
                 // If not, create them lazily from stored MeshData
-                const allMeshes = this.scene.getMeshes();
-                const existingMeshIds = new Set(allMeshes.map(m => m.expressId));
-                // Create GPU resources lazily for selected meshes that don't have them yet
-                for (const selectedId of selectedExpressIds) {
-                    if (!existingMeshIds.has(selectedId) && this.scene.hasMeshData(selectedId)) {
-                        const meshData = this.scene.getMeshData(selectedId);
+                // FIX: Filter selected IDs by visibility BEFORE creating GPU resources
+                // This ensures highlights don't appear for hidden elements
+                const visibleSelectedIds = new Set();
+                for (const selId of selectedExpressIds) {
+                    // Skip if hidden
+                    if (options.hiddenIds?.has(selId))
+                        continue;
+                    // Skip if isolation is active and this entity is not isolated
+                    if (hasIsolatedFilter && !options.isolatedIds.has(selId))
+                        continue;
+                    visibleSelectedIds.add(selId);
+                }
+                // Create GPU resources lazily for visible selected meshes that don't have them yet
+                for (const selId of visibleSelectedIds) {
+                    if (!existingMeshIds.has(selId) && this.scene.hasMeshData(selId)) {
+                        const meshData = this.scene.getMeshData(selId);
                         this.createMeshFromData(meshData);
+                        existingMeshIds.add(selId);
                     }
                 }
-                // Now get selected meshes (includes newly created ones)
-                const selectedMeshes = this.scene.getMeshes().filter(mesh => selectedExpressIds.has(mesh.expressId));
+                // Now get selected meshes (only visible ones)
+                const selectedMeshes = this.scene.getMeshes().filter(mesh => visibleSelectedIds.has(mesh.expressId));
                 // Ensure selected meshes have uniform buffers and bind groups
                 for (const mesh of selectedMeshes) {
                     if (!mesh.uniformBuffer && this.pipeline) {
@@ -686,9 +841,49 @@ export class Renderer {
                     pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
                     pass.drawIndexed(mesh.indexCount, 1, 0, 0, 0);
                 }
+                // Render transparent BATCHED meshes with transparent pipeline (after opaque batches and selections)
+                if (transparentBatches.length > 0) {
+                    pass.setPipeline(this.pipeline.getTransparentPipeline());
+                    for (const batch of transparentBatches) {
+                        renderBatch(batch);
+                    }
+                }
+                // Render transparent individual meshes with transparent pipeline
+                if (transparentMeshes.length > 0) {
+                    pass.setPipeline(this.pipeline.getTransparentPipeline());
+                    for (const mesh of transparentMeshes) {
+                        if (!mesh.bindGroup || !mesh.uniformBuffer) {
+                            continue;
+                        }
+                        const buffer = new Float32Array(48);
+                        const flagBuffer = new Uint32Array(buffer.buffer, 176, 4);
+                        buffer.set(viewProj, 0);
+                        buffer.set(mesh.transform.m, 16);
+                        buffer.set(mesh.color, 32);
+                        buffer[36] = mesh.material?.metallic ?? 0.0;
+                        buffer[37] = mesh.material?.roughness ?? 0.6;
+                        // Section plane data
+                        if (sectionPlaneData) {
+                            buffer[40] = sectionPlaneData.normal[0];
+                            buffer[41] = sectionPlaneData.normal[1];
+                            buffer[42] = sectionPlaneData.normal[2];
+                            buffer[43] = sectionPlaneData.distance;
+                        }
+                        // Flags (not selected, transparent)
+                        flagBuffer[0] = 0;
+                        flagBuffer[1] = sectionPlaneData?.enabled ? 1 : 0;
+                        flagBuffer[2] = 0;
+                        flagBuffer[3] = 0;
+                        device.queue.writeBuffer(mesh.uniformBuffer, 0, buffer);
+                        pass.setBindGroup(0, mesh.bindGroup);
+                        pass.setVertexBuffer(0, mesh.vertexBuffer);
+                        pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
+                        pass.drawIndexed(mesh.indexCount, 1, 0, 0, 0);
+                    }
+                }
             }
             else {
-                // Fallback: render individual meshes (slower but works)
+                // Fallback: render individual meshes (only when no batches exist)
                 // Render opaque meshes with per-mesh bind groups
                 for (const mesh of opaqueMeshes) {
                     if (mesh.bindGroup) {
@@ -701,17 +896,20 @@ export class Renderer {
                     pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
                     pass.drawIndexed(mesh.indexCount, 1, 0, 0, 0);
                 }
-                // Render transparent meshes with per-mesh bind groups
-                for (const mesh of transparentMeshes) {
-                    if (mesh.bindGroup) {
-                        pass.setBindGroup(0, mesh.bindGroup);
-                    }
-                    else {
-                        pass.setBindGroup(0, this.pipeline.getBindGroup());
+                // Render transparent meshes with transparent pipeline (alpha blending)
+                if (transparentMeshes.length > 0) {
+                    pass.setPipeline(this.pipeline.getTransparentPipeline());
+                    for (const mesh of transparentMeshes) {
+                        if (mesh.bindGroup) {
+                            pass.setBindGroup(0, mesh.bindGroup);
+                        }
+                        else {
+                            pass.setBindGroup(0, this.pipeline.getBindGroup());
+                        }
+                        pass.setVertexBuffer(0, mesh.vertexBuffer);
+                        pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
+                        pass.drawIndexed(mesh.indexCount, 1, 0, 0, 0);
                     }
-                    pass.setVertexBuffer(0, mesh.vertexBuffer);
-                    pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
-                    pass.drawIndexed(mesh.indexCount, 1, 0, 0, 0);
                 }
             }
             // Render instanced meshes (much more efficient for repeated geometry)
@@ -735,16 +933,20 @@ export class Renderer {
                     }
                 }
             }
-            pass.end();
-            // Render section plane visual if enabled
-            if (sectionPlaneData?.enabled && this.sectionPlaneRenderer && this.modelBounds) {
-                this.sectionPlaneRenderer.render(encoder, textureView, this.pipeline.getDepthTextureView(), {
+            // Draw section plane visual BEFORE pass.end() (within same MSAA render pass)
+            // Always show plane when sectionPlane options are provided (as preview or active)
+            if (options.sectionPlane && this.sectionPlaneRenderer && this.modelBounds) {
+                this.sectionPlaneRenderer.draw(pass, {
                     axis: options.sectionPlane.axis,
                     position: options.sectionPlane.position,
                     bounds: this.modelBounds,
                     viewProj,
+                    isPreview: !options.sectionPlane.enabled, // Preview mode when not enabled
+                    min: options.sectionPlane.min,
+                    max: options.sectionPlane.max,
                 });
             }
+            pass.end();
             device.queue.submit([encoder.finish()]);
         }
         catch (error) {
@@ -759,6 +961,7 @@ export class Renderer {
     }
     /**
      * Pick object at screen coordinates
+     * Respects visibility filtering so users can only select visible elements
      */
     async pick(x, y, options) {
         if (!this.picker) {
@@ -770,38 +973,297 @@ export class Renderer {
             return null;
         }
         let meshes = this.scene.getMeshes();
-        // If we have batched meshes but no regular meshes, create picking meshes from stored MeshData
-        // This implements lazy loading for picking - meshes are created on-demand from MeshData
-        if (meshes.length === 0) {
-            const batchedMeshes = this.scene.getBatchedMeshes();
-            if (batchedMeshes.length > 0) {
-                // Collect all expressIds from batched meshes
-                const expressIds = new Set();
-                for (const batch of batchedMeshes) {
-                    for (const expressId of batch.expressIds) {
-                        expressIds.add(expressId);
-                    }
+        const batchedMeshes = this.scene.getBatchedMeshes();
+        // If we have batched meshes, check if we need CPU raycasting
+        // This handles the case where we have SOME individual meshes (e.g., from highlighting)
+        // but not enough for full GPU picking coverage
+        if (batchedMeshes.length > 0) {
+            // Collect all expressIds from batched meshes
+            const expressIds = new Set();
+            for (const batch of batchedMeshes) {
+                for (const expressId of batch.expressIds) {
+                    expressIds.add(expressId);
                 }
-                // Track existing expressIds to avoid duplicates (using Set for O(1) lookup)
-                const existingExpressIds = new Set(meshes.map(m => m.expressId));
-                // Create picking meshes lazily from stored MeshData
-                for (const expressId of expressIds) {
-                    if (!existingExpressIds.has(expressId) && this.scene.hasMeshData(expressId)) {
-                        const meshData = this.scene.getMeshData(expressId);
-                        if (meshData) {
-                            this.createMeshFromData(meshData);
-                            existingExpressIds.add(expressId); // Track newly created mesh
-                        }
+            }
+            // Track existing expressIds to avoid duplicates (using Set for O(1) lookup)
+            const existingExpressIds = new Set(meshes.map(m => m.expressId));
+            // Count how many meshes we'd need to create for full GPU picking
+            let toCreate = 0;
+            for (const expressId of expressIds) {
+                if (existingExpressIds.has(expressId))
+                    continue;
+                if (options?.hiddenIds?.has(expressId))
+                    continue;
+                if (options?.isolatedIds !== null && options?.isolatedIds !== undefined && !options.isolatedIds.has(expressId))
+                    continue;
+                if (this.scene.hasMeshData(expressId))
+                    toCreate++;
+            }
+            // PERFORMANCE FIX: Use CPU raycasting for large models instead of creating GPU meshes
+            // GPU picking requires individual mesh buffers; for 60K+ elements this is too slow
+            // CPU raycasting uses bounding box filtering + triangle tests - no GPU buffers needed
+            const MAX_PICK_MESH_CREATION = 500;
+            if (toCreate > MAX_PICK_MESH_CREATION) {
+                // Use CPU raycasting fallback - works regardless of how many individual meshes exist
+                const ray = this.camera.unprojectToRay(x, y, this.canvas.width, this.canvas.height);
+                const hit = this.scene.raycast(ray.origin, ray.direction, options?.hiddenIds, options?.isolatedIds);
+                return hit ? hit.expressId : null;
+            }
+            // For smaller models, create GPU meshes for picking
+            // Only create meshes for VISIBLE elements (not hidden, and either no isolation or in isolated set)
+            for (const expressId of expressIds) {
+                // Skip if already exists
+                if (existingExpressIds.has(expressId))
+                    continue;
+                // Skip if hidden
+                if (options?.hiddenIds?.has(expressId))
+                    continue;
+                // Skip if isolation is active and this entity is not isolated
+                if (options?.isolatedIds !== null && options?.isolatedIds !== undefined && !options.isolatedIds.has(expressId))
+                    continue;
+                if (this.scene.hasMeshData(expressId)) {
+                    const meshData = this.scene.getMeshData(expressId);
+                    if (meshData) {
+                        this.createMeshFromData(meshData);
+                        existingExpressIds.add(expressId); // Track newly created mesh
                     }
                 }
-                // Get updated meshes list (includes newly created ones)
-                meshes = this.scene.getMeshes();
             }
+            // Get updated meshes list (includes newly created ones)
+            meshes = this.scene.getMeshes();
+        }
+        // Apply visibility filtering to meshes before picking
+        // This ensures users can only select elements that are actually visible
+        if (options?.hiddenIds && options.hiddenIds.size > 0) {
+            meshes = meshes.filter(mesh => !options.hiddenIds.has(mesh.expressId));
+        }
+        if (options?.isolatedIds !== null && options?.isolatedIds !== undefined) {
+            meshes = meshes.filter(mesh => options.isolatedIds.has(mesh.expressId));
         }
         const viewProj = this.camera.getViewProjMatrix().m;
         const result = await this.picker.pick(x, y, this.canvas.width, this.canvas.height, meshes, viewProj);
         return result;
     }
+    /**
+     * Raycast into the scene to get precise 3D intersection point
+     * This is more accurate than pick() as it returns the exact surface point
+     */
+    raycastScene(x, y, options) {
+        try {
+            // Create ray from screen coordinates
+            const ray = this.camera.unprojectToRay(x, y, this.canvas.width, this.canvas.height);
+            // Get all mesh data from scene
+            const allMeshData = [];
+            const meshes = this.scene.getMeshes();
+            const batchedMeshes = this.scene.getBatchedMeshes();
+            // Collect mesh data from regular meshes
+            for (const mesh of meshes) {
+                const meshData = this.scene.getMeshData(mesh.expressId);
+                if (meshData) {
+                    // Apply visibility filtering
+                    if (options?.hiddenIds?.has(meshData.expressId))
+                        continue;
+                    if (options?.isolatedIds !== null &&
+                        options?.isolatedIds !== undefined &&
+                        !options.isolatedIds.has(meshData.expressId)) {
+                        continue;
+                    }
+                    allMeshData.push(meshData);
+                }
+            }
+            // Collect mesh data from batched meshes
+            for (const batch of batchedMeshes) {
+                for (const expressId of batch.expressIds) {
+                    const meshData = this.scene.getMeshData(expressId);
+                    if (meshData) {
+                        // Apply visibility filtering
+                        if (options?.hiddenIds?.has(meshData.expressId))
+                            continue;
+                        if (options?.isolatedIds !== null &&
+                            options?.isolatedIds !== undefined &&
+                            !options.isolatedIds.has(meshData.expressId)) {
+                            continue;
+                        }
+                        allMeshData.push(meshData);
+                    }
+                }
+            }
+            if (allMeshData.length === 0) {
+                return null;
+            }
+            // Use BVH for performance if we have many meshes
+            let meshesToTest = allMeshData;
+            if (allMeshData.length > this.BVH_THRESHOLD) {
+                // Check if BVH needs rebuilding
+                const needsRebuild = !this.bvhCache ||
+                    !this.bvhCache.isBuilt ||
+                    this.bvhCache.meshCount !== allMeshData.length;
+                if (needsRebuild) {
+                    // Build BVH only when needed
+                    this.bvh.build(allMeshData);
+                    this.bvhCache = {
+                        meshCount: allMeshData.length,
+                        meshData: allMeshData,
+                        isBuilt: true,
+                    };
+                }
+                // Use BVH to filter meshes
+                const meshIndices = this.bvh.getMeshesForRay(ray, allMeshData);
+                meshesToTest = meshIndices.map(i => allMeshData[i]);
+            }
+            // Perform raycasting
+            const intersection = this.raycaster.raycast(ray, meshesToTest);
+            if (!intersection) {
+                return null;
+            }
+            // Detect snap targets if requested
+            // Pass meshes near the ray to detect edges even when partially occluded
+            let snapTarget;
+            if (options?.snapOptions) {
+                const cameraPos = this.camera.getPosition();
+                const cameraFov = this.camera.getFOV();
+                // Pass meshes that are near the ray (from BVH or all meshes if BVH not used)
+                // This allows detecting edges even when they're behind other objects
+                snapTarget = this.snapDetector.detectSnapTarget(ray, meshesToTest, // Pass all meshes near the ray
+                intersection, { position: cameraPos, fov: cameraFov }, this.canvas.height, options.snapOptions) || undefined;
+            }
+            return {
+                intersection,
+                snap: snapTarget,
+            };
+        }
+        catch (error) {
+            console.error('Raycast error:', error);
+            return null;
+        }
+    }
+    /**
+     * Raycast with magnetic edge snapping behavior
+     * This provides the "stick and slide along edges" experience
+     */
+    raycastSceneMagnetic(x, y, currentEdgeLock, options) {
+        try {
+            // Create ray from screen coordinates
+            const ray = this.camera.unprojectToRay(x, y, this.canvas.width, this.canvas.height);
+            // Get all mesh data from scene
+            const allMeshData = [];
+            const meshes = this.scene.getMeshes();
+            const batchedMeshes = this.scene.getBatchedMeshes();
+            // Collect mesh data from regular meshes
+            for (const mesh of meshes) {
+                const meshData = this.scene.getMeshData(mesh.expressId);
+                if (meshData) {
+                    if (options?.hiddenIds?.has(meshData.expressId))
+                        continue;
+                    if (options?.isolatedIds !== null &&
+                        options?.isolatedIds !== undefined &&
+                        !options.isolatedIds.has(meshData.expressId)) {
+                        continue;
+                    }
+                    allMeshData.push(meshData);
+                }
+            }
+            // Collect mesh data from batched meshes
+            for (const batch of batchedMeshes) {
+                for (const expressId of batch.expressIds) {
+                    const meshData = this.scene.getMeshData(expressId);
+                    if (meshData) {
+                        if (options?.hiddenIds?.has(meshData.expressId))
+                            continue;
+                        if (options?.isolatedIds !== null &&
+                            options?.isolatedIds !== undefined &&
+                            !options.isolatedIds.has(meshData.expressId)) {
+                            continue;
+                        }
+                        allMeshData.push(meshData);
+                    }
+                }
+            }
+            if (allMeshData.length === 0) {
+                return {
+                    intersection: null,
+                    snapTarget: null,
+                    edgeLock: {
+                        edge: null,
+                        meshExpressId: null,
+                        edgeT: 0,
+                        shouldLock: false,
+                        shouldRelease: true,
+                        isCorner: false,
+                        cornerValence: 0,
+                    },
+                };
+            }
+            // Use BVH for performance if we have many meshes
+            let meshesToTest = allMeshData;
+            if (allMeshData.length > this.BVH_THRESHOLD) {
+                const needsRebuild = !this.bvhCache ||
+                    !this.bvhCache.isBuilt ||
+                    this.bvhCache.meshCount !== allMeshData.length;
+                if (needsRebuild) {
+                    this.bvh.build(allMeshData);
+                    this.bvhCache = {
+                        meshCount: allMeshData.length,
+                        meshData: allMeshData,
+                        isBuilt: true,
+                    };
+                }
+                const meshIndices = this.bvh.getMeshesForRay(ray, allMeshData);
+                meshesToTest = meshIndices.map(i => allMeshData[i]);
+            }
+            // Perform raycasting
+            const intersection = this.raycaster.raycast(ray, meshesToTest);
+            // Use magnetic snap detection
+            const cameraPos = this.camera.getPosition();
+            const cameraFov = this.camera.getFOV();
+            const magneticResult = this.snapDetector.detectMagneticSnap(ray, meshesToTest, intersection, { position: cameraPos, fov: cameraFov }, this.canvas.height, currentEdgeLock, options?.snapOptions || {});
+            return {
+                intersection,
+                ...magneticResult,
+            };
+        }
+        catch (error) {
+            console.error('Magnetic raycast error:', error);
+            return {
+                intersection: null,
+                snapTarget: null,
+                edgeLock: {
+                    edge: null,
+                    meshExpressId: null,
+                    edgeT: 0,
+                    shouldLock: false,
+                    shouldRelease: true,
+                    isCorner: false,
+                    cornerValence: 0,
+                },
+            };
+        }
+    }
+    /**
+     * Invalidate BVH cache (call when geometry changes)
+     */
+    invalidateBVHCache() {
+        this.bvhCache = null;
+    }
+    /**
+     * Get the raycaster instance (for advanced usage)
+     */
+    getRaycaster() {
+        return this.raycaster;
+    }
+    /**
+     * Get the snap detector instance (for advanced usage)
+     */
+    getSnapDetector() {
+        return this.snapDetector;
+    }
+    /**
+     * Clear all caches (call when geometry changes)
+     */
+    clearCaches() {
+        this.invalidateBVHCache();
+        this.snapDetector.clearCache();
+    }
     /**
      * Resize canvas
      */