@openglobus/og 0.11.7 → 0.11.8

package/src/og/entity/BaseBillboard.js

@@ -133,7 +133,7 @@ class BaseBillboard {
         this._position.y = y;
         this._position.z = z;
         Vec3.doubleToTwoFloats(this._position, this._positionHigh, this._positionLow);
-        if (this._isReady) {
+        if (this._isReady && this._handler) {
             this._handler.setPositionArr(this._handlerIndex, this._positionHigh, this._positionLow);
         } else if (this._lockId !== LOCK_FREE) {
             this._lockId = LOCK_UPDATE;
@@ -150,7 +150,7 @@ class BaseBillboard {
         this._position.y = position.y;
         this._position.z = position.z;
         Vec3.doubleToTwoFloats(position, this._positionHigh, this._positionLow);
-        if (this._isReady) {
+        if (this._isReady && this._handler) {
             this._handler.setPositionArr(this._handlerIndex, this._positionHigh, this._positionLow);
         } else if (this._lockId !== LOCK_FREE) {
             this._lockId = LOCK_UPDATE;
@@ -177,7 +177,7 @@ class BaseBillboard {
         this._offset.x = x;
         this._offset.y = y;
         z != undefined && (this._offset.z = z);
-        if (this._isReady) {
+        if (this._isReady && this._handler) {
             this._handler.setOffsetArr(this._handlerIndex, this._offset);
         } else if (this._lockId !== LOCK_FREE) {
             this._lockId = LOCK_UPDATE;
@@ -210,7 +210,7 @@ class BaseBillboard {
     setRotation(rotation) {
         if (rotation !== this._rotation) {
             this._rotation = rotation;
-            if (this._isReady) {
+            if (this._isReady && this._handler) {
                 this._handler.setRotationArr(this._handlerIndex, rotation);
             } else if (this._lockId !== LOCK_FREE) {
                 this._lockId = LOCK_UPDATE;
@@ -235,7 +235,7 @@ class BaseBillboard {
     setOpacity(a) {
         if (a !== this._color.w) {
             a != undefined && (this._color.w = a);
-            if (this._isReady) {
+            if (this._isReady && this._handler) {
                 this._handler.setRgbaArr(this._handlerIndex, this._color);
             } else if (this._lockId !== LOCK_FREE) {
                 this._lockId = LOCK_UPDATE;
@@ -257,7 +257,7 @@ class BaseBillboard {
             this._color.y = g;
             this._color.z = b;
             a != undefined && (this._color.w = a);
-            if (this._isReady) {
+            if (this._isReady && this._handler) {
                 this._handler.setRgbaArr(this._handlerIndex, this._color);
             } else if (this._lockId !== LOCK_FREE) {
                 this._lockId = LOCK_UPDATE;
@@ -300,7 +300,7 @@ class BaseBillboard {
     setVisibility(visibility) {
         if (visibility !== this._visibility) {
             this._visibility = visibility;
-            if (this._isReady) {
+            if (this._isReady && this._handler) {
                 this._handler.setVisibility(this._handlerIndex, visibility);
             } else if (this._lockId !== LOCK_FREE) {
                 this._lockId = LOCK_UPDATE;
@@ -328,7 +328,7 @@ class BaseBillboard {
         this._alignedAxis.x = x;
         this._alignedAxis.y = y;
         this._alignedAxis.z = z;
-        if (this._isReady) {
+        if (this._isReady && this._handler) {
             this._handler.setAlignedAxisArr(this._handlerIndex, this._alignedAxis);
         } else if (this._lockId !== LOCK_FREE) {
             this._lockId = LOCK_UPDATE;
@@ -368,7 +368,7 @@ class BaseBillboard {
      * @param {Vec3} color - Picking color.
      */
     setPickingColor3v(color) {
-        if (this._isReady) {
+        if (this._isReady && this._handler) {
             this._handler.setPickingColorArr(this._handlerIndex, color);
         } else if (this._lockId !== LOCK_FREE) {
             this._lockId = LOCK_UPDATE;

package/src/og/entity/Label.js

@@ -122,7 +122,7 @@ class Label extends BaseBillboard {
      */
     setText(text) {
         this._text = text.toString();
-        if (this._isReady) {
+        if (this._isReady && this._handler) {
             this._handler.setText(this._handlerIndex, text, this._fontIndex, this._align);
         }
     }
@@ -143,7 +143,7 @@ class Label extends BaseBillboard {
      */
     setAlign(align) {
         this._align = STR2ALIGN[align.trim().toLowerCase()];
-        if (this._isReady) {
+        if (this._isReady && this._handler) {
             this._handler.setText(this._handlerIndex, this._text, this._fontIndex, this._align);
         } else if (this._lockId !== LOCK_FREE) {
             this._lockId = LOCK_UPDATE;
@@ -186,7 +186,7 @@ class Label extends BaseBillboard {
     setSize(size) {
         if (size !== this._size) {
             this._size = size;
-            if (this._isReady) {
+            if (this._isReady && this._handler) {
                 this._handler.setSizeArr(this._handlerIndex, size);
             } else if (this._lockId !== LOCK_FREE) {
                 this._lockId = LOCK_UPDATE;
@@ -210,7 +210,7 @@ class Label extends BaseBillboard {
      */
     setOutline(outline) {
         this._outline = outline;
-        if (this._isReady) {
+        if (this._isReady && this._handler) {
             this._handler.setOutlineArr(this._handlerIndex, outline);
         } else if (this._lockId !== LOCK_FREE) {
             this._lockId = LOCK_UPDATE;
@@ -250,7 +250,7 @@ class Label extends BaseBillboard {
             this._outlineColor.y = g;
             this._outlineColor.z = b;
             this._outlineColor.w = a;
-            if (this._isReady) {
+            if (this._isReady && this._handler) {
                 this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
             } else if (this._lockId !== LOCK_FREE) {
                 this._lockId = LOCK_UPDATE;
@@ -293,7 +293,7 @@ class Label extends BaseBillboard {
     setOutlineOpacity(opacity) {
         if (opacity !== this._outlineColor.w) {
             this._outlineColor.w = opacity;
-            if (this._isReady) {
+            if (this._isReady && this._handler) {
                 this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
             } else if (this._lockId !== LOCK_FREE) {
                 this._lockId = LOCK_UPDATE;
@@ -323,7 +323,7 @@ class Label extends BaseBillboard {
 
     _applyFontIndex(fontIndex) {
         this._fontIndex = fontIndex;
-        if (this._isReady) {
+        if (this._isReady && this._handler) {
             this._handler.setFontIndexArr(this._handlerIndex, this._fontIndex);
             this._handler.setText(this._handlerIndex, this._text, this._fontIndex, this._align);
         } else if (this._lockId !== LOCK_FREE) {

package/src/og/layer/CanvasTiles.js

@@ -35,7 +35,6 @@ const EVENT_NAMES = [
  * @param {String} [name="noname"] - Layer name.
  * @param {Object} options:
  * @param {number} [options.opacity=1.0] - Layer opacity.
- * @param {Array.<number>} [options.transparentColor=[-1,-1,-1]] - RGB color that defines transparent color. (exactly 3 entries)
  * @param {number} [options.minZoom=0] - Minimal visibility zoom level.
  * @param {number} [options.maxZoom=0] - Maximal visibility zoom level.
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.

package/src/og/layer/GeoImage.js

@@ -141,14 +141,10 @@ class GeoImage extends BaseGeoImage {
         var sha = sh.attributes,
             shu = sh.uniforms;
 
-        var tr = this.transparentColor[0],
-            tg = this.transparentColor[1],
-            tb = this.transparentColor[2];
-
         gl.disable(gl.CULL_FACE);
 
         f.bindOutputTexture(this._materialTexture);
-        gl.clearColor(tr, tg, tb, 0.0);
+        gl.clearColor(0.0, 0.0, 0.0, 0.0);
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.bindBuffer(gl.ARRAY_BUFFER, creator._texCoordsBuffer);
 
@@ -189,14 +185,10 @@ class GeoImage extends BaseGeoImage {
         var sha = sh.attributes,
             shu = sh.uniforms;
 
-        var tr = this.transparentColor[0],
-            tg = this.transparentColor[1],
-            tb = this.transparentColor[2];
-
         gl.disable(gl.CULL_FACE);
 
         f.bindOutputTexture(this._materialTexture);
-        gl.clearColor(tr, tg, tb, 0.0);
+        gl.clearColor(0.0, 0.0, 0.0, 0.0);
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.bindBuffer(gl.ARRAY_BUFFER, creator._texCoordsBuffer);
 

package/src/og/layer/GeoTexture2d.js

@@ -67,14 +67,10 @@ class GeoTexture2d extends BaseGeoImage {
         var sha = sh.attributes,
             shu = sh.uniforms;
 
-        var tr = this.transparentColor[0],
-            tg = this.transparentColor[1],
-            tb = this.transparentColor[2];
-
         gl.disable(gl.CULL_FACE);
 
         f.bindOutputTexture(this._materialTexture);
-        gl.clearColor(tr, tg, tb, 0.0);
+        gl.clearColor(0.0, 0.0, 0.0, 0.0);
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.bindBuffer(gl.ARRAY_BUFFER, creator._texCoordsBuffer);
         
@@ -117,14 +113,10 @@ class GeoTexture2d extends BaseGeoImage {
         var sha = sh.attributes,
             shu = sh.uniforms;
 
-        var tr = this.transparentColor[0],
-            tg = this.transparentColor[1],
-            tb = this.transparentColor[2];
-
         gl.disable(gl.CULL_FACE);
 
         f.bindOutputTexture(this._materialTexture);
-        gl.clearColor(tr, tg, tb, 0.0);
+        gl.clearColor(0.0, 0.0, 0.0, 0.0);
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.bindBuffer(gl.ARRAY_BUFFER, creator._texCoordsBuffer);
 

package/src/og/layer/GeoVideo.js

@@ -211,14 +211,10 @@ class GeoVideo extends BaseGeoImage {
         var sha = sh.attributes,
             shu = sh.uniforms;
 
-        var tr = this.transparentColor[0],
-            tg = this.transparentColor[1],
-            tb = this.transparentColor[2];
-
         gl.disable(gl.CULL_FACE);
 
         f.bindOutputTexture(this._materialTexture);
-        gl.clearColor(tr, tg, tb, 0.0);
+        gl.clearColor(0.0, 0.0, 0.0, 0.0);
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.bindBuffer(gl.ARRAY_BUFFER, creator._texCoordsBuffer);
 
@@ -265,14 +261,10 @@ class GeoVideo extends BaseGeoImage {
         var sha = sh.attributes,
             shu = sh.uniforms;
 
-        var tr = this.transparentColor[0],
-            tg = this.transparentColor[1],
-            tb = this.transparentColor[2];
-
         gl.disable(gl.CULL_FACE);
 
         f.bindOutputTexture(this._materialTexture);
-        gl.clearColor(tr, tg, tb, 0.0);
+        gl.clearColor(0.0, 0.0, 0.0, 0.0);
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.bindBuffer(gl.ARRAY_BUFFER, creator._texCoordsBuffer);
 

package/src/og/layer/Layer.js

@@ -22,7 +22,6 @@ export const FADING_FACTOR = 0.29;
  * @param {String} [name="noname"] - Layer name.
  * @param {Object} [options] - Layer options:
  * @param {number} [options.opacity=1.0] - Layer opacity.
- * @param {Array.<number>} [options.transparentColor=[-1,-1,-1]] - RGB color that defines transparent color. (exactly 3 entries)
  * @param {number} [options.minZoom=0] - Minimal visibility zoom level.
  * @param {number} [options.maxZoom=0] - Maximal visibility zoom level.
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
@@ -30,11 +29,7 @@ export const FADING_FACTOR = 0.29;
  * @param {boolean} [options.visibility=true] - Layer visibility.
  * @param {boolean} [options.isSRGB=false] - Layer image webgl nternal format.
  * @param {Extent} [options.extent=[[-180.0, -90.0], [180.0, 90.0]]] - Visible extent.
- * @param {Vec3} [options.ambient=[0.1, 0.1, 0.1]] - Ambient RGB color.
- * @param {Vec3} [options.diffuse=[0.9, 0.9, 0.9]] - Diffuse RGB color.
- * @param {Vec3} [options.specular=[0.00025, 0.00015, 0.0001]] - Specular RGB color.
  * @param {string} [options.textureFilter="anisotropic"] - Image texture filter. Available values: "nearest", "linear", "mipmap" and "anisotropic".
- * @param {Number} [options.shininess=100] - Shininess.
  *
  * @fires og.Layer#visibilitychange
  * @fires og.Layer#add
@@ -86,13 +81,6 @@ class Layer {
          */
         this._opacity = options.opacity || 1.0;
 
-        /**
-         * Transparent RGB color mask.
-         * @public
-         * @type {Array.<number>} - (exactly 3 entries)
-         */
-        this.transparentColor = options.transparentColor || [-1, -1, -1];
-
         /**
          * Minimal zoom level when layer is visibile.
          * @public
@@ -107,16 +95,6 @@ class Layer {
          */
         this.maxZoom = options.maxZoom || 50;
 
-        /**
-         * Layer light material parameters.
-         * @public
-         * @type {Object}
-         */
-        this.ambient = utils.createColorRGB(options.ambient, new Vec3(0.2, 0.2, 0.2));
-        this.diffuse = utils.createColorRGB(options.diffuse, new Vec3(0.8, 0.8, 0.8));
-        this.specular = utils.createColorRGB(options.specular, new Vec3(0.0003, 0.0003, 0.0003));
-        this.shininess = options.shininess || 20.0;
-
         /**
          * Planet node.
          * @protected

package/src/og/layer/WMS.js

@@ -17,7 +17,6 @@ import { XYZ } from "./XYZ.js";
  * @param {string} name - Layer name.
  * @param {Object} options - Options:
  * @param {number} [options.opacity=1.0] - Layer opacity.
- * @param {Array.<number>} [options.transparentColor=[-1,-1,-1]] - RGB color that defines transparent color.
  * @param {number} [options.minZoom=0] - Minimal visibility zoom level.
  * @param {number} [options.maxZoom=0] - Maximal visibility zoom level.
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
@@ -36,7 +35,6 @@ import { XYZ } from "./XYZ.js";
  *     opacity: 0.5,
  *     zIndex: 50,
  *     attribution: 'USA states - geoserver WMS example',
- *     transparentColor: [1.0, 1.0, 1.0],
  *     version: "1.1.1",
  *     visibility: false }
  * );

package/src/og/layer/XYZ.js

@@ -17,7 +17,6 @@ import { RENDERING } from "../quadTree/quadTree.js";
  * @param {string} name - Layer name.
  * @param {Object} options:
  * @param {number} [options.opacity=1.0] - Layer opacity.
- * @param {Array.<number>} [options.transparentColor=[-1,-1,-1]] - RGB color that defines transparent color. (exactly 3 entries)
  * @param {Array.<string>} [options.subdomains=['a','b','c']] - Subdomains of the tile service.
  * @param {number} [options.minZoom=0] - Minimal visibility zoom level.
  * @param {number} [options.maxZoom=0] - Maximal visibility zoom level.
@@ -51,8 +50,6 @@ class XYZ extends Layer {
 
         this.events.registerNames(EVENT_NAMES);
 
-        this.transparentColor = options.transparentColor || [-1, -1, -1];
-
         /**
          * Tile url source template.
          * @public
@@ -103,8 +100,10 @@ class XYZ extends Layer {
      * Abort loading tiles.
      * @public
      */
-    abortLoading() {
-        this._planet._tileLoader.abort();
+    abortLoading() {
+        if (this._planet) {
+            this._planet._tileLoader.abort();
+        }
     }
 
     /**

package/src/og/renderer/Renderer.js

@@ -182,8 +182,7 @@ class Renderer {
          * @private
          * @type {Array.<number>} - (exactly 3 entries)
          */
-        this._prevPickingColor = [0, 0, 0];
-
+        this._prevPickingColor = new Uint8Array(4);
         this._tempPickingColor_ = new Uint8Array(4);
 
         this._initialized = false;
@@ -211,6 +210,8 @@ class Renderer {
 
         this._currentOutput = "screen";
 
+        this.isActiveBackbuffers = true;
+
         this.labelWorker = new LabelWorker();
     }
 
@@ -424,20 +425,10 @@ class Renderer {
             useDepth: false
         }).init();
 
-        //this.depthFramebuffer = new Framebuffer(this.handler, {
-        //    size: 2,
-        //    internalFormat: ["RGBA", "RGBA"],
-        //    format: ["RGBA", "RGBA"],
-        //    type: ["UNSIGNED_BYTE", "UNSIGNED_BYTE"],
-        //    attachment: ["COLOR_ATTACHMENT", "COLOR_ATTACHMENT"],
-        //    useDepth: true
-        //}).init();
         this.screenDepthFramebuffer = new Framebuffer(this.handler, {
             useDepth: false
         }).init();
 
-        this.readPixels = () => {};
-
         if (this.handler.gl.type === "webgl") {
             this.sceneFramebuffer = new Framebuffer(this.handler);
             this.sceneFramebuffer.init();
@@ -530,10 +521,10 @@ class Renderer {
             this.toneMappingFramebuffer.setSize(c.width, c.height, true);
 
         this.depthFramebuffer &&
-            this.depthFramebuffer.setSize(c.width, c.height, true);
+            this.depthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
 
         this.screenDepthFramebuffer &&
-            this.screenDepthFramebuffer.setSize(c.width, c.height, true);
+            this.screenDepthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
 
         if (this.handler.gl.type === "webgl") {
             this.screenTexture.screen = this.sceneFramebuffer.textures[0];
@@ -753,6 +744,8 @@ class Renderer {
 
         let frustums = this.activeCamera.frustums;
 
+        let anyEvent = this.events.mouseState.anyEvent() && this.isActiveBackbuffers;
+
         // Rendering scene nodes and entityCollections
         let rn = this._renderNodesArr;
         let k = frustums.length;
@@ -765,17 +758,19 @@ class Renderer {
             }
             this._drawEntityCollections();
 
-            this._drawDepthBuffer(k);
-
-            // Rendering picking callbacks and refresh pickingColor
-            this._drawPickingBuffer(k);
+            if (anyEvent) {
+                this._drawPickingBuffer(k);
+            }
         }
 
         sfb.deactivate();
 
         this.blitFramebuffer && sfb.blitTo(this.blitFramebuffer);
 
-        if (e.mouseState.anyEvent()) {
+        if (anyEvent) {
+            // It works ONLY for 0 (closest) frustum
+            this._drawDepthBuffer();
+
             this._readPickingColor();
         }
 
@@ -846,99 +841,81 @@ class Renderer {
         gl.enable(gl.DEPTH_TEST);
     }
 
-    /**
-     * Returns picking object by screen coordinates
-     * @param {number} x - X position
-     * @param {number} y - Y position
-     * @return {Object} -
-     */
-    getPickingObject(x, y) {
-        let cnv = this.renderer.handler.canvas,
-            c = new Uint8Array(3);
-        this.readPixels(c, x / cnv.clientWidth, (cnv.clientHeight - y) / cnv.clientHeight, 1);
-        return this.colorObjects[c[0] + "_" + c[1] + "_" + c[2]];
-    }
-
     /**
      * Draw picking objects framebuffer.
      * @private
      */
     _drawPickingBuffer(frustumIndex) {
-        if (this.events.mouseState.anyEvent()) {
-            this.pickingFramebuffer.activate();
-
-            var h = this.handler;
-            var gl = h.gl;
+        this.pickingFramebuffer.activate();
 
-            if (frustumIndex === this.activeCamera.FARTHEST_FRUSTUM_INDEX) {
-                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);
-            }
+        var h = this.handler;
+        var gl = h.gl;
 
-            gl.disable(h.gl.BLEND);
+        if (frustumIndex === this.activeCamera.FARTHEST_FRUSTUM_INDEX) {
+            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);
+        }
 
-            var dp = this._pickingCallbacks;
-            var i = dp.length;
-            while (i--) {
-                /**
-                 * This callback renders picking frame.
-                 * @callback og.Renderer~pickingCallback
-                 */
-                dp[i].callback.call(dp[i].sender);
-            }
+        gl.disable(h.gl.BLEND);
 
-            this.pickingFramebuffer.deactivate();
+        var dp = this._pickingCallbacks;
+        var i = dp.length;
+        while (i--) {
+            /**
+             * This callback renders picking frame.
+             * @callback og.Renderer~pickingCallback
+             */
+            dp[i].callback.call(dp[i].sender);
         }
-    }
 
-    _drawDepthBuffer(frustumIndex) {
-        if (frustumIndex === 0) {
-            this.depthFramebuffer.activate();
+        this.pickingFramebuffer.deactivate();
+    }
 
-            var h = this.handler;
-            var gl = h.gl;
+    _drawDepthBuffer() {
+        this.depthFramebuffer.activate();
 
-            gl.clearColor(0.0, 0.0, 0.0, 1.0);
-            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        var h = this.handler;
+        var gl = h.gl;
 
-            gl.enable(gl.DEPTH_TEST);
+        gl.clearColor(0.0, 0.0, 0.0, 1.0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-            var dp = this._depthCallbacks;
-            var i = dp.length;
-            while (i--) {
-                /**
-                 * This callback renders depth frame.
-                 * @callback og.Renderer~depthCallback
-                 */
-                dp[i].callback.call(dp[i].sender);
-            }
+        gl.enable(gl.DEPTH_TEST);
 
-            this.depthFramebuffer.deactivate();
+        var dp = this._depthCallbacks;
+        var i = dp.length;
+        while (i--) {
+            /**
+             * This callback renders depth frame.
+             * @callback og.Renderer~depthCallback
+             */
+            dp[i].callback.call(dp[i].sender);
+        }
 
-            //
-            // PASS to depth visualization
-            var sh = h.programs.depth,
-                p = sh._program;
+        this.depthFramebuffer.deactivate();
 
-            gl = h.gl;
+        //
+        // PASS to depth visualization
+        this.screenDepthFramebuffer.activate();
+        var sh = h.programs.depth,
+            p = sh._program;
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._screenFrameCornersBuffer);
-            gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
+        gl = h.gl;
 
-            this.screenDepthFramebuffer.activate();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._screenFrameCornersBuffer);
+        gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
 
-            sh.activate();
+        sh.activate();
 
-            gl.activeTexture(gl.TEXTURE1);
-            gl.bindTexture(gl.TEXTURE_2D, this.depthFramebuffer.textures[1]);
-            gl.uniform1i(p.uniforms.depthTexture, 1);
+        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);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
-            this.screenDepthFramebuffer.deactivate();
-        }
+        this.screenDepthFramebuffer.deactivate();
     }
 
     _readPickingColor() {
@@ -952,15 +929,13 @@ class Renderer {
 
             var pc = this._currPickingColor;
             if (ts.x || ts.y) {
+                this.pickingFramebuffer.activate();
                 this.pickingFramebuffer.readPixels(pc, ts.nx, 1.0 - ts.ny);
-                if (!(pc[0] || pc[1] || pc[2])) {
-                    this.readPixels(pc, ts.nx, 1.0 - ts.ny, 1);
-                }
+                this.pickingFramebuffer.deactivate();
             } else {
+                this.pickingFramebuffer.activate();
                 this.pickingFramebuffer.readPixels(pc, ms.nx, 1.0 - ms.ny);
-                if (!(pc[0] || pc[1] || pc[2])) {
-                    this.readPixels(pc, ms.nx, 1.0 - ms.ny, 1);
-                }
+                this.pickingFramebuffer.deactivate();
             }
         }
     }

package/src/og/renderer/RendererEvents.js

@@ -828,8 +828,10 @@ class RendererEvents extends Events {
 
         if (ts.touchStart) {
             var r = this.renderer;
-
+
+            r.pickingFramebuffer.activate();
             r.pickingFramebuffer.readPixels(r._currPickingColor, ts.nx, 1.0 - ts.ny, 1);
+            r.pickingFramebuffer.deactivate();
 
             var o = r.colorObjects;
             var c = r._currPickingColor;