@openglobus/og 0.12.1 → 0.13.0

package/src/og/utils/shared.js

@@ -250,7 +250,7 @@ export function createExtent(e, def) {
     return new Extent();
 }
 
-export function createLonLat(l, def) {
+export function createLonLat(l, def = null) {
     if (l) {
         if (l instanceof Array) {
             return new LonLat(l[0], l[1], l[2]);

package/src/og/webgl/Handler.js

@@ -14,6 +14,8 @@ import { Vec2 } from "../math/Vec2.js";
 
 const vendorPrefixes = ["", "WEBKIT_", "MOZ_"];
 
+const CONTEXT_TYPE = ["webgl2", "webgl"];
+
 // Maximal mipmap levels
 const MAX_LEVELS = 2;
 
@@ -119,7 +121,8 @@ class Handler {
          * @private
          * @type {frameCallback}
          */
-        this._frameCallback = function () { };
+        this._frameCallback = function () {
+        };
 
         this.transparentTexture = null;
 
@@ -137,6 +140,8 @@ class Handler {
         if (params.autoActivate || isEmpty(params.autoActivate)) {
             this.initialize();
         }
+
+        this.createTexture_n = this.gl.type === "webgl2" ? this.createTexture_n_webgl2 : this.createTexture_n_webgl1;
     }
 
     /**
@@ -163,7 +168,6 @@ class Handler {
      * @returns {Object} -
      */
     static getContext(canvas, contextAttributes) {
-        const CONTEXT_TYPE = ["webgl2", "webgl"];
         let ctx = null;
 
         try {
@@ -635,6 +639,7 @@ class Handler {
             this._params.extensions.push("OES_standard_derivatives");
             this._params.extensions.push("OES_element_index_uint");
             this._params.extensions.push("WEBGL_depth_texture");
+            this._params.extensions.push("ANGLE_instanced_arrays");
             //this._params.extensions.push("EXT_frag_depth");
         } else {
             this._params.extensions.push("EXT_color_buffer_float");
@@ -679,69 +684,22 @@ class Handler {
      * @private
      */
     _setDefaults() {
-        this.activateDepthTest();
+        let gl = this.gl;
+        gl.depthFunc(gl.LESS);
+        gl.enable(gl.DEPTH_TEST);
         this.setSize(
             this.canvas.clientWidth || this._params.width,
             this.canvas.clientHeight || this._params.height
         );
-        this.gl.frontFace(this.gl.CCW);
-        this.gl.cullFace(this.gl.BACK);
-        this.activateFaceCulling();
-        this.deactivateBlending();
-        let that = this;
-        this.createDefaultTexture({ color: "rgba(0,0,0,0.0)" }, function (t) {
-            that.transparentTexture = t;
+        gl.frontFace(gl.CCW);
+        gl.cullFace(gl.BACK);
+        gl.enable(gl.CULL_FACE);
+        gl.disable(gl.BLEND);
+        this.createDefaultTexture({ color: "rgba(0,0,0,0.0)" }, (t) => {
+            this.transparentTexture = t;
         });
     }
 
-    /**
-     * Activate depth test.
-     * @public
-     */
-    activateDepthTest() {
-        this.gl.enable(this.gl.DEPTH_TEST);
-    }
-
-    /**
-     * Deactivate depth test.
-     * @public
-     */
-    deactivateDepthTest() {
-        this.gl.disable(this.gl.DEPTH_TEST);
-    }
-
-    /**
-     * Activate face culling.
-     * @public
-     */
-    activateFaceCulling() {
-        this.gl.enable(this.gl.CULL_FACE);
-    }
-
-    /**
-     * Deactivate face cullting.
-     * @public
-     */
-    deactivateFaceCulling() {
-        this.gl.disable(this.gl.CULL_FACE);
-    }
-
-    /**
-     * Activate blending.
-     * @public
-     */
-    activateBlending() {
-        this.gl.enable(this.gl.BLEND);
-    }
-
-    /**
-     * Deactivate blending.
-     * @public
-     */
-    deactivateBlending() {
-        this.gl.disable(this.gl.BLEND);
-    }
-
     /**
      * Creates STREAM_DRAW ARRAY buffer.
      * @public
@@ -960,6 +918,14 @@ class Handler {
         }
     }
 
+    /**
+     * Check is gl context type equals webgl2
+     * @public
+     */
+    isWebGl2() {
+        return this.gl.type === "webgl2"
+    }
+
     /**
      * Make animation.
      * @private
@@ -980,10 +946,12 @@ class Handler {
     createDefaultTexture(params, success) {
         let imgCnv;
         let texture;
+        const is2 = this.isWebGl2();
+
         if (params && params.color) {
             imgCnv = new ImageCanvas(2, 2);
             imgCnv.fillColor(params.color);
-            texture = this.createTexture_n_webgl2(imgCnv._canvas);
+            texture = this.createTexture_n(imgCnv._canvas);
             texture.default = true;
             success(texture);
         } else if (params && params.url) {
@@ -998,7 +966,7 @@ class Handler {
         } else {
             imgCnv = new ImageCanvas(2, 2);
             imgCnv.fillColor("#C5C5C5");
-            texture = this.createTexture_n_webgl2(imgCnv._canvas);
+            texture = this.createTexture_n(imgCnv._canvas);
             texture.default = true;
             success(texture);
         }

package/src/og/webgl/Multisample.js

@@ -1,260 +1,260 @@
-/**
- * @module og/webgl/Multisample
- */
-
-"use strict";
-
-/**
- * Class represents multisample framebuffer.
- * @class
- * @param {Handler} handler - WebGL handler.
- * @param {Object} [options] - Framebuffer options:
- * @param {number} [options.width] - Framebuffer width. Default is handler canvas width.
- * @param {number} [options.height] - Framebuffer height. Default is handler canvas height.
- * @param {Object} [options.texture] - Texture to render.
- * @param {String} [options.depthComponent="DEPTH_COMPONENT16"] - Specifies depth buffer size.
- * @param {Boolean} [options.useDepth] - Using depth buffer during the rendering.
- */
-export class Multisample {
-    constructor(handler, options) {
-        options = options || {};
-
-        /**
-         * WebGL handler.
-         * @public
-         * @type {Handler}
-         */
-        this.handler = handler;
-
-        this._internalFormat = options.internalFormat
-            ? options.internalFormat.toUpperCase()
-            : "RGBA8";
-
-        /**
-         * Framebuffer object.
-         * @private
-         * @type {Object}
-         */
-        this._fbo = null;
-
-        /**
-         * Renderbuffer object.
-         * @private
-         * @type {Object}
-         */
-        this._depthRenderbuffer = null;
-
-        /**
-         * Framebuffer width.
-         * @private
-         * @type {number}
-         */
-        this._width = options.width || handler.canvas.width;
-
-        /**
-         * Framebuffer width.
-         * @private
-         * @type {number}
-         */
-        this._height = options.height || handler.canvas.height;
-
-        this._msaa = options.msaa != undefined ? options.msaa : 4;
-
-        this._useDepth = options.useDepth != undefined ? options.useDepth : true;
-
-        this._depthComponent =
-            options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
-
-        /**
-         * Framebuffer activity.
-         * @private
-         * @type {boolean}
-         */
-        this._active = false;
-
-        this._size = options.size || 1;
-
-        this._filter = options.filter || "NEAREST";
-
-        this._glFilter = null;
-
-        this.renderbuffers = new Array(this._size);
-    }
-
-    destroy() {
-        var gl = this.handler.gl;
-
-        for (var i = 0; i < this.renderbuffers.length; i++) {
-            gl.deleteRenderbuffer(this.renderbuffers[i]);
-        }
-        this.renderbuffers = new Array(this._size);
-
-        gl.deleteFramebuffer(this._fbo);
-        gl.deleteRenderbuffer(this._depthRenderbuffer);
-
-        this._depthRenderbuffer = null;
-        this._fbo = null;
-
-        this._active = false;
-    }
-
-    /**
-     * Framebuffer initialization.
-     * @private
-     */
-    init() {
-        var gl = this.handler.gl;
-
-        this._glFilter = gl[this._filter];
-
-        this._fbo = gl.createFramebuffer();
-
-        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
-
-        let colorAttachments = [];
-        for (var i = 0; i < this.renderbuffers.length; i++) {
-            let rb = gl.createRenderbuffer();
-            gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
-            gl.renderbufferStorageMultisample(
-                gl.RENDERBUFFER,
-                this._msaa,
-                gl[this._internalFormat],
-                this._width,
-                this._height
-            );
-            gl.framebufferRenderbuffer(
-                gl.FRAMEBUFFER,
-                gl.COLOR_ATTACHMENT0 + i,
-                gl.RENDERBUFFER,
-                rb
-            );
-            colorAttachments.push(gl.COLOR_ATTACHMENT0 + i);
-            this.renderbuffers[i] = rb;
-            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-        }
-        gl.drawBuffers(colorAttachments);
-
-        if (this._useDepth) {
-            this._depthRenderbuffer = gl.createRenderbuffer();
-            gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
-            gl.renderbufferStorageMultisample(
-                gl.RENDERBUFFER,
-                this._msaa,
-                gl[this._depthComponent],
-                this._width,
-                this._height
-            );
-            gl.framebufferRenderbuffer(
-                gl.FRAMEBUFFER,
-                gl.DEPTH_ATTACHMENT,
-                gl.RENDERBUFFER,
-                this._depthRenderbuffer
-            );
-            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-        }
-
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-
-        return this;
-    }
-
-    blitTo(framebuffer, attachmentIndex = 0) {
-        let gl = this.handler.gl;
-
-        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._fbo);
-        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer._fbo);
-        gl.readBuffer(gl.COLOR_ATTACHMENT0 + attachmentIndex);
-
-        gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
-
-        gl.blitFramebuffer(
-            0,
-            0,
-            this._width,
-            this._height,
-            0,
-            0,
-            framebuffer._width,
-            framebuffer._height,
-            gl.COLOR_BUFFER_BIT,
-            this._glFilter
-        );
-
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
-        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
-    }
-
-    /**
-     * Sets framebuffer viewport size.
-     * @public
-     * @param {number} width - Framebuffer width.
-     * @param {number} height - Framebuffer height.
-     */
-    setSize(width, height, forceDestroy) {
-        this._width = width;
-        this._height = height;
-
-        if (this._active) {
-            this.handler.gl.viewport(0, 0, this._width, this._height);
-        }
-
-        if (this._useDepth || forceDestroy) {
-            this.destroy();
-            this.init();
-        }
-    }
-
-    /**
-     * Returns framebuffer completed.
-     * @public
-     * @returns {boolean} -
-     */
-    isComplete() {
-        var gl = this.handler.gl;
-        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
-            return true;
-        }
-        return false;
-    }
-
-    /**
-     * Activate framebuffer frame to draw.
-     * @public
-     * @returns {Framebuffer} Returns Current framebuffer.
-     */
-    activate() {
-        var gl = this.handler.gl;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
-        gl.viewport(0, 0, this._width, this._height);
-        this._active = true;
-        var c = this.handler.framebufferStack.current().data;
-        c && (c._active = false);
-        this.handler.framebufferStack.push(this);
-        return this;
-    }
-
-    /**
-     * Deactivate framebuffer frame.
-     * @public
-     */
-    deactivate() {
-        var h = this.handler,
-            gl = h.gl;
-
-        //Q: check for this._useDepth ?
-
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        this._active = false;
-
-        var f = this.handler.framebufferStack.popPrev();
-
-        if (f) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, f._fbo);
-            gl.viewport(0, 0, f._width, f._height);
-        } else {
-            gl.viewport(0, 0, h.canvas.width, h.canvas.height);
-        }
-    }
-}
+/**
+ * @module og/webgl/Multisample
+ */
+
+"use strict";
+
+/**
+ * Class represents multisample framebuffer.
+ * @class
+ * @param {Handler} handler - WebGL handler.
+ * @param {Object} [options] - Framebuffer options:
+ * @param {number} [options.width] - Framebuffer width. Default is handler canvas width.
+ * @param {number} [options.height] - Framebuffer height. Default is handler canvas height.
+ * @param {Object} [options.texture] - Texture to render.
+ * @param {String} [options.depthComponent="DEPTH_COMPONENT16"] - Specifies depth buffer size.
+ * @param {Boolean} [options.useDepth] - Using depth buffer during the rendering.
+ */
+export class Multisample {
+    constructor(handler, options) {
+        options = options || {};
+
+        /**
+         * WebGL handler.
+         * @public
+         * @type {Handler}
+         */
+        this.handler = handler;
+
+        this._internalFormat = options.internalFormat
+            ? options.internalFormat.toUpperCase()
+            : "RGBA8";
+
+        /**
+         * Framebuffer object.
+         * @private
+         * @type {Object}
+         */
+        this._fbo = null;
+
+        /**
+         * Renderbuffer object.
+         * @private
+         * @type {Object}
+         */
+        this._depthRenderbuffer = null;
+
+        /**
+         * Framebuffer width.
+         * @private
+         * @type {number}
+         */
+        this._width = options.width || handler.canvas.width;
+
+        /**
+         * Framebuffer width.
+         * @private
+         * @type {number}
+         */
+        this._height = options.height || handler.canvas.height;
+
+        this._msaa = options.msaa != undefined ? options.msaa : 4;
+
+        this._useDepth = options.useDepth != undefined ? options.useDepth : true;
+
+        this._depthComponent =
+            options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
+
+        /**
+         * Framebuffer activity.
+         * @private
+         * @type {boolean}
+         */
+        this._active = false;
+
+        this._size = options.size || 1;
+
+        this._filter = options.filter || "NEAREST";
+
+        this._glFilter = null;
+
+        this.renderbuffers = new Array(this._size);
+    }
+
+    destroy() {
+        var gl = this.handler.gl;
+
+        for (var i = 0; i < this.renderbuffers.length; i++) {
+            gl.deleteRenderbuffer(this.renderbuffers[i]);
+        }
+        this.renderbuffers = new Array(this._size);
+
+        gl.deleteFramebuffer(this._fbo);
+        gl.deleteRenderbuffer(this._depthRenderbuffer);
+
+        this._depthRenderbuffer = null;
+        this._fbo = null;
+
+        this._active = false;
+    }
+
+    /**
+     * Framebuffer initialization.
+     * @private
+     */
+    init() {
+        var gl = this.handler.gl;
+
+        this._glFilter = gl[this._filter];
+
+        this._fbo = gl.createFramebuffer();
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
+
+        let colorAttachments = [];
+        for (var i = 0; i < this.renderbuffers.length; i++) {
+            let rb = gl.createRenderbuffer();
+            gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
+            gl.renderbufferStorageMultisample(
+                gl.RENDERBUFFER,
+                this._msaa,
+                gl[this._internalFormat],
+                this._width,
+                this._height
+            );
+            gl.framebufferRenderbuffer(
+                gl.FRAMEBUFFER,
+                gl.COLOR_ATTACHMENT0 + i,
+                gl.RENDERBUFFER,
+                rb
+            );
+            colorAttachments.push(gl.COLOR_ATTACHMENT0 + i);
+            this.renderbuffers[i] = rb;
+            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        }
+        gl.drawBuffers(colorAttachments);
+
+        if (this._useDepth) {
+            this._depthRenderbuffer = gl.createRenderbuffer();
+            gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
+            gl.renderbufferStorageMultisample(
+                gl.RENDERBUFFER,
+                this._msaa,
+                gl[this._depthComponent],
+                this._width,
+                this._height
+            );
+            gl.framebufferRenderbuffer(
+                gl.FRAMEBUFFER,
+                gl.DEPTH_ATTACHMENT,
+                gl.RENDERBUFFER,
+                this._depthRenderbuffer
+            );
+            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        }
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        return this;
+    }
+
+    blitTo(framebuffer, attachmentIndex = 0) {
+        let gl = this.handler.gl;
+
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._fbo);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer._fbo);
+        gl.readBuffer(gl.COLOR_ATTACHMENT0 + attachmentIndex);
+
+        gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
+
+        gl.blitFramebuffer(
+            0,
+            0,
+            this._width,
+            this._height,
+            0,
+            0,
+            framebuffer._width,
+            framebuffer._height,
+            gl.COLOR_BUFFER_BIT,
+            this._glFilter
+        );
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+    }
+
+    /**
+     * Sets framebuffer viewport size.
+     * @public
+     * @param {number} width - Framebuffer width.
+     * @param {number} height - Framebuffer height.
+     */
+    setSize(width, height, forceDestroy) {
+        this._width = width;
+        this._height = height;
+
+        if (this._active) {
+            this.handler.gl.viewport(0, 0, this._width, this._height);
+        }
+
+        if (this._useDepth || forceDestroy) {
+            this.destroy();
+            this.init();
+        }
+    }
+
+    /**
+     * Returns framebuffer completed.
+     * @public
+     * @returns {boolean} -
+     */
+    isComplete() {
+        var gl = this.handler.gl;
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Activate framebuffer frame to draw.
+     * @public
+     * @returns {Framebuffer} Returns Current framebuffer.
+     */
+    activate() {
+        var gl = this.handler.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
+        gl.viewport(0, 0, this._width, this._height);
+        this._active = true;
+        var c = this.handler.framebufferStack.current().data;
+        c && (c._active = false);
+        this.handler.framebufferStack.push(this);
+        return this;
+    }
+
+    /**
+     * Deactivate framebuffer frame.
+     * @public
+     */
+    deactivate() {
+        var h = this.handler,
+            gl = h.gl;
+
+        //Q: check for this._useDepth ?
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        this._active = false;
+
+        var f = this.handler.framebufferStack.popPrev();
+
+        if (f) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, f._fbo);
+            gl.viewport(0, 0, f._width, f._height);
+        } else {
+            gl.viewport(0, 0, h.canvas.width, h.canvas.height);
+        }
+    }
+}