@openglobus/og 0.11.6 → 0.11.7

package/src/og/entity/Label.js

@@ -7,6 +7,7 @@
 import * as utils from "../utils/shared.js";
 import { BaseBillboard } from "./BaseBillboard.js";
 import { Vec4 } from "../math/Vec4.js";
+import { LOCK_FREE, LOCK_UPDATE } from "./LabelWorker.js";
 
 const ALIGN = {
     RIGHT: 0,
@@ -121,8 +122,8 @@ class Label extends BaseBillboard {
      */
     setText(text) {
         this._text = text.toString();
-        if (this._isReady) {
-            this._handler.setText(this._handlerIndex, text, this._fontIndex, this._align);
+        if (this._isReady) {
+            this._handler.setText(this._handlerIndex, text, this._fontIndex, this._align);
         }
     }
 
@@ -142,10 +143,10 @@ class Label extends BaseBillboard {
      */
     setAlign(align) {
         this._align = STR2ALIGN[align.trim().toLowerCase()];
-        if (this._isReady) {
-            this._handler.setText(this._handlerIndex, this._text, this._fontIndex, this._align);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (this._isReady) {
+            this._handler.setText(this._handlerIndex, this._text, this._fontIndex, this._align);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
         }
     }
 
@@ -183,11 +184,13 @@ class Label extends BaseBillboard {
      * @param {number} size - Label size in pixels.
      */
     setSize(size) {
-        this._size = size;
-        if (this._isReady) {
-            this._handler.setSizeArr(this._handlerIndex, size);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (size !== this._size) {
+            this._size = size;
+            if (this._isReady) {
+                this._handler.setSizeArr(this._handlerIndex, size);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
         }
     }
 
@@ -207,10 +210,10 @@ class Label extends BaseBillboard {
      */
     setOutline(outline) {
         this._outline = outline;
-        if (this._isReady) {
-            this._handler.setOutlineArr(this._handlerIndex, outline);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (this._isReady) {
+            this._handler.setOutlineArr(this._handlerIndex, outline);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
         }
     }
 
@@ -229,10 +232,8 @@ class Label extends BaseBillboard {
      * @param {number} a - Label opacity.
      */
     setOpacity(a) {
-        this._color.w = a;
-        this.setColor4v(this._color);
-        this._outlineColor.w = a;
-        this.setOutlineColor4v(this._outlineColor);
+        super.setOpacity(a);
+        this.setOutlineOpacity(a);
     }
 
     /**
@@ -244,14 +245,16 @@ class Label extends BaseBillboard {
      * @param {number} a - Alpha.
      */
     setOutlineColor(r, g, b, a) {
-        this._outlineColor.x = r;
-        this._outlineColor.y = g;
-        this._outlineColor.z = b;
-        this._outlineColor.w = a;
-        if (this._isReady) {
-            this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (a !== this._outlineColor.w || r !== this._outlineColor.x || g !== this._outlineColor.y || b !== this._outlineColor.z) {
+            this._outlineColor.x = r;
+            this._outlineColor.y = g;
+            this._outlineColor.z = b;
+            this._outlineColor.w = a;
+            if (this._isReady) {
+                this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
         }
     }
 
@@ -261,15 +264,7 @@ class Label extends BaseBillboard {
      * @param {Vec4} rgba - Color vector.
      */
     setOutlineColor4v(rgba) {
-        this._outlineColor.x = rgba.x;
-        this._outlineColor.y = rgba.y;
-        this._outlineColor.z = rgba.z;
-        this._outlineColor.w = rgba.w;
-        if (this._isReady) {
-            this._handler.setOutlineColorArr(this._handlerIndex, rgba);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
-        }
+        this.setOutlineColor(rgba.x, rgba.y, rgba.z, rgba.w);
     }
 
     /**
@@ -296,11 +291,13 @@ class Label extends BaseBillboard {
      * @param {number} opacity - Outline opacity.
      */
     setOutlineOpacity(opacity) {
-        this._outlineColor.w = opacity;
-        if (this._isReady) {
-            this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (opacity !== this._outlineColor.w) {
+            this._outlineColor.w = opacity;
+            if (this._isReady) {
+                this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
         }
     }
 
@@ -329,8 +326,8 @@ class Label extends BaseBillboard {
         if (this._isReady) {
             this._handler.setFontIndexArr(this._handlerIndex, this._fontIndex);
             this._handler.setText(this._handlerIndex, this._text, this._fontIndex, this._align);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
         }
     }
 
@@ -340,11 +337,11 @@ class Label extends BaseBillboard {
      * @param {utils.FontAtlas} fontAtlas - Font atlas.
      */
     assignFontAtlas(fontAtlas) {
-        if (!this._fontAtlas) {
-            this._fontAtlas = fontAtlas;
+        if (!this._fontAtlas) {
+            this._fontAtlas = fontAtlas;
         }
         this.update();
-    }
+    }
 }
 
-export { Label, ALIGN };
+export { Label, ALIGN };

package/src/og/entity/LabelHandler.js

@@ -8,6 +8,7 @@ import * as shaders from "../shaders/label.js";
 import { ALIGN } from "./Label.js";
 import { BillboardHandler } from "./BillboardHandler.js";
 import { concatTypedArrays, spliceTypedArray } from "../utils/shared.js";
+import { LOCK_FREE } from "./LabelWorker.js";
 
 const PICKINGCOLOR_BUFFER = 0;
 const POSITION_BUFFER = 1;
@@ -81,28 +82,28 @@ class LabelHandler extends BillboardHandler {
             this.assignFontAtlas(label);
             this.refresh();
         }
-    }
-
-    _addLabelToArrays(label) {
-        this._renderer.labelWorker.make(this, label);
-    }
-
+    }
+
+    _addLabelToArrays(label) {
+        this._renderer.labelWorker.make(this, label);
+    }
+
     assignFontAtlas(label) {
         if (this._entityCollection && this._renderer) {
             label.assignFontAtlas(this._renderer.fontAtlas);
             this._addLabelToArrays(label);
-        } else {
-            this._billboards.push(label);
+        } else {
+            this._billboards.push(label);
         }
-    }
-
-    workerCallback(data, label) {
-        if (label._lockId !== -1) {
-            label._isReady = true;
-            label._lockId = -1;
-            label._handlerIndex = this._billboards.length;
-            this._billboards.push(label);
-
+    }
+
+    workerCallback(data, label) {
+        if (label._lockId !== LOCK_FREE && this.isEqual(label._handler)) {
+            label._isReady = true;
+            label._lockId = LOCK_FREE;
+            label._handlerIndex = this._billboards.length;
+            this._billboards.push(label);
+
             this._vertexArr = concatTypedArrays(this._vertexArr, data.vertexArr);
             this._texCoordArr = concatTypedArrays(this._texCoordArr, data.texCoordArr);
             this._gliphParamArr = concatTypedArrays(this._gliphParamArr, data.gliphParamArr);
@@ -117,11 +118,11 @@ class LabelHandler extends BillboardHandler {
             this._outlineArr = concatTypedArrays(this._outlineArr, data.outlineArr);
             this._noOutlineArr = concatTypedArrays(this._noOutlineArr, data.noOutlineArr);
             this._outlineColorArr = concatTypedArrays(this._outlineColorArr, data.outlineColorArr);
-            this._pickingColorArr = concatTypedArrays(this._pickingColorArr, data.pickingColorArr);
-
-            label.update();
-
-            this.refresh();
+            this._pickingColorArr = concatTypedArrays(this._pickingColorArr, data.pickingColorArr);
+
+            label.update();
+
+            this.refresh();
         }
     }
 
@@ -468,8 +469,7 @@ class LabelHandler extends BillboardHandler {
         this.refresh();
 
         label._handlerIndex = -1;
-        label._handler = null;
-        label._isReady = false;
+        label._handler = null;
     }
 
     setText(index, text, fontIndex, align) {
@@ -1038,4 +1038,4 @@ class LabelHandler extends BillboardHandler {
     }
 }
 
-export { LabelHandler };
+export { LabelHandler };

package/src/og/entity/LabelWorker.js

@@ -2,6 +2,9 @@
 
 // import { QueueArray } from '../QueueArray.js';
 
+export const LOCK_UPDATE = -2;
+export const LOCK_FREE = -1;
+
 class LabelWorker {
     constructor(numWorkers = 4) {
         this._id = 0;
@@ -18,7 +21,7 @@ class LabelWorker {
 
                 let s = that._source[e.data.id];
 
-                if (s.label._lockId === -2) {
+                if (s.label._lockId === LOCK_UPDATE) {
                     that.make(s.handler, s.label);
                 } else {
                     s.handler.workerCallback(e.data, s.label);
@@ -46,14 +49,15 @@ class LabelWorker {
 
     make(handler, label) {
 
-        let source = { handler: handler, label: label };
+        if (handler._entityCollection) {
+            let source = { handler: handler, label: label };
 
-        if (this._freeWorkerQueue.length) {
-            var w = this._freeWorkerQueue.pop();
+            if (this._freeWorkerQueue.length) {
+                var w = this._freeWorkerQueue.pop();
 
-            this._source[this._id] = source;
+                this._source[this._id] = source;
 
-            let labelData = new Float32Array([
+                let labelData = new Float32Array([
                 /*0*/this._id++,
                 /*1*/handler._maxLetters,
                 /*2*/label.getVisibility() ? 1 : 0,
@@ -68,17 +72,18 @@ class LabelWorker {
                 /*22*/label._outline,
                 /*23, 24, 25, 26*/label._outlineColor.x, label._outlineColor.y, label._outlineColor.z, label._outlineColor.w,
                 /*27, 28, 29*/label._entity._pickingColor.x, label._entity._pickingColor.y, label._entity._pickingColor.z
-            ]);
+                ]);
 
-            label._lockId = this._id;
+                label._lockId = this._id;
 
-            w.postMessage({
-                labelData: labelData
-            }, [
-                labelData.buffer,
-            ]);
-        } else {
-            this._pendingQueue.push(source);
+                w.postMessage({
+                    labelData: labelData
+                }, [
+                    labelData.buffer,
+                ]);
+            } else {
+                this._pendingQueue.push(source);
+            }
         }
     }
 }
@@ -210,4 +215,4 @@ const _programm = `'use strict';
             ]);
     }`;
 
-export { LabelWorker };
+export { LabelWorker };

package/src/og/layer/Layer.js

@@ -11,7 +11,6 @@ import { Extent } from "../Extent.js";
 import { LonLat } from "../LonLat.js";
 import { Material } from "./Material.js";
 import { Vec3 } from "../math/Vec3.js";
-import { createTexture } from "../webgl/Handler.js";
 
 export const FADING_FACTOR = 0.29;
 
@@ -29,9 +28,10 @@ export const FADING_FACTOR = 0.29;
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
  * @param {boolean} [options.isBaseLayer=false] - This is a base layer.
  * @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.21]] - Ambient RGB color.
- * @param {Vec3} [options.diffuse=[1.0, 1.0, 1.0]] - Diffuse RGB color.
+ * @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.
@@ -112,9 +112,9 @@ class Layer {
          * @public
          * @type {Object}
          */
-        this.ambient = utils.createColorRGB(options.ambient, new Vec3(0.1, 0.1, 0.21));
-        this.diffuse = utils.createColorRGB(options.diffuse, new Vec3(0.5, 0.5, 0.35));
-        this.specular = utils.createColorRGB(options.specular, new Vec3(0.0003, 0.00012, 0.00001));
+        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;
 
         /**
@@ -185,13 +185,13 @@ class Layer {
          */
         this._extent = null;
 
-        if (options.textureFilter) {
-            this.createTexture =
-                createTexture[options.textureFilter.trim().toUpperCase()] ||
-                createTexture.ANISOTROPIC;
-        } else {
-            this.createTexture = createTexture.ANISOTROPIC;
-        }
+        this.createTexture = null;
+
+        this._textureFilter = options.textureFilter ? options.textureFilter.trim().toUpperCase() : "MIPMAP";
+
+        this._isSRGB = options.isSRGB != undefined ? options.isSRGB : false;
+
+        this._internalFormat = null;
 
         /**
          * Visible mercator extent.
@@ -333,7 +333,16 @@ class Layer {
      * @virtual
      * @param {Planet} planet - Planet render node.
      */
-    _assignPlanet(planet) {
+    _assignPlanet(planet) {
+        // TODO: webgl1
+        if (this._isSRGB) {
+            this._internalFormat = planet.renderer.handler.gl.SRGB8_ALPHA8;
+        } else {
+            this._internalFormat = planet.renderer.handler.gl.RGBA8;
+        }
+
+        this.createTexture = planet.renderer.handler.createTexture[this._textureFilter];
+
         planet.layers.push(this);
         this._planet = planet;
         this.events.on("visibilitychange", planet._onLayerVisibilityChanged, planet);
@@ -396,7 +405,11 @@ class Layer {
      * @virtual
      */
     clear() {
-        this._planet && this._planet._clearLayerMaterial(this);
+        if (this._planet) {
+            this._planet._clearLayerMaterial(this);
+            this._internalFormat = null;
+            this.createTexture = null;
+        }
     }
 
     /**

package/src/og/layer/Material.js

@@ -44,7 +44,7 @@ class Material {
     }
 
     _createTexture(img) {
-        return this.layer.createTexture(this.segment.handler, img);
+        return this.layer.createTexture(img, this.layer._internalFormat);
     }
 
     /**

package/src/og/quadTree/Node.js

@@ -64,6 +64,7 @@ let BOUNDS = {
  * @param {Extent} extent - Planet segment extent.
  */
 class Node {
+
     constructor(SegmentPrototype, planet, partId, parent, id, tileZoom, extent) {
         this.SegmentPrototype = SegmentPrototype;
         this.planet = planet;
@@ -283,7 +284,7 @@ class Node {
 
             let altVis =
                 cam.eye.distance(seg.bsphere.center) - seg.bsphere.radius <
-                    VISIBLE_DISTANCE * Math.sqrt(h) ||
+                VISIBLE_DISTANCE * Math.sqrt(h) ||
                 (seg.tileZoom < 4 && !seg.terrainReady) ||
                 seg.tileZoom < 2;
 
@@ -293,27 +294,15 @@ class Node {
 
             if (seg.tileZoom < 2 && seg.normalMapReady) {
                 this.traverseNodes(cam, maxZoom, terrainReadySegment, stopLoading);
-            } else if ((!maxZoom && seg.acceptForRendering(cam)) || seg.tileZoom === maxZoom) {
-                this.prepareForRendering(
-                    cam,
-                    altVis,
-                    this.inFrustum,
-                    terrainReadySegment,
-                    stopLoading
-                );
+            } else if ((!maxZoom && seg.acceptForRendering(cam)) || seg.tileZoom === maxZoom || !altVis && maxZoom) {
+                this.prepareForRendering(cam, altVis, this.inFrustum, terrainReadySegment, stopLoading);
             } else if (seg.tileZoom < planet.terrain._maxNodeZoom && seg.terrainReady) {
                 // Deleting terrainReady here, you have to remove
                 // this.appliedTerrainNodeId !== pn.nodeId in whileTerrainLoading,
                 // also have to fix createBoundsByParent(*)
                 this.traverseNodes(cam, maxZoom, seg, stopLoading);
             } else {
-                this.prepareForRendering(
-                    cam,
-                    altVis,
-                    this.inFrustum,
-                    terrainReadySegment,
-                    stopLoading
-                );
+                this.prepareForRendering(cam, altVis, this.inFrustum, terrainReadySegment, stopLoading);
             }
         } else {
             this.state = NOTRENDERING;
@@ -333,7 +322,13 @@ class Node {
         n[3].renderTree(cam, maxZoom, terrainReadySegment, stopLoading);
     }
 
-    prepareForRendering(cam, altVis, inFrustum, terrainReadySegment, stopLoading) {
+    prepareForRendering(
+        cam,
+        altVis,
+        inFrustum,
+        terrainReadySegment,
+        stopLoading
+    ) {
         let seg = this.segment;
 
         if (cam._lonLat.height < VISIBLE_HEIGHT) {
@@ -381,7 +376,7 @@ class Node {
         }
 
         // Create normal map texture
-        if (seg.planet.lightEnabled && !seg.normalMapReady /* && !seg.parentNormalMapReady*/) {
+        if (seg.planet.lightEnabled && !seg.normalMapReady && !seg.parentNormalMapReady) {
             this.whileNormalMapCreating();
         }
 
@@ -774,16 +769,8 @@ class Node {
                 let v_lt = new Vec3(bigOne[0], bigOne[1], bigOne[2]),
                     v_rb = new Vec3(bigOne[9], bigOne[10], bigOne[11]);
 
-                let vn = new Vec3(
-                        bigOne[3] - bigOne[0],
-                        bigOne[4] - bigOne[1],
-                        bigOne[5] - bigOne[2]
-                    ),
-                    vw = new Vec3(
-                        bigOne[6] - bigOne[0],
-                        bigOne[7] - bigOne[1],
-                        bigOne[8] - bigOne[2]
-                    ),
+                let vn = new Vec3(bigOne[3] - bigOne[0], bigOne[4] - bigOne[1], bigOne[5] - bigOne[2]),
+                    vw = new Vec3(bigOne[6] - bigOne[0], bigOne[7] - bigOne[1], bigOne[8] - bigOne[2]),
                     ve = new Vec3(
                         bigOne[3] - bigOne[9],
                         bigOne[4] - bigOne[10],
@@ -996,8 +983,7 @@ class Node {
             offset = 0;
 
         while (pNode.segment.tileZoom > neighbourZoom) {
-            offset +=
-                PARTOFFSET[pNode.partId][side] / (1 << (pNode.segment.tileZoom - neighbourZoom));
+            offset += PARTOFFSET[pNode.partId][side] / (1 << (pNode.segment.tileZoom - neighbourZoom));
             pNode = pNode.parentNode;
         }
 

package/src/og/renderer/Renderer.js

@@ -73,9 +73,9 @@ class Renderer {
          */
         this.handler = handler;
 
-        this.exposure = 4;
+        this.exposure = 3.01;
 
-        this.gamma = 0.5;
+        this.gamma = 0.47;
 
         this.whitepoint = 1.0;
 
@@ -159,13 +159,11 @@ class Renderer {
 
         this.depthFramebuffer = null;
 
-        this._msaa = params.msaa || 8;
+        this._msaa = params.msaa || 4;
         this._internalFormat = "RGBA16F";
         this._format = "RGBA";
         this._type = "FLOAT";
 
-        this._screenScale = params.screenScale || 1.0;
-
         this.sceneFramebuffer = null;
 
         this.blitFramebuffer = null;
@@ -224,11 +222,6 @@ class Renderer {
         this.events.active = activity;
     }
 
-    setScreenScale(scale) {
-        this._screenScale = scale;
-        this._resize();
-    }
-
     addDepthCallback(sender, callback) {
         var id = __depthCallbackCounter__++;
         this._depthCallbacks.push({
@@ -333,7 +326,7 @@ class Renderer {
      * @returns {number} -
      */
     getWidth() {
-        return this.handler.canvas.width;
+        return this.handler.canvas.clientWidth;
     }
 
     /**
@@ -342,7 +335,7 @@ class Renderer {
      * @returns {number} -
      */
     getHeight() {
-        return this.handler.canvas.height;
+        return this.handler.canvas.clientHeight;
     }
 
     /**
@@ -352,7 +345,7 @@ class Renderer {
      */
     getCenter() {
         var cnv = this.handler.canvas;
-        return new Vec2(Math.round(cnv.width * 0.5), Math.round(cnv.height * 0.5));
+        return new Vec2(Math.round(cnv.clientWidth * 0.5), Math.round(cnv.clientHeight * 0.5));
     }
 
     /**
@@ -479,7 +472,7 @@ class Renderer {
                 internalFormat: this._internalFormat,
                 format: this._format,
                 type: this._type,
-                filter: "LINEAR"
+                filter: "NEAREST"
             }).init();
 
             this.toneMappingFramebuffer = new Framebuffer(this.handler, {
@@ -526,24 +519,21 @@ class Renderer {
     }
 
     _resize() {
-        let obj = this.handler.canvas;
-        this.activeCamera.setAspectRatio(obj.clientWidth / obj.clientHeight);
-        this.sceneFramebuffer.setSize(
-            obj.clientWidth * this._screenScale,
-            obj.clientHeight * this._screenScale
-        );
+        let c = this.handler.canvas;
+        this.activeCamera.setAspectRatio(c.width / c.height);
+        this.sceneFramebuffer.setSize(c.width, c.height);
+
         this.blitFramebuffer &&
-            this.blitFramebuffer.setSize(
-                obj.clientWidth * this._screenScale,
-                obj.clientHeight * this._screenScale,
-                true
-            );
+            this.blitFramebuffer.setSize(c.width, c.height, true);
+
         this.toneMappingFramebuffer &&
-            this.toneMappingFramebuffer.setSize(obj.clientWidth, obj.clientHeight, true);
+            this.toneMappingFramebuffer.setSize(c.width, c.height, true);
+
         this.depthFramebuffer &&
-            this.depthFramebuffer.setSize(obj.clientWidth, obj.clientHeight, true);
+            this.depthFramebuffer.setSize(c.width, c.height, true);
+
         this.screenDepthFramebuffer &&
-            this.screenDepthFramebuffer.setSize(obj.clientWidth, obj.clientHeight, true);
+            this.screenDepthFramebuffer.setSize(c.width, c.height, true);
 
         if (this.handler.gl.type === "webgl") {
             this.screenTexture.screen = this.sceneFramebuffer.textures[0];
@@ -865,7 +855,7 @@ class Renderer {
     getPickingObject(x, y) {
         let cnv = this.renderer.handler.canvas,
             c = new Uint8Array(3);
-        this.readPixels(c, x / cnv.width, (cnv.height - y) / cnv.height, 1);
+        this.readPixels(c, x / cnv.clientWidth, (cnv.clientHeight - y) / cnv.clientHeight, 1);
         return this.colorObjects[c[0] + "_" + c[1] + "_" + c[2]];
     }