@pirireis/webglobeplugins 0.1.10 → 0.3.0

package/Math/angle-calculation.js

@@ -0,0 +1,12 @@
+export function bearingRealAngle(long, lat, endLong, endLat) {
+    const rLong = Radians * long;
+    const rLat = Radians * lat;
+    const rEndLong = Radians * endLong;
+    const rEndLat = Radians * endLat;
+    const delta_long = rEndLong - rLong;
+    const x = Math.sin(delta_long) * Math.cos(rEndLat);
+    const y = Math.cos(rLat) * Math.sin(rEndLat) - Math.sin(rLat) * Math.cos(rEndLat) * Math.cos(delta_long);
+    let initialBearing = Math.atan2(x, y) / Radians;
+    initialBearing = (initialBearing + 360) % 360;
+    return initialBearing;
+}

package/bearing-line/index.js

@@ -0,0 +1,2 @@
+import BearingLinePlugin from "./plugin"
+export { BearingLinePlugin };

package/bearing-line/plugin.js

@@ -0,0 +1,319 @@
+import { programCache as ringProgramCache } from '../partialrings/program';
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
+import { CircleCache } from '../programs/line-on-globe/circle';
+import { BufferOrchestrator, BufferManager } from '../util/account';
+import { AngledLineProgramCache } from '../programs/line-on-globe/angled-line';
+import { ContextTextWriter } from '../write-text/context-text'
+export const RINGPARTIAL_DRAW_MODE = Object.freeze({
+    LINE_STRIP: "LINE_STRIP",
+    TRIANGLE_FAN: "TRIANGLE_FAN",
+});
+
+
+/**
+ * @typedef {Object}textContextInjection
+ * @property {string} id
+ * @property {function} coordsAdaptor
+ * @property {function} textAdaptor
+ * @property {ContextTextWriter} writer
+ * 
+ */
+
+export default class Plugin {
+
+
+    constructor(id, { opacity = 1, textContextInjectionMap = new Map() } = {}) {
+        this.id = id;
+        this._opacity = opacity;
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+        this._textContextInjectionMap = textContextInjectionMap;
+    }
+
+
+    settextContextInjectionMap(textContextInjectionMap, data = null) {
+        this._textContextInjectionMap = textContextInjectionMap;
+        this._textContextInjectionMap.forEach(({ writer }) => writer.clear());
+        if (data) {
+            for (const item of data) {
+                this._insertTexts(item);
+            }
+        }
+
+    }
+
+    setOpacity(opacity) {
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.lineProgram = LineOnGlobeCache.get(globe);
+        this.ringProgram = ringProgramCache.get(globe);
+        this.angledLineProgram = AngledLineProgramCache.get(globe);
+        this.circleProgram = CircleCache.get(globe);
+        // this.angleTextContext = new ContextTextWriter(globe);
+        // this.distanceTextContext = new ContextTextWriter(globe);
+        {
+            // createBuffers
+            const bufferType = "DYNAMIC_DRAW";
+            const initialCapacity = this.bufferOrchestrator.capacity;
+            this.bufferManagersCompMap = new Map(
+                [
+                    ["centerCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.long, item.lat]),
+                    }],
+                    ["targetCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.endLong, item.endLat])
+                    }],
+                    ["startAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.startAngle])
+                    }],
+                    ["tailAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.tailAngle])
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(item.rgba)
+                    }],
+                    ["radius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.radius])
+                    }],
+                    ["rgbaMode", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.rgbaMode])
+                    }],
+                    ["dashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.dashRatio])
+                    }],
+                    ["bearingAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.bearingAngle])
+                    }],
+                    ["bigRadius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.bigRadius])
+                    }],
+                    ["dashOpacity", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.dashOpacity])
+                    }],
+                    ["circleDashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.circleDashRatio])
+                    }]
+                ]
+            );
+        }
+
+
+        const obj = function (bufferManagerComp) {
+            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
+        };
+
+        this.lineVao = this.lineProgram.createVAO(
+            ...['centerCoords', 'targetCoords', 'dashRatio', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        this.ringVao = this.ringProgram.createVAO(
+            ...['centerCoords', 'startAngle', 'tailAngle', 'rgba', 'radius', 'rgbaMode'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        {
+            const angledLineBuffers = ["centerCoords", "bearingAngle", "bigRadius", "rgba", "dashRatio"].map(key => obj(this.bufferManagersCompMap.get(key)));
+            // dashOpacity is same as rgba.a to eleminate effect of dashOpacity.
+            const colorBuffer = this.bufferManagersCompMap.get("rgba");
+            angledLineBuffers.push(
+                { 'buffer': colorBuffer.bufferManager.buffer, 'stride': 16, 'offset': 12 },
+            )
+            this.angledLineVao = this.angledLineProgram.createVAO(...angledLineBuffers);
+        }
+        // centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj
+        this.circleVao = this.circleProgram.createVAO(
+            ...["centerCoords", "startAngle", "bigRadius", "rgba", "circleDashRatio", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+    }
+
+
+
+    draw3D() {
+        const { gl } = this;
+        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
+        gl.disable(gl.DEPTH_TEST);
+        this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity * 0.8, RINGPARTIAL_DRAW_MODE.TRIANGLE_FAN);
+        this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity, RINGPARTIAL_DRAW_MODE.LINE_STRIP);
+        this.angledLineProgram.draw(this.angledLineVao, this.bufferOrchestrator.length, this._opacity * 0.8);
+        this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+        this._textContextInjectionMap.forEach((e) => { e.writer.draw(); });
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+
+    /**
+     * 
+     * @param {Array<{key, long, lat, endLong, endLat, bearingAngle, radius,  rgba:[4numbers]}>} items 
+     */
+
+    insertBulk(items) {
+        const { globe, bufferOrchestrator, bufferManagersCompMap } = this;// angleTextContext, distanceTextContext,
+        const data = []
+        for (let item of items) {
+            this._insertTexts(item);
+            data.push(this.__insertAdaptor(item));
+
+
+        }
+        bufferOrchestrator.insertBulk(data, bufferManagersCompMap);
+        globe.DrawRender();
+    }
+
+
+
+
+    deleteBulk(keys) {
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap, ["radius", "centerCoords", "targetCoords", "rgba"]);
+
+        this._deleteTexts(keys);
+        this.globe.DrawRender();
+    }
+
+
+    defrag() {
+        this.bufferOrchestrator.defrag(this.bufferManagersCompMap);
+        // this.globe.DrawRender();
+    }
+
+    /**
+     * 
+     * @param {Array<{key, long, lat, endLong, endLat, bearing}>} items // TODO
+     */
+    updateCoordinatesBulk(items) { //TODO
+        const { globe, bufferOrchestrator, bufferManagersCompMap, angleTextContext, distanceTextContext } = this;
+        const data = []
+        for (let item of items) {
+            this._insertTexts(item);
+            data.push(this.__updateCoordsAdaptor(item));
+        }
+
+        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords", "targetCoords", "startAngle", "tailAngle", "bearingAngle", "bigRadius", "radius"]);
+        globe.DrawRender();
+    }
+
+
+    __insertAdaptor(item) {
+        const lat = radian(item.lat)
+        const long = radian(item.long)
+        const endLat = radian(item.endLat)
+        const endLong = radian(item.endLong)
+        const rgba = item.rgba !== undefined ? item.rgba : [0, 0, 0, 0];
+        const rgbaMode = item.rgbaMode !== undefined ? item.rgbaMode : 0;
+        const dashRatio = item.dashRatio !== undefined ? item.dashRatio : 1.0;
+        const dashOpacity = item.dashOpacity !== undefined ? item.dashOpacity : 0.9;
+        const circleDashRatio = item.circleDashAngle !== undefined ? (item.circleDashAngle / 360) : 1.0;
+        console.log("cicleDashRati", circleDashRatio);
+        const bigRadius = item.bigRadius !== undefined ? item.bigRadius : this.globe.Math.GetDist3D(item.long, item.lat, item.endLong, item.endLat);
+        const radius = item.radius !== undefined ? item.radius : bigRadius * 0.2;
+        const startAngle = calculateStartAngle(long, lat, endLong, endLat);
+        const bearingAngle = radian(item.bearingAngle - 90);
+        let tailAngle = bearingAngle - startAngle;
+        if (tailAngle > 0) {
+            tailAngle -= Math.PI * 2;
+        }
+        return {
+            key: item.key,
+            lat,
+            long,
+            endLat,
+            endLong,
+            bearingAngle,
+            radius,
+            bigRadius,
+            startAngle,
+            tailAngle,
+            rgba,
+            dashRatio,
+            dashOpacity,
+            circleDashRatio,
+            rgbaMode
+        };
+    }
+
+    __updateCoordsAdaptor(item) {
+        const lat = radian(item.lat)
+        const long = radian(item.long)
+        const endLat = radian(item.endLat)
+        const endLong = radian(item.endLong)
+
+        const bigRadius = item.bigRadius !== undefined ? item.bigRadius : this.globe.Math.GetDist3D(item.long, item.lat, item.endLong, item.endLat);
+        const radius = item.radius !== undefined ? item.radius : bigRadius * 0.2;
+        const startAngle = calculateStartAngle(long, lat, endLong, endLat);
+        const bearingAngle = radian(item.bearingAngle - 90);
+        let tailAngle = bearingAngle - startAngle;
+        if (tailAngle > 0) {
+            tailAngle -= Math.PI * 2;
+        }
+        return {
+            key: item.key,
+            lat,
+            long,
+            endLat,
+            endLong,
+            bearingAngle,
+            radius,
+            bigRadius,
+            startAngle,
+            tailAngle,
+        };
+    }
+
+
+    //TODO free
+    free() {
+        if (this.isFreed) return;
+        this.bufferManagersCompMap.forEach(({ bufferManager, adaptor }) => {
+            bufferManager.free();
+        });
+        LineOnGlobeCache.release(this.globe);
+        ringProgramCache.release(this.globe);
+        CircleCache.release(this.globe);
+        AngledLineProgramCache.release(this.globe);
+        this.isFreed = true;
+    }
+
+
+
+    _insertTexts(item) {
+        this._textContextInjectionMap.forEach((v) => {
+            const { coordsAdaptor, textAdaptor, writer } = v
+            const { lat, long } = coordsAdaptor(item);
+            const text = textAdaptor(item);
+            writer.insertText(item.key, lat, long, text);
+        });
+    }
+
+    _deleteTexts(keys) {
+        this._textContextInjectionMap.forEach((e) => {
+            e.writer.deleteTextBulk(keys);
+        });
+    }
+
+}
+
+
+
+const radian = (degree) => degree * Math.PI / 180;
+
+const integralSec = (angle) => {
+    return Math.log(Math.tan(angle / 2 + Math.PI / 4));
+}
+
+const calculateStartAngle = (long, lat, endLong, endLat) => {
+    const dLat = (integralSec(endLat) - integralSec(lat)); // Because lines are strectes toward poles.
+    const dLong = endLong - long;
+
+    let angle = -Math.atan2(dLat, dLong);
+    return angle;
+}
+

package/bearing-line/roadmap.md

@@ -0,0 +1,15 @@
+# Two problems:
+lines are curved to to arrive perpendicular to the longitude lines
+patrial rings are not fit to the lines nor the bearing angle
+
+
+
+# AngledLine 
+
+Does not render
+Check:
+[-] VAO
+[-] Attributes are loaded with data  
+    Assign constants to attributes. 
+[x] Uniforms are loaded // program was not used before setting opacity
+[x] Check geometry // Assigning a constant to the geometry made all edges of the line overlap and the line was not visible

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "0.1.10",
+    "version": "0.3.0",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT"

package/partialrings/buffer-manager.js

@@ -0,0 +1,89 @@
+import BufferOffsetManager from "../util/account/bufferoffsetmanager";
+
+
+
+const ITEM_SIZE = 10;
+export default class BufferManager extends BufferOffsetManager {
+    constructor(globe, gl, buffer, { initialCapacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+        super(ITEM_SIZE, { capacity: initialCapacity });
+        this.globe = globe;
+        this.gl = gl;
+        this.buffer = buffer;
+        this.bufferType = bufferType;
+
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, initialCapacity * ITEM_SIZE * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+    /**
+     * 
+     * @param { Array<{key, long, lat, startAngle, tailAngle, radius, rgba[4], rgbaMode }>} rings 
+     * @returns 
+     */
+    insertBulk(items) {
+        if (items.length === 0) return;
+        this.autoExtendBuffer(items.length);
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, long, lat, startAngle, tailAngle, rgba, radius, rgbaMode } of items) {
+            const offset = this.getOffset(key) | this.nextOffset();
+            this.setOffset(key, offset);
+            const block = new Float32Array([
+                long, lat, startAngle, tailAngle, ...rgba, radius, rgbaMode]);
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
+            // 2         1       1           1         4       1 = 10
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @param {Array<{key, long, lat, startAngle, tailAngle}>} items
+     * 
+     * */
+    updateCenterAndAngleBulk(items) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, long, lat, startAngle, tailAngle } of items) {
+            const offset = this.getOffset(key);
+            if (offset === null) {
+                console.warn(`key ${key} not found`);
+                continue;
+            }
+            const block = new Float32Array([long, lat, startAngle, tailAngle]);
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+    /**
+     * 
+     * @param {Array<{key:string, payload:Float32Array}} items 
+     * @param {PART_OFFSET_LOOPUP} part | long, lat, START_ANGLE, ROTATION_ANGLE, RADIUS, rgba, rgba_MODE
+     * @returns 
+     */
+    updatePartial(items, part) {
+        const { gl, buffer } = this;
+        this._updatePartial(items, part, gl, buffer);
+        this.globe.DrawRender();
+
+    }
+
+
+
+    deleteBulk(keys) {
+        this._deleteBulk(keys);
+        this.globe.DrawRender();
+    }
+
+
+
+
+    free() {
+        this.gl.deleteBuffer(this.buffer);
+        this.buffer = null;
+    }
+}

package/partialrings/index.js

@@ -1,3 +1,3 @@
 import PartialRing, { RINGPARTIAL_ALPHA_MODE, RINGPARTIAL_DRAW_MODE, PART_OFFSET_LOOPUP } from './plugin';
 
-export { PartialRing, RINGPARTIAL_ALPHA_MODE, RINGPARTIAL_DRAW_MODE, PART_OFFSET_LOOPUP };
+export { PartialRing, RINGPARTIAL_ALPHA_MODE, RINGPARTIAL_DRAW_MODE, PART_OFFSET_LOOPUP };

package/partialrings/plugin.js

@@ -20,12 +20,13 @@ export const RINGPARTIAL_ALPHA_MODE = Object.freeze({
 
 
 export const PART_OFFSET_LOOPUP = Object.freeze({
-    CENTER: 0,
+    LONG: 0,
+    LAT: 1,
     START_ANGLE: 2,
     TAIL_ANGLE: 3,
-    COLOR: 4,
+    RGBA: 4,
     RADIUS: 8,
-    COLOR_MODE: 9,
+    RGBA_MODE: 9,
 });
 
 
@@ -47,8 +48,6 @@ export default class {
         const { vao, buffer } = this.program.getVaoBuffer();
         this.vao = vao;
         this.buffer = buffer;
-
-
     }
 
 
@@ -57,7 +56,7 @@ export default class {
 
         if (LOD < this.startLod || LOD > this.endLod) return;
         this.program.draw(
-            this.bufferManager,
+            this.bufferManager.length,
             this.vao,
             this.edgeCount,
             this.alphaMultiplier,
@@ -82,8 +81,8 @@ export default class {
         if (endLod !== null) this.endLod = endLod;
     }
 
-    createBufferMAnager(initialCapacity = 10, extendRatio = 1.2, bufferType = 'DYNAMIC_DRAW') {
-        if (!this.bufferManager) { this.bufferManager = new BufferManager(this.globe, this.gl, this.buffer, bufferType, { initialCapacity, extendRatio }); }
+    createBufferMAnager(initialCapacity = 10, bufferType = 'DYNAMIC_DRAW') {
+        if (!this.bufferManager) { this.bufferManager = new BufferManager(this.globe, this.gl, this.buffer, { initialCapacity, bufferType, }); }
         return this.bufferManager;
     }
 
@@ -96,13 +95,12 @@ export default class {
 
 class BufferManager extends BufferOffsetManager {
 
-    constructor(globe, gl, buffer, bufferType, { initialCapacity = 10, extendRatio = 1.2 } = {}) {
-        super(10, { capacity: initialCapacity });
+    constructor(globe, gl, buffer, { initialCapacity = 10, bufferType, } = {}) {
+        super(10, { capacity: initialCapacity, bufferType, });
         this.globe = globe;
         this.gl = gl;
         this.buffer = buffer;
         this.bufferType = bufferType;
-        this.extendRatio = extendRatio;
 
 
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
@@ -112,22 +110,20 @@ class BufferManager extends BufferOffsetManager {
 
     /**
      * 
-     * @param { Array<{key, center[2], startAngle, tailAngle, radius, color[4], color_mode }>} rings 
+     * @param { Array<{key, long, lat, startAngle, tailAngle, radius, rgba[4], rgbaMode }>} rings 
      * @returns 
      */
-    insertRings(rings) {
-        if (rings.length === 0) return;
-        this.autoExtendBuffer(rings.length);
+    insertBulk(items) {
+        if (items.length === 0) return;
+        console.log(items)
+        this.autoExtendBuffer(items.length);
         const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { key, center, startAngle, tailAngle, color, radius, colorMode } of rings) {
-            let offset = this.getOffset(key);
-            if (offset === undefined) {
-                offset = this.nextOffset();
-                this.setOffset(key, offset);
-            }
+        for (let { key, long, lat, startAngle, tailAngle, rgba, radius, rgbaMode } of items) {
+            const offset = this.getOffset(key) | this.nextOffset();
+            this.setOffset(key, offset);
             const block = new Float32Array([
-                ...center, startAngle, tailAngle, ...color, radius, colorMode]);
+                long, lat, startAngle, tailAngle, ...rgba, radius, rgbaMode]);
             gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
             // 2         1       1           1         4       1 = 10
         }
@@ -138,13 +134,13 @@ class BufferManager extends BufferOffsetManager {
 
     /**
      * 
-     * @param {Array<{key:string, payload:Float32Array}} rings 
-     * @param {PART_OFFSET_LOOPUP} part | CENTER, START_ANGLE, ROTATION_ANGLE, RADIUS, COLOR, COLOR_MODE
+     * @param {Array<{key:string, payload:Float32Array}} items 
+     * @param {PART_OFFSET_LOOPUP} part | long, lat, START_ANGLE, ROTATION_ANGLE, RADIUS, rgba, rgba_MODE
      * @returns 
      */
-    updatePartial(rings, part) {
+    updatePartial(items, part) {
         const { gl, buffer } = this;
-        this._updatePartial(rings, part, gl, buffer);
+        this._updatePartial(items, part, gl, buffer);
         this.globe.DrawRender();
 
     }
@@ -157,8 +153,6 @@ class BufferManager extends BufferOffsetManager {
     }
 
 
-
-
     free() {
         this.gl.deleteBuffer(this.buffer);
         this.buffer = null;