@pirireis/webglobeplugins 0.0.4 → 0.0.6

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -0,0 +1,382 @@
+import { createProgram, shaderfunctions } from "../../../util";
+import { BufferOffsetManager } from "../../../util/account";
+import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
+import { globeProgramCache, noRegisterGlobeProgramCache } from "../../programcache";
+
+
+const vertexShader = `#version 300 es ` +
+    shaderfunctions.PI +
+    shaderfunctions.R +
+    shaderfunctions.POLE +
+    CameraUniformBlockString +
+    shaderfunctions.mercatorXYTo2DPoint +
+    shaderfunctions.longLatRadToMercator +
+    shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
+
+in vec2 center;
+in float radius;
+in float pad_range;
+in vec4 color;
+in float flag;
+in float pad_angle;
+
+uniform int compass;
+
+out vec2 v_limp;
+out vec4 v_color;
+
+
+void main() {   
+    if( flag == 1.0 || radius == 0.0 ) return; // 1.0 is hide 
+    v_color = color;
+    gl_PointSize = 2.0;
+
+    float odd = mod(float(gl_VertexID), 2.0);
+    float index = (float(gl_VertexID)- odd ) / 2.0;
+    float angle = pad_angle - 1.5707963267948966192313216916398;
+    float radius_ = radius - (pad_range * odd);
+
+    if ( is3D){  
+        gl_Position = projection * view * vec4(
+            circleLimpFromLongLatRadCenterCartesian3D( center, radius_, angle) - translate, 1.0);
+        v_limp = vec2(0.0, 0.0);
+        return;
+    }
+    vec2 limp;
+    if ( compass == 1 ){
+        limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
+    } else {
+        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+    }
+    v_limp = limp;
+    gl_Position = mercatorXYTo2DPoint(limp);
+}`;
+
+const fragmentShader = `#version 300 es
+precision highp float; ` +
+    shaderfunctions.POLE + `
+in vec4 v_color;
+in vec2 v_limp;
+out vec4 outColor;
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }
+    outColor = v_color;
+}`;
+
+
+
+
+class Logic {
+
+    constructor(globe) {
+
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+
+        {
+            const gl = this.gl;
+            this.center = gl.getAttribLocation(this.program, "center");
+            this.radius = gl.getAttribLocation(this.program, "radius");
+            this.pad_range = gl.getAttribLocation(this.program, "pad_range");
+            this.color = gl.getAttribLocation(this.program, "color");
+            this.flag = gl.getAttribLocation(this.program, "flag");
+            this.pad_angle = gl.getAttribLocation(this.program, "pad_angle");
+
+        }
+
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+
+
+        {
+            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1i(this._compassLocation, 1);
+            this._lastCompass = 1;
+            this.gl.useProgram(currentProgram);
+        }
+    }
+
+
+    draw(attrBufferManager, compass) {
+
+        const { gl, program, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
+
+        gl.useProgram(program);
+        attrBufferManager.bindPaddingVAO();
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        if (compass !== this._lastCompass) {
+            gl.uniform1i(_compassLocation, compass);
+            this._lastCompass = compass;
+        }
+        gl.disable(gl.DEPTH_TEST);
+        gl.drawArraysInstanced(gl.LINES, 0, 2, attrBufferManager.length);
+        gl.enable(gl.DEPTH_TEST);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        gl.bindVertexArray(null);
+
+    }
+    initilizeBufferManager({ bufferType = "DYNAMIC_DRAW", initialRingCapacity = 10 } = {}) {
+        return new BufferManager(this.gl, bufferType, initialRingCapacity);
+
+    }
+
+}
+
+
+export const PaddingFreeAngleCache = Object.freeze({
+    getProgram: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    releaseProgram: (globe) => globeProgramCache.releaseProgram(globe, Logic)
+})
+
+
+
+export class BufferManager extends BufferOffsetManager {
+    constructor(gl, bufferType, initialRingCapacity = 10) {
+        super(10, { capacity: initialRingCapacity, bufferType });
+        this.gl = gl;
+        this.bufferType = bufferType;
+        this.buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, this.capacity * this.itemSize * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this._centerMaps = new Map();
+        this.vao = gl.createVertexArray();
+
+        {
+            gl.bindVertexArray(this.vao);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.enableVertexAttribArray(0);
+            gl.enableVertexAttribArray(1);
+            gl.enableVertexAttribArray(2);
+            gl.enableVertexAttribArray(3);
+            gl.enableVertexAttribArray(4);
+            gl.enableVertexAttribArray(5);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 40, 0);
+            gl.vertexAttribPointer(1, 1, gl.FLOAT, false, 40, 8);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, 40, 12);
+            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, 40, 16);
+            gl.vertexAttribPointer(4, 1, gl.FLOAT, false, 40, 32);
+            gl.vertexAttribPointer(5, 1, gl.FLOAT, false, 40, 36);
+            // divisor
+            gl.vertexAttribDivisor(0, 1);
+            gl.vertexAttribDivisor(1, 1);
+            gl.vertexAttribDivisor(2, 1);
+            gl.vertexAttribDivisor(3, 1);
+            gl.vertexAttribDivisor(4, 1);
+            gl.vertexAttribDivisor(5, 1);
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindVertexArray(null);
+        }
+    }
+
+
+    __centerMapMethod(x, y, rgba, rings, hide, paddingAngles) {
+        return new Map([
+            ["x", x],
+            ["y", y],
+            ["rgba", rgba],
+            ["rings", rings],
+            ["hide", hide],
+            ["paddingAngles", paddingAngles]
+        ])
+    }
+
+
+
+
+    bindPaddingVAO() {
+        this.gl.bindVertexArray(this.vao);
+    }
+
+    //TODO: implement this
+    // insertBulk is gone. no update feature
+    // addBulk is added.
+    // deletes old centers given 
+    insertBulk(data) {
+        const { gl, buffer } = this;
+
+        const deleteCentersList = [];
+        for (const { centerID } of data) {
+            if (this._centerMaps.has(centerID)) {
+                deleteCentersList.push(centerID);
+            }
+        }
+        if (deleteCentersList.length > 0) {
+            this.removeCenters(deleteCentersList);
+        }
+
+
+        const requiredSpace = this.__requiredSpaceForBulk(data);
+
+        const spaceLeft = this.spaceLeft;
+        console.log("space left:", spaceLeft, "required space:", requiredSpace);
+        if (requiredSpace > spaceLeft) {
+            console.log("new capacity:", this.capacity + requiredSpace - spaceLeft)
+            this.extendBuffer(gl, buffer, this.bufferType, this.capacity + requiredSpace - spaceLeft);
+        }
+
+        const items = [];
+
+        for (const { centerID, x, y, rgba, paddingAngles, hide = false, rings } of data) {
+
+            this._centerMaps.set(centerID, this.__centerMapMethod(x, y, rgba, rings, hide, paddingAngles)); // x,y, rgba, hide prograbably not needed
+
+            const hideFlag = hide ? 1 : 0;
+            for (const { ringID, radius, padding } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    const _offsetMapKey = `${centerID}_${ringID}_${paddingAngle}`;
+                    const offset = this.getOffset(_offsetMapKey) | this.nextOffset();
+                    items.push({
+                        offset: offset,
+                        payload: new Float32Array([x, y, radius, padding, rgba[0], rgba[1], rgba[2], rgba[3], hideFlag, paddingAngle])
+                    })
+                    this.offSetMap.set(_offsetMapKey, offset);
+                }
+            }
+        }
+        const partOffset = 0;
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { offset, payload } of items) {
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
+        }
+    }
+
+
+    updateCentersXY(data) {
+        const { gl, buffer } = this;
+        const items = [];
+
+        for (const { centerID, x, y } of data) {
+            const center = this._centerMaps.get(centerID);
+            center.set("x", x);
+            center.set("y", y);
+            const payload = new Float32Array([x, y]);
+            const paddingAngles = center.get("paddingAngles");
+            const rings = center.get("rings");
+            for (const { ringID } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    const offsetKey = offsetMapKey(centerID, ringID, paddingAngle);
+                    items.push({ offset: this.getOffset(offsetKey), payload });
+                }
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { offset, payload } of items) {
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+
+
+    //TODO: test
+    updateCentersHide(data) {
+        const { gl, buffer } = this;
+        const items = [];
+        for (const { centerID, hide } of data) {
+            const block = new Float32Array([hide]);
+            const center = this._centerMaps.get(centerID);
+            if (!center) continue;
+            const paddingAngles = center.get("paddingAngles");
+            const rings = center.get("rings");
+            for (const { ringID } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    const offsetKey = offsetMapKey(centerID, ringID, paddingAngle);
+                    items.push({ key: offsetKey, payload: block });
+                }
+            }
+        }
+        this._updatePartial(items, 8, gl, buffer);
+    }
+
+    updateCentersColor(data) {
+        const { gl, buffer } = this;
+        const items = [];
+        for (const { centerID, rgba } of data) {
+            const center = this._centerMaps.get(centerID);
+            if (!center) continue;
+            center.set("rgba", rgba);
+            const paddingAngles = center.get("paddingAngles");
+            const rings = center.get("rings");
+            const payload = new Float32Array(rgba);
+            for (const { ringID } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    const offsetKey = offsetMapKey(centerID, ringID, paddingAngle);
+                    items.push({ key: offsetKey, payload });
+                }
+            }
+        }
+        this._updatePartial(items, 4, gl, buffer);
+    }
+
+
+
+    __requiredSpaceForBulk(data) {
+        let space = 0;
+        for (const { paddingAngles, rings } of data) {
+            space += paddingAngles.length * rings.length;
+        }
+        return space;
+    }
+
+    // TODO: TEST IT WITH INSERT
+    removeCenters(centerIDs) {
+        const keys = [];
+        for (const centerID of centerIDs) {
+            const center = this._centerMaps.get(centerID);
+            if (!center) continue;
+            const rings = center.get("rings");
+            const paddingAngles = center.get("paddingAngles");
+            for (const { ringID } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    keys.push(offsetMapKey(centerID, ringID, paddingAngle));
+                }
+            }
+            this._centerMaps.delete(centerID);
+        }
+        this._removeFromBuffer(keys);
+    }
+}
+
+
+const offsetMapKey = (centerID, ringID, paddingAngle) => `${centerID}_${ringID}_${paddingAngle}`;
+
+
+
+/**
+ * {center has x,y, color, paddingAngles, rings} key: centerID
+ * {ring has ranges, paddings} key: ringKey
+ * _offSetMap => | key: centerID_ringKey_paddingAngle | value: offset |
+ * 
+ * insertCenter
+ * 
+ * insertRing
+ * 
+ * updateCenter ---> updatesRings ---> updatesPaddings
+ *  centerMap          ringMap           
+ *   keeps              keeps
+ *  list of Rings   list of Paddings
+ * 
+ * 
+ * needs an adaptor to convert currently implemented data into this format. 
+ * current format:
+ * center = {
+ *  centerID,
+ * x,
+ * y,
+ * rings: [
+ *  radius,
+ *  paddingRadius,
+ *  rgba,
+ * ]
+ * }
+ */

package/programs/rings/distancering/circlepaddysharedbuffer.js

@@ -5,6 +5,14 @@
  *  Buffer is initialized with ring capacity and buffer is created with that capacity. It might be called buffer orphaning.
  * 
  * */
+
+
+/**
+ * TODO 
+ * delete registerCenter
+ * 
+ * 
+ */
 const RING_SIZE = 9;
 
 export default class {
@@ -14,7 +22,7 @@ export default class {
      * @param {Number} options.initialRingCapacity
      * @param {String} options.bufferType - "static" or "dynamic"
      * */
-    constructor(gl, globe, { initialRingCapacity = 20, bufferType = "static", implicitExtentionRate = 1.2 } = {}) {
+    constructor(gl, globe, { initialRingCapacity = 20, bufferType = "STATIC_DRAW", implicitExtentionRate = 1.2 } = {}) {
         this.gl = gl;
         this.globe = globe;
         this._capacity = initialRingCapacity;
@@ -158,77 +166,7 @@ export default class {
     }
 
 
-    /**
-     * @typedef centerIdringIdRadiusPaddingRgbaHide
-     * @property {String} centerID
-     * @property {String} ringID
-     * @property {Number} radius
-     * @property {Number} padding
-     * @property {Array<Number>} rgba - [r,g,b,a]
-     * @param {Array<centerIdringIdRadiusPaddingRgbaHide>} centerIdringIdRadiusPaddingRgbaHideList
-     * */
-    insertRings(centerIdringIdRadiusPaddingRgbaHideList) {
-        { // capacity check
-            this._implicitExtendBufferInNeed(centerIdringIdRadiusPaddingRgbaHideList.length);
-        }
-        const { gl, buffer } = this;
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { centerID, ringID, radius, padding, rgba, hide = false } of centerIdringIdRadiusPaddingRgbaHideList) {
-            if (!this._centerMap.has(centerID)) {
-                console.warn("Center is not registered yet");
-                return;
-            }
-            const x = this._centerMap.get(centerID).get("x");
-            const y = this._centerMap.get(centerID).get("y");
-            const bufferData = new Float32Array([x, y, radius, padding, ...rgba, hide ? 1 : 0]);
-            const key = this._ringKey(centerID, ringID);
-            let offset;
-            if (!this._ringOffsets.has(key)) {
-                offset = this._nextBufferOffset();
-                this._ringOffsets.set(key, offset);
-                this._centerMap.get(centerID).get("rings").push(key);
-            } else {
-                offset = this._ringOffsets.get(key);
-            }
-            gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
-        }
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        this.globe.DrawRender();
-    }
-
 
-    /**
-     * @typedef centerIDringID
-     * @property {String} centerID
-     * @property {String} ringID
-     * @param {Array<centerIDringID>} centerIDringIDs 
-     * @returns 
-     */
-    removeRings(centerIDringIDs) {
-        const { gl, buffer } = this;
-        const zero = new Float32Array([0]);
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { centerID, ringID } of centerIDringIDs) {
-            if (!this._centerMap.has(centerID)) {
-                console.warn("Center is not registered yet");
-                return;
-            }
-            const key = this._ringKey(centerID, ringID);
-            if (!this._ringOffsets.has(key)) {
-                console.warn("Ring is not registered yet");
-                return;
-            }
-            const offset = this._ringOffsets.get(key);
-            this._removedRingsOffsetStack.push(offset);
-            this._ringOffsets.delete(key);
-            //  set range to 0, 3rd index of float32array 
-            gl.bufferSubData(gl.ARRAY_BUFFER, offset + 8, zero);
-            this._centerMap.get(centerID).get("rings").splice(this._centerMap.get(centerID).get("rings").indexOf(key), 1);
-            this._ringCounter--;
-        }
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        this.globe.DrawRender();
-    }
 
     /**
      * @param {Array<string>} centerIDs
@@ -239,8 +177,9 @@ export default class {
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         for (let centerID of centerIDs) {
             if (!this._centerMap.has(centerID)) {
-                console.warn("Center is not registered yet");
-                return;
+                // console.warn("Center is not registered yet");
+                // return;
+                continue;
             }
             const center = this._centerMap.get(centerID);
             const rings = center.get("rings");
@@ -260,10 +199,10 @@ export default class {
 
 
     /**
-     * @typedef centerIDxyList
+     *
      * @property {String} centerID
-     * @property {Number} x mercator x
-     * @property {Number} y mercator y
+     * @property {Number} x radians x
+     * @property {Number} y radians y
      * @param {*} centerIDxyList 
      */
     updateCentersXY(centerIDxyList) {
@@ -282,10 +221,23 @@ export default class {
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         this.globe.DrawRender();
-
     }
 
 
+    updateCentersHide(data) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { centerID, hide } of data) {
+            const rings = this._centerMap.get(centerID).get("rings");
+            for (let i = 0; i < rings.length; i++) {
+                const offset = this._ringOffsets.get(rings[i]);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset + 32, new Float32Array([hide]));
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
     /**
      * 
      * @typedef centerData
@@ -312,10 +264,19 @@ export default class {
         this.globe.DrawRender();
     }
 
-
-
     insertBulk(rangeRingDatas) {
         const { gl, buffer } = this;
+
+        {// remove existring centers
+            const existingCenterIDs = [];
+            for (let { centerID } of rangeRingDatas) {
+                if (this._centerMap.has(centerID)) {
+                    existingCenterIDs.push(centerID);
+                }
+            }
+            this.removeCenters(existingCenterIDs);
+        }
+
         { // capacity check
             let incomingRingSize = 0;
             for (let { rings } of rangeRingDatas) {
@@ -325,19 +286,19 @@ export default class {
             }
             this._implicitExtendBufferInNeed(incomingRingSize);
         }
-
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         for (let { centerID, x, y, rings } of rangeRingDatas) {
-            if (!this._centerMap.has(centerID)) {
-                this.registerCenter(centerID, { x, y })
-            } else {
-                const rings = this._centerMap.get(centerID).get("rings");
-                const xy = new Float32Array([x, y]);
-                for (let i = 0; i < rings.length; i++) {
-                    const offset = this._ringOffsets.get(rings[i]);
-                    gl.bufferSubData(gl.ARRAY_BUFFER, offset, xy);
-                }
-            }
+            // if (!this._centerMap.has(centerID)) {
+            this.registerCenter(centerID, { x, y })
+            // } else {
+            //     const rings = this._centerMap.get(centerID).get("rings");
+            //     const xy = new Float32Array([x, y]);
+            //     const emptyBlock =
+            //     for (let i = 0; i < rings.length; i++) {
+            //         const offset = this._ringOffsets.get(rings[i]);
+            //         gl.bufferSubData(gl.ARRAY_BUFFER, offset, );
+            //     }
+            // }
             for (let { ringID, radius, padding, rgba, hide = false } of rings) {
                 const key = this._ringKey(centerID, ringID);
                 const bufferData = new Float32Array([x, y, radius, padding, ...rgba, hide ? 1 : 0]);
@@ -350,10 +311,8 @@ export default class {
                 } else {
                     const offset = this._ringOffsets.get(key);
                     gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
-
                 }
             }
-
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         this.globe.DrawRender();
@@ -384,6 +343,29 @@ export default class {
     }
 
 
+    /**
+     * 
+     * @param {Array<{centerID, rgba}} centersColors 
+     */
+    updateCentersColor(centersColors) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { centerID, rgba } of centersColors) {
+            if (!this._centerMap.has(centerID)) {
+                console.warn("Center is not registered yet");
+                continue;
+            }
+            const rings = this._centerMap.get(centerID).get("rings");
+            const block = new Float32Array(rgba);
+            for (let i = 0; i < rings.length; i++) {
+                const offset = this._ringOffsets.get(rings[i]);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset + 16, block);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
     // ----------------- INTERNAL METHODS ----------------- //
 
 
@@ -438,7 +420,6 @@ export default class {
 
 
     _implicitExtendBufferInNeed(incomingRingSize) {
-        console.log("implicitExtendBufferInNeed", { incomingRingSize, "capacity left": this.capacityLeft(), "capacity": this._capacity, "ring counter": this._ringCounter });
         const overCapacity = incomingRingSize - this.capacityLeft();
         if (overCapacity <= 0) return;
         const newCapacity = Math.ceil((this._capacity + overCapacity) * this.implicitExtentionRate);

package/programs/rings/distancering/index.js

@@ -1,5 +1,5 @@
 import CircleFlatProgram from './circleflatprogram';
 import PaddyFlatProgram from './paddyflatprogram';
 import CirclePaddySharedBuffer from './circlepaddysharedbuffer';
-
-export default { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer }
+import { PaddingFreeAngleCache } from './circlepaddingfreeangleprogram';
+export { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer, PaddingFreeAngleCache };

package/programs/rings/distancering/paddyflatprogram.js

@@ -28,8 +28,11 @@ out vec4 v_color;
 
 
 void main() {   
-    if( flag == 1.0 || radius == 0.0 ) return; // 1.0 is hide 
-    v_color = color;
+
+    float alpha_padding =  z_level * z_level / (pad_range/ 100.0 );
+    if( flag == 2.0 || flag == 1.0 || radius == 0.0 || alpha_padding < 0.1 || z_level < 3.0 ) return; // 1.0 is hide 
+    v_color = vec4(color.rgb, alpha_padding);
+
     gl_PointSize = 2.0;
 
     float odd = mod(float(gl_VertexID), 2.0);

package/rangerings/index.js

@@ -1,3 +1,3 @@
-import RangeRings from './rangerings';
+import RangeRings, { ENUM_HIDE } from './rangerings';
 
-export { RangeRings };
+export { RangeRings, ENUM_HIDE };