@jdultra/threedtiles 3.2.1 → 3.3.0

package/README.md

@@ -6,7 +6,7 @@ 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
+Occlusion culling : [https://storage.googleapis.com/jdultra.com/occlusionCulling/index.html](https://storage.googleapis.com/www.jdultra.com/occlusion/index.html)
 
 Adding a tileset to a scene is as easy as :
 
@@ -39,6 +39,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)
 
 ### geometric Error Multiplier
 The geometric error multiplier allows you to multiply the geometric error by a factor.
@@ -116,12 +117,53 @@ 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 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.
+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.
+
+
+First, instantiate an OcclusionCullingService:
+```
+const occlusionCullingService = new OcclusionCullingService();
+```
+
+This service must be passed to every OGC3DTiles object like so:
+```
+const ogc3DTile = new OGC3DTile({
+        url: "path/to/tileset.json",
+        occlusionCullingService: occlusionCullingService
+    });
+```
+
+Then, you must update the occlusionCullingService within your render loop:
+```
+function animate() {
+    requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+    occlusionCullingService.update(scene, renderer, camera)
+}
+```
+
+Finally, you may want to set what side of the faces are drawn in the occlusion pass. By default, THREE.FrontSide is used:
+
+```
+const occlusionCullingService = new OcclusionCullingService();
+occlusionCullingService.setSide(THREE.DoubleSide);
+```
+
+
+### static tilesets (Performance tip)
+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.
+
+```
+const ogc3DTile = new OGC3DTile({
+        url: "path/to/tileset.json",
+        static: true
+    });
+```
 
 # 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/index.html

@@ -52,7 +52,7 @@
     <p style="color: #0439aa;">LOD multiplier: <span id="multiplierValue"></span></p>
   </div>
   <div style="position: absolute; bottom: 1%; z-index: 100;"> 
-    <a href="https://openheritage3d.org/project.php?id=taz6-n215">ORIGINAL MODEL</a>
+    <a href="https://skfb.ly/6UoNJ">ORIGINAL MODEL</a>
   </div>
 </body>
 

package/package.json

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

package/src/index.js

@@ -5,8 +5,11 @@ import { OGC3DTile } from "./tileset/OGC3DTile";
 import { TileLoader } from "./tileset/TileLoader";
 import { MapControls, OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { setIntervalAsync } from 'set-interval-async/dynamic';
+import { OcclusionCullingService } from "./tileset/OcclusionCullingService";
 
 
+const occlusionCullingService = new OcclusionCullingService();
+occlusionCullingService.setSide(THREE.DoubleSide);
 const scene = initScene();
 const domContainer = initDomContainer("screen");
 const camera = initCamera();
@@ -17,10 +20,12 @@ const controller = initController(camera, domContainer);
 const stats = initStats(domContainer);
 const renderer = initRenderer(camera, domContainer);
 
+
 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 );
@@ -41,11 +46,9 @@ function initDomContainer(divID) {
 
 function initRenderer(camera, dom) {
 
-    const renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true });
-    renderer.antialias = true;
+    const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(dom.offsetWidth, dom.offsetHeight);
-
     renderer.outputEncoding = THREE.sRGBEncoding;
     renderer.autoClear = false;
 
@@ -75,36 +78,32 @@ function initStats(dom) {
 function initCamera() {
     const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 0.1, 1000);
     camera.position.set(-10, 5, 20);
-
+    camera.matrixAutoUpdate = true;
     return camera;
 }
 
 function initTileset(scene) {
 
     const ogc3DTile = new OGC3DTile({
-        url: "https://storage.googleapis.com/ogc-3d-tiles/house3/tileset.json",
-        //url: "http://localhost:8080/tileset.json",
-        geometricErrorMultiplier: 1,
+        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
+        //url: "http://localhost:8081/tileset.json",
+        geometricErrorMultiplier: 0.5,
         loadOutsideView: false,
         tileLoader: new TileLoader(mesh => {
             //// Insert code to be called on every newly decoded mesh e.g.:
             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)
+        }, 1000),
+        occlusionCullingService: occlusionCullingService
     });
 
 
     
     //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
-    // 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)
+    //-172683.125,301451.125,1367762.21875
+    //ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
+    
+    
     //// 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
 
 
@@ -155,11 +154,11 @@ function initController(camera, dom) {
 
 function animate() {
     requestAnimationFrame(animate);
-
-    camera.updateMatrixWorld();
     renderer.render(scene, camera);
+    occlusionCullingService.update(scene, renderer, camera)
     stats.update();
 
+
 }
 
 

package/src/tileset/OGC3DTile.js

@@ -3,6 +3,7 @@ import { OBB } from "../geometry/obb";
 import { TileLoader } from "./TileLoader";
 import { v4 as uuidv4 } from "uuid";
 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));
 
@@ -24,12 +25,19 @@ class OGC3DTile extends THREE.Object3D {
      *   meshCallback: function,
      *   cameraOnLoad: camera,
      *   parentTile: OGC3DTile,
-     *   onLoadCallback: function
+     *   onLoadCallback: function,
+     *   occlusionCullingService: OcclusionCullingService,
+     *   static: Boolean
      * } properties 
      */
     constructor(properties) {
         super();
         const self = this;
+
+        if(properties.static){
+            this.matrixAutoUpdate = false;
+        }
+        
         this.uuid = uuidv4();
         if (!!properties.tileLoader) {
             this.tileLoader = properties.tileLoader;
@@ -47,6 +55,12 @@ class OGC3DTile extends THREE.Object3D {
         this.loadOutsideView = properties.loadOutsideView;
         this.cameraOnLoad = properties.cameraOnLoad;
         this.parentTile = properties.parentTile;
+        this.occlusionCullingService = properties.occlusionCullingService;
+        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;
+        }
 
         // declare properties specific to the tile for clarity
         this.childrenTiles = [];
@@ -63,6 +77,8 @@ 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.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);
@@ -165,10 +181,20 @@ class OGC3DTile extends THREE.Object3D {
                         if (!!self.deleted) return;
                         mesh.traverse((o) => {
                             if (o.isMesh) {
+                                if (self.occlusionCullingService) {
+                                    const position = o.geometry.attributes.position;
+                                    const colors = [];
+                                    for (let i = 0; i < position.count; i++) {
+                                        colors.push(self.color.r, self.color.g, self.color.b);
+                                    }
+                                    o.geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+                                }
                                 o.material.visible = false;
                             }
                         });
+                        
                         self.add(mesh);
+                        self.updateWorldMatrix(false, true);
                         self.meshContent = mesh;
                     }, !self.cameraOnLoad ? () => 0 : () => {
                         return self.calculateDistanceToCamera(self.cameraOnLoad);
@@ -192,6 +218,7 @@ class OGC3DTile extends THREE.Object3D {
     dispose() {
 
         const self = this;
+        self.childrenTiles.forEach(tile => tile.dispose());
         self.deleted = true;
         this.traverse(function (element) {
             if (!!element.contentURL) {
@@ -224,19 +251,24 @@ class OGC3DTile extends THREE.Object3D {
     _update(camera, frustum) {
         const self = this;
 
-        self.childrenTiles.forEach(child => child._update(camera, frustum));
+        const visibilityBeforeUpdate = self.materialVisibility;
+
         if (!!self.boundingVolume && !!self.geometricError) {
             self.metric = self.calculateUpdateMetric(camera, frustum);
         }
+        self.childrenTiles.forEach(child => child._update(camera, frustum));
 
         updateNodeVisibility(self.metric);
         updateTree(self.metric);
-        trimTree(self.metric);
+        trimTree(self.metric, visibilityBeforeUpdate);
 
 
         function updateTree(metric) {
             // If this tile does not have mesh content but it has children
             if (metric < 0 && self.hasMeshContent) return;
+            if (self.occlusionCullingService && self.hasMeshContent && !self.occlusionCullingService.hasID(self.colorID)) {
+                return;
+            }
             if (!self.hasMeshContent || (metric < self.geometricError && !!self.meshContent)) {
                 if (!!self.json && !!self.json.children && self.childrenTiles.length != self.json.children.length) {
                     loadJsonChildren();
@@ -276,7 +308,7 @@ class OGC3DTile extends THREE.Object3D {
                 self.changeContentVisibility(true);
             } else if (metric < self.geometricError) { // Ideal LOD is past this one
                 // if children are visible and have been displayed, can be hidden
-                var allChildrenReady = true;
+                let allChildrenReady = true;
                 self.childrenTiles.every(child => {
 
                     if (!child.isReady()) {
@@ -287,17 +319,26 @@ class OGC3DTile extends THREE.Object3D {
                 });
                 if (allChildrenReady) {
                     self.changeContentVisibility(false);
-                } else {
-                    //self.changeContentVisibility(true);
-
                 }
             }
         }
 
-        function trimTree(metric) {
+        function trimTree(metric, visibilityBeforeUpdate) {
             if (!self.hasMeshContent) return;
-            if (metric < 0) { // outside frustum
+            if (!self.inFrustum) { // outside frustum
+                self.disposeChildren();
+                updateNodeVisibility(metric);
+                return;
+            }
+            if (self.occlusionCullingService &&
+                !visibilityBeforeUpdate &&
+                self.hasMeshContent &&
+                self.meshContent &&
+                self.meshesToDisplay == self.meshesDisplayed &&
+                self.areAllChildrenLoadedAndHidden()) {
+
                 self.disposeChildren();
+                updateNodeVisibility(metric);
                 return;
             }
             if (metric >= self.geometricError) {
@@ -321,7 +362,8 @@ class OGC3DTile extends THREE.Object3D {
                     loadOutsideView: self.loadOutsideView,
                     level: self.level + 1,
                     tileLoader: self.tileLoader,
-                    cameraOnLoad: camera
+                    cameraOnLoad: camera,
+                    occlusionCullingService:self.occlusionCullingService
                 });
                 self.childrenTiles.push(childTile);
                 self.add(childTile);
@@ -330,6 +372,36 @@ class OGC3DTile extends THREE.Object3D {
 
     }
 
+    areAllChildrenLoadedAndHidden() {
+        let allLoadedAndHidden = true;
+        const self = this;
+        this.childrenTiles.every(child => {
+            if (child.hasMeshContent) {
+                if(child.childrenTiles.length>0){
+                    allLoadedAndHidden = false;
+                    return false;
+                }
+                if (!child.inFrustum ) {
+                    return true;
+                };
+                if (!child.materialVisibility || child.meshesToDisplay != child.meshesDisplayed) {
+                    allLoadedAndHidden = false;
+                    return false;
+                } else if (self.occlusionCullingService.hasID(child.colorID)) {
+                    allLoadedAndHidden = false;
+                    return false;
+                }
+            } else {
+                if (!child.areAllChildrenLoadedAndHidden()) {
+                    allLoadedAndHidden = false;
+                    return false;
+                }
+            }
+            return true;
+        });
+        return allLoadedAndHidden;
+    }
+
     /**
      * Node is ready if it is outside frustum, if it was drawn at least once or if all it's children are ready
      * @returns true if ready
@@ -382,6 +454,13 @@ class OGC3DTile extends THREE.Object3D {
 
     changeContentVisibility(visibility) {
         const self = this;
+        if(self.hasMeshContent && self.meshContent){
+            if(visibility){
+                self.layers.enable(0);
+            }else{
+                self.layers.disable(0);
+            }
+        }
         if (self.materialVisibility == visibility) {
             return;
         }
@@ -437,7 +516,7 @@ class OGC3DTile extends THREE.Object3D {
                 return 0;
             }
             const scale = this.matrixWorld.getMaxScaleOnAxis();
-            return ((distance / 100) / this.geometricErrorMultiplier) * scale;
+            return (((distance / Math.pow(scale, 2)) / 100) / this.geometricErrorMultiplier);
         } else if (this.boundingVolume instanceof THREE.Box3) {
             // Region
             // Region not supported

package/src/tileset/OcclusionCullingService.js

@@ -0,0 +1,79 @@
+import * as THREE from 'three';
+import { clamp } from "three/src/math/MathUtils";
+
+
+
+class OcclusionCullingService {
+
+    /**
+     * 
+     * @param {
+     *   json: optional,
+     *   url: optional,
+     *   rootPath: optional,
+     *   parentGeometricError: optional,
+     *   parentBoundingVolume: optional,
+     *   parentRefinement: optional,
+     *   geometricErrorMultiplier: Double,
+     *   loadOutsideView: Boolean,
+     *   tileLoader : TileLoader,
+     *   meshCallback: function,
+     *   cameraOnLoad: camera,
+     *   parentTile: OGC3DTile,
+     *   onLoadCallback: function,
+     *   occlusionCullingService: OcclusionCullingService
+     * } properties 
+     */
+    constructor() {
+        this.cullMap = [];
+        this.cullMaterial = new THREE.MeshBasicMaterial({ vertexColors: true });
+        this.cullMaterial.side = THREE.FrontSide;
+        this.cullTarget = this.createCullTarget();
+        this.cullPixels = new Uint8Array(4 * this.cullTarget.width * this.cullTarget.height);
+    }
+
+    setSide(side){
+        this.cullMaterial.side = side;
+    }
+
+    createCullTarget() {
+        const target = new THREE.WebGLRenderTarget(Math.floor(window.innerWidth * 0.05), Math.floor(window.innerHeight * 0.05));
+        target.texture.format = THREE.RGBAFormat;
+        target.texture.encoding = THREE.LinearEncoding;
+        target.texture.minFilter = THREE.NearestFilter;
+        target.texture.magFilter = THREE.NearestFilter;
+        target.texture.generateMipmaps = false;
+        target.stencilBuffer = false;
+        target.depthBuffer = true;
+        target.depthTexture = new THREE.DepthTexture();
+        target.depthTexture.format = THREE.DepthFormat;
+        target.depthTexture.type = THREE.UnsignedShortType;
+        return target;
+    }
+
+    update(scene, renderer, camera) {
+        let tempRenderTarget = renderer.getRenderTarget();
+        let tempOverrideMaterial = scene.overrideMaterial;
+
+        scene.overrideMaterial = this.cullMaterial;
+        renderer.setRenderTarget(this.cullTarget);
+        renderer.render(scene, camera);
+
+        scene.overrideMaterial = tempOverrideMaterial;
+        renderer.setRenderTarget(tempRenderTarget);
+
+        renderer.readRenderTargetPixels(this.cullTarget, 0, 0, this.cullTarget.width, this.cullTarget.height, this.cullPixels);
+        this.cullMap = [];
+        
+        for (let i = 0; i < this.cullPixels.length; i += 4) {
+            const c = clamp(this.cullPixels[i], 0, 255) << 16 ^ clamp(this.cullPixels[i + 1], 0, 255) << 8 ^ clamp(this.cullPixels[i + 2], 0, 255) << 0;
+            this.cullMap[c] = true;
+        }
+
+    }
+
+    hasID(id) {
+        return this.cullMap[id];
+    }
+}
+export { OcclusionCullingService };