@jdultra/threedtiles 4.0.4 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "4.0.4",
+    "version": "5.0.0",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {

package/src/index.js

@@ -21,7 +21,9 @@ occlusionCullingService.setSide(THREE.DoubleSide);
 const scene = initScene();
 
 const domContainer = initDomContainer("screen");
-const camera = initCamera();
+const camera = initCamera(domContainer.offsetWidth, domContainer.offsetHeight);
+const stats = initStats(domContainer);
+const renderer = initRenderer(camera, domContainer);
 //const ogc3DTiles = initTileset(scene);
 
 
@@ -30,8 +32,6 @@ initInstancedTilesets(instancedTileLoader);
 
 const controller = initController(camera, domContainer);
 
-const stats = initStats(domContainer);
-const renderer = initRenderer(camera, domContainer);
 const composer = initComposer(scene, camera, renderer);
 
 
@@ -69,8 +69,8 @@ function initComposer(scene, camera, renderer) {
 function initScene() {
     const scene = new THREE.Scene();
     scene.matrixAutoUpdate = false;
-    scene.matrixWorldAutoUpdate = false;
-    scene.background = new THREE.Color(0x000000);
+    //scene.matrixWorldAutoUpdate = false;
+    scene.background = new THREE.Color(0x404040);
     scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
 
     /*const light = new THREE.PointLight(0xbbbbff, 2, 5000);
@@ -132,9 +132,10 @@ function initStats(dom) {
 }
 
 
-function initCamera() {
-    const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 1.0, 100000);
-    camera.position.set(-800, 800, 800);
+function initCamera(width, height) {
+    const camera = new THREE.PerspectiveCamera(60, width / height, 1, 100000);
+    camera.position.set(-400.060421028462592,-14.561785966685625,700.123058268059668);
+    
     camera.matrixAutoUpdate = true;
     return camera;
 }
@@ -145,17 +146,22 @@ function initTileset(scene) {
         //// Insert code to be called on every newly decoded mesh e.g.:
         mesh.material.wireframe = false;
         mesh.material.side = THREE.DoubleSide;
+        mesh.material.metalness = 0.0
     }, 1000)
     const ogc3DTile = new OGC3DTile({
         //url: "http://localhost:8080/tileset.json",
         //url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
         url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
         //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/ands2ty8orz/tileset.json",
+        //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/an7opcnyije/tileset.json",
+        //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/ands2ty8orz/tileset.json",
+        //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/a88b3sungng/tileset.json",
         geometricErrorMultiplier: 0.01,
         loadOutsideView: false,
         tileLoader: tileLoader,
         //occlusionCullingService: occlusionCullingService,
         static: false,
+        renderer: renderer
 
     });
 
@@ -164,7 +170,7 @@ function initTileset(scene) {
 
     //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
     ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
-    //ogc3DTile.scale.set(10.0,10.0,10.0)
+    ogc3DTile.scale.set(100.0,100.0,100.0)
     //// If the OGC3DTile object is marked as "static" (constructorParameter), these operations will not work.
 
 
@@ -227,6 +233,7 @@ function initInstancedTilesets(instancedTileLoader) {
                     loadOutsideView: true,
                     tileLoader: instancedTileLoader,
                     static: true,
+                    renderer: renderer
                 });
                 //tileset.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
                 tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 50 * x)
@@ -275,7 +282,7 @@ function initLODMultiplierSlider(instancedTilesets) {
 function initController(camera, dom) {
     const controller = new OrbitControls(camera, dom);
 
-    controller.target.set(0, 0, 0);
+    controller.target.set(0,0,0);
     controller.minDistance = 0.01;
     controller.maxDistance = 100000;
     controller.update();

package/src/tileset/OGC3DTile.js

@@ -6,7 +6,7 @@ import * as path from "path-browserify"
 import { clamp } from "three/src/math/MathUtils";
 
 const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0, 1));
-
+const rendererSize = new THREE.Vector2();
 
 class OGC3DTile extends THREE.Object3D {
 
@@ -27,7 +27,8 @@ class OGC3DTile extends THREE.Object3D {
      *   parentTile: OGC3DTile,
      *   onLoadCallback: function,
      *   occlusionCullingService: OcclusionCullingService,
-     *   static: Boolean
+     *   static: Boolean,
+     *   renderer: Renderer
      * } properties 
      */
     constructor(properties) {
@@ -43,10 +44,11 @@ class OGC3DTile extends THREE.Object3D {
                     mesh.material.wireframe = false;
                     mesh.material.side = THREE.DoubleSide;
                 } : properties.meshCallback);
-            }
-            // set properties general to the entire tileset
-            this.geometricErrorMultiplier = !!properties.geometricErrorMultiplier ? properties.geometricErrorMultiplier : 1.0;
-            
+        }
+        // set properties general to the entire tileset
+        this.geometricErrorMultiplier = !!properties.geometricErrorMultiplier ? properties.geometricErrorMultiplier : 1.0;
+
+        this.renderer = properties.renderer;
         this.meshCallback = properties.meshCallback;
         this.loadOutsideView = properties.loadOutsideView;
         this.cameraOnLoad = properties.cameraOnLoad;
@@ -58,7 +60,7 @@ class OGC3DTile extends THREE.Object3D {
             this.color.setHex(Math.random() * 0xffffff);
             this.colorID = clamp(self.color.r * 255, 0, 255) << 16 ^ clamp(self.color.g * 255, 0, 255) << 8 ^ clamp(self.color.b * 255, 0, 255) << 0;
         }
-        if(this.static){
+        if (this.static) {
             this.matrixAutoUpdate = false;
         }
         // declare properties specific to the tile for clarity
@@ -176,7 +178,7 @@ class OGC3DTile extends THREE.Object3D {
             if (!!url) {
                 if (url.includes(".b3dm")) {
                     self.contentURL = url;
-                    self.tileLoader.get(self.abortController,this.uuid, url, mesh => {
+                    self.tileLoader.get(self.abortController, this.uuid, url, mesh => {
                         if (!!self.deleted) return;
                         mesh.traverse((o) => {
                             if (o.isMesh) {
@@ -189,13 +191,13 @@ class OGC3DTile extends THREE.Object3D {
                                     }
                                     o.geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
                                 }
-                                if(self.static){
+                                if (self.static) {
                                     o.matrixAutoUpdate = false;
                                 }
                                 //o.material.visible = false;
                             }
                         });
-                        
+
                         self.add(mesh);
                         self.updateWorldMatrix(false, true);
                         // mesh.layers.disable(0);
@@ -204,7 +206,7 @@ class OGC3DTile extends THREE.Object3D {
                         return self.calculateDistanceToCamera(self.cameraOnLoad);
                     }, () => self.getSiblings(), self.level);
                 } else if (url.includes(".json")) {
-                    self.tileLoader.get(self.abortController,this.uuid, url, json => {
+                    self.tileLoader.get(self.abortController, this.uuid, url, json => {
                         if (!!self.deleted) return;
                         if (!self.json.children) self.json.children = [];
                         json.rootPath = path.dirname(url);
@@ -273,7 +275,7 @@ class OGC3DTile extends THREE.Object3D {
             if (self.occlusionCullingService && self.hasMeshContent && !self.occlusionCullingService.hasID(self.colorID)) {
                 return;
             }
-            if (!self.hasMeshContent || (metric < self.geometricError && !!self.meshContent)) {
+            if (!self.hasMeshContent || (metric < self.geometricErrorMultiplier * self.geometricError && !!self.meshContent)) {
                 if (!!self.json && !!self.json.children && self.childrenTiles.length != self.json.children.length) {
                     loadJsonChildren();
                     return;
@@ -307,10 +309,10 @@ class OGC3DTile extends THREE.Object3D {
             }
 
             // has children
-            if (metric >= self.geometricError) { // Ideal LOD or before ideal lod
+            if (metric >= self.geometricErrorMultiplier * self.geometricError) { // Ideal LOD or before ideal lod
 
                 self.changeContentVisibility(true);
-            } else if (metric < self.geometricError) { // Ideal LOD is past this one
+            } else if (metric < self.geometricErrorMultiplier * self.geometricError) { // Ideal LOD is past this one
                 // if children are visible and have been displayed, can be hidden
                 let allChildrenReady = true;
                 self.childrenTiles.every(child => {
@@ -345,7 +347,7 @@ class OGC3DTile extends THREE.Object3D {
                 updateNodeVisibility(metric);
                 return;
             }
-            if (metric >= self.geometricError) {
+            if (metric >= self.geometricErrorMultiplier * self.geometricError) {
                 self.disposeChildren();
                 updateNodeVisibility();
                 return;
@@ -367,7 +369,8 @@ class OGC3DTile extends THREE.Object3D {
                     level: self.level + 1,
                     tileLoader: self.tileLoader,
                     cameraOnLoad: camera,
-                    occlusionCullingService:self.occlusionCullingService,
+                    occlusionCullingService: self.occlusionCullingService,
+                    renderer: self.renderer,
                     static: self.static
                 });
                 self.childrenTiles.push(childTile);
@@ -382,11 +385,11 @@ class OGC3DTile extends THREE.Object3D {
         const self = this;
         this.childrenTiles.every(child => {
             if (child.hasMeshContent) {
-                if(child.childrenTiles.length>0){
+                if (child.childrenTiles.length > 0) {
                     allLoadedAndHidden = false;
                     return false;
                 }
-                if (!child.inFrustum ) {
+                if (!child.inFrustum) {
                     return true;
                 };
                 if (!child.materialVisibility || child.meshesToDisplay != child.meshesDisplayed) {
@@ -459,15 +462,15 @@ class OGC3DTile extends THREE.Object3D {
 
     changeContentVisibility(visibility) {
         const self = this;
-        if(self.hasMeshContent && self.meshContent){
-            if(visibility){
-                
+        if (self.hasMeshContent && self.meshContent) {
+            if (visibility) {
+
                 self.meshContent.traverse((o) => {
                     if (o.isMesh) {
                         o.layers.enable(0);
                     }
                 });
-            }else{
+            } else {
                 self.meshContent.traverse((o) => {
                     if (o.isMesh) {
                         o.layers.disable(0);
@@ -530,8 +533,18 @@ class OGC3DTile extends THREE.Object3D {
                 return 0;
             }
             const scale = this.matrixWorld.getMaxScaleOnAxis();
-            return Math.pow(distance, 2) /(this.geometricErrorMultiplier*this.geometricError*Math.pow(scale,2.0)*35);
-            //return (((distance / Math.pow(scale, 2)) / 100) / this.geometricErrorMultiplier);
+            this.renderer.getDrawingBufferSize(rendererSize);
+            let s = rendererSize.y;
+            let fov = camera.fov;
+            if(camera.aspect < 1){
+                fov *= camera.aspect;
+                s = rendererSize.x;
+            }
+
+            let lambda = 2.0 * Math.tan(0.5 * fov * 0.01745329251994329576923690768489) * distance;
+            
+            return (window.devicePixelRatio * 16 * lambda) / (s * scale);
+
         } else if (this.boundingVolume instanceof THREE.Box3) {
             // Region
             // Region not supported

package/src/tileset/instanced/InstancedOGC3DTile.js

@@ -19,12 +19,14 @@ class InstancedOGC3DTile extends THREE.Object3D {
      *   cameraOnLoad: camera,
      *   parentTile: OGC3DTile,
      *   onLoadCallback: function,
+     *   renderer: Renderer
      *   static: Boolean
      * } properties 
      */
     constructor(properties) {
         super();
         properties.master = this;
+        this.renderer = properties.renderer;
         this.geometricErrorMultiplier = properties.geometricErrorMultiplier? properties.geometricErrorMultiplier:1.0;
         this.tileset = new InstancedTile(properties);
         if (properties.static) {

package/src/tileset/instanced/InstancedTile.js

@@ -5,7 +5,7 @@ import * as path from "path-browserify";
 import * as _ from "lodash";
 
 const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0, 1));
-
+const rendererSize = new THREE.Vector2();
 
 class InstancedTile extends THREE.Object3D {
 
@@ -250,7 +250,7 @@ class InstancedTile extends THREE.Object3D {
             // If this tile does not have mesh content but it has children
             if (metric < 0 && self.hasMeshContent) return;
             
-            if ((!self.hasMeshContent && self.rootPath) || (metric < self.geometricError && !!self.meshContent)) {
+            if ((!self.hasMeshContent && self.rootPath) || (metric < self.master.geometricErrorMultiplier * self.geometricError && !!self.meshContent)) {
                 if (!!self.json && !!self.jsonChildren && self.childrenTiles.length != self.jsonChildren.length) {
                     loadJsonChildren();
                     return;
@@ -284,10 +284,10 @@ class InstancedTile extends THREE.Object3D {
             }
 
             // has children
-            if (metric >= self.geometricError) { // Ideal LOD or before ideal lod
+            if (metric >= self.master.geometricErrorMultiplier * self.geometricError) { // Ideal LOD or before ideal lod
 
                 self.changeContentVisibility(true);
-            } else if (metric < self.geometricError) { // Ideal LOD is past this one
+            } else if (metric < self.master.geometricErrorMultiplier * self.geometricError) { // Ideal LOD is past this one
                 // if children are visible and have been displayed, can be hidden
                 let allChildrenReady = true;
                 self.childrenTiles.every(child => {
@@ -311,7 +311,7 @@ class InstancedTile extends THREE.Object3D {
                 updateNodeVisibility(metric);
                 return;
             }
-            if (metric >= self.geometricError) {
+            if (metric >= self.master.geometricErrorMultiplier * self.geometricError) {
                 self.disposeChildren();
                 updateNodeVisibility();
                 return;
@@ -455,8 +455,18 @@ class InstancedTile extends THREE.Object3D {
                 return 0;
             }
             const scale = this.master.matrixWorld.getMaxScaleOnAxis();
-            //return (((distance / Math.pow(scale, 2)) / 100) / this.master.geometricErrorMultiplier);
-            return Math.pow(distance, 2) /(this.master.geometricErrorMultiplier*this.geometricError*Math.pow(scale,2.0)*35);
+
+            this.master.renderer.getDrawingBufferSize(rendererSize);
+            let s = rendererSize.y;
+            let fov = camera.fov;
+            if(camera.aspect < 1){
+                fov *= camera.aspect;
+                s = rendererSize.x;
+            }
+
+            let lambda = 2.0 * Math.tan(0.5 * fov * 0.01745329251994329576923690768489) * distance;
+            
+            return (window.devicePixelRatio * 16 * lambda) / (s * scale);
         } else if (this.boundingVolume instanceof THREE.Box3) {
             // Region
             // Region not supported