@openglobus/og 0.24.2 → 0.25.0

package/lib/js/renderer/Renderer.js

@@ -1,969 +0,0 @@
-import { Camera } from "../camera/Camera";
-import { cons } from "../cons";
-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";
-import { randomi } from "../math";
-import { screenFrame } from "../shaders/screenFrame";
-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 _tempDepth_ = new Float32Array(2);
-function clientWaitAsync(gl, sync, flags) {
-    return new Promise((resolve, reject) => {
-        function check() {
-            const res = gl.clientWaitSync(sync, flags, 0);
-            if (res == gl.WAIT_FAILED) {
-                reject();
-            }
-            else if (res == gl.TIMEOUT_EXPIRED) {
-                requestAnimationFrame(check);
-            }
-            else {
-                resolve();
-            }
-        }
-        check();
-    });
-}
-class Renderer {
-    constructor(handler, params = {}) {
-        this.div = null;
-        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 = 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) {
-            for (let i in params.controls) {
-                this.controls[params.controls[i].name] = params.controls[i];
-            }
-        }
-        this.controlsBag = {};
-        this.colorObjects = new Map();
-        this._pickingCallbacks = [];
-        this.pickingFramebuffer = null;
-        this._depthCallbacks = [];
-        this.depthFramebuffer = null;
-        let urlParams = new URLSearchParams(location.search);
-        let msaaParam = urlParams.get('og_msaa');
-        if (msaaParam) {
-            this._msaa = Number(urlParams.get('og_msaa'));
-        }
-        else {
-            this._msaa = params.msaa != undefined ? params.msaa : MSAA_DEFAULT;
-        }
-        this._internalFormat = "RGBA16F";
-        this._format = "RGBA";
-        this._type = "FLOAT";
-        this.sceneFramebuffer = null;
-        this.blitFramebuffer = null;
-        this.toneMappingFramebuffer = null;
-        this._initialized = false;
-        /**
-         * Texture atlas for the billboards images. One atlas per node.
-         * @public
-         * @type {TextureAtlas}
-         */
-        this.billboardsTextureAtlas = new TextureAtlas();
-        /**
-         * Texture atlas for the billboards images. One atlas per node.
-         * @public
-         * @type {TextureAtlas}
-         */
-        this.geoObjectsTextureAtlas = new TextureAtlas();
-        /**
-         * Texture font atlas for the font families and styles. One atlas per node.
-         * @public
-         * @type {FontAtlas}
-         */
-        this.fontAtlas = new FontAtlas(params.fontsSrc);
-        this._entityCollections = [[]];
-        this._currentOutput = "screen";
-        this._fnScreenFrame = null;
-        this.labelWorker = new LabelWorker(4);
-        this.screenDepthFramebuffer = null;
-        this.screenFramePositionBuffer = null;
-        this.screenTexture = {};
-        this.outputTexture = null;
-        this._readPickingBuffer = this._readPickingBuffer_webgl2;
-        if (params.autoActivate || isEmpty(params.autoActivate)) {
-            this.start();
-        }
-    }
-    enableBlendOneSrcAlpha() {
-        let gl = this.handler.gl;
-        gl.enable(gl.BLEND);
-        gl.blendEquation(gl.FUNC_ADD);
-        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-    }
-    enableBlendDefault() {
-        let gl = this.handler.gl;
-        gl.enable(gl.BLEND);
-        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.
-     */
-    setEventsActivity(activity) {
-        this.events.active = activity;
-    }
-    addDepthCallback(sender, callback) {
-        let id = __depthCallbackCounter__++;
-        this._depthCallbacks.push({
-            id: id, callback: callback, sender: sender
-        });
-        return id;
-    }
-    removeDepthCallback(id) {
-        for (let i = 0; i < this._depthCallbacks.length; i++) {
-            if (id === this._depthCallbacks[i].id) {
-                this._depthCallbacks.splice(i, 1);
-                break;
-            }
-        }
-    }
-    /**
-     * Adds picking rendering callback function.
-     * @param {object} sender - Callback context.
-     * @param {Function} callback - Rendering callback.
-     * @returns {Number} Handler id
-     */
-    addPickingCallback(sender, callback) {
-        let id = __pickingCallbackCounter__++;
-        this._pickingCallbacks.push({
-            id: id, callback: callback, sender: sender
-        });
-        return id;
-    }
-    /**
-     * Removes picking rendering callback function.
-     * @param {Number} id - Handler id to remove.
-     */
-    removePickingCallback(id) {
-        for (let i = 0; i < this._pickingCallbacks.length; i++) {
-            if (id === this._pickingCallbacks[i].id) {
-                this._pickingCallbacks.splice(i, 1);
-                break;
-            }
-        }
-    }
-    getPickingObject(r, g, b) {
-        return this.colorObjects.get(`${r}_${g}_${b}`);
-    }
-    getPickingObjectArr(arr) {
-        return this.colorObjects.get(`${arr[0]}_${arr[1]}_${arr[2]}`);
-    }
-    getPickingObject3v(vec) {
-        return this.colorObjects.get(`${vec.x}_${vec.y}_${vec.z}`);
-    }
-    /**
-     * Assign picking color to the object.
-     * @public
-     * @param {Object} obj - Object that presume to be picked.
-     */
-    assignPickingColor(obj) {
-        if (!obj._pickingColor || obj._pickingColor.isZero()) {
-            let r = 0, g = 0, b = 0;
-            let str = "0_0_0";
-            while (!(r || g || b) || this.colorObjects.has(str)) {
-                r = randomi(1, 255);
-                g = randomi(1, 255);
-                b = randomi(1, 255);
-                str = `${r}_${g}_${b}`;
-            }
-            if (!obj._pickingColor) {
-                obj._pickingColor = new Vec3(r, g, b);
-            }
-            else {
-                obj._pickingColor.set(r, g, b);
-            }
-            obj._pickingColorU = new Float32Array([r / 255, g / 255, b / 255]);
-            this.colorObjects.set(str, obj);
-        }
-    }
-    /**
-     * Removes picking color from object.
-     * @public
-     * @param {Object} obj - Object to remove picking color.
-     */
-    clearPickingColor(obj) {
-        if (obj._pickingColor && !obj._pickingColor.isZero()) {
-            let c = obj._pickingColor;
-            if (!c.isZero()) {
-                this.colorObjects.delete(`${c.x}_${c.y}_${c.z}`);
-                c.x = c.y = c.z = 0;
-            }
-        }
-    }
-    /**
-     * Get the client width.
-     * @public
-     * @returns {number} -
-     */
-    getWidth() {
-        return this.handler.canvas.clientWidth;
-    }
-    /**
-     * Get the client height.
-     * @public
-     * @returns {number} -
-     */
-    getHeight() {
-        return this.handler.canvas.clientHeight;
-    }
-    /**
-     * Get center of the canvas
-     * @public
-     * @returns {Vec2} -
-     */
-    getCenter() {
-        let cnv = this.handler.canvas;
-        return new Vec2(Math.round(cnv.width * 0.5), Math.round(cnv.height * 0.5));
-    }
-    /**
-     * Get center of the screen viewport
-     * @public
-     * @returns {Vec2} -
-     */
-    getClientCenter() {
-        let cnv = this.handler.canvas;
-        return new Vec2(Math.round(cnv.clientWidth * 0.5), Math.round(cnv.clientHeight * 0.5));
-    }
-    /**
-     * Add the given control to the renderer.
-     * @param {Control} control - Control.
-     */
-    addControl(control) {
-        control.addTo(this);
-    }
-    /**
-     * Add the given controls array to the planet node.
-     * @param {Array.<Control>} cArr - Control array.
-     */
-    addControls(cArr) {
-        for (let i = 0; i < cArr.length; i++) {
-            cArr[i].addTo(this);
-        }
-    }
-    /**
-     * Remove control from the renderer.
-     * @param {Control} control  - Control.
-     */
-    removeControl(control) {
-        control.remove();
-    }
-    isInitialized() {
-        return this._initialized;
-    }
-    /**
-     * Renderer initialization.
-     * @public
-     */
-    initialize() {
-        if (this._initialized) {
-            return;
-        }
-        else {
-            this._initialized = true;
-        }
-        this.handler.initialize();
-        this.billboardsTextureAtlas.assignHandler(this.handler);
-        this.geoObjectsTextureAtlas.assignHandler(this.handler);
-        this.fontAtlas.assignHandler(this.handler);
-        this.handler.setFrameCallback(() => {
-            this.draw();
-        });
-        this.events.initialize();
-        // Bind console key
-        this.events.on("charkeypress", input.KEY_APOSTROPHE, function () {
-            cons.setVisibility(!cons.getVisibility());
-        });
-        this.handler.addProgram(screenFrame());
-        this.pickingFramebuffer = new Framebuffer(this.handler, {
-            width: 640,
-            height: 480,
-            targets: [{
-                    readAsync: true
-                }]
-        });
-        this.pickingFramebuffer.init();
-        this.depthFramebuffer = new Framebuffer(this.handler, {
-            width: 640,
-            height: 480,
-            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, {
-            useDepth: false
-        });
-        this.screenDepthFramebuffer.init();
-        if (this.handler.gl.type === "webgl") {
-            this._readPickingBuffer = this._readPickingBuffer_webgl1;
-            this.sceneFramebuffer = new Framebuffer(this.handler);
-            this.sceneFramebuffer.init();
-            this._fnScreenFrame = this._screenFrameNoMSAA;
-            this.screenTexture = {
-                screen: this.sceneFramebuffer.textures[0],
-                picking: this.pickingFramebuffer.textures[0],
-                depth: this.screenDepthFramebuffer.textures[0]
-            };
-        }
-        else {
-            let _maxMSAA = this.getMaxMSAA(this._internalFormat);
-            if (this._msaa > _maxMSAA) {
-                this._msaa = _maxMSAA;
-            }
-            this.handler.addPrograms([toneMapping()]);
-            this.handler.addPrograms([depth()]);
-            this.sceneFramebuffer = new Multisample(this.handler, {
-                size: 1,
-                msaa: this._msaa,
-                internalFormat: this._internalFormat,
-                filter: "LINEAR"
-            });
-            this.sceneFramebuffer.init();
-            this.blitFramebuffer = new Framebuffer(this.handler, {
-                size: 1,
-                useDepth: false,
-                targets: [{
-                        internalFormat: this._internalFormat,
-                        format: this._format,
-                        type: this._type,
-                        filter: "NEAREST"
-                    }]
-            });
-            this.blitFramebuffer.init();
-            this.toneMappingFramebuffer = new Framebuffer(this.handler, {
-                useDepth: false
-            });
-            this.toneMappingFramebuffer.init();
-            this._fnScreenFrame = this._screenFrameMSAA;
-            this.screenTexture = {
-                screen: this.toneMappingFramebuffer.textures[0],
-                picking: this.pickingFramebuffer.textures[0],
-                depth: this.screenDepthFramebuffer.textures[0],
-                frustum: this.depthFramebuffer.textures[0]
-            };
-        }
-        this.handler.ONCANVASRESIZE = () => {
-            this._resizeStart();
-            this.events.dispatch(this.events.resize, this.handler.canvas);
-            this._resizeEnd();
-            //clearTimeout(__resizeTimeout);
-            // __resizeTimeout = setTimeout(() => {
-            //     this._resizeEnd();
-            //     this.events.dispatch(this.events.resizeend, this.handler.canvas);
-            // }, 320);
-            this.events.dispatch(this.events.resizeend, this.handler.canvas);
-        };
-        this.screenFramePositionBuffer = this.handler.createArrayBuffer(new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), 2, 4);
-        this.outputTexture = this.screenTexture.screen;
-        this._initializeRenderNodes();
-        this._initializeControls();
-    }
-    _initializeControls() {
-        let temp = this.controls;
-        this.controls = {};
-        for (let i in temp) {
-            this.addControl(temp[i]);
-        }
-    }
-    resize() {
-        this._resizeEnd();
-    }
-    setCurrentScreen(screenName) {
-        this._currentOutput = screenName;
-        if (this.screenTexture[screenName]) {
-            this.outputTexture = this.screenTexture[screenName];
-        }
-    }
-    _resizeStart() {
-        let c = this.handler.canvas;
-        this.activeCamera.setAspectRatio(c.width / c.height);
-        this.sceneFramebuffer.setSize(c.width * 0.5, c.height * 0.5);
-        this.blitFramebuffer && this.blitFramebuffer.setSize(c.width * 0.5, c.height * 0.5, true);
-    }
-    _resizeEnd() {
-        let c = this.handler.canvas;
-        this.activeCamera.setAspectRatio(c.width / c.height);
-        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.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.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.depth = this.screenDepthFramebuffer.textures[0];
-            this.screenTexture.frustum = this.depthFramebuffer.textures[0];
-        }
-        this.setCurrentScreen(this._currentOutput);
-    }
-    removeNode(renderNode) {
-        // TODO: replace from RenderNode to this method
-        renderNode.remove();
-    }
-    /**
-     * Adds render node to the renderer.
-     * @public
-     * @param {RenderNode} renderNode - Render node.
-     */
-    addNode(renderNode) {
-        if (!this.renderNodes[renderNode.name]) {
-            renderNode.assign(this);
-            this._renderNodesArr.unshift(renderNode);
-            this.renderNodes[renderNode.name] = renderNode;
-        }
-        else {
-            cons.logWrn(`Node name ${renderNode.name} already exists.`);
-        }
-    }
-    _initializeRenderNodes() {
-        for (let i = 0; i < this._renderNodesArr.length; i++) {
-            this._renderNodesArr[i].initialize();
-        }
-    }
-    /**
-     * Adds render node to the renderer before specific node.
-     * @public
-     * @param {RenderNode} renderNode - Render node.
-     * @param {RenderNode} renderNodeBefore - Insert before the renderNodeBefore node.
-     */
-    addNodeBefore(renderNode, renderNodeBefore) {
-        if (!this.renderNodes[renderNode.name]) {
-            renderNode.assign(this);
-            this.renderNodes[renderNode.name] = renderNode;
-            for (let i = 0; i < this._renderNodesArr.length; i++) {
-                if (this._renderNodesArr[i].isEqual(renderNodeBefore)) {
-                    this._renderNodesArr.splice(i, 0, renderNode);
-                    break;
-                }
-            }
-            this._renderNodesArr.unshift(renderNode);
-        }
-        else {
-            cons.logWrn(`Node name ${renderNode.name} already exists.`);
-        }
-    }
-    /**
-     * Adds render nodes array to the renderer.
-     * @public
-     * @param {Array.<RenderNode>} nodesArr - Render nodes array.
-     */
-    addNodes(nodesArr) {
-        for (let i = 0; i < nodesArr.length; i++) {
-            this.addNode(nodesArr[i]);
-        }
-    }
-    getMaxMSAA(internalFormat) {
-        let gl = this.handler.gl;
-        let samples = gl.getInternalformatParameter(gl.RENDERBUFFER, gl[internalFormat], gl.SAMPLES);
-        return samples[0];
-    }
-    getMSAA() {
-        return this._msaa;
-    }
-    /**
-     * TODO: replace with cache friendly linked list by BillboardHandler, LabelHandler etc.
-     */
-    enqueueEntityCollectionsToDraw(ecArr, depthOrder = 0) {
-        if (!this._entityCollections[depthOrder]) {
-            this._entityCollections[depthOrder] = [];
-        }
-        this._entityCollections[depthOrder].push(...ecArr);
-    }
-    /**
-     * @protected
-     */
-    _drawEntityCollections(depthOrder) {
-        let ec = this._entityCollections[depthOrder];
-        if (ec.length) {
-            let gl = this.handler.gl;
-            this.enableBlendDefault();
-            // Point Clouds
-            let i = ec.length;
-            while (i--) {
-                ec[i]._fadingOpacity && ec[i].pointCloudHandler.draw();
-            }
-            // GeoObjects
-            i = ec.length;
-            while (i--) {
-                let eci = ec[i];
-                if (ec[i]._fadingOpacity) {
-                    eci.events.dispatch(eci.events.draw, eci);
-                    ec[i].geoObjectHandler.draw();
-                }
-            }
-            // billboards pass
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, this.billboardsTextureAtlas.texture);
-            i = ec.length;
-            while (i--) {
-                let eci = ec[i];
-                eci._fadingOpacity && eci.billboardHandler.draw();
-            }
-            // labels pass
-            let fa = this.fontAtlas.atlasesArr;
-            for (i = 0; i < fa.length; i++) {
-                gl.activeTexture(gl.TEXTURE0 + i);
-                gl.bindTexture(gl.TEXTURE_2D, fa[i].texture);
-            }
-            i = ec.length;
-            while (i--) {
-                ec[i]._fadingOpacity && ec[i].labelHandler.draw();
-            }
-            // rays
-            i = ec.length;
-            while (i--) {
-                ec[i]._fadingOpacity && ec[i].rayHandler.draw();
-            }
-            // polyline pass
-            i = ec.length;
-            while (i--) {
-                ec[i]._fadingOpacity && ec[i].polylineHandler.draw();
-            }
-            // Strip pass
-            i = ec.length;
-            while (i--) {
-                ec[i]._fadingOpacity && ec[i].stripHandler.draw();
-            }
-        }
-    }
-    _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.
-     * @public
-     */
-    draw() {
-        this.activeCamera.checkMoveEnd();
-        let e = this.events;
-        e.handleEvents();
-        let sceneFramebuffer = this.sceneFramebuffer;
-        sceneFramebuffer.activate();
-        let h = this.handler, gl = h.gl;
-        gl.clearColor(0.0, 0.0, 0.0, 1.0);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-        this.enableBlendDefault();
-        e.dispatch(e.draw, this);
-        let frustums = this.activeCamera.frustums;
-        let pointerEvent = e.pointerEvent();
-        let mouseFree = !e.mouseState.leftButtonDown && !e.mouseState.rightButtonDown;
-        // 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);
-            let i = rn.length;
-            while (i--) {
-                rn[i].preDrawNode();
-            }
-            i = rn.length;
-            while (i--) {
-                this.enableBlendDefault();
-                rn[i].drawNode();
-            }
-            this._drawEntityCollections(0);
-            e.dispatch(e.drawtransparent, this);
-            if (pointerEvent && mouseFree) {
-                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 && mouseFree) {
-                    this._drawPickingBuffer(i);
-                }
-                this._drawDepthBuffer(i);
-            }
-            this._clearEntityCollectionQueue(i);
-        }
-        sceneFramebuffer.deactivate();
-        this.blitFramebuffer && sceneFramebuffer.blitTo(this.blitFramebuffer, 0);
-        if (pointerEvent && mouseFree) {
-            this._readPickingBuffer();
-        }
-        if (mouseFree) {
-            this._readDepthBuffer();
-        }
-        // Tone mapping followed by rendering on the screen
-        this._fnScreenFrame();
-        e.dispatch(e.postdraw, this);
-        e.mouseState.wheelDelta = 0;
-        e.mouseState.justStopped = false;
-        e.mouseState.moving = false;
-        e.touchState.moving = false;
-    }
-    getImageDataURL(type = "image/png", quality = 1.0) {
-        this.draw();
-        return this.handler.canvas ? this.handler.canvas.toDataURL(type, quality) : "";
-    }
-    _screenFrameMSAA() {
-        let h = this.handler;
-        let sh = h.programs.toneMapping, p = sh._program, gl = h.gl;
-        gl.disable(gl.DEPTH_TEST);
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
-        gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
-        this.toneMappingFramebuffer.activate();
-        sh.activate();
-        // screen texture
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, this.blitFramebuffer.textures[0]);
-        gl.uniform1i(p.uniforms.hdrBuffer, 0);
-        gl.uniform1f(p.uniforms.gamma, this.gamma);
-        gl.uniform1f(p.uniforms.exposure, this.exposure);
-        gl.uniform1f(p.uniforms.whitepoint, this.whitepoint);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-        this.toneMappingFramebuffer.deactivate();
-        // SCREEN PASS
-        sh = h.programs.screenFrame;
-        p = sh._program;
-        sh.activate();
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, this.outputTexture);
-        gl.uniform1i(p.uniforms.texture, 0);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-        gl.enable(gl.DEPTH_TEST);
-    }
-    _screenFrameNoMSAA() {
-        let h = this.handler;
-        let sh = h.programs.screenFrame, p = sh._program, gl = h.gl;
-        gl.disable(gl.DEPTH_TEST);
-        sh.activate();
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, this.outputTexture);
-        gl.uniform1i(p.uniforms.texture, 0);
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
-        gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-        gl.enable(gl.DEPTH_TEST);
-    }
-    /**
-     * Draw picking objects framebuffer.
-     * @private
-     */
-    _drawPickingBuffer(depthOrder) {
-        this.pickingFramebuffer.activate();
-        let h = this.handler;
-        let gl = h.gl;
-        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);
-        }
-        //
-        // 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();
-    }
-    _drawDepthBuffer(depthOrder) {
-        this.depthFramebuffer.activate();
-        let h = this.handler;
-        let gl = h.gl;
-        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);
-        }
-        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();
-        //
-        // 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;
-        let h = this.pickingFramebuffer.height;
-        x = Math.round(x * w);
-        y = Math.round(y * h);
-        let ind = (y * w + x) * 4;
-        let _tempPickingPix_ = this.pickingFramebuffer?.pixelBuffers[0].data;
-        if (_tempPickingPix_) {
-            outColor[0] = _tempPickingPix_[ind];
-            outColor[1] = _tempPickingPix_[ind + 1];
-            outColor[2] = _tempPickingPix_[ind + 2];
-        }
-    }
-    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;
-        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
-     * @public
-     */
-    start() {
-        if (!this._initialized) {
-            this.initialize();
-        }
-        this.handler.start();
-    }
-    destroy() {
-        for (let i in this.controls) {
-            this.controls[i].remove();
-        }
-        for (let i = 0; i < this._renderNodesArr.length; i++) {
-            this._renderNodesArr[i].remove();
-        }
-        this.div = null;
-        this._renderNodesArr = [];
-        this.renderNodes = {};
-        //@ts-ignore
-        this.activeCamera = null;
-        this.controls = {};
-        this.controlsBag = {};
-        this.colorObjects.clear();
-        // @ts-ignore
-        this.colorObjects = null;
-        this._pickingCallbacks = [];
-        this.pickingFramebuffer = null;
-        //@ts-ignore
-        this._tempPickingPix_ = null;
-        this._depthCallbacks = [];
-        this.depthFramebuffer = null;
-        this.sceneFramebuffer = null;
-        this.blitFramebuffer = null;
-        this.toneMappingFramebuffer = null;
-        // todo
-        //this.billboardsTextureAtlas.clear();
-        //this.geoObjectsTextureAtlas.clear()
-        //this.fontAtlas.clear();
-        this._entityCollections = [[]];
-        this.handler.ONCANVASRESIZE = null;
-        this.handler.destroy();
-        // @ts-ignore
-        this.handler = null;
-        this._initialized = false;
-    }
-}
-export { Renderer };