@inweb/viewer-three 26.7.2 → 26.8.0

package/dist/viewer-three.module.js

@@ -2,7 +2,7 @@ import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loaders
 
 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, Sphere, MathUtils, Box3, Color, AmbientLight, DirectionalLight, HemisphereLight, WebGLRenderTarget, UnsignedByteType, RGBAFormat, EdgesGeometry, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, MeshStandardMaterial, FrontSide, PointsMaterial, Material, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, PerspectiveCamera, Scene, WebGLRenderer, LinearToneMapping } from "three";
+import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Sphere, MathUtils, Box3, Color, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, EdgesGeometry, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Material, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, MeshStandardMaterial, PerspectiveCamera, Scene, WebGLRenderer, LinearToneMapping } from "three";
 
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
@@ -1676,6 +1676,7 @@ function setSelected(viewer, handles = []) {
     selection.clearSelection();
     viewer.models.forEach((model => {
         const objects = model.getObjectsByHandles(handles);
+        model.showObjects(objects);
         selection.select(objects, model);
     }));
     viewer.update();
@@ -1729,12 +1730,12 @@ commands.registerCommand("clearSelected", clearSelected);
 
 commands.registerCommand("clearSlices", clearSlices);
 
+commands.registerCommand("collect", collect);
+
 commands.registerCommand("createPreview", createPreview);
 
 commands.registerCommand("explode", explode);
 
-commands.registerCommand("collect", collect);
-
 commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
 
 commands.registerCommand("getModels", getModels);
@@ -1844,7 +1845,6 @@ class CameraComponent {
             }));
             if (sceneCamera) {
                 this.viewer.camera = sceneCamera.clone();
-                this.viewer.camera.up.set(0, 0, 1);
                 this.viewer.camera.scale.set(1, 1, 1);
             }
             const camera = this.viewer.camera;
@@ -1911,11 +1911,11 @@ class LightComponent {
             if (this.viewer.extents.isEmpty()) return;
             const extentsCenter = this.viewer.extents.getCenter(new Vector3);
             const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere).radius;
-            this.directionalLight.position.set(.5, 0, .866).multiplyScalar(extentsSize * 2).add(extentsCenter);
+            this.directionalLight.position.set(.5, .866, 0).multiplyScalar(extentsSize * 2).add(extentsCenter);
             this.directionalLight.target.position.copy(extentsCenter);
-            this.frontLight.position.set(0, extentsSize * 2, 0).add(extentsCenter);
+            this.frontLight.position.set(0, 0, 1).multiplyScalar(extentsSize * 2).add(extentsCenter);
             this.frontLight.target.position.copy(extentsCenter);
-            this.hemisphereLight.position.set(0, extentsSize * 3, 0).add(extentsCenter);
+            this.hemisphereLight.position.set(0, 0, 1).multiplyScalar(extentsSize * 3).add(extentsCenter);
             this.viewer.scene.add(this.ambientLight);
             this.viewer.scene.add(this.directionalLight);
             this.viewer.scene.add(this.frontLight);
@@ -1923,16 +1923,9 @@ class LightComponent {
         };
         this.viewer = viewer;
         this.ambientLight = new AmbientLight(16777215, 1);
-        this.viewer.scene.add(this.ambientLight);
         this.directionalLight = new DirectionalLight(16777215, 1);
-        this.directionalLight.position.set(.5, 0, .866);
-        this.viewer.scene.add(this.directionalLight);
         this.frontLight = new DirectionalLight(16777215, 1.25);
-        this.frontLight.position.set(0, 1, 0);
-        this.viewer.scene.add(this.frontLight);
         this.hemisphereLight = new HemisphereLight(16777215, 4473924, 1.25);
-        this.hemisphereLight.position.set(0, 0, 1);
-        this.viewer.scene.add(this.hemisphereLight);
         this.viewer.addEventListener("databasechunk", this.geometryEnd);
         this.viewer.addEventListener("clear", this.geometryEnd);
     }
@@ -2051,19 +2044,25 @@ class HighlighterUtils {
 class HighlighterComponent {
     constructor(viewer) {
         this.geometryEnd = () => {
-            const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor} = this.viewer.options;
-            this.highlightMaterial = new MeshBasicMaterial({
+            const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor, edgesOverlap: edgesOverlap, facesOverlap: facesOverlap} = this.viewer.options;
+            this.highlightMaterial = new MeshPhongMaterial({
                 color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
                 transparent: true,
                 opacity: (255 - facesTransparancy) / 255,
-                depthTest: false,
-                depthWrite: false
+                depthTest: !facesOverlap,
+                depthWrite: !facesOverlap,
+                specular: 2236962,
+                shininess: 10,
+                reflectivity: .05,
+                polygonOffset: true,
+                polygonOffsetFactor: 1,
+                polygonOffsetUnits: 1
             });
             this.outlineMaterial = new LineMaterial({
                 color: new Color(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255),
                 linewidth: 1.5,
-                depthTest: false,
-                depthWrite: false,
+                depthTest: !edgesOverlap,
+                depthWrite: !edgesOverlap,
                 resolution: new Vector2(window.innerWidth, window.innerHeight)
             });
             this.highlightLineMaterial = new LineBasicMaterial({
@@ -2076,18 +2075,26 @@ class HighlighterComponent {
                 linewidth: 5,
                 transparent: true,
                 opacity: .8,
-                depthTest: true,
-                depthWrite: true,
+                depthTest: !edgesOverlap,
+                depthWrite: !edgesOverlap,
                 resolution: new Vector2(window.innerWidth, window.innerHeight)
             });
         };
         this.optionsChange = () => {
-            const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor} = this.viewer.options;
+            const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor, edgesVisibility: edgesVisibility, edgesOverlap: edgesOverlap, facesOverlap: facesOverlap} = this.viewer.options;
             this.highlightMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
             this.highlightMaterial.opacity = (255 - facesTransparancy) / 255;
+            this.highlightMaterial.depthTest = !facesOverlap;
+            this.highlightMaterial.depthWrite = !facesOverlap;
             this.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+            this.outlineMaterial.depthTest = !edgesOverlap;
+            this.outlineMaterial.depthWrite = !edgesOverlap;
             this.highlightLineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
             this.highlightLineGlowMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+            this.viewer.selected.forEach((selected => {
+                const wireframe = selected.userData.highlightWireframe;
+                if (wireframe) wireframe.visible = edgesVisibility;
+            }));
             this.viewer.update();
         };
         this.viewer = viewer;
@@ -2112,6 +2119,7 @@ class HighlighterComponent {
         this.viewer.removeEventListener("resize", this.viewerResize);
     }
     highlight(objects) {
+        const {edgesVisibility: edgesVisibility} = this.viewer.options;
         if (!Array.isArray(objects)) objects = [ objects ];
         if (!objects.length) return;
         objects.forEach((object => {
@@ -2124,20 +2132,22 @@ class HighlighterComponent {
                 wireframe.position.copy(object.position);
                 wireframe.rotation.copy(object.rotation);
                 wireframe.scale.copy(object.scale);
+                wireframe.visible = edgesVisibility;
                 object.parent.add(wireframe);
-                object.userData.highlightwireframe = wireframe;
+                object.userData.highlightWireframe = wireframe;
                 object.userData.originalMaterial = object.material;
                 object.material = this.highlightLineMaterial;
                 object.isHighlighted = true;
             } else if (object.isMesh) {
-                const edgesGeometry = new EdgesGeometry(object.geometry, 30);
+                const edgesGeometry = new EdgesGeometry(object.geometry, 60);
                 const lineGeometry = (new LineSegmentsGeometry).fromEdgesGeometry(edgesGeometry);
                 const wireframe = new Wireframe(lineGeometry, this.outlineMaterial);
                 wireframe.position.copy(object.position);
                 wireframe.rotation.copy(object.rotation);
                 wireframe.scale.copy(object.scale);
+                wireframe.visible = edgesVisibility;
                 object.parent.add(wireframe);
-                object.userData.highlightwireframe = wireframe;
+                object.userData.highlightWireframe = wireframe;
                 object.userData.originalMaterial = object.material;
                 object.material = this.highlightMaterial;
                 object.isHighlighted = true;
@@ -2151,9 +2161,9 @@ class HighlighterComponent {
             if (!object.isHighlighted) return;
             object.isHighlighted = false;
             object.material = object.userData.originalMaterial;
-            object.userData.highlightwireframe.removeFromParent();
+            object.userData.highlightWireframe.removeFromParent();
             delete object.userData.originalMaterial;
-            delete object.userData.highlightwireframe;
+            delete object.userData.highlightWireframe;
         }));
     }
     viewerResize(event) {
@@ -2177,10 +2187,10 @@ class SelectionComponent {
             this.viewer.models.forEach((model => {
                 const objects = model.getVisibleObjects();
                 const intersects = this.getPointerIntersects(upPosition, objects);
-                intersections.push(...intersects.map((x => ({
-                    ...x,
+                if (intersects.length > 0) intersections.push({
+                    ...intersects[0],
                     model: model
-                }))));
+                });
             }));
             intersections = intersections.sort(((a, b) => a.distance - b.distance));
             if (!event.shiftKey) this.clearSelection();
@@ -2250,7 +2260,6 @@ class SelectionComponent {
         }
         if (!Array.isArray(objects)) objects = [ objects ];
         if (!objects.length) return;
-        model.showObjects(objects);
         model.showOriginalObjects(objects);
         this.highlighter.highlight(objects);
         objects.forEach((object => this.viewer.selected.push(object)));
@@ -2634,8 +2643,8 @@ class DynamicModelImpl extends ModelImpl {
         return objects;
     }
     hideObjects(objects) {
-        this.getOwnObjects(objects).map((object => object.userData.handle)).forEach((handle => this.gltfLoader.hiddenHandles.add(handle)));
-        this.gltfLoader.syncHiddenObjects();
+        const handles = this.getHandlesByObjects(objects);
+        this.gltfLoader.hideObjects(handles);
         return this;
     }
     isolateObjects(objects) {
@@ -2644,21 +2653,20 @@ class DynamicModelImpl extends ModelImpl {
         return this;
     }
     showObjects(objects) {
-        this.getOwnObjects(objects).map((object => object.userData.handle)).forEach((handle => this.gltfLoader.hiddenHandles.delete(handle)));
-        this.gltfLoader.syncHiddenObjects();
+        const handles = this.getHandlesByObjects(objects);
+        this.gltfLoader.showObjects(handles);
         return this;
     }
     showAllObjects() {
-        this.gltfLoader.hiddenHandles.clear();
-        this.gltfLoader.syncHiddenObjects();
+        this.gltfLoader.showAllHiddenObjects();
         return this;
     }
     showOriginalObjects(objects) {
-        this.getOwnObjects(objects).forEach((object => object.visible = true));
+        this.gltfLoader.showOriginalObjects(objects);
         return this;
     }
     hideOriginalObjects(objects) {
-        this.getOwnObjects(objects).forEach((object => object.visible = false));
+        this.gltfLoader.hideOriginalObjects(objects);
         return this;
     }
 }
@@ -2682,6 +2690,10 @@ const GL_CONSTANTS = {
     TRIANGLE_FAN: 6
 };
 
+const MAX_GAP = 128 * 1024;
+
+const MAX_CHUNK = 30 * 1024 * 1024;
+
 class GltfStructure {
     constructor(id) {
         this.id = `${id}`;
@@ -2719,42 +2731,99 @@ class GltfStructure {
         return this.json;
     }
     scheduleRequest(request) {
-        this.pendingRequests.push(request);
-        if (this.batchTimeout) {
-            clearTimeout(this.batchTimeout);
-        }
-        this.batchTimeout = setTimeout((() => this.processBatch()), this.batchDelay);
         return new Promise(((resolve, reject) => {
-            request.resolve = resolve;
-            request.reject = reject;
+            this.pendingRequests.push({
+                ...request,
+                _resolve: resolve,
+                _reject: reject
+            });
         }));
     }
-    async processBatch() {
-        if (this.pendingRequests.length === 0) return;
-        const currentBatch = [ ...this.pendingRequests ];
+    async flushBufferRequests() {
+        if (!this.pendingRequests || this.pendingRequests.length === 0) return;
+        const requests = [ ...this.pendingRequests ];
         this.pendingRequests = [];
-        if (this.batchTimeout) {
-            clearTimeout(this.batchTimeout);
-            this.batchTimeout = null;
-        }
-        try {
-            for (let i = 0; i < currentBatch.length; i += this.maxRangesPerRequest) {
-                const batchRequests = currentBatch.slice(i, i + this.maxRangesPerRequest);
-                const buffer = await this.loadController.loadBinaryData(batchRequests);
-                let currentOffset = 0;
-                batchRequests.forEach((request => {
-                    const view = this.createTypedArray(buffer, currentOffset, request.length, request.componentType);
-                    request.resolve(view);
-                    currentOffset += request.length;
-                }));
+        requests.sort(((a, b) => a.offset - b.offset));
+        const mergedRanges = [];
+        let current = {
+            start: requests[0].offset,
+            end: requests[0].offset + requests[0].length,
+            requests: [ requests[0] ]
+        };
+        for (let i = 1; i < requests.length; i++) {
+            const req = requests[i];
+            const gap = req.offset - current.end;
+            const newEnd = Math.max(current.end, req.offset + req.length);
+            const projectedSize = newEnd - current.start;
+            if (gap <= MAX_GAP && projectedSize <= MAX_CHUNK) {
+                current.end = newEnd;
+                current.requests.push(req);
+            } else {
+                mergedRanges.push(current);
+                current = {
+                    start: req.offset,
+                    end: req.offset + req.length,
+                    requests: [ req ]
+                };
             }
-        } catch (error) {
-            console.error("Error processing batch:", error);
-            currentBatch.forEach((request => request.reject(error)));
         }
-        if (this.pendingRequests.length > 0) {
-            this.batchTimeout = setTimeout((() => this.processBatch()), this.batchDelay);
+        mergedRanges.push(current);
+        const finalRanges = [];
+        for (const range of mergedRanges) {
+            let {start: start, end: end, requests: requests} = range;
+            while (end - start > MAX_CHUNK) {
+                let splitIdx = 0;
+                for (let i = 0; i < requests.length; i++) {
+                    if (requests[i].offset + requests[i].length - start > MAX_CHUNK) {
+                        break;
+                    }
+                    splitIdx = i;
+                }
+                const chunkRequests = requests.slice(0, splitIdx + 1);
+                const chunkEnd = chunkRequests[chunkRequests.length - 1].offset + chunkRequests[chunkRequests.length - 1].length;
+                finalRanges.push({
+                    start: start,
+                    end: chunkEnd,
+                    requests: chunkRequests
+                });
+                requests = requests.slice(splitIdx + 1);
+                if (requests.length > 0) {
+                    start = requests[0].offset;
+                    end = requests[0].offset + requests[0].length;
+                    for (let i = 1; i < requests.length; i++) {
+                        end = Math.max(end, requests[i].offset + requests[i].length);
+                    }
+                }
+            }
+            if (requests.length > 0) {
+                finalRanges.push({
+                    start: start,
+                    end: end,
+                    requests: requests
+                });
+            }
         }
+        const promises = finalRanges.map((async range => {
+            const length = range.end - range.start;
+            const buffer = await this.loadController.loadBinaryData([ {
+                offset: range.start,
+                length: length
+            } ]);
+            for (const req of range.requests) {
+                const relOffset = req.offset - range.start;
+                try {
+                    req._resolve({
+                        buffer: buffer,
+                        relOffset: relOffset,
+                        length: req.length
+                    });
+                } catch (e) {
+                    req._reject(e);
+                }
+            }
+        }));
+        await Promise.all(promises);
+        this.pendingRequests = [];
     }
     getBufferView(byteOffset, byteLength, componentType) {
         return this.scheduleRequest({
@@ -2913,62 +2982,48 @@ class GltfStructure {
         }
         await Promise.all(texturePromises);
     }
-    loadMaterials() {
+    async loadMaterials() {
         if (!this.json.materials) return this.materials;
         for (let i = 0; i < this.json.materials.length; i++) {
             const materialDef = this.json.materials[i];
-            const material = this.createMaterial(materialDef);
+            const material = await this.createMaterial(materialDef);
+            material.name = materialDef.name;
             this.materials.set(i, material);
         }
         return this.materials;
     }
     createMaterial(materialDef) {
-        const material = new MeshStandardMaterial;
+        const params = {};
         if (materialDef.pbrMetallicRoughness) {
             const pbr = materialDef.pbrMetallicRoughness;
             if (pbr.baseColorFactor) {
-                material.color.fromArray(pbr.baseColorFactor);
-                material.opacity = pbr.baseColorFactor[3];
+                params.color = (new Color).fromArray(pbr.baseColorFactor);
+                params.opacity = pbr.baseColorFactor[3];
+                if (params.opacity < 1) params.transparent = true;
             }
             if (pbr.baseColorTexture) {
-                material.map = this.textureCache.get(pbr.baseColorTexture.index);
-            }
-            if (pbr.metallicFactor !== undefined) {
-                material.metalness = pbr.metallicFactor;
-            }
-            if (pbr.roughnessFactor !== undefined) {
-                material.roughness = pbr.roughnessFactor;
-            }
-            if (pbr.metallicRoughnessTexture) {
-                material.metalnessMap = this.textureCache.get(pbr.metallicRoughnessTexture.index);
-                material.roughnessMap = material.metalnessMap;
-            }
-        }
-        if (materialDef.normalTexture) {
-            material.normalMap = this.textureCache.get(materialDef.normalTexture.index);
-            if (materialDef.normalTexture.scale !== undefined) {
-                material.normalScale.set(materialDef.normalTexture.scale, materialDef.normalTexture.scale);
+                params.map = this.textureCache.get(pbr.baseColorTexture.index);
             }
         }
+        params.specular = 2236962;
+        params.shininess = 10;
+        params.reflectivity = .05;
+        params.polygonOffset = true;
+        params.polygonOffsetFactor = 1;
+        params.polygonOffsetUnits = 1;
         if (materialDef.emissiveFactor) {
-            material.emissive.fromArray(materialDef.emissiveFactor);
+            params.emissive = (new Color).fromArray(materialDef.emissiveFactor);
         }
-        if (materialDef.emissiveTexture) {
-            material.emissiveMap = this.textureCache.get(materialDef.emissiveTexture.index);
-        }
-        if (materialDef.occlusionTexture) {
-            material.aoMap = this.textureCache.get(materialDef.occlusionTexture.index);
-            if (materialDef.occlusionTexture.strength !== undefined) {
-                material.aoMapIntensity = materialDef.occlusionTexture.strength;
-            }
+        if (materialDef.normalTexture) {
+            params.normalMap = this.textureCache.get(materialDef.normalTexture.index);
         }
         if (materialDef.alphaMode === "BLEND") {
-            material.transparent = true;
-        } else if (materialDef.alphaMode === "MASK") {
-            material.alphaTest = materialDef.alphaCutoff !== undefined ? materialDef.alphaCutoff : .5;
+            params.transparent = true;
         }
-        material.side = materialDef.doubleSided ? DoubleSide : FrontSide;
-        material.name = materialDef.name;
+        if (materialDef.doubleSided) {
+            params.side = DoubleSide;
+        }
+        const material = new MeshPhongMaterial(params);
         return material;
     }
     disposeMaterials() {
@@ -3213,12 +3268,17 @@ class DynamicGltfLoader {
         this.mergedLineSegments = new Set;
         this.mergedPoints = new Set;
         this.isolatedObjects = [];
-        this.useVAO = !!window.WebGL2RenderingContext && this.renderer.getContext() instanceof WebGL2RenderingContext;
+        //!!window.WebGL2RenderingContext && this.renderer.getContext() instanceof WebGL2RenderingContext
+                this.useVAO = false;
+        this.visibleEdges = true;
         this.handleToOptimizedObjects = new Map;
         this.hiddenHandles = new Set;
         this.newOptimizedObjects = new Set;
         this.oldOptimizeObjects = new Set;
     }
+    setVisibleEdges(visible) {
+        this.visibleEdges = visible;
+    }
     getAvailableMemory() {
         let memoryLimit = 6 * 1024 * 1024 * 1024;
         try {
@@ -3236,7 +3296,7 @@ class DynamicGltfLoader {
         } catch (error) {
             console.warn("Error detecting available memory:", error);
         }
-        return memoryLimit;
+        return memoryLimit / 3;
     }
     getAbortController() {
         return this.abortController;
@@ -3317,35 +3377,132 @@ class DynamicGltfLoader {
         this.updateMemoryIndicator();
         console.log(`Final memory usage: ${Math.round(currentMemoryUsage / (1024 * 1024))}MB`);
     }
-    async loadNode(nodeId) {
+    async loadNode(nodeId, onLoadFinishCb) {
         const node = this.nodes.get(nodeId);
         if (!node || node.loaded || node.loading) return;
         node.loading = true;
         const meshDef = node.structure.getJson().meshes[node.meshIndex];
         try {
-            for (const primitive of meshDef.primitives) {
-                const positionAccessor = primitive.attributes.POSITION;
+            const bufferRequests = [];
+            const primitiveReqMap = new Map;
+            for (let primIdx = 0; primIdx < meshDef.primitives.length; primIdx++) {
+                const primitive = meshDef.primitives[primIdx];
+                const reqs = [];
+                if (primitive.attributes.POSITION !== undefined) {
+                    const accessorIndex = primitive.attributes.POSITION;
+                    const accessor = node.structure.json.accessors[accessorIndex];
+                    const bufferView = node.structure.json.bufferViews[accessor.bufferView];
+                    const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
+                    const components = node.structure.getNumComponents(accessor.type);
+                    const count = accessor.count;
+                    const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
+                    reqs.push({
+                        offset: byteOffset,
+                        length: byteLength,
+                        componentType: accessor.componentType,
+                        accessorIndex: accessorIndex,
+                        type: "position",
+                        primIdx: primIdx
+                    });
+                }
+                if (primitive.attributes.NORMAL !== undefined) {
+                    const accessorIndex = primitive.attributes.NORMAL;
+                    const accessor = node.structure.json.accessors[accessorIndex];
+                    const bufferView = node.structure.json.bufferViews[accessor.bufferView];
+                    const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
+                    const components = node.structure.getNumComponents(accessor.type);
+                    const count = accessor.count;
+                    const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
+                    reqs.push({
+                        offset: byteOffset,
+                        length: byteLength,
+                        componentType: accessor.componentType,
+                        accessorIndex: accessorIndex,
+                        type: "normal",
+                        primIdx: primIdx
+                    });
+                }
+                if (primitive.attributes.TEXCOORD_0 !== undefined) {
+                    const accessorIndex = primitive.attributes.TEXCOORD_0;
+                    const accessor = node.structure.json.accessors[accessorIndex];
+                    const bufferView = node.structure.json.bufferViews[accessor.bufferView];
+                    const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
+                    const components = node.structure.getNumComponents(accessor.type);
+                    const count = accessor.count;
+                    const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
+                    reqs.push({
+                        offset: byteOffset,
+                        length: byteLength,
+                        componentType: accessor.componentType,
+                        accessorIndex: accessorIndex,
+                        type: "uv",
+                        primIdx: primIdx
+                    });
+                }
+                if (primitive.indices !== undefined) {
+                    const accessorIndex = primitive.indices;
+                    const accessor = node.structure.json.accessors[accessorIndex];
+                    const bufferView = node.structure.json.bufferViews[accessor.bufferView];
+                    const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
+                    const components = node.structure.getNumComponents(accessor.type);
+                    const count = accessor.count;
+                    const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
+                    reqs.push({
+                        offset: byteOffset,
+                        length: byteLength,
+                        componentType: accessor.componentType,
+                        accessorIndex: accessorIndex,
+                        type: "index",
+                        primIdx: primIdx
+                    });
+                }
+                primitiveReqMap.set(primIdx, reqs);
+                bufferRequests.push(...reqs);
+            }
+            if (bufferRequests.length === 0) {
+                node.loaded = true;
+                node.loading = false;
+                return;
+            }
+            bufferRequests.sort(((a, b) => a.offset - b.offset));
+            const minOffset = bufferRequests[0].offset;
+            const maxOffset = Math.max(...bufferRequests.map((r => r.offset + r.length)));
+            const totalLength = maxOffset - minOffset;
+            const {buffer: buffer, relOffset: baseRelOffset} = await node.structure.scheduleRequest({
+                offset: minOffset,
+                length: totalLength,
+                componentType: null
+            });
+            for (const req of bufferRequests) {
+                const relOffset = req.offset - minOffset;
+                req.data = node.structure.createTypedArray(buffer, baseRelOffset + relOffset, req.length, req.componentType);
+            }
+            for (let primIdx = 0; primIdx < meshDef.primitives.length; primIdx++) {
+                const primitive = meshDef.primitives[primIdx];
                 const geometry = new BufferGeometry;
-                const attributes = new Map;
-                attributes.set("position", node.structure.createBufferAttribute(positionAccessor));
+                const reqs = primitiveReqMap.get(primIdx);
+                if (primitive.attributes.POSITION !== undefined) {
+                    const req = reqs.find((r => r.type === "position" && r.accessorIndex === primitive.attributes.POSITION));
+                    const accessor = node.structure.json.accessors[primitive.attributes.POSITION];
+                    const components = node.structure.getNumComponents(accessor.type);
+                    geometry.setAttribute("position", new BufferAttribute(req.data, components));
+                }
                 if (primitive.attributes.NORMAL !== undefined) {
-                    attributes.set("normal", node.structure.createBufferAttribute(primitive.attributes.NORMAL));
+                    const req = reqs.find((r => r.type === "normal" && r.accessorIndex === primitive.attributes.NORMAL));
+                    const accessor = node.structure.json.accessors[primitive.attributes.NORMAL];
+                    const components = node.structure.getNumComponents(accessor.type);
+                    geometry.setAttribute("normal", new BufferAttribute(req.data, components));
                 }
                 if (primitive.attributes.TEXCOORD_0 !== undefined) {
-                    attributes.set("uv", node.structure.createBufferAttribute(primitive.attributes.TEXCOORD_0));
+                    const req = reqs.find((r => r.type === "uv" && r.accessorIndex === primitive.attributes.TEXCOORD_0));
+                    const accessor = node.structure.json.accessors[primitive.attributes.TEXCOORD_0];
+                    const components = node.structure.getNumComponents(accessor.type);
+                    geometry.setAttribute("uv", new BufferAttribute(req.data, components));
                 }
-                const loadedAttributes = await Promise.all([ ...attributes.entries() ].map((async ([name, promise]) => {
-                    const attribute = await promise;
-                    return [ name, attribute ];
-                })));
-                loadedAttributes.forEach((([name, attribute]) => {
-                    geometry.setAttribute(name, attribute);
-                }));
                 if (primitive.indices !== undefined) {
-                    const indexAttribute = await node.structure.createBufferAttribute(primitive.indices);
-                    geometry.setIndex(indexAttribute);
+                    const req = reqs.find((r => r.type === "index" && r.accessorIndex === primitive.indices));
+                    geometry.setIndex(new BufferAttribute(req.data, 1));
                 }
-                this.currentPrimitiveMode = primitive.mode;
                 let material;
                 if (primitive.material !== undefined) {
                     material = node.structure.materials.get(primitive.material) || this.createDefaultMaterial();
@@ -3424,6 +3581,9 @@ class DynamicGltfLoader {
             const geometrySize = this.estimateGeometrySize(node.object);
             this.geometryCache.set(node.object.uuid, geometrySize);
             this.currentMemoryUsage += geometrySize;
+            if (onLoadFinishCb) {
+                onLoadFinishCb();
+            }
         } catch (error) {
             if (error.name !== "AbortError") {
                 console.error(`Error loading node ${nodeId}:`, error);
@@ -3521,7 +3681,7 @@ class DynamicGltfLoader {
             const volumeB = sizeB.x * sizeB.y * sizeB.z;
             return volumeB - volumeA;
         }));
-        if (!ignoreEdges) {
+        if (!ignoreEdges && this.visibleEdges) {
             this.nodesToLoad.push(...this.edgeNodes);
         }
         this.dispatchEvent("databasechunk", {
@@ -3629,28 +3789,12 @@ class DynamicGltfLoader {
     async processNodes() {
         const nodesToLoad = this.nodesToLoad;
         let loadedCount = 0;
+        let lastLoadedCount = 0;
         const totalNodes = nodesToLoad.length;
-        try {
-            while (loadedCount < totalNodes) {
-                const batch = nodesToLoad.slice(loadedCount, loadedCount + this.batchSize);
-                const batchPromises = [];
-                for (const nodeId of batch) {
-                    if (this.abortController.signal.aborted) {
-                        throw new DOMException("Loading aborted", "AbortError");
-                    }
-                    const estimatedSize = await this.estimateNodeSize(nodeId);
-                    if (this.currentMemoryUsage + estimatedSize > this.memoryLimit) {
-                        console.log(`Memory limit reached after loading ${loadedCount} nodes`);
-                        this.dispatchEvent("geometryerror", {
-                            message: "Memory limit reached"
-                        });
-                        this.dispatchEvent("update");
-                        return loadedCount;
-                    }
-                    batchPromises.push(this.loadNode(nodeId));
-                }
-                await Promise.all(batchPromises);
-                loadedCount += batch.length;
+        const loadProgress = async () => {
+            loadedCount++;
+            if (loadedCount - lastLoadedCount > 1e3) {
+                lastLoadedCount = loadedCount;
                 this.updateMemoryIndicator();
                 this.dispatchEvent("geometryprogress", {
                     percentage: Math.round(loadedCount / totalNodes * 100),
@@ -3666,6 +3810,28 @@ class DynamicGltfLoader {
                     setTimeout(resolve, 0);
                 }));
             }
+        };
+        try {
+            const loadOperations = [];
+            for (const nodeId of nodesToLoad) {
+                if (this.abortController.signal.aborted) {
+                    throw new DOMException("Loading aborted", "AbortError");
+                }
+                const estimatedSize = await this.estimateNodeSize(nodeId);
+                if (this.currentMemoryUsage + estimatedSize > this.memoryLimit) {
+                    console.log(`Memory limit reached after loading ${loadedCount} nodes`);
+                    this.dispatchEvent("geometryerror", {
+                        message: "Memory limit reached"
+                    });
+                    this.dispatchEvent("update");
+                    return loadedCount;
+                }
+                loadOperations.push(this.loadNode(nodeId, loadProgress));
+            }
+            for (const structure of this.structures) {
+                loadOperations.push(structure.flushBufferRequests());
+            }
+            await Promise.all(loadOperations);
             this.dispatchEvent("geometryend", {
                 totalLoaded: loadedCount,
                 totalNodes: totalNodes
@@ -4469,13 +4635,29 @@ class DynamicGltfLoader {
             }
         }));
     }
+    getStructureGeometryExtent(structureId) {
+        const extent = new Box3;
+        for (const [nodeId, node] of this.nodes.entries()) {
+            if (!node.geometryExtents) continue;
+            if (!nodeId.startsWith(structureId + "_")) continue;
+            if (node.object && this.hiddenHandles && this.hiddenHandles.has(node.object.userData.handle)) continue;
+            const transformedBox = node.geometryExtents.clone();
+            if (node.group && node.group.matrix) {
+                transformedBox.applyMatrix4(node.group.matrix);
+                if (node.group.parent && node.group.parent.matrix) {
+                    transformedBox.applyMatrix4(node.group.parent.matrix);
+                }
+            }
+            extent.union(transformedBox);
+        }
+        return extent;
+    }
 }
 
 class GLTFCloudDynamicLoader {
     constructor(viewer) {
         this.requestId = 0;
         this.viewer = viewer;
-        this.scene = new Group;
     }
     dispose() {
         if (this.gltfLoader) this.gltfLoader.clear();
@@ -4484,21 +4666,22 @@ class GLTFCloudDynamicLoader {
         return typeof file === "object" && typeof file.database === "string" && typeof file.downloadResource === "function" && typeof file.downloadResourceRange === "function" && /.gltf$/i.test(file.database);
     }
     async load(model, format, params) {
-        this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, this.viewer.scene, this.viewer.renderer);
+        const scene = new Group;
+        this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
         this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
         this.gltfLoader.addEventListener("databasechunk", (data => {
-            const modelImpl = new DynamicModelImpl(this.scene);
+            const modelImpl = new DynamicModelImpl(scene);
             modelImpl.loader = this;
             modelImpl.gltfLoader = this.gltfLoader;
             modelImpl.viewer = this.viewer;
-            this.viewer.scene.add(this.scene);
+            this.viewer.scene.add(scene);
             this.viewer.models.push(modelImpl);
             this.viewer.syncOptions();
             this.viewer.syncOverlay();
             this.viewer.update();
             this.viewer.emitEvent({
                 type: "databasechunk",
-                data: data,
+                data: scene,
                 file: model.file,
                 model: model
             });
@@ -4512,12 +4695,6 @@ class GLTFCloudDynamicLoader {
                 model: model
             });
         }));
-        this.gltfLoader.addEventListener("geometrymemory", (data => {
-            this.viewer.emit({
-                type: "geometryprogress",
-                data: data
-            });
-        }));
         this.gltfLoader.addEventListener("geometryerror", (data => {
             this.viewer.emitEvent({
                 type: "geometryerror",
@@ -4560,9 +4737,7 @@ class GLTFCloudDynamicLoader {
         return this;
     }
     cancel() {
-        if (this.gltfLoader) {
-            this.gltfLoader.abortLoading();
-        }
+        if (this.gltfLoader) this.gltfLoader.abortLoading();
     }
 }
 
@@ -4607,13 +4782,17 @@ class Viewer extends EventEmitter2 {
         this.addEventListener("optionschange", (event => this.syncOptions(event.data)));
         this.scene = new Scene;
         this.helpers = new Scene;
+        this.target = new Vector3;
         const pixelRatio = window.devicePixelRatio;
         const rect = canvas.parentElement.getBoundingClientRect();
         const width = rect.width || 1;
         const height = rect.height || 1;
         const aspect = width / height;
         this.camera = new PerspectiveCamera(45, aspect, .01, 1e3);
-        this.camera.up.set(0, 0, 1);
+        this.camera.up.set(0, 1, 0);
+        this.camera.position.set(0, 0, 1);
+        this.camera.lookAt(this.target);
+        this.camera.updateProjectionMatrix();
         this.renderer = new WebGLRenderer({
             canvas: canvas,
             antialias: true,