@jdultra/threedtiles 3.3.0 → 3.3.2

package/README.md

@@ -1,6 +1,8 @@
-# threedtiles
+# T H R E E D T I L E S : http://www.jdultra.com/
 
-3DTiles viewer for three.js
+
+
+The fastest 3DTiles viewer for three.js
 
 Photogrametry : https://ebeaufay.github.io/ThreedTilesViewer.github.io/
 
@@ -26,7 +28,7 @@ It's up to the user to call updates on the tileset. You might call them whenever
 ```
 setInterval(function () {
     ogc3DTile.update(camera);
-}, 200);
+}, 20);
 ```
 
 Currently, the library is limmited to B3DM files.
@@ -39,7 +41,7 @@ Currently, the library is limmited to B3DM files.
 - Optionally load low detail tiles outside of view frustum for correct shadows and basic mesh present when the camera moves quickly.
 - Share a cache between tileset instances
 - Optimal tile load order
-- Occlusion culling (demo)
+- Occlusion culling
 
 ### geometric Error Multiplier
 The geometric error multiplier allows you to multiply the geometric error by a factor.
@@ -60,8 +62,8 @@ A value of 1.0 is the default.
 
 
 ### load tiles outside of view
-By default, only the tiles that intersect the view frustum are loaded. When the camera moves, the scene will have to load the missing tiles.
-Instead of this behaviour, you can force the lowest possible LODs to be loaded for tiles around the view so that there are no gaps in the mesh when the camera moves or when displaying shadows.
+By default, only the tiles that intersect the view frustum are loaded. When the camera moves, the scene will have to load the missing tiles and the user might see some holes in the model.
+Instead of this behaviour, you can force the lowest possible LODs to be loaded for tiles outside the view so that there are no gaps in the mesh when the camera moves. This also allows displaying shadows correctly.
 
 ```
 const ogc3DTile = new OGC3DTile({
@@ -71,6 +73,21 @@ const ogc3DTile = new OGC3DTile({
 ```
 
 ### Callback
+
+#### onLoadCallback
+Add a callback that is called once when the first tile is loaded and geometry is available.
+This can be useful to position the tileset at a specific location when it is not centered on origin for example.
+
+```
+const ogc3DTile = new OGC3DTile({
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    onLoadCallback: tilese => {
+            console.log(tileset.boundingVolume);
+        }
+});
+```
+
+#### Mesh callback
 Add a callback on loaded tiles in order to set a material or do some logic on the meshes.
 
 ```
@@ -78,6 +95,7 @@ const ogc3DTile = new OGC3DTile({
     url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
     meshCallback: mesh => {
             mesh.material.wireframe = true;
+            mesh.material.side = THREE.DoubleSide;
         }
 });
 ```
@@ -116,12 +134,14 @@ const ogc3DTile = new OGC3DTile({
 
 ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), -450);
 ogc3DTile.rotateOnAxis(new THREE.Vector3(1,0,0), -Math.PI*0.5);
-...
+```
 
 
 ### Occlusion culling
 Occlusion culling prevents the refinment of data that is hidden by other data, like a wall. It can have a big impact on frame-rate and loading speed for interior scenes.
-A word of warning: activating occlusion culling causes an extra render-pass and as such, has an impact on frame-rate. It will be most beneficial on interior scenes where most of the data is occluded by walls.
+
+A word of warning: activating occlusion culling causes an extra render-pass and as such, has an impact on frame-rate. 
+It will be most beneficial on interior scenes where most of the data is occluded by walls. All the tiles that don't need to be downloaded or drawn will balance out the cost of the extra render pass.
 
 
 First, instantiate an OcclusionCullingService:
@@ -146,7 +166,7 @@ function animate() {
 }
 ```
 
-Finally, you may want to set what side of the faces are drawn in the occlusion pass. By default, THREE.FrontSide is used:
+Finally, if you are drawing the back-side of faces or both-sides (see Callback section), you'll need to specify it for the occlusion pass too. By default, THREE.FrontSide is used:
 
 ```
 const occlusionCullingService = new OcclusionCullingService();
@@ -154,7 +174,7 @@ occlusionCullingService.setSide(THREE.DoubleSide);
 ```
 
 
-### static tilesets (Performance tip)
+### static tilesets and other performance tips
 When you know your tileset will be static, you can specify it in the OGC3DTile object constructor parameter.
 This will skip recalculating the transformation matrix of every tile each frame and give a few extra frames per second.
 
@@ -165,12 +185,22 @@ const ogc3DTile = new OGC3DTile({
     });
 ```
 
-# Displaying meshes on a globe
-I'm working on this project in parallel https://github.com/ebeaufay/UltraGlobe which allows displaying a globe with multi resolution imagery, elevation and 3DTiles.
+Either way, it's advised to set the autoUpdate property of the scene to false and update the matrices manually whenever you move things around.
+
+```
+scene.autoUpdate = false;
+```
+
+# Projects that use this library
+https://github.com/ebeaufay/UltraGlobe allows displaying a globe with multi resolution imagery, elevation and 3DTiles.
+
+Don't hesitate to tell me if you have a project that stems from this code. I'd love to link to it here and I'm always open to implementing extra features.
+Contact: emeric.beaufays@jdultra.com
+
 
 # Mesh to 3DTiles Converter
 
 I also have code to convert meshes to 3DTiles with no limit to the size of the dataset relative to faces or textures.
 It works for all types of meshes: photogrametry, BIM, colored or textured meshes with a single texture atlas or many individual textures. 
-I'm keeping the code private for now but I'll convert any dataset you have for free.
-Contact: emericbeaufays@gmail.com
+I'm keeping the code private for now but feel free to contact me about it.
+Contact: emeric.beaufays@jdultra.com

package/index.html

@@ -48,12 +48,9 @@
 <body>
   <div id="screen"></div>
   <div style="position: absolute; top: 1%; z-index: 100; right:1%; ">
-    <input type="range" min="0.1" max="2" value="1.0", step="0.001" class="slider" id="lodMultiplier" >
+    <input type="range" min="0.0" max="0.3" value="0.1", step="0.001" class="slider" id="lodMultiplier" >
     <p style="color: #0439aa;">LOD multiplier: <span id="multiplierValue"></span></p>
   </div>
-  <div style="position: absolute; bottom: 1%; z-index: 100;"> 
-    <a href="https://skfb.ly/6UoNJ">ORIGINAL MODEL</a>
-  </div>
 </body>
 
 </html>

package/package.json

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

package/src/index.js

@@ -26,12 +26,13 @@ animate();
 function initScene() {
     const scene = new THREE.Scene();
     scene.matrixAutoUpdate = false;
-    scene.background = new THREE.Color(0xaaffcc);
-    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.2));
-    const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+    scene.background = new THREE.Color(0xaaccee);
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.6));
+    const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.4 );
     directionalLight.position.set(100,100,100)
     directionalLight.lookAt(-1,-1,-1)
     scene.add( directionalLight );
+    scene.autoUpdate = true;
     return scene;
 }
 
@@ -76,32 +77,37 @@ function initStats(dom) {
 
 
 function initCamera() {
-    const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 0.1, 1000);
-    camera.position.set(-10, 5, 20);
+    const camera = new THREE.PerspectiveCamera(40, window.offsetWidth / window.offsetHeight, 0.1, 6000);
+    camera.position.set(1400,100,1400);
     camera.matrixAutoUpdate = true;
     return camera;
 }
 
 function initTileset(scene) {
 
+    const tileLoader = new TileLoader(mesh => {
+        //// Insert code to be called on every newly decoded mesh e.g.:
+        mesh.material.wireframe = false;
+        mesh.material.side = THREE.DoubleSide;
+    }, 1000)
     const ogc3DTile = new OGC3DTile({
-        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
-        //url: "http://localhost:8081/tileset.json",
-        geometricErrorMultiplier: 0.5,
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
+        url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
+        geometricErrorMultiplier: 0.02,
         loadOutsideView: false,
-        tileLoader: new TileLoader(mesh => {
-            //// Insert code to be called on every newly decoded mesh e.g.:
-            mesh.material.wireframe = false;
-            mesh.material.side = THREE.DoubleSide;
-        }, 1000),
-        occlusionCullingService: occlusionCullingService
+        tileLoader: tileLoader,
+        //occlusionCullingService: occlusionCullingService,
+        static: false,
+        
     });
+    
 
 
     
     //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
-    //-172683.125,301451.125,1367762.21875
-    //ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
+    ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
+    //// If the OGC3DTile object is marked as "static" (constructorParameter), these operations will not work.
+    
     
     
     //// It's up to the user to call updates on the tileset. You might call them whenever the camera moves or at regular time intervals like here
@@ -111,17 +117,27 @@ function initTileset(scene) {
     var interval;
     document.addEventListener('keyup', (e) => {
         console.log(camera.position)
-        if (!e.key || e.key !== "p") return;
-        if (!!interval) {
-            clearInterval(interval);
-            interval = null;
-        } else {
-            startInterval();
+        if (!!e.key && e.key !== "p"){
+
+            if (!!interval) {
+                clearInterval(interval);
+                interval = null;
+            } else {
+                startInterval();
+            }
+        }
+        if (!!e.key && e.key !== "l"){
+
+            console.log("new THREE.Vector3(" + camera.position.x + "," + camera.position.y + "," + camera.position.z + ")");
+                console.log("new THREE.Quaternion(" + camera.quaternion.x + "," + camera.quaternion.y + "," + camera.quaternion.z + "," + camera.quaternion.w + ")");
+
         }
+        
     });
     function startInterval() {
         interval = setIntervalAsync(function () {
             ogc3DTile.update(camera);
+            
         }, 20);
     }
     startInterval();
@@ -155,12 +171,11 @@ function initController(camera, dom) {
 function animate() {
     requestAnimationFrame(animate);
     renderer.render(scene, camera);
-    occlusionCullingService.update(scene, renderer, camera)
+    //occlusionCullingService.update(scene, renderer, camera)
     stats.update();
-
-
 }
 
 
 
 
+

package/src/tileset/OGC3DTile.js

@@ -34,10 +34,6 @@ class OGC3DTile extends THREE.Object3D {
         super();
         const self = this;
 
-        if(properties.static){
-            this.matrixAutoUpdate = false;
-        }
-        
         this.uuid = uuidv4();
         if (!!properties.tileLoader) {
             this.tileLoader = properties.tileLoader;
@@ -47,21 +43,24 @@ 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.meshCallback = properties.meshCallback;
         this.loadOutsideView = properties.loadOutsideView;
         this.cameraOnLoad = properties.cameraOnLoad;
         this.parentTile = properties.parentTile;
         this.occlusionCullingService = properties.occlusionCullingService;
+        this.static = properties.static;
         if (this.occlusionCullingService) {
             this.color = new THREE.Color();
             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){
+            this.matrixAutoUpdate = false;
+        }
         // declare properties specific to the tile for clarity
         this.childrenTiles = [];
         this.meshContent;
@@ -77,14 +76,14 @@ class OGC3DTile extends THREE.Object3D {
         this.hasMeshContent = false; // true when the provided json has a content field pointing to a B3DM file
         this.hasUnloadedJSONContent = false; // true when the provided json has a content field pointing to a JSON file that is not yet loaded
 
+        this.abortController = new AbortController();
         this.layers.disable(0);
 
         if (!!properties.json) { // If this tile is created as a child of another tile, properties.json is not null
             self.setup(properties);
             if (properties.onLoadCallback) properties.onLoadCallback(self);
         } else if (properties.url) { // If only the url to the tileset.json is provided
-            self.controller = new AbortController();
-            fetch(properties.url, { signal: self.controller.signal }).then(result => {
+            fetch(properties.url, { signal: self.abortController.signal }).then(result => {
                 if (!result.ok) {
                     throw new Error(`couldn't load "${properties.url}". Request failed with status ${result.status} : ${result.statusText}`);
                 }
@@ -177,10 +176,11 @@ class OGC3DTile extends THREE.Object3D {
             if (!!url) {
                 if (url.includes(".b3dm")) {
                     self.contentURL = url;
-                    self.tileLoader.get(this.uuid, url, mesh => {
+                    self.tileLoader.get(self.abortController,this.uuid, url, mesh => {
                         if (!!self.deleted) return;
                         mesh.traverse((o) => {
                             if (o.isMesh) {
+                                o.layers.disable(0);
                                 if (self.occlusionCullingService) {
                                     const position = o.geometry.attributes.position;
                                     const colors = [];
@@ -189,18 +189,22 @@ class OGC3DTile extends THREE.Object3D {
                                     }
                                     o.geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
                                 }
+                                if(self.static){
+                                    o.matrixAutoUpdate = false;
+                                }
                                 o.material.visible = false;
                             }
                         });
                         
                         self.add(mesh);
                         self.updateWorldMatrix(false, true);
+                        // mesh.layers.disable(0);
                         self.meshContent = mesh;
                     }, !self.cameraOnLoad ? () => 0 : () => {
                         return self.calculateDistanceToCamera(self.cameraOnLoad);
                     }, () => self.getSiblings(), self.level);
                 } else if (url.includes(".json")) {
-                    self.tileLoader.get(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);
@@ -224,8 +228,8 @@ class OGC3DTile extends THREE.Object3D {
             if (!!element.contentURL) {
                 self.tileLoader.invalidate(element.contentURL, element.uuid);
             }
-            if (!!element.controller) { // abort tile request
-                element.controller.abort();
+            if (!!element.abortController) { // abort tile request
+                element.abortController.abort();
             }
 
         });
@@ -363,7 +367,8 @@ class OGC3DTile extends THREE.Object3D {
                     level: self.level + 1,
                     tileLoader: self.tileLoader,
                     cameraOnLoad: camera,
-                    occlusionCullingService:self.occlusionCullingService
+                    occlusionCullingService:self.occlusionCullingService,
+                    static: self.static
                 });
                 self.childrenTiles.push(childTile);
                 self.add(childTile);
@@ -456,9 +461,18 @@ class OGC3DTile extends THREE.Object3D {
         const self = this;
         if(self.hasMeshContent && self.meshContent){
             if(visibility){
-                self.layers.enable(0);
+                
+                self.meshContent.traverse((o) => {
+                    if (o.isMesh) {
+                        o.layers.enable(0);
+                    }
+                });
             }else{
-                self.layers.disable(0);
+                self.meshContent.traverse((o) => {
+                    if (o.isMesh) {
+                        o.layers.disable(0);
+                    }
+                });
             }
         }
         if (self.materialVisibility == visibility) {