@jdultra/threedtiles 3.2.0 → 3.2.1

package/README.md

@@ -2,7 +2,11 @@
 
 3DTiles viewer for three.js
 
-demo : https://ebeaufay.github.io/ThreedTilesViewer.github.io/
+Photogrametry : https://ebeaufay.github.io/ThreedTilesViewer.github.io/
+
+IFC : https://storage.googleapis.com/jdultra.com/ifc/index.html
+
+Occlusion culling : https://storage.googleapis.com/jdultra.com/occlusionCulling/index.html
 
 Adding a tileset to a scene is as easy as :
 
@@ -114,6 +118,11 @@ ogc3DTile.rotateOnAxis(new THREE.Vector3(1,0,0), -Math.PI*0.5);
 ...
 ```
 
+### Occlusion culling
+Occlusion culling is curently only available as a demo. 
+The reason is that it requires a specific render pass hence the setup is a little more complex.
+I can expose this feature upon request.
+
 # 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.
 

package/package.json

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

package/src/index.js

@@ -22,8 +22,10 @@ animate();
 function initScene() {
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(0xaaffcc);
-    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.5));
-    const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.2));
+    const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+    directionalLight.position.set(100,100,100)
+    directionalLight.lookAt(-1,-1,-1)
     scene.add( directionalLight );
     return scene;
 }
@@ -71,8 +73,8 @@ function initStats(dom) {
 
 
 function initCamera() {
-    const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 1, 10000);
-    camera.position.set(20, 10, 20);
+    const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 0.1, 1000);
+    camera.position.set(-10, 5, 20);
 
     return camera;
 }
@@ -80,29 +82,26 @@ function initCamera() {
 function initTileset(scene) {
 
     const ogc3DTile = new OGC3DTile({
-        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
+        url: "https://storage.googleapis.com/ogc-3d-tiles/house3/tileset.json",
         //url: "http://localhost:8080/tileset.json",
-        geometricErrorMultiplier: 1.0,
-        loadOutsideView: true,
+        geometricErrorMultiplier: 1,
+        loadOutsideView: false,
         tileLoader: new TileLoader(mesh => {
             //// Insert code to be called on every newly decoded mesh e.g.:
-            //mesh.material.wireframe = true;
+            mesh.material.wireframe = false;
             //mesh.material = new THREE.MeshBasicMaterial({color:new THREE.Color("rgb("+Math.floor(Math.random()*256)+", "+Math.floor(Math.random()*256)+", "+Math.floor(Math.random()*256)+")")})
             mesh.material.side = THREE.DoubleSide;
-        }, 1000),
-        onLoadCallback: tileset => {
-            console.log(tileset.json)
-        }
+        }, 1000)
     });
 
 
     
     //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
-    //ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), -10)
-    //ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -65)
-    //ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -80)
-    ogc3DTile.scale.set(1,1,1);
-    //ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * 0.5) // Z-UP to Y-UP
+    // ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -2177749.59059337)
+    // ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), 4388730.67973434)
+    // ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), 4070064.60934734)
+    //ogc3DTile.scale.set(0.001,0.001,0.001);
+    ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
     // ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -16.5)
     // ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), 0)
     // ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -9.5)

package/src/tileset/OGC3DTile.js

@@ -2,9 +2,7 @@ import * as THREE from 'three';
 import { OBB } from "../geometry/obb";
 import { TileLoader } from "./TileLoader";
 import { v4 as uuidv4 } from "uuid";
-import { setIntervalAsync } from 'set-interval-async/dynamic';
-// import { clearIntervalAsync } from 'set-interval-async';
-const path = require('path');
+import * as path from "path-browserify"
 
 const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0, 1));
 
@@ -185,24 +183,6 @@ class OGC3DTile extends THREE.Object3D {
                         self.hasUnloadedJSONContent = false;
                     });
 
-                    /* self.controller = new AbortController();
-                    setTimeout(() => {
-                        fetch(url, { signal: self.controller.signal }).then(result => {
-                            if (!result.ok) {
-                                throw new Error(`couldn't load "${properties.url}". Request failed with status ${result.status} : ${result.statusText}`);
-                            }
-                            result.json().then(json => {
-                                // when json content is downloaded, it is inserted into this tile's original JSON as a child
-                                // and the content object is deleted from the original JSON
-                                if (!self.json.children) self.json.children = [];
-                                json.rootPath = path.dirname(url);
-                                self.json.children.push(json);
-                                delete self.json.content;
-                                self.hasUnloadedJSONContent = false;
-                            }).catch(error => { });
-                        }).catch(error => { });
-                    }, 0); */
-
                 }
 
             }
@@ -321,10 +301,9 @@ class OGC3DTile extends THREE.Object3D {
                 return;
             }
             if (metric >= self.geometricError) {
-                if (self.isReady()) {
-                    self.disposeChildren();
-                    return;
-                }
+                self.disposeChildren();
+                updateNodeVisibility();
+                return;
             }
 
         }
@@ -458,7 +437,7 @@ class OGC3DTile extends THREE.Object3D {
                 return 0;
             }
             const scale = this.matrixWorld.getMaxScaleOnAxis();
-            return ((distance / 100) / this.geometricErrorMultiplier) / scale;
+            return ((distance / 100) / this.geometricErrorMultiplier) * scale;
         } else if (this.boundingVolume instanceof THREE.Box3) {
             // Region
             // Region not supported

package/src/tileset/TileLoader.js

@@ -12,17 +12,19 @@ function scheduleDownload(f) {
     downloads.unshift(f);
 }
 function download() {
-    if(concurentDownloads<10){
-        if (nextDownloads.length == 0) {
-            getNextDownloads();
-            if (nextDownloads.length == 0) return;
-        }
+    if (nextDownloads.length == 0) {
+        getNextDownloads();
+        if (nextDownloads.length == 0) return;
+    }
+    while (nextDownloads.length > 0 && concurentDownloads < 500) {
         const nextDownload = nextDownloads.shift();
         if (!!nextDownload && nextDownload.shouldDoDownload()) {
             nextDownload.doDownload();
         }
     }
-    
+
+
+
     return;
 }
 function meshReceived(cache, register, key, distanceFunction, getSiblings, level, uuid) {
@@ -60,11 +62,11 @@ function getNextDownloads() {
             downloads.splice(i, 1);
             continue;
         }
-        if(!downloads[i].distanceFunction){ // if no distance function, must be a json, give absolute priority!
+        if (!downloads[i].distanceFunction) { // if no distance function, must be a json, give absolute priority!
             nextDownloads.push(downloads.splice(i, 1)[0]);
         }
     }
-    if(nextDownloads.length>0) return;
+    if (nextDownloads.length > 0) return;
     for (let i = downloads.length - 1; i >= 0; i--) {
         const dist = downloads[i].distanceFunction();
         if (dist < smallestDistance) {
@@ -92,12 +94,12 @@ function getNextReady() {
     let smallestDistance = Number.MAX_VALUE;
     let closest = -1;
     for (let i = ready.length - 1; i >= 0; i--) {
-        
-        if(!ready[i][3]){// if no distance function, must be a json, give absolute priority!
-            nextReady.push(ready.splice(i,1)[0]);
+
+        if (!ready[i][3]) {// if no distance function, must be a json, give absolute priority!
+            nextReady.push(ready.splice(i, 1)[0]);
         }
     }
-    if(nextReady.length>0) return;
+    if (nextReady.length > 0) return;
     for (let i = ready.length - 1; i >= 0; i--) {
         const dist = ready[i][3]();
         if (dist < smallestDistance) {
@@ -120,23 +122,23 @@ function getNextReady() {
         }
     }
 }
-setIntervalAsync(()=>{
+setIntervalAsync(() => {
     download();
     /* const start = Date.now();
     let uploaded = 0;
     do{
         uploaded = download();
     }while(uploaded > 0 && (Date.now() - start)<= 2 ) */
-    
-},10);
-setIntervalAsync(()=>{
+
+}, 10);
+setIntervalAsync(() => {
     const start = Date.now();
     let loaded = 0;
-    do{
+    do {
         loaded = loadBatch();
-    }while(loaded > 0 && (Date.now() - start)<= 0 )
-    
-},10);
+    } while (loaded > 0 && (Date.now() - start) <= 1)
+
+}, 10);
 
 class TileLoader {
     constructor(meshCallback, maxCachedItems) {
@@ -185,7 +187,7 @@ class TileLoader {
 
                     });
                 }
-            }else if (path.includes(".json")) {
+            } else if (path.includes(".json")) {
                 downloadFunction = () => {
                     concurentDownloads++;
                     fetch(path).then(result => {