@jdultra/threedtiles 4.0.3 → 5.0.0

package/README.md

@@ -177,10 +177,60 @@ occlusionCullingService.setSide(THREE.DoubleSide);
 ```
 
 ### Instanced Tilesets
+
+<p align="center">
+  <img src="https://storage.googleapis.com/jdultra-website/assets/instancedPic.png" width="800" style="display: block; margin: 0 auto"/>
+</p>
+
 Using InstancedTileLoader and InstancedOGC3DTile allows displaying the same Tileset at many different places with little impact on performance.
 Each Tileset is independent in terms of it's position, orientation and level of detail but each tile is created as an "InstancedMesh" giving much 
 higher performance when displaying the same Tileset many times.
 
+```
+// First create the InstancedTileLoader that will manage caching
+const instancedTileLoader = new InstancedTileLoader(scene, mesh => {
+    //// Insert code to be called on every newly decoded mesh e.g.:
+    mesh.material.wireframe = false;
+    mesh.material.side = THREE.DoubleSide;
+}, 
+1000, // cache size as in the number of tiles cached in memory
+100, // max number of tilesets from the same source
+);
+
+// then create some tilesets
+const instancedTilesets = [];
+for (let i = 0; i < 100; i++) {
+    const tileset = new InstancedOGC3DTile({
+    url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
+    geometricErrorMultiplier: 1.0,
+    loadOutsideView: false,
+    tileLoader: instancedTileLoader,
+    static: true // when static is set to true, don't forget to call InstancedOGC3DTile#updateMatrix manually
+    });
+    
+    tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 50 * i);
+    tileset.updateMatrix();
+    scene.add(tileset);
+    instancedTilesets.push(tileset);
+}
+
+//setup an update loop for the LODs
+setInterval(() => {
+    instancedTilesets[updateIndex].update(camera);
+    updateIndex= (updateIndex+1)%instancedTilesets.length;
+},50);
+
+//in the animate function, you also need to update the instancedTileLoader
+function animate() {
+    requestAnimationFrame(animate);
+    instancedTileLoader.update();
+    
+    ... // rest of render loop
+}
+animate();
+
+```
+
 ### 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.
@@ -192,16 +242,50 @@ const ogc3DTile = new OGC3DTile({
     });
 ```
 
-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.
+Either way, it's advised to set the autoUpdate property of the scene to false and call Scene#updateMatrixWorld manually whenever you move things around.
+
+```
+scene.matrixAutoUpdate = false;
+scene.matrixWorldAutoUpdate = false;
+
+// and when objects move:
+scene.updateMatrixWorld(true);
 
 ```
-scene.autoUpdate = false;
+#### tileset update loop
+Updating a single tileset via OGC3DTile#update or InstancedOGC3DTile#update is quite fast, even when the tree is deep.
+For a single tileset, it's safe to call it regularly with a setInterval:
+```
+function startInterval() {
+        interval = setIntervalAsync(function () {
+            ogc3DTile.update(camera);
+        }, 20);
+    }
 ```
 
+However, with instancedTilesets, you may have hundreds or even thousands of LOD trees that need to be updated individually. In order to preserve frame-rate,
+you may want to implement something a little smarter that yields the CPU to the render loop. In the example below, the process tries to update as many tilesets as it can in under 4 ms.
+
+```
+function now() {
+    return (typeof performance === 'undefined' ? Date : performance).now();
+}
+let updateIndex = 0;
+setInterval(() => {
+    let startTime = now();
+    do{
+        instancedTilesets[updateIndex].update(camera);
+        updateIndex= (updateIndex+1)%instancedTilesets.length;
+    }while(updateIndex < instancedTilesets.length && now()-startTime<4);
+},50);
+```
+
+window#requestIdleCallback is also a good option but the rate of updates becomes slightly unpredictable.
+
 # 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.
+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
 
 
@@ -209,5 +293,5 @@ Contact: emeric.beaufays@jdultra.com
 
 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 feel free to contact me about it.
+The code is not open source but feel free to contact me for a trial.
 Contact: emeric.beaufays@jdultra.com

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "4.0.3",
+    "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,7 +69,8 @@ function initComposer(scene, camera, renderer) {
 function initScene() {
     const scene = new THREE.Scene();
     scene.matrixAutoUpdate = 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);
@@ -85,7 +86,7 @@ function initScene() {
     scene.add(light2);
     light2.position.set(200, 100, -100);*/
 
-    scene.matrixWorldAutoUpdate = true;
+    
     return scene;
 }
 
@@ -131,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;
 }
@@ -144,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
 
     });
 
@@ -163,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.
 
 
@@ -209,28 +216,30 @@ function createInstancedTileLoader(scene) {
         //// Insert code to be called on every newly decoded mesh e.g.:
         mesh.material.wireframe = false;
         mesh.material.side = THREE.DoubleSide;
-    }, 1000, 125);
+    }, 1000, 3375);
 }
 function initInstancedTilesets(instancedTileLoader) {
 
     const instancedTilesets = [];
 
-    for (let x = 0; x < 5; x++) {
-        for (let y = 0; y < 5; y++) {
-            for (let z = 0; z < 5; z++) {
+    for (let x = 0; x < 15; x++) {
+        for (let y = 0; y < 15; y++) {
+            for (let z = 0; z < 15; z++) {
                 const tileset = new InstancedOGC3DTile({
-                    //url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
-                    url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/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: "http://localhost:8080/tileset.json",
-                    geometricErrorMultiplier: 0.001,
+                    geometricErrorMultiplier: 1.0,
                     loadOutsideView: true,
                     tileLoader: instancedTileLoader,
-                    static: false,
+                    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), 3500 * x)
-                tileset.translateOnAxis(new THREE.Vector3(0, 1, 0), 3500 * y)
-                //tileset.translateOnAxis(new THREE.Vector3(0, 0, 1), 50 * z)
+                //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)
+                tileset.translateOnAxis(new THREE.Vector3(0, 1, 0), 50 * y)
+                tileset.translateOnAxis(new THREE.Vector3(0, 0, 1), 50 * z)
+                tileset.updateMatrix()
                 scene.add(tileset);
                 instancedTilesets.push(tileset);
 
@@ -238,17 +247,21 @@ function initInstancedTilesets(instancedTileLoader) {
             }
         }
     }
+
+    scene.updateMatrixWorld(true)
     function now() {
-        return (typeof performance === 'undefined' ? Date : performance).now(); // see #10732
+        return (typeof performance === 'undefined' ? Date : performance).now();
     }
     let updateIndex = 0;
     setInterval(() => {
         let startTime = now();
         do{
-            instancedTilesets[updateIndex].update(camera);
+            const frustum = new THREE.Frustum();
+            frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
+            instancedTilesets[updateIndex].update(camera, frustum);
             updateIndex= (updateIndex+1)%instancedTilesets.length;
         }while(updateIndex < instancedTilesets.length && now()-startTime<4);
-    },50);
+    },40);
     
     //initLODMultiplierSlider(instancedTilesets);
 }
@@ -269,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) {
@@ -32,9 +34,17 @@ class InstancedOGC3DTile extends THREE.Object3D {
         }
     }
 
-    update(camera){
-        const frustum = new THREE.Frustum();
-        frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
+    update(camera, frustum){
+        if(!!frustum){
+            this.tileset._update(camera, frustum);
+        }else{
+            const frustum = new THREE.Frustum();
+            frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
+            this.tileset._update(camera, frustum);
+        }
+        
+    }
+    updateWithFrustum(camera, frustum){
         this.tileset._update(camera, frustum);
     }
 

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 {
 
@@ -23,8 +23,7 @@ class InstancedTile extends THREE.Object3D {
      *   meshCallback: function,
      *   cameraOnLoad: camera,
      *   parentTile: OGC3DTile,
-     *   onLoadCallback: function,
-     *   static: Boolean
+     *   onLoadCallback: function
      * } properties 
      */
     constructor(properties) {
@@ -251,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;
@@ -285,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 => {
@@ -312,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;
@@ -333,7 +332,6 @@ class InstancedTile extends THREE.Object3D {
                     level: self.level + 1,
                     tileLoader: self.tileLoader,
                     cameraOnLoad: camera,
-                    static: self.static,
                     master: self.master
                 });
                 self.childrenTiles.push(childTile);
@@ -457,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