@pirireis/webglobeplugins 0.16.0 → 0.16.2

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -1,20 +1,17 @@
-
-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.mercatorXYToGLPosition +
-    shaderfunctions.longLatRadToMercator +
-    shaderfunctions.longLatRadToCartesian3D +
-    shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
-    shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+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.mercatorXYToGLPosition +
+    shaderfunctions.longLatRadToMercator +
+    shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
 
 in vec2 center;
@@ -58,10 +55,9 @@ void main() {
     }
     v_limp = limp;
     gl_Position = mercatorXYToGLPosition(limp);
-}`;
-
+}`;
 const fragmentShader = `#version 300 es
-precision highp float; ` +
+precision highp float; ` +
     shaderfunctions.POLE + `
 in vec4 v_color;
 in vec2 v_limp;
@@ -69,306 +65,262 @@ 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;
-            // assign attribute locations
-            gl.bindAttribLocation(this.program, 0, "center");
-            gl.bindAttribLocation(this.program, 1, "radius");
-            gl.bindAttribLocation(this.program, 2, "pad_range");
-            gl.bindAttribLocation(this.program, 3, "color");
-            gl.bindAttribLocation(this.program, 4, "flag");
-            gl.bindAttribLocation(this.program, 5, "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");
-        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
-        this._opacity = 1.0;
-        {
-            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
-            this.gl.useProgram(this.program);
-            this.gl.uniform1i(this._compassLocation, 1);
-            this.gl.uniform1f(this._opacityLocation, 1.0);
-            this._lastCompass = 1;
-            this.gl.useProgram(currentProgram);
-        }
-    }
-
-
-    draw(attrBufferManager, compass, opacity) {
-
-        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;
-        }
-        if (opacity !== this._opacity) {
-            gl.uniform1f(this._opacityLocation, opacity);
-            this._opacity = opacity;
-        }
-        gl.disable(gl.DEPTH_TEST);
-        gl.drawArraysInstanced(gl.LINES, 0, 2, attrBufferManager.length);
-        cameraBlockTotem.unbind(cameraBlockBindingPoint);
-        gl.enable(gl.DEPTH_TEST);
-        gl.bindVertexArray(null);
-
-    }
-    createBuffer({ bufferType = "DYNAMIC_DRAW", initialRingCapacity = 10 } = {}) {
-        return new BufferManager(this.gl, bufferType, initialRingCapacity);
-
-    }
-
-}
-
-
-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);
-        }
-    }
-
-
-
-
-    bindPaddingVAO() {
-        this.gl.bindVertexArray(this.vao);
-    }
-
-
-    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(this.capacity + requiredSpace - spaceLeft);
-        }
-
-        const items = [];
-        for (const { centerID, x, y, rgba, paddingAngles, hide = 0, rings } of data) {
-            this._centerMaps.set(centerID, this.__centerMapMethod(rings, paddingAngles)); // x,y, rgba, hide prograbably not needed
-            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], hide, paddingAngle])
-                    })
-                    this.offSetMap.set(_offsetMapKey, offset);
-                }
-            }
-        }
-        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);
-            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);
-    }
-
-
-
-    updateCentersHide(data) {
-        const { gl, buffer } = this;
-        const items = [];
-        for (const { centerID, hide = null } of data) {
-            if (hide === null) continue;
-            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);
-    }
-
-
-    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);
-    }
-
-
-    __requiredSpaceForBulk(data) {
-        let space = 0;
-        for (const { paddingAngles, rings } of data) {
-            space += paddingAngles.length * rings.length;
-        }
-        return space;
-    }
-
-    __centerMapMethod(rings, paddingAngles) {
-        return new Map([
-            ["rings", rings],
-            ["paddingAngles", paddingAngles]
-        ])
-    }
-
-
-}
-
-
-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,
- * ]
- * }
- */
+}`;
+class Logic {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+        {
+            const gl = this.gl;
+            // assign attribute locations
+            gl.bindAttribLocation(this.program, 0, "center");
+            gl.bindAttribLocation(this.program, 1, "radius");
+            gl.bindAttribLocation(this.program, 2, "pad_range");
+            gl.bindAttribLocation(this.program, 3, "color");
+            gl.bindAttribLocation(this.program, 4, "flag");
+            gl.bindAttribLocation(this.program, 5, "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");
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+        this._opacity = 1.0;
+        {
+            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1i(this._compassLocation, 1);
+            this.gl.uniform1f(this._opacityLocation, 1.0);
+            this._lastCompass = 1;
+            this.gl.useProgram(currentProgram);
+        }
+    }
+    draw(attrBufferManager, compass, opacity) {
+        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;
+        }
+        if (opacity !== this._opacity) {
+            gl.uniform1f(this._opacityLocation, opacity);
+            this._opacity = opacity;
+        }
+        gl.disable(gl.DEPTH_TEST);
+        gl.drawArraysInstanced(gl.LINES, 0, 2, attrBufferManager.length);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        gl.enable(gl.DEPTH_TEST);
+        gl.bindVertexArray(null);
+    }
+    createBuffer({ bufferType = "DYNAMIC_DRAW", initialRingCapacity = 10 } = {}) {
+        return new BufferManager(this.gl, bufferType, initialRingCapacity);
+    }
+}
+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);
+        }
+    }
+    bindPaddingVAO() {
+        this.gl.bindVertexArray(this.vao);
+    }
+    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(this.capacity + requiredSpace - spaceLeft);
+        }
+        const items = [];
+        for (const { centerID, x, y, rgba, paddingAngles, hide = 0, rings } of data) {
+            this._centerMaps.set(centerID, this.__centerMapMethod(rings, paddingAngles)); // x,y, rgba, hide prograbably not needed
+            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], hide, paddingAngle])
+                    });
+                    this.offSetMap.set(_offsetMapKey, offset);
+                }
+            }
+        }
+        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);
+            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);
+    }
+    updateCentersHide(data) {
+        const { gl, buffer } = this;
+        const items = [];
+        for (const { centerID, hide = null } of data) {
+            if (hide === null)
+                continue;
+            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);
+    }
+    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);
+    }
+    __requiredSpaceForBulk(data) {
+        let space = 0;
+        for (const { paddingAngles, rings } of data) {
+            space += paddingAngles.length * rings.length;
+        }
+        return space;
+    }
+    __centerMapMethod(rings, paddingAngles) {
+        return new Map([
+            ["rings", rings],
+            ["paddingAngles", paddingAngles]
+        ]);
+    }
+}
+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,
+ * ]
+ * }
+ */