@inweb/viewer-three 26.7.6 → 26.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@ import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loaders
2
2
 
3
3
  export * from "@inweb/viewer-core";
4
4
 
5
- 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";
5
+ 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";
6
6
 
7
7
  import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
8
8
 
@@ -1676,6 +1676,7 @@ function setSelected(viewer, handles = []) {
1676
1676
  selection.clearSelection();
1677
1677
  viewer.models.forEach((model => {
1678
1678
  const objects = model.getObjectsByHandles(handles);
1679
+ model.showObjects(objects);
1679
1680
  selection.select(objects, model);
1680
1681
  }));
1681
1682
  viewer.update();
@@ -1729,12 +1730,12 @@ commands.registerCommand("clearSelected", clearSelected);
1729
1730
 
1730
1731
  commands.registerCommand("clearSlices", clearSlices);
1731
1732
 
1733
+ commands.registerCommand("collect", collect);
1734
+
1732
1735
  commands.registerCommand("createPreview", createPreview);
1733
1736
 
1734
1737
  commands.registerCommand("explode", explode);
1735
1738
 
1736
- commands.registerCommand("collect", collect);
1737
-
1738
1739
  commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
1739
1740
 
1740
1741
  commands.registerCommand("getModels", getModels);
@@ -1910,11 +1911,11 @@ class LightComponent {
1910
1911
  if (this.viewer.extents.isEmpty()) return;
1911
1912
  const extentsCenter = this.viewer.extents.getCenter(new Vector3);
1912
1913
  const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere).radius;
1913
- this.directionalLight.position.set(.5, 0, .866).multiplyScalar(extentsSize * 2).add(extentsCenter);
1914
+ this.directionalLight.position.set(.5, .866, 0).multiplyScalar(extentsSize * 2).add(extentsCenter);
1914
1915
  this.directionalLight.target.position.copy(extentsCenter);
1915
- this.frontLight.position.set(0, extentsSize * 2, 0).add(extentsCenter);
1916
+ this.frontLight.position.set(0, 0, 1).multiplyScalar(extentsSize * 2).add(extentsCenter);
1916
1917
  this.frontLight.target.position.copy(extentsCenter);
1917
- this.hemisphereLight.position.set(0, extentsSize * 3, 0).add(extentsCenter);
1918
+ this.hemisphereLight.position.set(0, 0, 1).multiplyScalar(extentsSize * 3).add(extentsCenter);
1918
1919
  this.viewer.scene.add(this.ambientLight);
1919
1920
  this.viewer.scene.add(this.directionalLight);
1920
1921
  this.viewer.scene.add(this.frontLight);
@@ -1922,16 +1923,9 @@ class LightComponent {
1922
1923
  };
1923
1924
  this.viewer = viewer;
1924
1925
  this.ambientLight = new AmbientLight(16777215, 1);
1925
- this.viewer.scene.add(this.ambientLight);
1926
1926
  this.directionalLight = new DirectionalLight(16777215, 1);
1927
- this.directionalLight.position.set(.5, 0, .866);
1928
- this.viewer.scene.add(this.directionalLight);
1929
1927
  this.frontLight = new DirectionalLight(16777215, 1.25);
1930
- this.frontLight.position.set(0, 1, 0);
1931
- this.viewer.scene.add(this.frontLight);
1932
1928
  this.hemisphereLight = new HemisphereLight(16777215, 4473924, 1.25);
1933
- this.hemisphereLight.position.set(0, 0, 1);
1934
- this.viewer.scene.add(this.hemisphereLight);
1935
1929
  this.viewer.addEventListener("databasechunk", this.geometryEnd);
1936
1930
  this.viewer.addEventListener("clear", this.geometryEnd);
1937
1931
  }
@@ -2050,19 +2044,25 @@ class HighlighterUtils {
2050
2044
  class HighlighterComponent {
2051
2045
  constructor(viewer) {
2052
2046
  this.geometryEnd = () => {
2053
- const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor} = this.viewer.options;
2054
- this.highlightMaterial = new MeshBasicMaterial({
2047
+ const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor, edgesOverlap: edgesOverlap, facesOverlap: facesOverlap} = this.viewer.options;
2048
+ this.highlightMaterial = new MeshPhongMaterial({
2055
2049
  color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
2056
2050
  transparent: true,
2057
2051
  opacity: (255 - facesTransparancy) / 255,
2058
- depthTest: false,
2059
- depthWrite: false
2052
+ depthTest: !facesOverlap,
2053
+ depthWrite: !facesOverlap,
2054
+ specular: 2236962,
2055
+ shininess: 10,
2056
+ reflectivity: .05,
2057
+ polygonOffset: true,
2058
+ polygonOffsetFactor: 1,
2059
+ polygonOffsetUnits: 1
2060
2060
  });
2061
2061
  this.outlineMaterial = new LineMaterial({
2062
2062
  color: new Color(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255),
2063
2063
  linewidth: 1.5,
2064
- depthTest: false,
2065
- depthWrite: false,
2064
+ depthTest: !edgesOverlap,
2065
+ depthWrite: !edgesOverlap,
2066
2066
  resolution: new Vector2(window.innerWidth, window.innerHeight)
2067
2067
  });
2068
2068
  this.highlightLineMaterial = new LineBasicMaterial({
@@ -2075,18 +2075,26 @@ class HighlighterComponent {
2075
2075
  linewidth: 5,
2076
2076
  transparent: true,
2077
2077
  opacity: .8,
2078
- depthTest: true,
2079
- depthWrite: true,
2078
+ depthTest: !edgesOverlap,
2079
+ depthWrite: !edgesOverlap,
2080
2080
  resolution: new Vector2(window.innerWidth, window.innerHeight)
2081
2081
  });
2082
2082
  };
2083
2083
  this.optionsChange = () => {
2084
- const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor} = this.viewer.options;
2084
+ const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor, edgesVisibility: edgesVisibility, edgesOverlap: edgesOverlap, facesOverlap: facesOverlap} = this.viewer.options;
2085
2085
  this.highlightMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
2086
2086
  this.highlightMaterial.opacity = (255 - facesTransparancy) / 255;
2087
+ this.highlightMaterial.depthTest = !facesOverlap;
2088
+ this.highlightMaterial.depthWrite = !facesOverlap;
2087
2089
  this.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
2090
+ this.outlineMaterial.depthTest = !edgesOverlap;
2091
+ this.outlineMaterial.depthWrite = !edgesOverlap;
2088
2092
  this.highlightLineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
2089
2093
  this.highlightLineGlowMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
2094
+ this.viewer.selected.forEach((selected => {
2095
+ const wireframe = selected.userData.highlightWireframe;
2096
+ if (wireframe) wireframe.visible = edgesVisibility;
2097
+ }));
2090
2098
  this.viewer.update();
2091
2099
  };
2092
2100
  this.viewer = viewer;
@@ -2111,6 +2119,7 @@ class HighlighterComponent {
2111
2119
  this.viewer.removeEventListener("resize", this.viewerResize);
2112
2120
  }
2113
2121
  highlight(objects) {
2122
+ const {edgesVisibility: edgesVisibility} = this.viewer.options;
2114
2123
  if (!Array.isArray(objects)) objects = [ objects ];
2115
2124
  if (!objects.length) return;
2116
2125
  objects.forEach((object => {
@@ -2123,20 +2132,22 @@ class HighlighterComponent {
2123
2132
  wireframe.position.copy(object.position);
2124
2133
  wireframe.rotation.copy(object.rotation);
2125
2134
  wireframe.scale.copy(object.scale);
2135
+ wireframe.visible = edgesVisibility;
2126
2136
  object.parent.add(wireframe);
2127
- object.userData.highlightwireframe = wireframe;
2137
+ object.userData.highlightWireframe = wireframe;
2128
2138
  object.userData.originalMaterial = object.material;
2129
2139
  object.material = this.highlightLineMaterial;
2130
2140
  object.isHighlighted = true;
2131
2141
  } else if (object.isMesh) {
2132
- const edgesGeometry = new EdgesGeometry(object.geometry, 30);
2142
+ const edgesGeometry = new EdgesGeometry(object.geometry, 60);
2133
2143
  const lineGeometry = (new LineSegmentsGeometry).fromEdgesGeometry(edgesGeometry);
2134
2144
  const wireframe = new Wireframe(lineGeometry, this.outlineMaterial);
2135
2145
  wireframe.position.copy(object.position);
2136
2146
  wireframe.rotation.copy(object.rotation);
2137
2147
  wireframe.scale.copy(object.scale);
2148
+ wireframe.visible = edgesVisibility;
2138
2149
  object.parent.add(wireframe);
2139
- object.userData.highlightwireframe = wireframe;
2150
+ object.userData.highlightWireframe = wireframe;
2140
2151
  object.userData.originalMaterial = object.material;
2141
2152
  object.material = this.highlightMaterial;
2142
2153
  object.isHighlighted = true;
@@ -2150,9 +2161,9 @@ class HighlighterComponent {
2150
2161
  if (!object.isHighlighted) return;
2151
2162
  object.isHighlighted = false;
2152
2163
  object.material = object.userData.originalMaterial;
2153
- object.userData.highlightwireframe.removeFromParent();
2164
+ object.userData.highlightWireframe.removeFromParent();
2154
2165
  delete object.userData.originalMaterial;
2155
- delete object.userData.highlightwireframe;
2166
+ delete object.userData.highlightWireframe;
2156
2167
  }));
2157
2168
  }
2158
2169
  viewerResize(event) {
@@ -2176,10 +2187,10 @@ class SelectionComponent {
2176
2187
  this.viewer.models.forEach((model => {
2177
2188
  const objects = model.getVisibleObjects();
2178
2189
  const intersects = this.getPointerIntersects(upPosition, objects);
2179
- intersections.push(...intersects.map((x => ({
2180
- ...x,
2190
+ if (intersects.length > 0) intersections.push({
2191
+ ...intersects[0],
2181
2192
  model: model
2182
- }))));
2193
+ });
2183
2194
  }));
2184
2195
  intersections = intersections.sort(((a, b) => a.distance - b.distance));
2185
2196
  if (!event.shiftKey) this.clearSelection();
@@ -2249,7 +2260,6 @@ class SelectionComponent {
2249
2260
  }
2250
2261
  if (!Array.isArray(objects)) objects = [ objects ];
2251
2262
  if (!objects.length) return;
2252
- model.showObjects(objects);
2253
2263
  model.showOriginalObjects(objects);
2254
2264
  this.highlighter.highlight(objects);
2255
2265
  objects.forEach((object => this.viewer.selected.push(object)));
@@ -2633,8 +2643,8 @@ class DynamicModelImpl extends ModelImpl {
2633
2643
  return objects;
2634
2644
  }
2635
2645
  hideObjects(objects) {
2636
- this.getOwnObjects(objects).map((object => object.userData.handle)).forEach((handle => this.gltfLoader.hiddenHandles.add(handle)));
2637
- this.gltfLoader.syncHiddenObjects();
2646
+ const handles = this.getHandlesByObjects(objects);
2647
+ this.gltfLoader.hideObjects(handles);
2638
2648
  return this;
2639
2649
  }
2640
2650
  isolateObjects(objects) {
@@ -2643,21 +2653,20 @@ class DynamicModelImpl extends ModelImpl {
2643
2653
  return this;
2644
2654
  }
2645
2655
  showObjects(objects) {
2646
- this.getOwnObjects(objects).map((object => object.userData.handle)).forEach((handle => this.gltfLoader.hiddenHandles.delete(handle)));
2647
- this.gltfLoader.syncHiddenObjects();
2656
+ const handles = this.getHandlesByObjects(objects);
2657
+ this.gltfLoader.showObjects(handles);
2648
2658
  return this;
2649
2659
  }
2650
2660
  showAllObjects() {
2651
- this.gltfLoader.hiddenHandles.clear();
2652
- this.gltfLoader.syncHiddenObjects();
2661
+ this.gltfLoader.showAllHiddenObjects();
2653
2662
  return this;
2654
2663
  }
2655
2664
  showOriginalObjects(objects) {
2656
- this.getOwnObjects(objects).forEach((object => object.visible = true));
2665
+ this.gltfLoader.showOriginalObjects(objects);
2657
2666
  return this;
2658
2667
  }
2659
2668
  hideOriginalObjects(objects) {
2660
- this.getOwnObjects(objects).forEach((object => object.visible = false));
2669
+ this.gltfLoader.hideOriginalObjects(objects);
2661
2670
  return this;
2662
2671
  }
2663
2672
  }
@@ -2681,6 +2690,10 @@ const GL_CONSTANTS = {
2681
2690
  TRIANGLE_FAN: 6
2682
2691
  };
2683
2692
 
2693
+ const MAX_GAP = 128 * 1024;
2694
+
2695
+ const MAX_CHUNK = 30 * 1024 * 1024;
2696
+
2684
2697
  class GltfStructure {
2685
2698
  constructor(id) {
2686
2699
  this.id = `${id}`;
@@ -2718,42 +2731,99 @@ class GltfStructure {
2718
2731
  return this.json;
2719
2732
  }
2720
2733
  scheduleRequest(request) {
2721
- this.pendingRequests.push(request);
2722
- if (this.batchTimeout) {
2723
- clearTimeout(this.batchTimeout);
2724
- }
2725
- this.batchTimeout = setTimeout((() => this.processBatch()), this.batchDelay);
2726
2734
  return new Promise(((resolve, reject) => {
2727
- request.resolve = resolve;
2728
- request.reject = reject;
2735
+ this.pendingRequests.push({
2736
+ ...request,
2737
+ _resolve: resolve,
2738
+ _reject: reject
2739
+ });
2729
2740
  }));
2730
2741
  }
2731
- async processBatch() {
2732
- if (this.pendingRequests.length === 0) return;
2733
- const currentBatch = [ ...this.pendingRequests ];
2742
+ async flushBufferRequests() {
2743
+ if (!this.pendingRequests || this.pendingRequests.length === 0) return;
2744
+ const requests = [ ...this.pendingRequests ];
2734
2745
  this.pendingRequests = [];
2735
- if (this.batchTimeout) {
2736
- clearTimeout(this.batchTimeout);
2737
- this.batchTimeout = null;
2738
- }
2739
- try {
2740
- for (let i = 0; i < currentBatch.length; i += this.maxRangesPerRequest) {
2741
- const batchRequests = currentBatch.slice(i, i + this.maxRangesPerRequest);
2742
- const buffer = await this.loadController.loadBinaryData(batchRequests);
2743
- let currentOffset = 0;
2744
- batchRequests.forEach((request => {
2745
- const view = this.createTypedArray(buffer, currentOffset, request.length, request.componentType);
2746
- request.resolve(view);
2747
- currentOffset += request.length;
2748
- }));
2746
+ requests.sort(((a, b) => a.offset - b.offset));
2747
+ const mergedRanges = [];
2748
+ let current = {
2749
+ start: requests[0].offset,
2750
+ end: requests[0].offset + requests[0].length,
2751
+ requests: [ requests[0] ]
2752
+ };
2753
+ for (let i = 1; i < requests.length; i++) {
2754
+ const req = requests[i];
2755
+ const gap = req.offset - current.end;
2756
+ const newEnd = Math.max(current.end, req.offset + req.length);
2757
+ const projectedSize = newEnd - current.start;
2758
+ if (gap <= MAX_GAP && projectedSize <= MAX_CHUNK) {
2759
+ current.end = newEnd;
2760
+ current.requests.push(req);
2761
+ } else {
2762
+ mergedRanges.push(current);
2763
+ current = {
2764
+ start: req.offset,
2765
+ end: req.offset + req.length,
2766
+ requests: [ req ]
2767
+ };
2749
2768
  }
2750
- } catch (error) {
2751
- console.error("Error processing batch:", error);
2752
- currentBatch.forEach((request => request.reject(error)));
2753
2769
  }
2754
- if (this.pendingRequests.length > 0) {
2755
- this.batchTimeout = setTimeout((() => this.processBatch()), this.batchDelay);
2770
+ mergedRanges.push(current);
2771
+ const finalRanges = [];
2772
+ for (const range of mergedRanges) {
2773
+ let {start: start, end: end, requests: requests} = range;
2774
+ while (end - start > MAX_CHUNK) {
2775
+ let splitIdx = 0;
2776
+ for (let i = 0; i < requests.length; i++) {
2777
+ if (requests[i].offset + requests[i].length - start > MAX_CHUNK) {
2778
+ break;
2779
+ }
2780
+ splitIdx = i;
2781
+ }
2782
+ const chunkRequests = requests.slice(0, splitIdx + 1);
2783
+ const chunkEnd = chunkRequests[chunkRequests.length - 1].offset + chunkRequests[chunkRequests.length - 1].length;
2784
+ finalRanges.push({
2785
+ start: start,
2786
+ end: chunkEnd,
2787
+ requests: chunkRequests
2788
+ });
2789
+ requests = requests.slice(splitIdx + 1);
2790
+ if (requests.length > 0) {
2791
+ start = requests[0].offset;
2792
+ end = requests[0].offset + requests[0].length;
2793
+ for (let i = 1; i < requests.length; i++) {
2794
+ end = Math.max(end, requests[i].offset + requests[i].length);
2795
+ }
2796
+ }
2797
+ }
2798
+ if (requests.length > 0) {
2799
+ finalRanges.push({
2800
+ start: start,
2801
+ end: end,
2802
+ requests: requests
2803
+ });
2804
+ }
2756
2805
  }
2806
+ const promises = finalRanges.map((async range => {
2807
+ const length = range.end - range.start;
2808
+ const buffer = await this.loadController.loadBinaryData([ {
2809
+ offset: range.start,
2810
+ length: length
2811
+ } ]);
2812
+ for (const req of range.requests) {
2813
+ const relOffset = req.offset - range.start;
2814
+ try {
2815
+ req._resolve({
2816
+ buffer: buffer,
2817
+ relOffset: relOffset,
2818
+ length: req.length
2819
+ });
2820
+ } catch (e) {
2821
+ req._reject(e);
2822
+ }
2823
+ }
2824
+ }));
2825
+ await Promise.all(promises);
2826
+ this.pendingRequests = [];
2757
2827
  }
2758
2828
  getBufferView(byteOffset, byteLength, componentType) {
2759
2829
  return this.scheduleRequest({
@@ -2912,62 +2982,48 @@ class GltfStructure {
2912
2982
  }
2913
2983
  await Promise.all(texturePromises);
2914
2984
  }
2915
- loadMaterials() {
2985
+ async loadMaterials() {
2916
2986
  if (!this.json.materials) return this.materials;
2917
2987
  for (let i = 0; i < this.json.materials.length; i++) {
2918
2988
  const materialDef = this.json.materials[i];
2919
- const material = this.createMaterial(materialDef);
2989
+ const material = await this.createMaterial(materialDef);
2990
+ material.name = materialDef.name;
2920
2991
  this.materials.set(i, material);
2921
2992
  }
2922
2993
  return this.materials;
2923
2994
  }
2924
2995
  createMaterial(materialDef) {
2925
- const material = new MeshStandardMaterial;
2996
+ const params = {};
2926
2997
  if (materialDef.pbrMetallicRoughness) {
2927
2998
  const pbr = materialDef.pbrMetallicRoughness;
2928
2999
  if (pbr.baseColorFactor) {
2929
- material.color.fromArray(pbr.baseColorFactor);
2930
- material.opacity = pbr.baseColorFactor[3];
3000
+ params.color = (new Color).fromArray(pbr.baseColorFactor);
3001
+ params.opacity = pbr.baseColorFactor[3];
3002
+ if (params.opacity < 1) params.transparent = true;
2931
3003
  }
2932
3004
  if (pbr.baseColorTexture) {
2933
- material.map = this.textureCache.get(pbr.baseColorTexture.index);
2934
- }
2935
- if (pbr.metallicFactor !== undefined) {
2936
- material.metalness = pbr.metallicFactor;
2937
- }
2938
- if (pbr.roughnessFactor !== undefined) {
2939
- material.roughness = pbr.roughnessFactor;
2940
- }
2941
- if (pbr.metallicRoughnessTexture) {
2942
- material.metalnessMap = this.textureCache.get(pbr.metallicRoughnessTexture.index);
2943
- material.roughnessMap = material.metalnessMap;
2944
- }
2945
- }
2946
- if (materialDef.normalTexture) {
2947
- material.normalMap = this.textureCache.get(materialDef.normalTexture.index);
2948
- if (materialDef.normalTexture.scale !== undefined) {
2949
- material.normalScale.set(materialDef.normalTexture.scale, materialDef.normalTexture.scale);
3005
+ params.map = this.textureCache.get(pbr.baseColorTexture.index);
2950
3006
  }
2951
3007
  }
3008
+ params.specular = 2236962;
3009
+ params.shininess = 10;
3010
+ params.reflectivity = .05;
3011
+ params.polygonOffset = true;
3012
+ params.polygonOffsetFactor = 1;
3013
+ params.polygonOffsetUnits = 1;
2952
3014
  if (materialDef.emissiveFactor) {
2953
- material.emissive.fromArray(materialDef.emissiveFactor);
2954
- }
2955
- if (materialDef.emissiveTexture) {
2956
- material.emissiveMap = this.textureCache.get(materialDef.emissiveTexture.index);
3015
+ params.emissive = (new Color).fromArray(materialDef.emissiveFactor);
2957
3016
  }
2958
- if (materialDef.occlusionTexture) {
2959
- material.aoMap = this.textureCache.get(materialDef.occlusionTexture.index);
2960
- if (materialDef.occlusionTexture.strength !== undefined) {
2961
- material.aoMapIntensity = materialDef.occlusionTexture.strength;
2962
- }
3017
+ if (materialDef.normalTexture) {
3018
+ params.normalMap = this.textureCache.get(materialDef.normalTexture.index);
2963
3019
  }
2964
3020
  if (materialDef.alphaMode === "BLEND") {
2965
- material.transparent = true;
2966
- } else if (materialDef.alphaMode === "MASK") {
2967
- material.alphaTest = materialDef.alphaCutoff !== undefined ? materialDef.alphaCutoff : .5;
3021
+ params.transparent = true;
3022
+ }
3023
+ if (materialDef.doubleSided) {
3024
+ params.side = DoubleSide;
2968
3025
  }
2969
- material.side = materialDef.doubleSided ? DoubleSide : FrontSide;
2970
- material.name = materialDef.name;
3026
+ const material = new MeshPhongMaterial(params);
2971
3027
  return material;
2972
3028
  }
2973
3029
  disposeMaterials() {
@@ -3212,12 +3268,17 @@ class DynamicGltfLoader {
3212
3268
  this.mergedLineSegments = new Set;
3213
3269
  this.mergedPoints = new Set;
3214
3270
  this.isolatedObjects = [];
3215
- this.useVAO = !!window.WebGL2RenderingContext && this.renderer.getContext() instanceof WebGL2RenderingContext;
3271
+ //!!window.WebGL2RenderingContext && this.renderer.getContext() instanceof WebGL2RenderingContext
3272
+ this.useVAO = false;
3273
+ this.visibleEdges = true;
3216
3274
  this.handleToOptimizedObjects = new Map;
3217
3275
  this.hiddenHandles = new Set;
3218
3276
  this.newOptimizedObjects = new Set;
3219
3277
  this.oldOptimizeObjects = new Set;
3220
3278
  }
3279
+ setVisibleEdges(visible) {
3280
+ this.visibleEdges = visible;
3281
+ }
3221
3282
  getAvailableMemory() {
3222
3283
  let memoryLimit = 6 * 1024 * 1024 * 1024;
3223
3284
  try {
@@ -3235,7 +3296,7 @@ class DynamicGltfLoader {
3235
3296
  } catch (error) {
3236
3297
  console.warn("Error detecting available memory:", error);
3237
3298
  }
3238
- return memoryLimit;
3299
+ return memoryLimit / 3;
3239
3300
  }
3240
3301
  getAbortController() {
3241
3302
  return this.abortController;
@@ -3316,35 +3377,132 @@ class DynamicGltfLoader {
3316
3377
  this.updateMemoryIndicator();
3317
3378
  console.log(`Final memory usage: ${Math.round(currentMemoryUsage / (1024 * 1024))}MB`);
3318
3379
  }
3319
- async loadNode(nodeId) {
3380
+ async loadNode(nodeId, onLoadFinishCb) {
3320
3381
  const node = this.nodes.get(nodeId);
3321
3382
  if (!node || node.loaded || node.loading) return;
3322
3383
  node.loading = true;
3323
3384
  const meshDef = node.structure.getJson().meshes[node.meshIndex];
3324
3385
  try {
3325
- for (const primitive of meshDef.primitives) {
3326
- const positionAccessor = primitive.attributes.POSITION;
3386
+ const bufferRequests = [];
3387
+ const primitiveReqMap = new Map;
3388
+ for (let primIdx = 0; primIdx < meshDef.primitives.length; primIdx++) {
3389
+ const primitive = meshDef.primitives[primIdx];
3390
+ const reqs = [];
3391
+ if (primitive.attributes.POSITION !== undefined) {
3392
+ const accessorIndex = primitive.attributes.POSITION;
3393
+ const accessor = node.structure.json.accessors[accessorIndex];
3394
+ const bufferView = node.structure.json.bufferViews[accessor.bufferView];
3395
+ const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
3396
+ const components = node.structure.getNumComponents(accessor.type);
3397
+ const count = accessor.count;
3398
+ const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
3399
+ reqs.push({
3400
+ offset: byteOffset,
3401
+ length: byteLength,
3402
+ componentType: accessor.componentType,
3403
+ accessorIndex: accessorIndex,
3404
+ type: "position",
3405
+ primIdx: primIdx
3406
+ });
3407
+ }
3408
+ if (primitive.attributes.NORMAL !== undefined) {
3409
+ const accessorIndex = primitive.attributes.NORMAL;
3410
+ const accessor = node.structure.json.accessors[accessorIndex];
3411
+ const bufferView = node.structure.json.bufferViews[accessor.bufferView];
3412
+ const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
3413
+ const components = node.structure.getNumComponents(accessor.type);
3414
+ const count = accessor.count;
3415
+ const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
3416
+ reqs.push({
3417
+ offset: byteOffset,
3418
+ length: byteLength,
3419
+ componentType: accessor.componentType,
3420
+ accessorIndex: accessorIndex,
3421
+ type: "normal",
3422
+ primIdx: primIdx
3423
+ });
3424
+ }
3425
+ if (primitive.attributes.TEXCOORD_0 !== undefined) {
3426
+ const accessorIndex = primitive.attributes.TEXCOORD_0;
3427
+ const accessor = node.structure.json.accessors[accessorIndex];
3428
+ const bufferView = node.structure.json.bufferViews[accessor.bufferView];
3429
+ const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
3430
+ const components = node.structure.getNumComponents(accessor.type);
3431
+ const count = accessor.count;
3432
+ const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
3433
+ reqs.push({
3434
+ offset: byteOffset,
3435
+ length: byteLength,
3436
+ componentType: accessor.componentType,
3437
+ accessorIndex: accessorIndex,
3438
+ type: "uv",
3439
+ primIdx: primIdx
3440
+ });
3441
+ }
3442
+ if (primitive.indices !== undefined) {
3443
+ const accessorIndex = primitive.indices;
3444
+ const accessor = node.structure.json.accessors[accessorIndex];
3445
+ const bufferView = node.structure.json.bufferViews[accessor.bufferView];
3446
+ const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
3447
+ const components = node.structure.getNumComponents(accessor.type);
3448
+ const count = accessor.count;
3449
+ const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
3450
+ reqs.push({
3451
+ offset: byteOffset,
3452
+ length: byteLength,
3453
+ componentType: accessor.componentType,
3454
+ accessorIndex: accessorIndex,
3455
+ type: "index",
3456
+ primIdx: primIdx
3457
+ });
3458
+ }
3459
+ primitiveReqMap.set(primIdx, reqs);
3460
+ bufferRequests.push(...reqs);
3461
+ }
3462
+ if (bufferRequests.length === 0) {
3463
+ node.loaded = true;
3464
+ node.loading = false;
3465
+ return;
3466
+ }
3467
+ bufferRequests.sort(((a, b) => a.offset - b.offset));
3468
+ const minOffset = bufferRequests[0].offset;
3469
+ const maxOffset = Math.max(...bufferRequests.map((r => r.offset + r.length)));
3470
+ const totalLength = maxOffset - minOffset;
3471
+ const {buffer: buffer, relOffset: baseRelOffset} = await node.structure.scheduleRequest({
3472
+ offset: minOffset,
3473
+ length: totalLength,
3474
+ componentType: null
3475
+ });
3476
+ for (const req of bufferRequests) {
3477
+ const relOffset = req.offset - minOffset;
3478
+ req.data = node.structure.createTypedArray(buffer, baseRelOffset + relOffset, req.length, req.componentType);
3479
+ }
3480
+ for (let primIdx = 0; primIdx < meshDef.primitives.length; primIdx++) {
3481
+ const primitive = meshDef.primitives[primIdx];
3327
3482
  const geometry = new BufferGeometry;
3328
- const attributes = new Map;
3329
- attributes.set("position", node.structure.createBufferAttribute(positionAccessor));
3483
+ const reqs = primitiveReqMap.get(primIdx);
3484
+ if (primitive.attributes.POSITION !== undefined) {
3485
+ const req = reqs.find((r => r.type === "position" && r.accessorIndex === primitive.attributes.POSITION));
3486
+ const accessor = node.structure.json.accessors[primitive.attributes.POSITION];
3487
+ const components = node.structure.getNumComponents(accessor.type);
3488
+ geometry.setAttribute("position", new BufferAttribute(req.data, components));
3489
+ }
3330
3490
  if (primitive.attributes.NORMAL !== undefined) {
3331
- attributes.set("normal", node.structure.createBufferAttribute(primitive.attributes.NORMAL));
3491
+ const req = reqs.find((r => r.type === "normal" && r.accessorIndex === primitive.attributes.NORMAL));
3492
+ const accessor = node.structure.json.accessors[primitive.attributes.NORMAL];
3493
+ const components = node.structure.getNumComponents(accessor.type);
3494
+ geometry.setAttribute("normal", new BufferAttribute(req.data, components));
3332
3495
  }
3333
3496
  if (primitive.attributes.TEXCOORD_0 !== undefined) {
3334
- attributes.set("uv", node.structure.createBufferAttribute(primitive.attributes.TEXCOORD_0));
3497
+ const req = reqs.find((r => r.type === "uv" && r.accessorIndex === primitive.attributes.TEXCOORD_0));
3498
+ const accessor = node.structure.json.accessors[primitive.attributes.TEXCOORD_0];
3499
+ const components = node.structure.getNumComponents(accessor.type);
3500
+ geometry.setAttribute("uv", new BufferAttribute(req.data, components));
3335
3501
  }
3336
- const loadedAttributes = await Promise.all([ ...attributes.entries() ].map((async ([name, promise]) => {
3337
- const attribute = await promise;
3338
- return [ name, attribute ];
3339
- })));
3340
- loadedAttributes.forEach((([name, attribute]) => {
3341
- geometry.setAttribute(name, attribute);
3342
- }));
3343
3502
  if (primitive.indices !== undefined) {
3344
- const indexAttribute = await node.structure.createBufferAttribute(primitive.indices);
3345
- geometry.setIndex(indexAttribute);
3503
+ const req = reqs.find((r => r.type === "index" && r.accessorIndex === primitive.indices));
3504
+ geometry.setIndex(new BufferAttribute(req.data, 1));
3346
3505
  }
3347
- this.currentPrimitiveMode = primitive.mode;
3348
3506
  let material;
3349
3507
  if (primitive.material !== undefined) {
3350
3508
  material = node.structure.materials.get(primitive.material) || this.createDefaultMaterial();
@@ -3423,6 +3581,9 @@ class DynamicGltfLoader {
3423
3581
  const geometrySize = this.estimateGeometrySize(node.object);
3424
3582
  this.geometryCache.set(node.object.uuid, geometrySize);
3425
3583
  this.currentMemoryUsage += geometrySize;
3584
+ if (onLoadFinishCb) {
3585
+ onLoadFinishCb();
3586
+ }
3426
3587
  } catch (error) {
3427
3588
  if (error.name !== "AbortError") {
3428
3589
  console.error(`Error loading node ${nodeId}:`, error);
@@ -3520,7 +3681,7 @@ class DynamicGltfLoader {
3520
3681
  const volumeB = sizeB.x * sizeB.y * sizeB.z;
3521
3682
  return volumeB - volumeA;
3522
3683
  }));
3523
- if (!ignoreEdges) {
3684
+ if (!ignoreEdges && this.visibleEdges) {
3524
3685
  this.nodesToLoad.push(...this.edgeNodes);
3525
3686
  }
3526
3687
  this.dispatchEvent("databasechunk", {
@@ -3628,28 +3789,12 @@ class DynamicGltfLoader {
3628
3789
  async processNodes() {
3629
3790
  const nodesToLoad = this.nodesToLoad;
3630
3791
  let loadedCount = 0;
3792
+ let lastLoadedCount = 0;
3631
3793
  const totalNodes = nodesToLoad.length;
3632
- try {
3633
- while (loadedCount < totalNodes) {
3634
- const batch = nodesToLoad.slice(loadedCount, loadedCount + this.batchSize);
3635
- const batchPromises = [];
3636
- for (const nodeId of batch) {
3637
- if (this.abortController.signal.aborted) {
3638
- throw new DOMException("Loading aborted", "AbortError");
3639
- }
3640
- const estimatedSize = await this.estimateNodeSize(nodeId);
3641
- if (this.currentMemoryUsage + estimatedSize > this.memoryLimit) {
3642
- console.log(`Memory limit reached after loading ${loadedCount} nodes`);
3643
- this.dispatchEvent("geometryerror", {
3644
- message: "Memory limit reached"
3645
- });
3646
- this.dispatchEvent("update");
3647
- return loadedCount;
3648
- }
3649
- batchPromises.push(this.loadNode(nodeId));
3650
- }
3651
- await Promise.all(batchPromises);
3652
- loadedCount += batch.length;
3794
+ const loadProgress = async () => {
3795
+ loadedCount++;
3796
+ if (loadedCount - lastLoadedCount > 1e3) {
3797
+ lastLoadedCount = loadedCount;
3653
3798
  this.updateMemoryIndicator();
3654
3799
  this.dispatchEvent("geometryprogress", {
3655
3800
  percentage: Math.round(loadedCount / totalNodes * 100),
@@ -3665,6 +3810,28 @@ class DynamicGltfLoader {
3665
3810
  setTimeout(resolve, 0);
3666
3811
  }));
3667
3812
  }
3813
+ };
3814
+ try {
3815
+ const loadOperations = [];
3816
+ for (const nodeId of nodesToLoad) {
3817
+ if (this.abortController.signal.aborted) {
3818
+ throw new DOMException("Loading aborted", "AbortError");
3819
+ }
3820
+ const estimatedSize = await this.estimateNodeSize(nodeId);
3821
+ if (this.currentMemoryUsage + estimatedSize > this.memoryLimit) {
3822
+ console.log(`Memory limit reached after loading ${loadedCount} nodes`);
3823
+ this.dispatchEvent("geometryerror", {
3824
+ message: "Memory limit reached"
3825
+ });
3826
+ this.dispatchEvent("update");
3827
+ return loadedCount;
3828
+ }
3829
+ loadOperations.push(this.loadNode(nodeId, loadProgress));
3830
+ }
3831
+ for (const structure of this.structures) {
3832
+ loadOperations.push(structure.flushBufferRequests());
3833
+ }
3834
+ await Promise.all(loadOperations);
3668
3835
  this.dispatchEvent("geometryend", {
3669
3836
  totalLoaded: loadedCount,
3670
3837
  totalNodes: totalNodes
@@ -4468,13 +4635,29 @@ class DynamicGltfLoader {
4468
4635
  }
4469
4636
  }));
4470
4637
  }
4638
+ getStructureGeometryExtent(structureId) {
4639
+ const extent = new Box3;
4640
+ for (const [nodeId, node] of this.nodes.entries()) {
4641
+ if (!node.geometryExtents) continue;
4642
+ if (!nodeId.startsWith(structureId + "_")) continue;
4643
+ if (node.object && this.hiddenHandles && this.hiddenHandles.has(node.object.userData.handle)) continue;
4644
+ const transformedBox = node.geometryExtents.clone();
4645
+ if (node.group && node.group.matrix) {
4646
+ transformedBox.applyMatrix4(node.group.matrix);
4647
+ if (node.group.parent && node.group.parent.matrix) {
4648
+ transformedBox.applyMatrix4(node.group.parent.matrix);
4649
+ }
4650
+ }
4651
+ extent.union(transformedBox);
4652
+ }
4653
+ return extent;
4654
+ }
4471
4655
  }
4472
4656
 
4473
4657
  class GLTFCloudDynamicLoader {
4474
4658
  constructor(viewer) {
4475
4659
  this.requestId = 0;
4476
4660
  this.viewer = viewer;
4477
- this.scene = new Group;
4478
4661
  }
4479
4662
  dispose() {
4480
4663
  if (this.gltfLoader) this.gltfLoader.clear();
@@ -4483,21 +4666,22 @@ class GLTFCloudDynamicLoader {
4483
4666
  return typeof file === "object" && typeof file.database === "string" && typeof file.downloadResource === "function" && typeof file.downloadResourceRange === "function" && /.gltf$/i.test(file.database);
4484
4667
  }
4485
4668
  async load(model, format, params) {
4486
- this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, this.viewer.scene, this.viewer.renderer);
4669
+ const scene = new Group;
4670
+ this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
4487
4671
  this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
4488
4672
  this.gltfLoader.addEventListener("databasechunk", (data => {
4489
- const modelImpl = new DynamicModelImpl(this.scene);
4673
+ const modelImpl = new DynamicModelImpl(scene);
4490
4674
  modelImpl.loader = this;
4491
4675
  modelImpl.gltfLoader = this.gltfLoader;
4492
4676
  modelImpl.viewer = this.viewer;
4493
- this.viewer.scene.add(this.scene);
4677
+ this.viewer.scene.add(scene);
4494
4678
  this.viewer.models.push(modelImpl);
4495
4679
  this.viewer.syncOptions();
4496
4680
  this.viewer.syncOverlay();
4497
4681
  this.viewer.update();
4498
4682
  this.viewer.emitEvent({
4499
4683
  type: "databasechunk",
4500
- data: data,
4684
+ data: scene,
4501
4685
  file: model.file,
4502
4686
  model: model
4503
4687
  });
@@ -4511,12 +4695,6 @@ class GLTFCloudDynamicLoader {
4511
4695
  model: model
4512
4696
  });
4513
4697
  }));
4514
- this.gltfLoader.addEventListener("geometrymemory", (data => {
4515
- this.viewer.emit({
4516
- type: "geometryprogress",
4517
- data: data
4518
- });
4519
- }));
4520
4698
  this.gltfLoader.addEventListener("geometryerror", (data => {
4521
4699
  this.viewer.emitEvent({
4522
4700
  type: "geometryerror",
@@ -4559,9 +4737,7 @@ class GLTFCloudDynamicLoader {
4559
4737
  return this;
4560
4738
  }
4561
4739
  cancel() {
4562
- if (this.gltfLoader) {
4563
- this.gltfLoader.abortLoading();
4564
- }
4740
+ if (this.gltfLoader) this.gltfLoader.abortLoading();
4565
4741
  }
4566
4742
  }
4567
4743