@jdultra/threedtiles 3.2.0 → 3.3.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](https://storage.googleapis.com/www.jdultra.com/occlusion/index.html)
 
 Adding a tileset to a scene is as easy as :
 
@@ -35,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
 
 ### geometric Error Multiplier
 The geometric error multiplier allows you to multiply the geometric error by a factor.
@@ -55,8 +60,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({
@@ -73,6 +78,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;
         }
 });
 ```
@@ -111,7 +117,55 @@ 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. 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:
+```
+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, 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();
+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
@@ -121,5 +175,5 @@ I'm working on this project in parallel https://github.com/ebeaufay/UltraGlobe w
 
 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.
+I'm keeping the code private for now but feel free to contact me about it.
 Contact: emericbeaufays@gmail.com

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.0",
+    "version": "3.3.1",
     "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,14 +20,19 @@ 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.5));
-    const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.8));
+    const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.2 );
+    directionalLight.position.set(100,100,100)
+    directionalLight.lookAt(-1,-1,-1)
     scene.add( directionalLight );
+    scene.autoUpdate = false;
     return scene;
 }
 
@@ -39,11 +47,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;
 
@@ -71,41 +77,46 @@ 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);
+    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:8080/tileset.json",
-        geometricErrorMultiplier: 1.0,
-        loadOutsideView: true,
-        tileLoader: new TileLoader(mesh => {
-            //// Insert code to be called on every newly decoded mesh e.g.:
-            //mesh.material.wireframe = true;
-            //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)
-        }
+        geometricErrorMultiplier: 0.5,
+        loadOutsideView: false,
+        tileLoader: tileLoader,
+        occlusionCullingService: occlusionCullingService,
+        static: false
+    });
+    ogc3DTile.translateZ(200) // Z-UP to Y-UP
+    const ogc3DTile2 = new OGC3DTile({
+        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
+        //url: "http://localhost:8080/tileset.json",
+        geometricErrorMultiplier: 0.5,
+        loadOutsideView: false,
+        //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.:
-    //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), -16.5)
-    // ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), 0)
-    // ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -9.5)
+    //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
 
 
@@ -124,11 +135,13 @@ function initTileset(scene) {
     function startInterval() {
         interval = setIntervalAsync(function () {
             ogc3DTile.update(camera);
+            ogc3DTile2.update(camera);
         }, 20);
     }
     startInterval();
 
     scene.add(ogc3DTile)
+    scene.add(ogc3DTile2)
     return ogc3DTile;
 }
 
@@ -156,11 +169,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

@@ -2,9 +2,8 @@ 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"
+import { clamp } from "three/src/math/MathUtils";
 
 const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0, 1));
 
@@ -26,12 +25,15 @@ 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;
+
         this.uuid = uuidv4();
         if (!!properties.tileLoader) {
             this.tileLoader = properties.tileLoader;
@@ -41,15 +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;
@@ -65,6 +76,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);
@@ -167,10 +180,25 @@ class OGC3DTile extends THREE.Object3D {
                         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 = [];
+                                    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));
+                                }
+                                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);
@@ -185,24 +213,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); */
-
                 }
 
             }
@@ -212,6 +222,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) {
@@ -244,19 +255,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();
@@ -296,7 +312,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()) {
@@ -307,24 +323,32 @@ 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) {
-                if (self.isReady()) {
-                    self.disposeChildren();
-                    return;
-                }
+                self.disposeChildren();
+                updateNodeVisibility();
+                return;
             }
 
         }
@@ -342,7 +366,9 @@ class OGC3DTile extends THREE.Object3D {
                     loadOutsideView: self.loadOutsideView,
                     level: self.level + 1,
                     tileLoader: self.tileLoader,
-                    cameraOnLoad: camera
+                    cameraOnLoad: camera,
+                    occlusionCullingService:self.occlusionCullingService,
+                    static: self.static
                 });
                 self.childrenTiles.push(childTile);
                 self.add(childTile);
@@ -351,6 +377,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
@@ -403,6 +459,22 @@ class OGC3DTile extends THREE.Object3D {
 
     changeContentVisibility(visibility) {
         const self = this;
+        if(self.hasMeshContent && self.meshContent){
+            if(visibility){
+                
+                self.meshContent.traverse((o) => {
+                    if (o.isMesh) {
+                        o.layers.enable(0);
+                    }
+                });
+            }else{
+                self.meshContent.traverse((o) => {
+                    if (o.isMesh) {
+                        o.layers.disable(0);
+                    }
+                });
+            }
+        }
         if (self.materialVisibility == visibility) {
             return;
         }
@@ -458,7 +530,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 };