@inweb/viewer-three 26.9.6 → 26.9.8

package/dist/viewer-three.module.js

@@ -23,7 +23,7 @@
 
 import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loadersRegistry, Options, CANVAS_EVENTS } from '@inweb/viewer-core';
 export * from '@inweb/viewer-core';
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, MathUtils, Sphere, Box3, Color, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, EdgesGeometry, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, PerspectiveCamera, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
+import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Matrix4, Vector4, MathUtils, Raycaster, EdgesGeometry, Controls, Clock, Sphere, Box3, Color, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, PerspectiveCamera, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
 import { Wireframe } from 'three/examples/jsm/lines/Wireframe.js';
@@ -900,6 +900,8 @@ class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
 }
 
 const PRECISION = 0.01;
+const DESKTOP_SNAP_DISTANCE = 10;
+const MOBILE_SNAP_DISTANCE = 50;
 class MeasureLineDragger extends OrbitDragger {
     constructor(viewer) {
         super(viewer);
@@ -914,7 +916,10 @@ class MeasureLineDragger extends OrbitDragger {
         this.onPointerMove = (event) => {
             if (this.orbit.enabled && this.orbit.state !== -1)
                 return;
-            this.line.endPoint = this.snapper.getSnapPoint(event);
+            const snapPoint = this.snapper.getSnapPoint(event);
+            if (snapPoint && this.line.endPoint && snapPoint.equals(this.line.endPoint))
+                return;
+            this.line.endPoint = snapPoint;
             this.line.render();
             if (this.line.startPoint)
                 this.changed = true;
@@ -943,14 +948,14 @@ class MeasureLineDragger extends OrbitDragger {
             this.overlay.render();
         };
         this.updateSnapper = () => {
-            this.snapper.update(this.viewer.scene);
+            this.snapper.update(this.viewer);
         };
         this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
         this.overlay.attach();
         this.line = new MeasureLine(this.overlay);
         this.overlay.addLine(this.line);
         this.snapper = new MeasureSnapper(viewer.camera, viewer.canvas);
-        this.snapper.update(viewer.scene);
+        this.updateSnapper();
         this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
         this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
         this.viewer.canvas.addEventListener("pointerup", this.onPointerUp);
@@ -973,20 +978,39 @@ class MeasureLineDragger extends OrbitDragger {
         this.viewer.removeEventListener("isolate", this.updateSnapper);
         this.viewer.removeEventListener("show", this.updateSnapper);
         this.viewer.removeEventListener("showall", this.updateSnapper);
+        this.snapper.dispose();
         this.overlay.detach();
         this.overlay.dispose();
         super.dispose();
     }
 }
+const _vertex = new Vector3();
+const _start = new Vector3();
+const _end = new Vector3();
+const _line = new Line3();
+const _center = new Vector3();
+const _projection = new Vector3();
 class MeasureSnapper {
     constructor(camera, canvas) {
-        this.objects = [];
         this.camera = camera;
         this.canvas = canvas;
+        this.objects = [];
         this.raycaster = new Raycaster();
+        this.detectRadiusInPixels = this.isMobile() ? MOBILE_SNAP_DISTANCE : DESKTOP_SNAP_DISTANCE;
+        this.edgesCache = new WeakMap();
     }
-    getSnapPoint(event) {
-        const mouse = new Vector2(event.clientX, event.clientY);
+    dispose() {
+        this.objects = [];
+    }
+    isMobile() {
+        if (typeof navigator === "undefined")
+            return false;
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent);
+    }
+    getMousePosition(event, target) {
+        return target.set(event.clientX, event.clientY);
+    }
+    getPointerIntersects(mouse, objects) {
         const rect = this.canvas.getBoundingClientRect();
         const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
         const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
@@ -994,20 +1018,86 @@ class MeasureSnapper {
         this.raycaster.setFromCamera(coords, this.camera);
         this.raycaster.params = {
             Mesh: {},
-            Line: { threshold: 0.25 },
-            Line2: { threshold: 0.25 },
+            Line: { threshold: 0.05 },
+            Line2: { threshold: 0.05 },
             LOD: {},
-            Points: { threshold: 0.1 },
+            Points: { threshold: 0.01 },
             Sprite: {},
         };
-        const intersects = this.raycaster.intersectObjects(this.objects, false);
-        if (intersects.length === 0)
-            return undefined;
-        return intersects[0].point;
+        return this.raycaster.intersectObjects(objects, false);
     }
-    update(scene) {
-        this.objects = [];
-        scene.traverseVisible((child) => this.objects.push(child));
+    getDetectRadius(point) {
+        const camera = this.camera;
+        if (camera.isOrthographicCamera) {
+            const worldHeight = camera.top - camera.bottom;
+            const canvasHeight = this.canvas.height;
+            const worldUnitsPerPixel = worldHeight / canvasHeight;
+            return this.detectRadiusInPixels * worldUnitsPerPixel;
+        }
+        if (camera.isPerspectiveCamera) {
+            const distance = camera.position.distanceTo(point);
+            const worldHeight = 2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5)) * distance;
+            const canvasHeight = this.canvas.height;
+            const worldUnitsPerPixel = worldHeight / canvasHeight;
+            return this.detectRadiusInPixels * worldUnitsPerPixel;
+        }
+        return 0.1;
+    }
+    getSnapPoint(event) {
+        const mouse = this.getMousePosition(event, new Vector2());
+        const intersections = this.getPointerIntersects(mouse, this.objects);
+        if (intersections.length === 0)
+            return undefined;
+        const object = intersections[0].object;
+        const intersectionPoint = intersections[0].point;
+        const localPoint = object.worldToLocal(intersectionPoint.clone());
+        let snapPoint;
+        let snapDistance = this.getDetectRadius(intersectionPoint);
+        const geometry = object.geometry;
+        const positions = geometry.attributes.position.array;
+        for (let i = 0; i < positions.length; i += 3) {
+            _vertex.set(positions[i], positions[i + 1], positions[i + 2]);
+            const distance = _vertex.distanceTo(localPoint);
+            if (distance < snapDistance) {
+                snapDistance = distance;
+                snapPoint = _vertex.clone();
+            }
+        }
+        if (snapPoint)
+            return object.localToWorld(snapPoint);
+        let edges = this.edgesCache.get(geometry);
+        if (!edges) {
+            edges = new EdgesGeometry(geometry);
+            this.edgesCache.set(geometry, edges);
+        }
+        const edgePositions = edges.attributes.position.array;
+        for (let i = 0; i < edgePositions.length; i += 6) {
+            _start.set(edgePositions[i], edgePositions[i + 1], edgePositions[i + 2]);
+            _end.set(edgePositions[i + 3], edgePositions[i + 4], edgePositions[i + 5]);
+            _line.set(_start, _end);
+            _line.getCenter(_center);
+            const centerDistance = _center.distanceTo(localPoint);
+            if (centerDistance < snapDistance) {
+                snapDistance = centerDistance;
+                snapPoint = _center.clone();
+                continue;
+            }
+            _line.closestPointToPoint(localPoint, true, _projection);
+            const lineDistance = _projection.distanceTo(localPoint);
+            if (lineDistance < snapDistance) {
+                snapDistance = lineDistance;
+                snapPoint = _projection.clone();
+            }
+        }
+        if (snapPoint)
+            return object.localToWorld(snapPoint);
+        return intersectionPoint.clone();
+    }
+    update(viewer) {
+        this.objects.length = 0;
+        viewer.models.forEach((model) => {
+            model.getVisibleObjects().forEach((object) => this.objects.push(object));
+        });
     }
 }
 class MeasureOverlay {
@@ -1029,6 +1119,8 @@ class MeasureOverlay {
         this.container.style.outline = "none";
         this.container.style.pointerEvents = "none";
         this.container.style.overflow = "hidden";
+        if (!this.canvas.parentElement)
+            return;
         this.canvas.parentElement.appendChild(this.container);
     }
     dispose() {
@@ -1059,7 +1151,7 @@ class MeasureOverlay {
 const _middlePoint = new Vector3();
 class MeasureLine {
     constructor(overlay) {
-        this.id = Date.now();
+        this.id = MathUtils.generateUUID();
         this.unit = "";
         this.scale = 1.0;
         this.size = 10.0;
@@ -1083,6 +1175,10 @@ class MeasureLine {
         this.elementEndPoint.remove();
         this.elementLine.remove();
         this.elementLabel.remove();
+        this.elementStartPoint = undefined;
+        this.elementEndPoint = undefined;
+        this.elementLine = undefined;
+        this.elementLabel = undefined;
     }
     render() {
         const projector = this.overlay.projector;
@@ -1739,7 +1835,7 @@ function zoomTo(viewer, box) {
     if (camera.isPerspectiveCamera) {
         const offset = new Vector3(0, 0, 1)
             .applyQuaternion(camera.quaternion)
-            .multiplyScalar(boxSize / Math.tan(MathUtils.DEG2RAD * camera.fov * 0.5));
+            .multiplyScalar(boxSize / Math.tan(MathUtils.degToRad(camera.fov * 0.5)));
         camera.position.copy(offset).add(boxCenter);
         camera.updateMatrixWorld();
     }
@@ -1825,6 +1921,7 @@ function regenerateAll(viewer) {
 }
 
 function resetView(viewer) {
+    const reset = viewer.getComponent("ResetComponent");
     viewer.executeCommand("setActiveDragger");
     viewer.executeCommand("clearSlices");
     viewer.executeCommand("clearOverlay");
@@ -1833,7 +1930,7 @@ function resetView(viewer) {
     viewer.executeCommand("showAll");
     viewer.executeCommand("explode", 0);
     viewer.executeCommand("zoomToExtents", true);
-    viewer.executeCommand("k3DViewSW");
+    reset.resetCameraPosition();
     viewer.emit({ type: "resetview" });
 }
 
@@ -2400,12 +2497,12 @@ class SelectionComponent {
         const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
         const coords = new Vector2(x, y);
         this.raycaster.setFromCamera(coords, this.viewer.camera);
-        this.raycaster.params = this.raycaster.params = {
+        this.raycaster.params = {
             Mesh: {},
-            Line: { threshold: 0.25 },
-            Line2: { threshold: 0.25 },
+            Line: { threshold: 0.05 },
+            Line2: { threshold: 0.05 },
             LOD: {},
-            Points: { threshold: 0.1 },
+            Points: { threshold: 0.01 },
             Sprite: {},
         };
         return this.raycaster.intersectObjects(objects, false);
@@ -2571,6 +2668,31 @@ class WCSHelperComponent {
     }
 }
 
+class ResetComponent {
+    constructor(viewer) {
+        this.savedCameraPosition = null;
+        this.onDatabaseChunk = () => {
+            this.savedCameraPosition = {
+                position: this.viewer.camera.position.clone(),
+                up: this.viewer.camera.up.clone(),
+                direction: this.viewer.camera.getWorldDirection(new Vector3()),
+            };
+        };
+        this.viewer = viewer;
+        this.viewer.addEventListener("databasechunk", this.onDatabaseChunk);
+    }
+    dispose() {
+        this.viewer.removeEventListener("databasechunk", this.onDatabaseChunk);
+    }
+    resetCameraPosition() {
+        if (this.savedCameraPosition) {
+            this.viewer.camera.position.copy(this.savedCameraPosition.position);
+            this.viewer.camera.up.copy(this.savedCameraPosition.up);
+            this.viewer.camera.lookAt(this.savedCameraPosition.position.clone().add(this.savedCameraPosition.direction));
+        }
+    }
+}
+
 const components = componentsRegistry("threejs");
 components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponent(viewer));
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
@@ -2581,6 +2703,7 @@ components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopCo
 components.registerComponent("HighlighterComponent", (viewer) => new HighlighterComponent(viewer));
 components.registerComponent("SelectionComponent", (viewer) => new SelectionComponent(viewer));
 components.registerComponent("WCSHelperComponent", (viewer) => new WCSHelperComponent(viewer));
+components.registerComponent("ResetComponent", (viewer) => new ResetComponent(viewer));
 
 class GLTFLoadingManager extends LoadingManager {
     constructor(file, params = {}) {
@@ -3371,6 +3494,12 @@ class DynamicGltfLoader {
     this.maxConcurrentChunks = 8;
     this.activeChunkLoads = 0;
     this.chunkQueue = [];
+    this.objectIdToIndex = new Map();
+    this.maxObjectId = 0;
+    this.objectVisibility = new Float32Array();
+    this.maxConcurrentChunks = 6;
+    this.mergedObjectMap = new Map();
+    this.mergedGeometryVisibility = new Map();
   }
   setVisibleEdges(visible) {
     this.visibleEdges = visible;
@@ -4077,6 +4206,50 @@ class DynamicGltfLoader {
     this.originalObjects.clear();
     this.originalObjectsToSelection.clear();
   }
+  initializeObjectVisibility() {
+    if (this.maxObjectId > 0) {
+      this.objectVisibility = new Float32Array(this.maxObjectId);
+      for (let i = 0; i < this.maxObjectId; i++) {
+        this.objectVisibility[i] = 1.0;
+      }
+      console.log(`Initialized object visibility array: ${this.maxObjectId} objects`);
+    }
+  }
+  createVisibilityMaterial(material) {
+    material.onBeforeCompile = (shader) => {
+      shader.vertexShader = shader.vertexShader.replace(
+        "#include <common>",
+        `
+        #include <common>
+        attribute float visibility;
+        varying float vVisibility;
+        `
+      );
+      shader.fragmentShader = shader.fragmentShader.replace(
+        "#include <common>",
+        `
+        #include <common>
+        varying float vVisibility;
+        `
+      );
+      shader.vertexShader = shader.vertexShader.replace(
+        "void main() {",
+        `
+        void main() {
+          vVisibility = visibility;
+        `
+      );
+      shader.fragmentShader = shader.fragmentShader.replace(
+        "void main() {",
+        `
+        void main() {
+          if (vVisibility < 0.5) discard;
+        `
+      );
+    };
+    material.needsUpdate = true;
+    return material;
+  }
   clear() {
     this.chunkQueue = [];
     this.structures.forEach((structure) => {
@@ -4182,6 +4355,9 @@ class DynamicGltfLoader {
     this.loadedGeometrySize = 0;
     this.abortController = new AbortController();
     this.updateMemoryIndicator();
+    this.objectIdToIndex.clear();
+    this.maxObjectId = 0;
+    this.objectVisibility = new Float32Array();
   }
   setStructureTransform(structureId, matrix) {
     const rootGroup = this.structureRoots.get(structureId);
@@ -4331,18 +4507,43 @@ class DynamicGltfLoader {
         this.originalObjectsToSelection.add(obj);
       }
     });
+    this.initializeObjectVisibility();
+    console.log(`Optimization complete. Total objects: ${this.maxObjectId}`);
     this.dispatchEvent("update");
   }
   mergeMeshGroups(materialGroups, rootGroup) {
     for (const group of materialGroups) {
+      if (!group.material) {
+        console.warn("Skipping mesh group with null material");
+        continue;
+      }
       try {
         const geometries = [];
         const handles = new Set();
         const optimizedObjects = [];
+        const objectMapping = new Map();
+        let currentVertexOffset = 0;
         for (const mesh of group.objects) {
           const geometry = mesh.geometry.clone();
           mesh.updateWorldMatrix(true, false);
           geometry.applyMatrix4(mesh.matrixWorld);
+          const handle = mesh.userData.handle;
+          if (!this.objectIdToIndex.has(handle)) {
+            this.objectIdToIndex.set(handle, this.maxObjectId++);
+          }
+          const objectId = this.objectIdToIndex.get(handle);
+          const vertexCount = geometry.attributes.position.count;
+          const objectIds = new Float32Array(vertexCount);
+          for (let i = 0; i < vertexCount; i++) {
+            objectIds[i] = objectId;
+          }
+          geometry.setAttribute("objectId", new BufferAttribute(objectIds, 1));
+          objectMapping.set(mesh, {
+            geometry,
+            startVertexIndex: currentVertexOffset,
+            vertexCount: geometry.attributes.position.count,
+          });
+          currentVertexOffset += geometry.attributes.position.count;
           geometries.push(geometry);
           optimizedObjects.push(mesh);
           handles.add(mesh.userData.handle);
@@ -4350,13 +4551,26 @@ class DynamicGltfLoader {
         const mergedObjects = [];
         if (geometries.length > 0) {
           const mergedGeometry = mergeGeometries(geometries);
+          const totalVertices = mergedGeometry.attributes.position.count;
+          const visibilityArray = new Float32Array(totalVertices);
+          for (let i = 0; i < totalVertices; i++) {
+            visibilityArray[i] = 1.0;
+          }
+          mergedGeometry.setAttribute("visibility", new BufferAttribute(visibilityArray, 1));
           if (this.useVAO) {
             this.createVAO(mergedGeometry);
           }
-          const mergedMesh = new Mesh(mergedGeometry, group.material);
+          const visibilityMaterial = this.createVisibilityMaterial(group.material);
+          const mergedMesh = new Mesh(mergedGeometry, visibilityMaterial);
           rootGroup.add(mergedMesh);
           this.mergedMesh.add(mergedMesh);
           this.optimizedOriginalMap.set(mergedMesh, optimizedObjects);
+          this.mergedObjectMap.set(mergedMesh.uuid, {
+            objectMapping,
+            visibilityArray,
+            totalVertices,
+          });
+          this.mergedGeometryVisibility.set(mergedMesh, visibilityArray);
           mergedObjects.push(mergedMesh);
           geometries.forEach((geometry) => {
             geometry.dispose();
@@ -4382,8 +4596,14 @@ class DynamicGltfLoader {
   mergeLineGroups(materialGroups, rootGroup) {
     for (const group of materialGroups) {
       if (group.objects.length === 0) continue;
+      if (!group.material) {
+        console.warn("Skipping line group with null material");
+        continue;
+      }
       const handles = new Set();
       let totalVertices = 0;
+      const objectMapping = new Map();
+      let currentVertexOffset = 0;
       group.objects.map((line) => {
         handles.add(line.userData.handle);
         totalVertices += line.geometry.attributes.position.count;
@@ -4396,6 +4616,15 @@ class DynamicGltfLoader {
         const geometry = line.geometry;
         const positionAttr = geometry.attributes.position;
         const vertexCount = positionAttr.count;
+        const handle = line.userData.handle;
+        if (!this.objectIdToIndex.has(handle)) {
+          this.objectIdToIndex.set(handle, this.maxObjectId++);
+        }
+        objectMapping.set(line, {
+          startVertexIndex: currentVertexOffset,
+          vertexCount,
+        });
+        currentVertexOffset += vertexCount;
         line.updateWorldMatrix(true, false);
         const matrix = line.matrixWorld;
         const vector = new Vector3();
@@ -4416,7 +4645,24 @@ class DynamicGltfLoader {
       geometry.setIndex(indices);
       geometry.computeBoundingSphere();
       geometry.computeBoundingBox();
-      const mergedLine = new LineSegments(geometry, group.material);
+      const objectIds = new Float32Array(totalVertices);
+      let vertexIndex = 0;
+      group.objects.forEach((line) => {
+        const vertexCount = line.geometry.attributes.position.count;
+        const handle = line.userData.handle;
+        const objectId = this.objectIdToIndex.get(handle);
+        for (let i = 0; i < vertexCount; i++) {
+          objectIds[vertexIndex++] = objectId;
+        }
+      });
+      geometry.setAttribute("objectId", new BufferAttribute(objectIds, 1));
+      const visibilityArray = new Float32Array(totalVertices);
+      for (let i = 0; i < totalVertices; i++) {
+        visibilityArray[i] = 1.0;
+      }
+      geometry.setAttribute("visibility", new BufferAttribute(visibilityArray, 1));
+      const visibilityMaterial = this.createVisibilityMaterial(group.material);
+      const mergedLine = new LineSegments(geometry, visibilityMaterial);
       const mergedObjects = [mergedLine];
       if (this.useVAO) {
         this.createVAO(mergedLine);
@@ -4424,6 +4670,12 @@ class DynamicGltfLoader {
       rootGroup.add(mergedLine);
       this.mergedLines.add(mergedLine);
       this.optimizedOriginalMap.set(mergedLine, group.objects);
+      this.mergedObjectMap.set(mergedLine.uuid, {
+        objectMapping,
+        visibilityArray,
+        totalVertices,
+      });
+      this.mergedGeometryVisibility.set(mergedLine, visibilityArray);
       handles.forEach((handle) => {
         if (this.handleToOptimizedObjects.has(handle)) {
           const existingObjects = this.handleToOptimizedObjects.get(handle);
@@ -4437,14 +4689,37 @@ class DynamicGltfLoader {
   }
   mergeLineSegmentGroups(materialGroups, rootGroup) {
     for (const group of materialGroups) {
+      if (!group.material) {
+        console.warn("Skipping line segment group with null material");
+        continue;
+      }
       try {
         const geometries = [];
         const optimizedObjects = [];
         const handles = new Set();
+        const objectMapping = new Map();
+        let currentVertexOffset = 0;
         for (const line of group.objects) {
           const geometry = line.geometry.clone();
           line.updateWorldMatrix(true, false);
           geometry.applyMatrix4(line.matrixWorld);
+          const handle = line.userData.handle;
+          if (!this.objectIdToIndex.has(handle)) {
+            this.objectIdToIndex.set(handle, this.maxObjectId++);
+          }
+          const objectId = this.objectIdToIndex.get(handle);
+          const vertexCount = geometry.attributes.position.count;
+          const objectIds = new Float32Array(vertexCount);
+          for (let i = 0; i < vertexCount; i++) {
+            objectIds[i] = objectId;
+          }
+          geometry.setAttribute("objectId", new BufferAttribute(objectIds, 1));
+          objectMapping.set(line, {
+            geometry,
+            startVertexIndex: currentVertexOffset,
+            vertexCount: geometry.attributes.position.count,
+          });
+          currentVertexOffset += geometry.attributes.position.count;
           geometries.push(geometry);
           optimizedObjects.push(line);
           handles.add(line.userData.handle);
@@ -4452,13 +4727,26 @@ class DynamicGltfLoader {
         const mergedObjects = [];
         if (geometries.length > 0) {
           const mergedGeometry = mergeGeometries(geometries, false);
-          const mergedLine = new LineSegments(mergedGeometry, group.material);
+          const totalVertices = mergedGeometry.attributes.position.count;
+          const visibilityArray = new Float32Array(totalVertices);
+          for (let i = 0; i < totalVertices; i++) {
+            visibilityArray[i] = 1.0;
+          }
+          mergedGeometry.setAttribute("visibility", new BufferAttribute(visibilityArray, 1));
+          const visibilityMaterial = this.createVisibilityMaterial(group.material);
+          const mergedLine = new LineSegments(mergedGeometry, visibilityMaterial);
           if (this.useVAO) {
             this.createVAO(mergedLine);
           }
           rootGroup.add(mergedLine);
           this.mergedLineSegments.add(mergedLine);
           this.optimizedOriginalMap.set(mergedLine, optimizedObjects);
+          this.mergedObjectMap.set(mergedLine.uuid, {
+            objectMapping,
+            visibilityArray,
+            totalVertices,
+          });
+          this.mergedGeometryVisibility.set(mergedLine, visibilityArray);
           mergedObjects.push(mergedLine);
           geometries.forEach((geometry) => {
             geometry.dispose();
@@ -4483,6 +4771,10 @@ class DynamicGltfLoader {
   }
   mergePointsGroups(materialGroups, rootGroup) {
     for (const group of materialGroups) {
+      if (!group.material) {
+        console.warn("Skipping points group with null material");
+        continue;
+      }
       try {
         const geometries = [];
         const optimizedObjects = [];
@@ -4665,97 +4957,51 @@ class DynamicGltfLoader {
     });
     this.syncHiddenObjects();
   }
-  syncHiddenObjects() {
-    if (this.oldOptimizeObjects.size !== 0) {
-      for (const obj of this.oldOptimizeObjects) {
-        obj.visible = true;
-      }
-      this.oldOptimizeObjects.clear();
-    }
-    if (this.newOptimizedObjects.size !== 0) {
-      for (const obj of this.newOptimizedObjects) {
-        obj.visible = false;
-        obj.geometry.dispose();
-        obj.parent.remove(obj);
+  _updateVisibilityAttribute(mergedObject) {
+    if (
+      mergedObject.geometry &&
+      mergedObject.geometry.attributes.visibility &&
+      mergedObject.geometry.attributes.objectId
+    ) {
+      const visibilityArray = mergedObject.geometry.attributes.visibility.array;
+      const objectIdArray = mergedObject.geometry.attributes.objectId.array;
+      for (let i = 0; i < visibilityArray.length; i++) {
+        const objectId = objectIdArray[i];
+        if (objectId < this.objectVisibility.length) {
+          visibilityArray[i] = this.objectVisibility[objectId];
+        }
       }
-      this.newOptimizedObjects.clear();
+      mergedObject.geometry.attributes.visibility.needsUpdate = true;
     }
-    if (this.hiddenHandles.size === 0) {
+  }
+  syncHiddenObjects() {
+    if (this.mergedObjectMap.size === 0) {
+      console.log("No merged objects to sync");
       return;
     }
-    this.hiddenHandles.forEach((handle) => {
-      const objects = this.handleToOptimizedObjects.get(handle);
-      if (objects) {
-        objects.forEach((x) => this.oldOptimizeObjects.add(x));
+    if (this.objectVisibility.length > 0) {
+      for (let i = 0; i < this.objectVisibility.length; i++) {
+        this.objectVisibility[i] = 1.0;
       }
-    });
-    this.oldOptimizeObjects.forEach((optimizedObject) => {
-      optimizedObject.visible = false;
-      const originObjects = this.optimizedOriginalMap.get(optimizedObject);
-      const updateListToOptimize = [];
-      originObjects.forEach((obj) => {
-        if (!this.hiddenHandles.has(obj.userData.handle)) {
-          updateListToOptimize.push(obj);
+      this.hiddenHandles.forEach((handle) => {
+        const index = this.objectIdToIndex.get(handle);
+        if (index !== undefined && index < this.objectVisibility.length) {
+          this.objectVisibility[index] = 0.0;
         }
       });
-      const firstObject = updateListToOptimize[0];
-      if (firstObject instanceof Mesh || firstObject instanceof LineSegments) {
-        const geometries = updateListToOptimize.map((obj) => {
-          const geometry = obj.geometry.clone();
-          obj.updateWorldMatrix(true, false);
-          geometry.applyMatrix4(obj.matrixWorld);
-          return geometry;
-        });
-        const newMergedGeometry = mergeGeometries(geometries);
-        const mergedObject =
-          firstObject instanceof Mesh
-            ? new Mesh(newMergedGeometry, optimizedObject.material)
-            : new LineSegments(newMergedGeometry, optimizedObject.material);
-        mergedObject.visible = true;
-        optimizedObject.parent.add(mergedObject);
-        this.newOptimizedObjects.add(mergedObject);
-        geometries.forEach((geometry) => {
-          geometry.dispose();
-        });
-      } else if (firstObject instanceof Line) {
-        let totalVertices = 0;
-        updateListToOptimize.map((line) => {
-          totalVertices += line.geometry.attributes.position.count;
-        });
-        const positions = new Float32Array(totalVertices * 3);
-        let posOffset = 0;
-        const indices = [];
-        let vertexOffset = 0;
-        updateListToOptimize.forEach((line) => {
-          const geometry = line.geometry;
-          const positionAttr = geometry.attributes.position;
-          const vertexCount = positionAttr.count;
-          line.updateWorldMatrix(true, false);
-          const matrix = line.matrixWorld;
-          const vector = new Vector3();
-          for (let i = 0; i < vertexCount; i++) {
-            vector.fromBufferAttribute(positionAttr, i);
-            vector.applyMatrix4(matrix);
-            positions[posOffset++] = vector.x;
-            positions[posOffset++] = vector.y;
-            positions[posOffset++] = vector.z;
-          }
-          for (let i = 0; i < vertexCount - 1; i++) {
-            indices.push(vertexOffset + i, vertexOffset + i + 1);
-          }
-          vertexOffset += vertexCount;
-        });
-        const geometry = new BufferGeometry();
-        geometry.setAttribute("position", new BufferAttribute(positions, 3));
-        geometry.setIndex(indices);
-        geometry.computeBoundingSphere();
-        geometry.computeBoundingBox();
-        const mergedLine = new LineSegments(geometry, optimizedObject.material);
-        mergedLine.visible = true;
-        optimizedObject.parent.add(mergedLine);
-        this.newOptimizedObjects.add(mergedLine);
-      }
-    });
+    }
+    for (const mesh of this.mergedMesh) {
+      this._updateVisibilityAttribute(mesh);
+    }
+    for (const line of this.mergedLines) {
+      this._updateVisibilityAttribute(line);
+    }
+    for (const lineSegment of this.mergedLineSegments) {
+      this._updateVisibilityAttribute(lineSegment);
+    }
+    for (const point of this.mergedPoints) {
+      this._updateVisibilityAttribute(point);
+    }
   }
   getStructureGeometryExtent(structureId) {
     const extent = new Box3();