@openglobus/og 0.22.2 → 0.23.0

package/lib/js/renderer/Renderer.js

@@ -4,6 +4,7 @@ import { createRendererEvents } from "./RendererEvents";
 import { depth } from "../shaders/depth";
 import { Framebuffer, Multisample } from "../webgl/index";
 import { FontAtlas } from "../utils/FontAtlas";
+import { Handler } from "../webgl/Handler";
 import { input } from "../input/input";
 import { isEmpty } from "../utils/shared";
 import { LabelWorker } from "../entity/LabelWorker";
@@ -13,10 +14,11 @@ import { toneMapping } from "../shaders/toneMapping";
 import { TextureAtlas } from "../utils/TextureAtlas";
 import { Vec2 } from "../math/Vec2";
 import { Vec3 } from "../math/Vec3";
+import { Vec4 } from "../math/Vec4";
 const MSAA_DEFAULT = 0;
 let __pickingCallbackCounter__ = 0;
 let __depthCallbackCounter__ = 0;
-let __distanceCallbackCounter__ = 0;
+let _tempDepth_ = new Float32Array(2);
 function clientWaitAsync(gl, sync, flags) {
     return new Promise((resolve, reject) => {
         function check() {
@@ -34,109 +36,27 @@ function clientWaitAsync(gl, sync, flags) {
         check();
     });
 }
-/**
- * Represents high level WebGL context interface that starts WebGL handler working in real time.
- * @class
- * @param {Handler} handler - WebGL handler context.
- * @param {Object} [params] - Renderer parameters:
- * @fires EventsHandler<RendererEventsType>#draw
- * @fires EventsHandler<RendererEventsType>#resize
- * @fires EventsHandler<RendererEventsType>#mousemove
- * @fires EventsHandler<RendererEventsType>#mousestop
- * @fires EventsHandler<RendererEventsType>#lclick
- * @fires EventsHandler<RendererEventsType>#rclick
- * @fires EventsHandler<RendererEventsType>#mclick
- * @fires EventsHandler<RendererEventsType>#ldblclick
- * @fires EventsHandler<RendererEventsType>#rdblclick
- * @fires EventsHandler<RendererEventsType>#mdblclick
- * @fires EventsHandler<RendererEventsType>#lup
- * @fires EventsHandler<RendererEventsType>#rup
- * @fires EventsHandler<RendererEventsType>#mup
- * @fires EventsHandler<RendererEventsType>#ldown
- * @fires EventsHandler<RendererEventsType>#rdown
- * @fires EventsHandler<RendererEventsType>#mdown
- * @fires EventsHandler<RendererEventsType>#lhold
- * @fires EventsHandler<RendererEventsType>#rhold
- * @fires EventsHandler<RendererEventsType>#mhold
- * @fires EventsHandler<RendererEventsType>#mousewheel
- * @fires EventsHandler<RendererEventsType>#touchstart
- * @fires EventsHandler<RendererEventsType>#touchend
- * @fires EventsHandler<RendererEventsType>#touchcancel
- * @fires EventsHandler<RendererEventsType>#touchmove
- * @fires EventsHandler<RendererEventsType>#doubletouch
- * @fires EventsHandler<RendererEventsType>#touchleave
- * @fires EventsHandler<RendererEventsType>#touchenter
- */
-let __resizeTimeout;
 class Renderer {
     constructor(handler, params = {}) {
-        this._readPickingBuffer_webgl1 = () => {
-            this.pickingFramebuffer.activate();
-            this.pickingFramebuffer.readAllPixels(this._tempPickingPix_);
-            this.pickingFramebuffer.deactivate();
-        };
-        this._readPickingBuffer_webgl2 = () => {
-            const gl = this.handler.gl;
-            const buf = this._pickingPixelBuffer;
-            if (!this._skipPickingFrame) {
-                this._skipPickingFrame = true;
-                let dest = this._tempPickingPix_;
-                let w = this.pickingFramebuffer.width, h = this.pickingFramebuffer.height;
-                this.pickingFramebuffer.activate();
-                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, buf);
-                gl.bufferData(gl.PIXEL_PACK_BUFFER, dest.byteLength, gl.STREAM_READ);
-                gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, 0);
-                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-                this.pickingFramebuffer.deactivate();
-                const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
-                gl.flush();
-                clientWaitAsync(gl, sync, 0).then(() => {
-                    this._skipPickingFrame = false;
-                    gl.deleteSync(sync);
-                    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, buf);
-                    gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, dest);
-                    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-                });
-            }
-        };
-        this._readDistanceBuffer_webgl1 = () => {
-            this.distanceFramebuffer.activate();
-            this.distanceFramebuffer.readAllPixels(this._tempDistancePix_);
-            this.distanceFramebuffer.deactivate();
-        };
-        this._readDistanceBuffer_webgl2 = () => {
-            const gl = this.handler.gl;
-            const buf = this._distancePixelBuffer;
-            if (!this._skipDistanceFrame) {
-                this._skipDistanceFrame = true;
-                let dest = this._tempDistancePix_;
-                let w = this.distanceFramebuffer.width, h = this.distanceFramebuffer.height;
-                this.distanceFramebuffer.activate();
-                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, buf);
-                gl.bufferData(gl.PIXEL_PACK_BUFFER, dest.byteLength, gl.STREAM_READ);
-                gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, 0);
-                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-                this.distanceFramebuffer.deactivate();
-                const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
-                gl.flush();
-                clientWaitAsync(gl, sync, 0).then(() => {
-                    this._skipDistanceFrame = false;
-                    gl.deleteSync(sync);
-                    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, buf);
-                    gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, dest);
-                    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-                });
-            }
-        };
         this.div = null;
-        this.handler = handler;
+        if (handler instanceof Handler) {
+            this.handler = handler;
+        }
+        else {
+            this.handler = new Handler(handler, {
+                pixelRatio: params.dpi || (window.devicePixelRatio + 0.15),
+                autoActivate: true
+            });
+        }
         this.exposure = params.exposure || 3.01;
         this.gamma = params.gamma || 0.47;
         this.whitepoint = 1.0;
         this.brightThreshold = 0.9;
         this._renderNodesArr = [];
         this.renderNodes = {};
-        this.activeCamera = null;
+        this.activeCamera = new Camera(this, {
+            eye: new Vec3(0, 0, 0), look: new Vec3(0, 0, -1), up: new Vec3(0, 1, 0)
+        });
         this.events = createRendererEvents(this);
         this.controls = {};
         if (params.controls) {
@@ -148,10 +68,6 @@ class Renderer {
         this.colorObjects = new Map();
         this._pickingCallbacks = [];
         this.pickingFramebuffer = null;
-        this._tempPickingPix_ = new Uint8Array([]);
-        this.distanceFramebuffer = null;
-        this._distanceCallbacks = [];
-        this._tempDistancePix_ = new Uint8Array([]);
         this._depthCallbacks = [];
         this.depthFramebuffer = null;
         let urlParams = new URLSearchParams(location.search);
@@ -187,20 +103,14 @@ class Renderer {
          * @type {FontAtlas}
          */
         this.fontAtlas = new FontAtlas(params.fontsSrc);
-        this._entityCollections = [];
+        this._entityCollections = [[]];
         this._currentOutput = "screen";
         this._fnScreenFrame = null;
         this.labelWorker = new LabelWorker(4);
-        this.__useDistanceFramebuffer__ = true;
         this.screenDepthFramebuffer = null;
         this.screenFramePositionBuffer = null;
         this.screenTexture = {};
         this.outputTexture = null;
-        this._skipDistanceFrame = false;
-        this._distancePixelBuffer = null;
-        this._skipPickingFrame = false;
-        this._pickingPixelBuffer = null;
-        this._readDistanceBuffer = this._readDistanceBuffer_webgl2;
         this._readPickingBuffer = this._readPickingBuffer_webgl2;
         if (params.autoActivate || isEmpty(params.autoActivate)) {
             this.start();
@@ -218,6 +128,9 @@ class Renderer {
         gl.blendEquation(gl.FUNC_ADD);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
     }
+    setRelativeCenter(c) {
+        this.events.dispatch(this.events.changerelativecenter, c || this.activeCamera.eye);
+    }
     /**
      * Sets renderer events activity.
      * @param {Boolean} activity - Events activity.
@@ -240,21 +153,6 @@ class Renderer {
             }
         }
     }
-    addDistanceCallback(sender, callback) {
-        let id = __distanceCallbackCounter__++;
-        this._distanceCallbacks.push({
-            id: id, callback: callback, sender: sender
-        });
-        return id;
-    }
-    removeDistanceCallback(id) {
-        for (let i = 0; i < this._distanceCallbacks.length; i++) {
-            if (id === this._distanceCallbacks[i].id) {
-                this._distanceCallbacks.splice(i, 1);
-                break;
-            }
-        }
-    }
     /**
      * Adds picking rendering callback function.
      * @param {object} sender - Callback context.
@@ -406,9 +304,6 @@ class Renderer {
         this.handler.setFrameCallback(() => {
             this.draw();
         });
-        this.activeCamera = new Camera(this, {
-            eye: new Vec3(0, 0, 0), look: new Vec3(0, 0, -1), up: new Vec3(0, 1, 0)
-        });
         this.events.initialize();
         // Bind console key
         this.events.on("charkeypress", input.KEY_APOSTROPHE, function () {
@@ -416,23 +311,26 @@ class Renderer {
         });
         this.handler.addProgram(screenFrame());
         this.pickingFramebuffer = new Framebuffer(this.handler, {
-            width: 640, height: 480
+            width: 640,
+            height: 480,
+            targets: [{
+                    readAsync: true
+                }]
         });
         this.pickingFramebuffer.init();
-        this._tempPickingPix_ = new Uint8Array(this.pickingFramebuffer.width * this.pickingFramebuffer.height * 4);
-        this.distanceFramebuffer = new Framebuffer(this.handler, {
-            width: 320, height: 240
-        });
-        this.distanceFramebuffer.init();
-        this._tempDistancePix_ = new Uint8Array(this.distanceFramebuffer.width * this.distanceFramebuffer.height * 4);
-        //this._tempDistancePix_ = new Uint8Array(4);
         this.depthFramebuffer = new Framebuffer(this.handler, {
-            size: 2,
-            internalFormat: ["RGBA", "DEPTH_COMPONENT24"],
-            format: ["RGBA", "DEPTH_COMPONENT"],
-            type: ["UNSIGNED_BYTE", "UNSIGNED_INT"],
-            attachment: ["COLOR_ATTACHMENT", "DEPTH_ATTACHMENT"],
-            useDepth: false
+            targets: [{
+                    internalFormat: "RGBA",
+                    type: "UNSIGNED_BYTE",
+                    attachment: "COLOR_ATTACHMENT",
+                    readAsync: true
+                }, {
+                    internalFormat: "RGBA16F",
+                    type: "FLOAT",
+                    attachment: "COLOR_ATTACHMENT",
+                    readAsync: true
+                }],
+            useDepth: true
         });
         this.depthFramebuffer.init();
         this.screenDepthFramebuffer = new Framebuffer(this.handler, {
@@ -440,7 +338,6 @@ class Renderer {
         });
         this.screenDepthFramebuffer.init();
         if (this.handler.gl.type === "webgl") {
-            this._readDistanceBuffer = this._readDistanceBuffer_webgl1;
             this._readPickingBuffer = this._readPickingBuffer_webgl1;
             this.sceneFramebuffer = new Framebuffer(this.handler);
             this.sceneFramebuffer.init();
@@ -448,7 +345,6 @@ class Renderer {
             this.screenTexture = {
                 screen: this.sceneFramebuffer.textures[0],
                 picking: this.pickingFramebuffer.textures[0],
-                distance: this.distanceFramebuffer.textures[0],
                 depth: this.screenDepthFramebuffer.textures[0]
             };
         }
@@ -469,10 +365,12 @@ class Renderer {
             this.blitFramebuffer = new Framebuffer(this.handler, {
                 size: 1,
                 useDepth: false,
-                internalFormat: this._internalFormat,
-                format: this._format,
-                type: this._type,
-                filter: "NEAREST"
+                targets: [{
+                        internalFormat: this._internalFormat,
+                        format: this._format,
+                        type: this._type,
+                        filter: "NEAREST"
+                    }]
             });
             this.blitFramebuffer.init();
             this.toneMappingFramebuffer = new Framebuffer(this.handler, {
@@ -483,11 +381,9 @@ class Renderer {
             this.screenTexture = {
                 screen: this.toneMappingFramebuffer.textures[0],
                 picking: this.pickingFramebuffer.textures[0],
-                distance: this.distanceFramebuffer.textures[0],
                 depth: this.screenDepthFramebuffer.textures[0],
                 frustum: this.depthFramebuffer.textures[0]
             };
-            this._initReadPixelsBuffers();
         }
         this.handler.ONCANVASRESIZE = () => {
             this._resizeStart();
@@ -505,17 +401,6 @@ class Renderer {
         this._initializeRenderNodes();
         this._initializeControls();
     }
-    _initReadPixelsBuffers() {
-        let gl = this.handler.gl;
-        this._distancePixelBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this._distancePixelBuffer);
-        gl.bufferData(gl.PIXEL_PACK_BUFFER, this.distanceFramebuffer.width * this.distanceFramebuffer.height * 4, gl.STREAM_READ);
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-        this._pickingPixelBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this._pickingPixelBuffer);
-        gl.bufferData(gl.PIXEL_PACK_BUFFER, this.pickingFramebuffer.width * this.pickingFramebuffer.height * 4, gl.STREAM_READ);
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-    }
     _initializeControls() {
         let temp = this.controls;
         this.controls = {};
@@ -544,19 +429,17 @@ class Renderer {
         this.sceneFramebuffer.setSize(c.width, c.height);
         this.blitFramebuffer && this.blitFramebuffer.setSize(c.width, c.height, true);
         this.toneMappingFramebuffer && this.toneMappingFramebuffer.setSize(c.width, c.height, true);
-        this.depthFramebuffer && this.depthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
         this.screenDepthFramebuffer && this.screenDepthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
+        this.depthFramebuffer && this.depthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
         if (this.handler.gl.type === "webgl") {
             this.screenTexture.screen = this.sceneFramebuffer.textures[0];
             this.screenTexture.picking = this.pickingFramebuffer.textures[0];
-            this.screenTexture.distance = this.distanceFramebuffer.textures[0];
             this.screenTexture.depth = this.screenDepthFramebuffer.textures[0];
             this.screenTexture.frustum = this.depthFramebuffer.textures[0];
         }
         else {
             this.screenTexture.screen = this.toneMappingFramebuffer.textures[0];
             this.screenTexture.picking = this.pickingFramebuffer.textures[0];
-            this.screenTexture.distance = this.distanceFramebuffer.textures[0];
             this.screenTexture.depth = this.screenDepthFramebuffer.textures[0];
             this.screenTexture.frustum = this.depthFramebuffer.textures[0];
         }
@@ -629,35 +512,27 @@ class Renderer {
     /**
      * TODO: replace with cache friendly linked list by BillboardHandler, LabelHandler etc.
      */
-    enqueueEntityCollectionsToDraw(ecArr) {
-        this._entityCollections.push.apply(this._entityCollections, ecArr);
+    enqueueEntityCollectionsToDraw(ecArr, depthOrder = 0) {
+        if (!this._entityCollections[depthOrder]) {
+            this._entityCollections[depthOrder] = [];
+        }
+        this._entityCollections[depthOrder].push(...ecArr);
     }
     /**
-     * Draws opaque items entity collections.
      * @protected
      */
-    _drawOpaqueEntityCollections() {
-        let ec = this._entityCollections;
+    _drawEntityCollections(depthOrder) {
+        let ec = this._entityCollections[depthOrder];
         if (ec.length) {
+            let gl = this.handler.gl;
             this.enableBlendDefault();
-            // pointClouds pass
+            // Point Clouds
             let i = ec.length;
             while (i--) {
                 ec[i]._fadingOpacity && ec[i].pointCloudHandler.draw();
             }
-        }
-    }
-    /**
-     * Draws transparent items entity collections.
-     * @protected
-     */
-    _drawTransparentEntityCollections() {
-        let ec = this._entityCollections;
-        if (ec.length) {
-            let gl = this.handler.gl;
-            this.enableBlendDefault();
             // GeoObjects
-            let i = ec.length;
+            i = ec.length;
             while (i--) {
                 let eci = ec[i];
                 if (ec[i]._fadingOpacity) {
@@ -700,9 +575,75 @@ class Renderer {
             }
         }
     }
-    _clearEntityCollectionQueue() {
-        this._entityCollections.length = 0;
-        this._entityCollections = [];
+    _drawPickingEntityCollections(depthOrder) {
+        let ec = this._entityCollections[depthOrder];
+        if (ec.length) {
+            // billboard pass
+            let i = ec.length;
+            while (i--) {
+                ec[i]._fadingOpacity && ec[i].billboardHandler.drawPicking();
+            }
+            // geoObject pass
+            i = ec.length;
+            while (i--) {
+                ec[i]._fadingOpacity && ec[i].geoObjectHandler.drawPicking();
+            }
+            // label pass
+            i = ec.length;
+            while (i--) {
+                ec[i]._fadingOpacity && ec[i].labelHandler.drawPicking();
+            }
+            // ray pass
+            i = ec.length;
+            while (i--) {
+                ec[i]._fadingOpacity && ec[i].rayHandler.drawPicking();
+            }
+            // polyline pass
+            i = ec.length;
+            while (i--) {
+                ec[i]._visibility && ec[i].polylineHandler.drawPicking();
+            }
+            //Strip pass
+            i = ec.length;
+            while (i--) {
+                ec[i]._visibility && ec[i].stripHandler.drawPicking();
+            }
+            // //pointClouds pass
+            // i = ec.length;
+            // while (i--) {
+            //    ec[i]._visibility && ec[i].pointCloudHandler.drawPicking();
+            // }
+        }
+    }
+    _drawDepthEntityCollections(depthOrder) {
+        let ec = this._entityCollections[depthOrder];
+        if (ec.length) {
+            // geoObject pass
+            let i = ec.length;
+            while (i--) {
+                ec[i]._fadingOpacity && ec[i].geoObjectHandler.drawDepth();
+            }
+            // i = ec.length;
+            // while (i--) {
+            //     ec[i]._fadingOpacity && ec[i].rayHandler.drawDepth();
+            // }
+            //
+            // // polyline pass
+            // i = ec.length;
+            // while (i--) {
+            //     ec[i]._visibility && ec[i].polylineHandler.drawDepth();
+            // }
+            //
+            // //Strip pass
+            // i = ec.length;
+            // while (i--) {
+            //     ec[i]._visibility && ec[i].stripHandler.drawDepth();
+            // }
+        }
+    }
+    _clearEntityCollectionQueue(depthOrder) {
+        this._entityCollections[depthOrder].length = 0;
+        this._entityCollections[depthOrder] = [];
     }
     /**
      * Draw nodes.
@@ -725,6 +666,9 @@ class Renderer {
         // Rendering scene nodes and entityCollections
         let rn = this._renderNodesArr;
         let k = frustums.length;
+        //
+        // RenderNodes PASS
+        //
         while (k--) {
             this.activeCamera.setCurrentFrustum(k);
             gl.clear(gl.DEPTH_BUFFER_BIT);
@@ -732,30 +676,41 @@ class Renderer {
             while (i--) {
                 rn[i].preDrawNode();
             }
-            this._drawOpaqueEntityCollections();
             i = rn.length;
             while (i--) {
                 this.enableBlendDefault();
                 rn[i].drawNode();
             }
-            this._drawTransparentEntityCollections();
-            this._clearEntityCollectionQueue();
+            this._drawEntityCollections(0);
             e.dispatch(e.drawtransparent, this);
             if (pointerEvent && !mouseHold) {
-                this._drawPickingBuffer();
+                this._drawPickingBuffer(0);
+            }
+            this._drawDepthBuffer(0);
+            this._clearEntityCollectionQueue(0);
+        }
+        //
+        // EntityCollections PASS
+        //
+        for (let i = 1; i < this._entityCollections.length; i++) {
+            gl.clear(gl.DEPTH_BUFFER_BIT);
+            let k = frustums.length;
+            while (k--) {
+                this.activeCamera.setCurrentFrustum(k);
+                this._drawEntityCollections(i);
+                if (pointerEvent && !mouseHold) {
+                    this._drawPickingBuffer(i);
+                }
+                this._drawDepthBuffer(i);
             }
-            this.__useDistanceFramebuffer__ && this._drawDistanceBuffer();
+            this._clearEntityCollectionQueue(i);
         }
         sceneFramebuffer.deactivate();
         this.blitFramebuffer && sceneFramebuffer.blitTo(this.blitFramebuffer, 0);
         if (pointerEvent) {
-            if (h.isWebGl2()) {
-                // It works ONLY for 0 (closest) frustum
-                this._drawDepthBuffer();
-            }
             this._readPickingBuffer();
         }
-        this.__useDistanceFramebuffer__ && this._readDistanceBuffer();
+        this._readDepthBuffer();
         // Tone mapping followed by rendering on the screen
         this._fnScreenFrame();
         e.dispatch(e.postdraw, this);
@@ -812,87 +767,86 @@ class Renderer {
      * Draw picking objects framebuffer.
      * @private
      */
-    _drawPickingBuffer() {
+    _drawPickingBuffer(depthOrder) {
         this.pickingFramebuffer.activate();
         let h = this.handler;
         let gl = h.gl;
-        if (this.activeCamera.isFirstPass) {
+        if (this.activeCamera.isFirstPass && depthOrder === 0) {
             gl.clearColor(0.0, 0.0, 0.0, 1.0);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         }
         else {
             gl.clear(gl.DEPTH_BUFFER_BIT);
         }
-        let dp = this._pickingCallbacks;
-        for (let i = 0, len = dp.length; i < len; i++) {
-            //
-            // draw picking scenes, usually we don't need blending,
-            // but sometimes set it manually in the callbacks
-            //
-            gl.disable(gl.BLEND);
-            /**
-             * This callback renders picking frame.
-             */
-            dp[i].callback.call(dp[i].sender);
-            gl.enable(gl.BLEND);
+        //
+        // draw picking scenes, usually we don't need blending,
+        // but sometimes set it manually in the callbacks
+        //
+        gl.disable(gl.BLEND);
+        if (depthOrder === 0) {
+            let dp = this._pickingCallbacks;
+            for (let i = 0, len = dp.length; i < len; i++) {
+                /**
+                 * This callback renders picking frame.
+                 */
+                dp[i].callback.call(dp[i].sender);
+            }
         }
+        this._drawPickingEntityCollections(depthOrder);
+        gl.enable(gl.BLEND);
         this.pickingFramebuffer.deactivate();
     }
-    /**
-     * Draw picking objects framebuffer.
-     * @protected
-     */
-    _drawDistanceBuffer() {
-        this.distanceFramebuffer.activate();
+    _drawDepthBuffer(depthOrder) {
+        this.depthFramebuffer.activate();
         let h = this.handler;
         let gl = h.gl;
-        if (this.activeCamera.isFirstPass) {
+        gl.disable(gl.BLEND);
+        if (this.activeCamera.isFirstPass && depthOrder === 0) {
             gl.clearColor(0.0, 0.0, 0.0, 1.0);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         }
         else {
             gl.clear(gl.DEPTH_BUFFER_BIT);
         }
-        gl.disable(gl.BLEND);
-        let dp = this._distanceCallbacks;
-        let i = dp.length;
-        while (i--) {
-            /**
-             * This callback renders distance frame.
-             */
-            dp[i].callback.call(dp[i].sender);
-        }
-        gl.enable(gl.BLEND);
-        this.distanceFramebuffer.deactivate();
-    }
-    _drawDepthBuffer() {
-        this.depthFramebuffer.activate();
-        let h = this.handler;
-        let gl = h.gl;
-        gl.clearColor(0.0, 0.0, 0.0, 1.0);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-        gl.enable(gl.DEPTH_TEST);
-        let dp = this._depthCallbacks;
-        let i = dp.length;
-        while (i--) {
-            /**
-             * This callback renders depth frame.
-             */
-            dp[i].callback.call(dp[i].sender);
+        if (depthOrder === 0) {
+            let dp = this._depthCallbacks;
+            let i = dp.length;
+            while (i--) {
+                /**
+                 * This callback renders depth frame.
+                 */
+                dp[i].callback.call(dp[i].sender);
+            }
         }
+        this._drawDepthEntityCollections(depthOrder);
         this.depthFramebuffer.deactivate();
         //
-        // PASS to depth visualization
-        this.screenDepthFramebuffer.activate();
-        let sh = h.programs.depth, p = sh._program;
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
-        gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
-        sh.activate();
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, this.depthFramebuffer.textures[1]);
-        gl.uniform1i(p.uniforms.depthTexture, 0);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-        this.screenDepthFramebuffer.deactivate();
+        // DEBUG SCREEN OUTPUTS
+        //
+        if (this._currentOutput === "depth" || this._currentOutput === "frustum") {
+            //
+            // PASS to depth visualization
+            this.screenDepthFramebuffer.activate();
+            let sh = h.programs.depth, p = sh._program;
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
+            gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
+            sh.activate();
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this.depthFramebuffer.textures[1]);
+            gl.uniform1i(p.uniforms.depthTexture, 0);
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+            this.screenDepthFramebuffer.deactivate();
+            gl.enable(gl.BLEND);
+        }
+    }
+    _readDepthBuffer() {
+        this.depthFramebuffer.readPixelBuffersAsync();
+    }
+    _readPickingBuffer_webgl1() {
+        this.pickingFramebuffer.readPixelBuffersAsync();
+    }
+    _readPickingBuffer_webgl2() {
+        this.pickingFramebuffer.readPixelBuffersAsync();
     }
     readPickingColor(x, y, outColor) {
         let w = this.pickingFramebuffer.width;
@@ -900,19 +854,65 @@ class Renderer {
         x = Math.round(x * w);
         y = Math.round(y * h);
         let ind = (y * w + x) * 4;
-        outColor[0] = this._tempPickingPix_[ind];
-        outColor[1] = this._tempPickingPix_[ind + 1];
-        outColor[2] = this._tempPickingPix_[ind + 2];
+        let _tempPickingPix_ = this.pickingFramebuffer?.pixelBuffers[0].data;
+        if (_tempPickingPix_) {
+            outColor[0] = _tempPickingPix_[ind];
+            outColor[1] = _tempPickingPix_[ind + 1];
+            outColor[2] = _tempPickingPix_[ind + 2];
+        }
     }
-    readDistanceColor(x, y, outColor) {
-        let w = this.distanceFramebuffer.width;
-        let h = this.distanceFramebuffer.height;
+    readDepth(x, y, outDepth) {
+        let w = this.depthFramebuffer.width;
+        let h = this.depthFramebuffer.height;
         x = Math.round(x * w);
         y = Math.round(y * h);
         let ind = (y * w + x) * 4;
-        outColor[0] = this._tempDistancePix_[ind];
-        outColor[1] = this._tempDistancePix_[ind + 1];
-        outColor[2] = this._tempDistancePix_[ind + 2];
+        let _tempDepthPix_ = this.depthFramebuffer?.pixelBuffers[1].data;
+        let _tempFrustumPix_ = this.depthFramebuffer?.pixelBuffers[0].data;
+        if (_tempDepthPix_) {
+            outDepth[0] = _tempDepthPix_[ind];
+            outDepth[1] = Math.round(_tempFrustumPix_[ind] / 10.0) - 1.0; // See Camera.frustumColorIndex
+        }
+    }
+    /**
+     * Returns the distance from the active (screen) camera to the 3d-surface using the defined screen coordinates
+     * @public
+     * @param {Vec2 | IBaseInputState} px - Screen coordinates.
+     * @returns {number | undefined} -
+     */
+    getDistanceFromPixel(px, camera) {
+        camera = camera || this.activeCamera;
+        let r = this;
+        let cnv = r.handler.canvas;
+        let spx = px.x / cnv.width;
+        let spy = (cnv.height - px.y) / cnv.height;
+        _tempDepth_[0] = _tempDepth_[1] = 0.0;
+        let dist = 0;
+        r.readDepth(spx, spy, _tempDepth_);
+        if (_tempDepth_[1] === -1) {
+            return;
+        }
+        let depth = _tempDepth_[0], frustum = camera.frustums[_tempDepth_[1]];
+        if (!frustum)
+            return;
+        let screenPos = new Vec4(spx * 2.0 - 1.0, spy * 2.0 - 1.0, depth * 2.0 - 1.0, 1.0 * 2.0 - 1.0);
+        let viewPosition = frustum.inverseProjectionMatrix.mulVec4(screenPos);
+        let dir = px.direction || r.activeCamera.unproject(px.x, px.y);
+        dist = -(viewPosition.z / viewPosition.w) / dir.dot(r.activeCamera.getForward());
+        return dist;
+    }
+    /**
+     * Returns 3d coordinates from screen coordinates
+     * @public
+     * @param {Vec2 | IBaseInputState} px - Screen coordinates.
+     * @returns {Vec3 | undefined} -
+     */
+    getCartesianFromPixel(px) {
+        let distance = this.getDistanceFromPixel(px);
+        if (distance) {
+            let direction = px.direction || this.activeCamera.unproject(px.x, px.y);
+            return direction.scaleTo(distance).addA(this.activeCamera.eye);
+        }
     }
     /**
      * Function starts renderer
@@ -934,6 +934,7 @@ class Renderer {
         this.div = null;
         this._renderNodesArr = [];
         this.renderNodes = {};
+        //@ts-ignore
         this.activeCamera = null;
         this.controls = {};
         this.controlsBag = {};
@@ -944,10 +945,6 @@ class Renderer {
         this.pickingFramebuffer = null;
         //@ts-ignore
         this._tempPickingPix_ = null;
-        this.distanceFramebuffer = null;
-        this._distanceCallbacks = [];
-        //@ts-ignore
-        this._tempDistancePix_ = null;
         this._depthCallbacks = [];
         this.depthFramebuffer = null;
         this.sceneFramebuffer = null;
@@ -957,7 +954,7 @@ class Renderer {
         //this.billboardsTextureAtlas.clear();
         //this.geoObjectsTextureAtlas.clear()
         //this.fontAtlas.clear();
-        this._entityCollections = [];
+        this._entityCollections = [[]];
         this.handler.ONCANVASRESIZE = null;
         this.handler.destroy();
         // @ts-ignore