@pirireis/webglobeplugins 0.9.9 → 0.9.11

package/programs/point-on-globe/element-globe-surface-glow.js

@@ -0,0 +1,102 @@
+"use strict";
+/**
+ *        *
+ *      *   *
+ *    *   *   *
+ *      *   *
+ *        *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementGlobeSufaceGlowCache = void 0;
+var totems_1 = require("../totems");
+var geometrytransformations_1 = require("../../util/shaderfunctions/geometrytransformations");
+var util_1 = require("../../util");
+var programcache_1 = require("../programcache");
+var attribute_loader_1 = require("../../util/gl-util/buffer/attribute-loader");
+var methods_1 = require("../../util/gl-util/draw-options/methods");
+var manager_1 = require("../../util/gl-util/uniform-block/manager");
+var uboBlockManager = new manager_1.UniformBlockManager("FlexibleBlock", [
+    { name: "u_color", type: "vec4" },
+    { name: "u_radius", type: "float" }
+], 1);
+var vs = "#version 300 es\n".concat(geometrytransformations_1.PI, "\n").concat(totems_1.CameraUniformBlockString, "\n").concat(geometrytransformations_1.cartesian3DToGLPosition, "\n").concat(geometrytransformations_1.circleLimpFromLongLatRadCenterCartesian3D_accurate, "\n\nuniform float edge_count;\n\nin vec3 pos3D;\nin float radius;\nin vec4 color;\n\n").concat(uboBlockManager.glslCode(), "\n\nout vec4 vColor;\n\nvoid main() {\n\n    float radius_ = ( radius == -1.0 ) ? u_radius : radius;\n    vec4 color = ( color.r == -1.0 ) ? u_color : color;\n\n    if ( gl_VertexID == 0 ) {\n        gl_Position = cartesian3DToGLPosition(pos3D);\n        vColor = vColor;\n    } else {\n        float angle = PI * 2.0 * float( gl_VertexID - 1 ) / edge_count;\n        vec3 position = circleLimpFromLongLatRadCenterCartesian3D_accurate(pos3D, radius, angle);\n        gl_Position = cartesian3DToGLPosition(position);\n        float distance = distance(position, pos3D);\n\n        \n\n        vColor = vec4(color.rgb, color.a * (1.0 - distance / radius));\n    }\n}");
+var fs = "#version 300 es\nprecision highp float;\n\nuniform float opacity;\nin vec4 vColor;\n\nout vec4 fragColor;\n\nvoid main() {\n    fragColor = vColor;\n    fragColor.a *= opacity;\n}";
+var Logic = /** @class */ (function () {
+    function Logic(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this._vaoCache = [];
+        this.program = (0, util_1.createProgram)(this.gl, vs, fs);
+        var _a = this, gl = _a.gl, program = _a.program;
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        // set uniform locations
+        this._uniforms = {
+            edge_count_loc: gl.getUniformLocation(program, "edge_count"),
+            edge_count: 40,
+            opacity_loc: gl.getUniformLocation(program, "opacity"),
+            opacity: 1.0
+        };
+        // last values
+        gl.uniform1f(this._uniforms.edge_count_loc, this._uniforms.edge_count);
+        gl.uniform1f(this._uniforms.opacity_loc, this._uniforms.opacity);
+        gl.useProgram(currentProgram);
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, "pos3D");
+        gl.bindAttribLocation(program, 1, "radius");
+        gl.bindAttribLocation(program, 2, "color");
+        // camera uniform block
+        this.cameraUniformBlockTotem = totems_1.CameraUniformBlockTotemCache.get(globe);
+        this.cameraBlockBindingPoint = 0;
+        var cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+        gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        uboBlockManager.assignBindingPoint(this.gl, this.program);
+        this._defaultUBO = uboBlockManager.createUBO(this.gl);
+    }
+    Logic.prototype.createVAO = function (pos3DObj, radiusObj, colorObj) {
+        var gl = this.gl;
+        var vao = gl.createVertexArray();
+        var divisor = 1;
+        gl.bindVertexArray(vao);
+        // TODO constants to escape values
+        (0, attribute_loader_1.attributeLoader)(gl, pos3DObj, 0, 3, { divisor: divisor });
+        (0, attribute_loader_1.attributeLoader)(gl, radiusObj, 1, 1, { divisor: divisor, escapeValues: [-1] });
+        (0, attribute_loader_1.attributeLoader)(gl, colorObj, 2, 4, { divisor: divisor, escapeValues: [-1, -1, -1, -1] });
+        gl.bindVertexArray(null);
+        this._vaoCache.push(vao);
+        return vao;
+    };
+    Logic.prototype.draw = function (vao, drawOptions, opacity, ubo) {
+        if (opacity === void 0) { opacity = 1.0; }
+        if (ubo === void 0) { ubo = null; }
+        var _a = this, gl = _a.gl, program = _a.program;
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+        if (opacity !== this._uniforms.opacity) {
+            gl.uniform1f(this._uniforms.opacity_loc, opacity);
+            this._uniforms.opacity = opacity;
+        }
+        ubo = ubo || this._defaultUBO;
+        ubo.bind();
+        (0, methods_1.drawInstanced)(gl, gl.TRIANGLE_FAN, drawOptions);
+        ubo.unbind();
+        gl.bindVertexArray(null);
+    };
+    Logic.prototype.free = function () {
+        if (this._isFreed)
+            return;
+        totems_1.CameraUniformBlockTotemCache.release(this.globe);
+        this.gl.deleteProgram(this.program);
+        for (var _i = 0, _a = this._vaoCache; _i < _a.length; _i++) {
+            var vao = _a[_i];
+            this.gl.deleteVertexArray(vao);
+        }
+        this._isFreed = true;
+    };
+    return Logic;
+}());
+var ElementGlobeSufaceGlowCache = Object.freeze({
+    get: function (globe) { return programcache_1.noRegisterGlobeProgramCache.getProgram(globe, Logic); },
+    release: function (globe) { return programcache_1.noRegisterGlobeProgramCache.releaseProgram(globe); }
+});
+exports.ElementGlobeSufaceGlowCache = ElementGlobeSufaceGlowCache;

package/programs/point-on-globe/element-point-glow.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementPointGlowProgramCache = void 0;
+var util_1 = require("../../util");
+var totems_1 = require("../totems");
+var geometrytransformations_1 = require("../../util/shaderfunctions/geometrytransformations");
+var programcache_1 = require("../programcache");
+var attribute_loader_1 = require("../../util/gl-util/buffer/attribute-loader");
+var methods_1 = require("../../util/gl-util/draw-options/methods");
+var manager_1 = require("../../util/gl-util/uniform-block/manager");
+var singularity_1 = require("../../shaders/fragment-toy/singularity");
+var firework_1 = require("../../shaders/fragment-toy/firework");
+var cameraBlockBindingPoint = 0;
+var flexibleBlockBindingPoint = 1;
+var uniformBlockManager = new manager_1.UniformBlockManager("FlexibleBlock", [
+    { name: "u_rgba", type: "vec4", value: new Float32Array([1, 1, 1, 1]) },
+    { name: "u_size_multiplier", type: "float", value: new Float32Array([1.0]) },
+    { name: "u_opacity", type: "float", value: new Float32Array([1.0]) },
+    { name: "u_size", type: "float", value: new Float32Array([1.0]) },
+    { name: "u_minimumSize", type: "float", value: new Float32Array([25.0]) },
+    { name: "u_phase", type: "float", value: new Float32Array([1.0]) },
+], flexibleBlockBindingPoint);
+var vs = "#version 300 es\nprecision highp float;\n\n".concat(totems_1.CameraUniformBlockString, "\n").concat(geometrytransformations_1.mercatorXYToGLPosition, "\n").concat(geometrytransformations_1.cartesian3DToGLPosition, "\n\n").concat(uniformBlockManager.glslCode(), "\n\n\nin vec3 pos3D;\nin vec2 pos2D;\nin vec4 color;\nin float size;\n\nout vec4 vColor;\nflat out float v_size;\n\n\n\nvoid main() {\n\n    if(is3D){\n        gl_Position = cartesian3DToGLPosition(pos3D);\n    }\n    else {\n        gl_Position = mercatorXYToGLPosition(pos2D);\n    }\n\n    gl_PointSize = max(\n        ((size == -1.0) ? u_size  : size ) * u_size_multiplier,\n        u_minimumSize);\n    v_size = gl_PointSize;\n    vColor = (color.r == -1.0) ? u_rgba : color;\n    vColor.a *= u_opacity;\n\n}");
+var fs = "#version 300 es\nprecision highp float;\n\n".concat(uniformBlockManager.glslCode(), "\n\nin vec4 vColor;\nout vec4 fragColor;\n\nflat in float v_size;\n\n").concat(firework_1.firework, "\n").concat(singularity_1.singularity, " \n\nvoid main() {\n    fragColor = vColor;\n\n    float dist = distance(gl_PointCoord, vec2(0.5, 0.5)) * 2.0;\n    if ( dist > 1.0) discard;\n\n    // center glow\n    float center_alpha = smoothstep(0.5, 0.0, dist) * 0.3;\n    // center_alpha = smoothstep(0.0, 1.0, center_alpha);\n\n    // circle pattern\n    float threshold = fract(( - dist + u_phase - 0.5));\n    float circle_alpha = sin( threshold * 1.57 );\n    circle_alpha = smoothstep((v_size / (v_size + .5)), 1.0, circle_alpha);\n\n    float outer_circle_alpha = sin(dist * 1.57 );\n    outer_circle_alpha = smoothstep((v_size / (v_size + .5)), 1.0, outer_circle_alpha);\n\n    // fragColor = singularity(gl_PointCoord, u_phase);\n\n    fragColor.a *= smoothstep(0.0, 1.1, ( 0.4 * u_opacity + center_alpha +  circle_alpha+ outer_circle_alpha)); \n}");
+var Logic = /** @class */ (function () {
+    function Logic(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = (0, util_1.createProgram)(this.gl, vs, fs);
+        var _a = this, gl = _a.gl, program = _a.program;
+        gl.bindAttribLocation(program, 0, "pos3D");
+        gl.bindAttribLocation(program, 1, "pos2D");
+        gl.bindAttribLocation(program, 2, "color");
+        gl.bindAttribLocation(program, 3, "size");
+        // assign uniform block
+        this.cameraBlockTotem = totems_1.CameraUniformBlockTotemCache.get(globe);
+        this.cameraBlockTotem.assignBindingPoint(program, cameraBlockBindingPoint);
+        uniformBlockManager.assignBindingPoint(this.gl, this.program);
+        this._defaultUBO = uniformBlockManager.createUBO(this.gl);
+    }
+    Logic.prototype.createVAO = function (pos3DBuffer, pos2DBuffer, colorBuffer, sizeBuffer) {
+        var gl = this.gl;
+        var vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        (0, attribute_loader_1.attributeLoader)(gl, pos3DBuffer, 0, 3);
+        (0, attribute_loader_1.attributeLoader)(gl, pos2DBuffer, 1, 2);
+        (0, attribute_loader_1.attributeLoader)(gl, colorBuffer, 2, 4, { escapeValues: [-1, -1, -1, -1] });
+        (0, attribute_loader_1.attributeLoader)(gl, sizeBuffer, 3, 1, { escapeValues: [-1] });
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return vao;
+    };
+    Logic.prototype.createUBO = function () {
+        var ubo = uniformBlockManager.createUBO(this.gl);
+        return ubo;
+    };
+    Logic.prototype.draw = function (vao, drawOptions, ubo) {
+        if (ubo === void 0) { ubo = null; }
+        var _a = this, gl = _a.gl, program = _a.program, cameraBlockTotem = _a.cameraBlockTotem;
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        ubo = ubo || this._defaultUBO;
+        ubo.bind();
+        (0, methods_1.drawArrays)(gl, gl.POINTS, drawOptions);
+        ubo.unbind();
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        this.globe.DrawRender();
+    };
+    // for singleton cache interation
+    Logic.prototype.free = function () {
+        if (this._isFreed)
+            return;
+        totems_1.CameraUniformBlockTotemCache.release(this.globe);
+        this.gl.deleteProgram(this.program);
+        this._isFreed = true;
+    };
+    return Logic;
+}());
+var ElementPointGlowProgramCache = Object.freeze({
+    get: function (globe) { return programcache_1.noRegisterGlobeProgramCache.getProgram(globe, Logic); },
+    release: function (globe) { return programcache_1.noRegisterGlobeProgramCache.releaseProgram(globe, Logic); }
+});
+exports.ElementPointGlowProgramCache = ElementPointGlowProgramCache;

package/programs/point-on-globe/square-pixel-point.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointOnGlobeProgramCache = void 0;
+var util_1 = require("../../util");
+var totems_1 = require("../totems");
+var geometrytransformations_1 = require("../../util/shaderfunctions/geometrytransformations");
+var programcache_1 = require("../programcache");
+var vs = "#version 300 es\n".concat(totems_1.CameraUniformBlockString, "\n").concat(geometrytransformations_1.mercatorXYToGLPosition, "\n").concat(geometrytransformations_1.cartesian3DToGLPosition, "\nprecision highp float;\nprecision highp int;\n\nuniform int hovered_vertexID; // can be removed\n\nin vec3 pos3D;\nin vec2 pos2D;\nin vec4 rgba;\n\nuniform float pointSize;\nuniform float hoveredPointSize;\n\nflat out highp int vVertexID;\n\n\nout vec4 v_rgba;\n\nvoid main() {\n\n    if(is3D){\n        gl_Position = cartesian3DToGLPosition(pos3D);\n    }\n    else{\n        gl_Position = mercatorXYToGLPosition(pos2D);\n    }\n    if (hovered_vertexID == gl_VertexID) {\n        gl_PointSize = hoveredPointSize;\n    } else {\n        gl_PointSize = pointSize;\n    }\n    v_rgba = rgba;\n    vVertexID = gl_VertexID;\n}");
+var fs = "#version 300 es\nprecision highp float;\n\nuniform float opacity;\n\nflat in highp int vVertexID;\nin vec4 v_rgba;\n\nlayout(location = 0) out vec4 fragColor;\nlayout(location = 1) out int vertexID;\n\nvoid main() {\n    vertexID = vVertexID; \n    fragColor = v_rgba;\n    fragColor.a *= opacity;\n}";
+var PointOnGlobeProgram = /** @class */ (function () {
+    function PointOnGlobeProgram(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = (0, util_1.createProgram)(this.gl, vs, fs);
+        var _a = this, gl = _a.gl, program = _a.program;
+        this.uniforms = {
+            opacity: gl.getUniformLocation(program, "opacity"),
+            hovered_vertexID: gl.getUniformLocation(program, "hovered_vertexID"),
+            hoveredPointSize: gl.getUniformLocation(program, "hoveredPointSize"),
+            pointSize: gl.getUniformLocation(program, "pointSize"),
+        };
+        // eslint-disable-next-line
+        { // assign opacity
+            this._lastOpacity = 1.0;
+            this._lastPointSize = 2.0;
+            this._lastHoveredPointSize = 4.0;
+            this._lastHoveredID = -1;
+            var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1f(this.uniforms.opacity, this._lastOpacity);
+            gl.uniform1f(this.uniforms.pointSize, this._lastPointSize);
+            gl.uniform1f(this.uniforms.hoveredPointSize, this._lastHoveredPointSize);
+            gl.uniform1i(this.uniforms.hovered_vertexID, this._lastHoveredID);
+            gl.useProgram(currentProgram);
+        }
+        // eslint-disable-next-line
+        { // assign attribute locations
+            gl.bindAttribLocation(program, 0, "pos3D");
+            gl.bindAttribLocation(program, 1, "pos2D");
+            gl.bindAttribLocation(program, 2, "rgba");
+        }
+        // eslint-disable-next-line
+        { // arrange camera uniform block
+            this.cameraBlockBingingPoint = 0;
+            this.cameraBlockTotem = totems_1.CameraUniformBlockTotemCache.get(globe);
+            var cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+            gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBingingPoint);
+        }
+    }
+    PointOnGlobeProgram.prototype.createVAO = function (pos3DBuffer, pos2DBuffer, rgbaBuffer) {
+        var gl = this.gl;
+        var vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        // eslint-disable-next-line
+        {
+            gl.bindBuffer(gl.ARRAY_BUFFER, pos3DBuffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+        }
+        // eslint-disable-next-line
+        {
+            gl.bindBuffer(gl.ARRAY_BUFFER, pos2DBuffer);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
+        }
+        // eslint-disable-next-line
+        {
+            gl.bindBuffer(gl.ARRAY_BUFFER, rgbaBuffer);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+        }
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return vao;
+    };
+    PointOnGlobeProgram.prototype.draw = function (vao, length, _a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.opacity, opacity = _c === void 0 ? 1.0 : _c, _d = _b.hoveredID, hoveredID = _d === void 0 ? -1 : _d, _e = _b.pointSize, pointSize = _e === void 0 ? 2.0 : _e, _f = _b.hoveredPointSize, hoveredPointSize = _f === void 0 ? 4.0 : _f, _g = _b.elementBuffer, elementBuffer = _g === void 0 ? null : _g;
+        if (length === 0 || opacity === 0)
+            return;
+        var _h = this, gl = _h.gl, program = _h.program, uniforms = _h.uniforms;
+        gl.useProgram(program);
+        if (this._lastOpacity !== opacity) {
+            gl.uniform1f(uniforms.opacity, opacity);
+            this._lastOpacity = opacity;
+        }
+        if (this._lastPointSize !== pointSize) {
+            gl.uniform1f(uniforms.pointSize, pointSize);
+            this._lastPointSize = pointSize;
+        }
+        if (this._lastHoveredPointSize !== hoveredPointSize) {
+            gl.uniform1f(uniforms.hoveredPointSize, hoveredPointSize);
+            this._lastHoveredPointSize = hoveredPointSize;
+        }
+        if (this._lastHoveredID !== hoveredID) {
+            gl.uniform1i(uniforms.hovered_vertexID, hoveredID);
+            this._lastHoveredID = hoveredID;
+        }
+        gl.bindVertexArray(vao);
+        this.cameraBlockTotem.bind(this.cameraBlockBingingPoint);
+        if (elementBuffer) {
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
+            gl.drawElements(gl.POINTS, length, gl.UNSIGNED_INT, 0);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        }
+        else {
+            gl.drawArrays(gl.POINTS, 0, length);
+        }
+        this.cameraBlockTotem.unbind(this.cameraBlockBingingPoint);
+        gl.bindVertexArray(null);
+    };
+    PointOnGlobeProgram.prototype.free = function () {
+        if (this._isFreed)
+            return;
+        var _a = this, gl = _a.gl, globe = _a.globe;
+        totems_1.CameraUniformBlockTotemCache.release(globe);
+        gl.deleteProgram(this.program);
+        this._isFreed = true;
+    };
+    return PointOnGlobeProgram;
+}());
+var PointOnGlobeProgramCache = Object.freeze({
+    get: function (globe) { return programcache_1.noRegisterGlobeProgramCache.getProgram(globe, PointOnGlobeProgram); },
+    release: function (globe) { return programcache_1.noRegisterGlobeProgramCache.releaseProgram(globe, PointOnGlobeProgram); }
+});
+exports.PointOnGlobeProgramCache = PointOnGlobeProgramCache;

package/programs/programcache.js

@@ -0,0 +1,131 @@
+"use strict";
+/**
+ * @module programcache
+ * @description This module provides a cache for programs. It is used to avoid creating the same program multiple times.
+ *
+ * # globeProgramCache
+ * Creates and registers programs to the globe. To the 1st object in the draw order.
+ * The programs are generally sets sets a global uniform block.
+ *
+ * # glProgramCache
+ * Creates and manages programs that are not related to the globe but to the WebGL context.
+ * The programs created by are lightweight absraction of program logic with `constructer(gl)`.
+ * These programs are generally wrapped by another class with more functionality.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noRegisterGlobeProgramCache = exports.glProgramCache = exports.globeProgramCache = void 0;
+var globeProgramCache = (function () {
+    var cache = new Map();
+    function getProgram(globe, ProgramClass) {
+        if (!cache.has(globe)) {
+            cache.set(globe, new Map());
+        }
+        ;
+        if (!cache.get(globe).has(ProgramClass)) {
+            cache.get(globe).set(ProgramClass, {
+                program: new ProgramClass(),
+                count: 1
+            });
+            var firstObject = globe.DrawOrder.GetObj(0);
+            globe.api_RegisterPlugin(cache.get(globe).get(ProgramClass).program, firstObject);
+        }
+        else {
+            cache.get(globe).get(ProgramClass).count++;
+        }
+        return cache.get(globe).get(ProgramClass).program;
+    }
+    ;
+    function releaseProgram(globe, ProgramClass) {
+        if (cache.has(globe) && cache.get(globe).has(ProgramClass)) {
+            if (cache.get(globe).get(ProgramClass).count === 0) {
+                throw new Error("The program counter is already 0, cannot release program");
+            }
+            cache.get(globe).get(ProgramClass).count--;
+            if (cache.get(globe).get(ProgramClass).count === 0) {
+                globe.api_UnRegisterPlugin(cache.get(globe).get(ProgramClass).program.id); // it calls program.free()
+                cache.get(globe).delete(ProgramClass);
+            }
+        }
+    }
+    ;
+    return Object.freeze({
+        getProgram: getProgram,
+        releaseProgram: releaseProgram
+    });
+})();
+exports.globeProgramCache = globeProgramCache;
+var glProgramCache = (function () {
+    var cache = new Map();
+    function getProgram(gl, ProgramClass) {
+        if (!cache.has(gl)) {
+            cache.set(gl, new Map());
+        }
+        ;
+        if (!cache.get(gl).has(ProgramClass)) {
+            cache.get(gl).set(ProgramClass, {
+                program: new ProgramClass(gl),
+                count: 1
+            });
+        }
+        else {
+            cache.get(gl).get(ProgramClass).count++;
+        }
+        return cache.get(gl).get(ProgramClass).program;
+    }
+    ;
+    function releaseProgram(gl, ProgramClass) {
+        if (cache.has(gl) && cache.get(gl).has(ProgramClass)) {
+            if (cache.get(gl).get(ProgramClass).count === 0) {
+                throw new Error("The program counter is already 0, cannot release program");
+            }
+            cache.get(gl).get(ProgramClass).count--;
+            if (cache.get(gl).get(ProgramClass).count === 0) {
+                cache.get(gl).get(ProgramClass).program.free();
+                cache.get(gl).delete(ProgramClass);
+            }
+        }
+    }
+    ;
+    return Object.freeze({
+        getProgram: getProgram,
+        releaseProgram: releaseProgram
+    });
+})();
+exports.glProgramCache = glProgramCache;
+var noRegisterGlobeProgramCache = (function () {
+    var cache = new Map();
+    function getProgram(globe, ProgramClass) {
+        if (!cache.has(globe)) {
+            cache.set(globe, new Map());
+        }
+        ;
+        if (!cache.get(globe).has(ProgramClass)) {
+            cache.get(globe).set(ProgramClass, {
+                program: new ProgramClass(globe),
+                count: 1
+            });
+        }
+        else {
+            cache.get(globe).get(ProgramClass).count++;
+        }
+        return cache.get(globe).get(ProgramClass).program;
+    }
+    ;
+    function releaseProgram(globe, ProgramClass) {
+        if (cache.has(globe) && cache.get(globe).has(ProgramClass)) {
+            if (cache.get(globe).get(ProgramClass).count === 0) {
+                throw new Error("The program counter is already 0, cannot release program");
+            }
+            cache.get(globe).get(ProgramClass).count--;
+            if (cache.get(globe).get(ProgramClass).count === 0) {
+                cache.get(globe).get(ProgramClass).program.free();
+                cache.get(globe).delete(ProgramClass);
+            }
+        }
+    }
+    return Object.freeze({
+        getProgram: getProgram,
+        releaseProgram: releaseProgram
+    });
+})();
+exports.noRegisterGlobeProgramCache = noRegisterGlobeProgramCache;

package/programs/rings/distancering/circleflatprogram.js

@@ -0,0 +1,114 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.programCache = void 0;
+var util_1 = require("../../../util");
+var camerauniformblock_1 = __importStar(require("../../totems/camerauniformblock"));
+var programcache_1 = require("../../programcache");
+var CIRCLE_EDGE_COUNT = 360;
+var vertexShader = "#version 300 es " +
+    util_1.shaderfunctions.PI +
+    util_1.shaderfunctions.R +
+    util_1.shaderfunctions.POLE +
+    camerauniformblock_1.CameraUniformBlockString +
+    util_1.shaderfunctions.mercatorXYToGLPosition +
+    util_1.shaderfunctions.longLatRadToMercator +
+    util_1.shaderfunctions.longLatRadToCartesian3D +
+    util_1.shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
+    util_1.shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    util_1.shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + "\n\nuniform int compass;\nuniform float circle_edge_count;\n\nuniform float opacity;\n\nin vec2 center;\nin float radius;\nin vec4 color;\nin float flag;\nout vec4 v_color;\nout vec2 v_limp;\n\nvoid main() {\n    if( flag == 1.0 || radius == 0.0) return; // flag 1.0 is hide\n    v_color = vec4(color.rgb, color.a * opacity);\n    if ( gl_VertexID == 270 ) v_color.rgb += 0.2;\n    float angle = 3.1415926535897932384626433832795 * 2.0 * (float(gl_VertexID) /  circle_edge_count);\n    if ( is3D ){\n            gl_Position = projection * view * vec4(\n            circleLimpFromLongLatRadCenterCartesian3D( center, radius, angle) - translate, 1.0);\n        v_limp = vec2(0.0, 0.0);\n        return;\n    }\n    vec2 limp;\n    if ( compass == 1 ){\n        limp = circleLimpFromLongLatRadCenterMercatorCompass(center, radius, angle);\n    } else {\n        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius, angle);\n    }   \n    v_limp = limp;\n    gl_Position = mercatorXYToGLPosition(limp);\n    \n}";
+var fragmentShader = "#version 300 es\nprecision highp float;" +
+    util_1.shaderfunctions.POLE + "\n\nin vec4 v_color;\nin vec2 v_limp;\nout vec4 outColor;\nvoid main() {\n    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }\n    outColor = v_color;\n}";
+var Logic = /** @class */ (function () {
+    function Logic(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = (0, util_1.createProgram)(this.gl, vertexShader, fragmentShader);
+        { // bind positions so bufferManager can use them
+            this.gl.bindAttribLocation(this.program, 0, "center");
+            this.gl.bindAttribLocation(this.program, 1, "radius");
+            this.gl.bindAttribLocation(this.program, 2, "color");
+            this.gl.bindAttribLocation(this.program, 3, "flag");
+        }
+        this.cameraBlockBindingPoint = 0;
+        this.cameraBlockTotem = programcache_1.globeProgramCache.getProgram(globe, camerauniformblock_1.default);
+        var cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+        this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+        this._circleEdgeCountLocation = this.gl.getUniformLocation(this.program, "circle_edge_count");
+        this._circleEdgeCount = CIRCLE_EDGE_COUNT;
+        this._compassmode = 1;
+        this._opacity = 1.0;
+        {
+            var currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1i(this._compassLocation, 1);
+            this.gl.uniform1f(this._circleEdgeCountLocation, CIRCLE_EDGE_COUNT);
+            this.gl.uniform1f(this._opacityLocation, 1.0);
+            this.gl.useProgram(currentProgram);
+        }
+    }
+    Logic.prototype.draw = function (attrBufferManager, compass, circleEdgeCount, opacity) {
+        var _a = this, gl = _a.gl, program = _a.program, cameraBlockTotem = _a.cameraBlockTotem, cameraBlockBindingPoint = _a.cameraBlockBindingPoint;
+        gl.useProgram(program);
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        attrBufferManager.bindCircleVAO();
+        if (compass !== this._compassmode) {
+            gl.uniform1i(this._compassLocation, compass);
+            this._compassmode = compass;
+        }
+        if (opacity !== this._opacity) {
+            gl.uniform1f(this._opacityLocation, opacity);
+            this._opacity = opacity;
+        }
+        if (circleEdgeCount !== this._circleEdgeCount) {
+            gl.uniform1f(this._circleEdgeCountLocation, circleEdgeCount);
+            this._circleEdgeCount = circleEdgeCount;
+        }
+        gl.drawArraysInstanced(gl.LINE_LOOP, 0, circleEdgeCount, attrBufferManager.length);
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+    };
+    Logic.prototype.free = function () {
+        this.gl.deleteProgram(this.program);
+        programcache_1.globeProgramCache.releaseProgram(this.globe, camerauniformblock_1.default);
+    };
+    return Logic;
+}());
+exports.programCache = Object.freeze({
+    getProgram: function (globe) { return programcache_1.noRegisterGlobeProgramCache.getProgram(globe, Logic); },
+    releaseProgram: function (globe) { programcache_1.noRegisterGlobeProgramCache.releaseProgram(globe, Logic); }
+});