@pirireis/webglobeplugins 0.6.17 → 0.6.18

package/bearing-line/plugin.js

@@ -1,8 +1,8 @@
-import { programCache as ringProgramCache } from '../partialrings/program';
-import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
-import { CircleCache } from '../programs/line-on-globe/circle';
+import { pieceOfPieProgramCache } from '../programs/rings/partial-ring/piece-of-pie';
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
+import { CircleCache } from '../programs/line-on-globe/circle-accurate';
 import { BufferOrchestrator, BufferManager } from '../util/account';
-import { AngledLineProgramCache } from '../programs/line-on-globe/angled-line';
+import { AngledLineProgramCache } from '../programs/line-on-globe/angled-line'; // TODO calculate the bearing target for 2d and 3d and use lineOnGlobeProgram
 import { mapGetOrThrow } from "../util/check/get";
 import { ContextTextWriter } from '../write-text/context-text'
 export const RINGPARTIAL_DRAW_MODE = Object.freeze({
@@ -15,7 +15,10 @@ const constraintFloat = (x, lowerBound, upperBound) => {
     if (lowerBound > x || x > upperBound) throw new Error(`input must be between ${lowerBound} - ${upperBound}`)
 }
 
-
+/**
+ * partial ring angle should be different on globe and mercator.
+ * 
+ */
 
 
 /**
@@ -107,7 +110,7 @@ export default class Plugin {
         this.gl = gl;
         this.globe = globe;
         this.lineProgram = LineOnGlobeCache.get(globe);
-        this.ringProgram = ringProgramCache.get(globe);
+        this.ringProgram = pieceOfPieProgramCache.get(globe);
         this.angledLineProgram = AngledLineProgramCache.get(globe);
         this.circleProgram = CircleCache.get(globe);
         // this.angleTextContext = new ContextTextWriter(globe);
@@ -118,13 +121,30 @@ export default class Plugin {
             const initialCapacity = this.bufferOrchestrator.capacity;
             this.bufferManagersCompMap = new Map(
                 [
-                    ["centerCoords", {
+
+                    ["centerCoords2d", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
+                    }],
+                    ["centerCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.long, item.lat, 0, 0)),
+                    }],
+                    ["targetCoords2d", {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.long, item.lat]),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.endLong, item.endLat))
+                    }],
+                    ["targetCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.endLong, item.endLat, 0, 0))
                     }],
-                    ["targetCoords", {
+                    ["bearingTargetCoords2d", {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.endLong, item.endLat])
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.bearingLong, item.bearingLat))
+                    }],
+                    ["bearingTargetCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.bearingLong, item.bearingLat, 0, 0))
                     }],
                     ["startAngle", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
@@ -134,6 +154,26 @@ export default class Plugin {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
                         'adaptor': (item) => new Float32Array([item.tailAngle])
                     }],
+                    ["startAngle2d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.startAngle2d])
+                    }],
+                    ["tailAngle2d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.tailAngle2d])
+                    }],
+                    ["startAngle3d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.startAngle3d])
+                    }],
+                    ["tailAngle3d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.tailAngle3d])
+                    }],
+                    ["bearingDashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([0])
+                    }],
                     ["rgba", {
                         'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
                         'adaptor': (item) => new Float32Array(item.rgba)
@@ -173,38 +213,42 @@ export default class Plugin {
 
         const obj = function (bufferManagerComp) {
             return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
+
         };
 
         this.lineVao = this.lineProgram.createVAO(
-            ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+            ...['centerCoords2d', 'centerCoords3d', 'targetCoords2d', 'targetCoords3d', 'dashRatio', 'dashOpacity', '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))));
+            ...['centerCoords2d', 'centerCoords3d',
+                'startAngle2d',
+                'tailAngle2d',
+                'startAngle3d',
+                'tailAngle3d',
+                '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);
+            this.bearingLineVAO = this.lineProgram.createVAO(
+                ...['centerCoords2d', 'centerCoords3d', 'bearingTargetCoords2d', 'bearingTargetCoords3d', 'bearingDashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
         }
         // centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj
         this.circleVao = this.circleProgram.createVAO(
-            ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+            ...["centerCoords2d", "centerCoords3d", "bigRadius", "rgba", "circleDashAngle", "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.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
         if (this.drawAngleRing) {
             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);
         }
         if (this.drawBearingLine) {
-            this.angledLineProgram.draw(this.angledLineVao, this.bufferOrchestrator.length, this._opacity * 0.8);
+            this.lineProgram.draw(this.bearingLineVAO, this.bufferOrchestrator.length, this._opacity * 0.8);
         }
         if (this.drawVRM) {
             this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
@@ -254,7 +298,7 @@ export default class Plugin {
 
 
     deleteBulk(keys) {
-        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap, ["radius", "centerCoords", "targetCoords", "rgba"]);
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap);
         this._deleteTexts(keys);
         this.globe.DrawRender();
     }
@@ -278,7 +322,9 @@ export default class Plugin {
             data.push(this.__updateCoordsAdaptor(item));
         }
 
-        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords", "targetCoords", "startAngle", "tailAngle", "bearingAngle", "bigRadius", "radius"]);
+        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords2d", "centerCoords3d", "targetCoords2d", "targetCoords3d", "startAngle", "tailAngle",
+            "startAngle2d", "tailAngle2d", "startAngle3d", "tailAngle3d", "bearingTargetCoords2d", "bearingTargetCoords3d",
+            "bearingAngle", "bigRadius", "radius"]);
         globe.DrawRender();
     }
 
@@ -310,34 +356,17 @@ export default class Plugin {
 
 
     __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 circleDashAngle = item.circleDashAngle !== undefined ? item.circleDashAngle : 360;
-        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;
-        }
+
+        const coordsData = this.__updateCoordsAdaptor(item);
+
         return {
-            key: item.key,
-            lat,
-            long,
-            endLat,
-            endLong,
-            bearingAngle,
-            radius,
-            bigRadius,
-            startAngle,
-            tailAngle,
+            ...coordsData,
             rgba,
             dashRatio,
             dashOpacity,
@@ -353,27 +382,44 @@ export default class Plugin {
         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 { long: bearingLong, lat: bearingLat } = this.globe.Math.FindPointByPolar(item.long, item.lat, bigRadius, item.bearingAngle)
+
+        const startAngle2d = calculateStartAngle(long, lat, endLong, endLat);
+        const bearingAngle2d = calculateStartAngle(long, lat, radian(bearingLong), radian(bearingLat))
+        let tailAngle2d = bearingAngle2d - startAngle2d;
+        if (tailAngle2d > 0) {
+            tailAngle2d -= Math.PI * 2;
+        }
+
         const bearingAngle = radian(item.bearingAngle - 90);
-        let tailAngle = bearingAngle - startAngle;
-        if (tailAngle > 0) {
-            tailAngle -= Math.PI * 2;
+        const startAngle3d = radian(this.globe.Math.GetAzimuthAngle(item.long, item.lat, item.endLong, item.endLat)) - radian(90);
+        let tailAngle3d = bearingAngle - startAngle3d;
+        if (tailAngle3d > 0) {
+            tailAngle3d -= Math.PI * 2;
         }
+
         return {
             key: item.key,
-            lat,
-            long,
-            endLat,
-            endLong,
+            lat: item.lat,
+            long: item.long,
+            endLat: item.endLat,
+            endLong: item.endLong,
             bearingAngle,
             radius,
             bigRadius,
-            startAngle,
-            tailAngle,
+            startAngle2d,
+            tailAngle2d,
+            startAngle3d,
+            tailAngle3d,
+            bearingLong,
+            bearingLat
         };
     }
 
 
+
     //TODO free
     free() {
         if (this.isFreed) return;
@@ -381,7 +427,7 @@ export default class Plugin {
             bufferManager.free();
         });
         LineOnGlobeCache.release(this.globe);
-        ringProgramCache.release(this.globe);
+        pieceOfPieProgramCache.release(this.globe);
         CircleCache.release(this.globe);
         AngledLineProgramCache.release(this.globe);
         this.isFreed = true;
@@ -418,7 +464,7 @@ const integralSec = (angle) => {
     return Math.log(Math.tan(angle / 2 + Math.PI / 4));
 }
 
-const textWriterGetOrThrow = mapGetOrThrow("textContextInjection id does not exist in map:")
+const textWriterGetOrThrow = mapGetOrThrow("BearingLine textContextInjection id does not exist in map")
 
 const calculateStartAngle = (long, lat, endLong, endLat) => {
     const dLat = (integralSec(endLat) - integralSec(lat)); // Because lines are strectes toward poles.

package/bearing-line/pluginOLD.js

@@ -0,0 +1,430 @@
+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 { mapGetOrThrow } from "../util/check/get";
+import { ContextTextWriter } from '../write-text/context-text'
+export const RINGPARTIAL_DRAW_MODE = Object.freeze({
+    LINE_STRIP: "LINE_STRIP",
+    TRIANGLE_FAN: "TRIANGLE_FAN",
+});
+
+const constraintFloat = (x, lowerBound, upperBound) => {
+    if (typeof x !== "number") throw new Error("type must be numberic")
+    if (lowerBound > x || x > upperBound) throw new Error(`input must be between ${lowerBound} - ${upperBound}`)
+}
+
+
+
+
+/**
+ * @typedef {Object}textContextInjection
+ * @property {string} id
+ * @property {function} coordsAdaptor
+ * @property {function} textAdaptor
+ * @property {ContextTextWriter} writer
+ * 
+ */
+
+export default class Plugin {
+    /**
+     * 
+     * @param {*} id 
+     * @param {Map<[K ,{writer:ContextTextWriter, coordsAdaptor, textAdaptor}]} textContextInjectionMap  import { ContextTextWriter } from '@pirireis/webglobeplugins/write-text/context-text';
+     * 
+     */
+
+    constructor(id, { opacity = 1, textContextInjectionMap = new Map(), drawVRM = true, drawBearingLine = true, drawAngleRing = true, drawText = true } = {}) {
+        this.id = id;
+        this._opacity = opacity;
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+        this._checkTextContextInjectionMap(textContextInjectionMap);
+        this._textContextInjectionMap = textContextInjectionMap;
+        this.drawVRM = drawVRM;
+        this.drawBearingLine = drawBearingLine;
+        this.drawAngleRing = drawAngleRing;
+        this.drawText = drawText;
+    }
+
+    setDoDrawVRM(bool) {
+        if (bool === this.drawVRM) return;
+        this.drawVRM = bool;
+        this.globe.DrawRender();
+    }
+
+    setDoDrawText(bool) {
+        if (bool === this.drawText) return;
+        this.drawText = bool;
+        this.globe.DrawRender();
+    }
+
+    setDoDrawText(bool) {
+        if (bool === this.drawText) return;
+        this.drawText = bool;
+        this.globe.DrawRender();
+    }
+
+    _checkTextContextInjectionMap(textContextInjectionMap) {
+        if (!(textContextInjectionMap instanceof Map)) throw new TypeError("textContextInjectionMap is not instance of Map");
+        textContextInjectionMap.forEach((v) => {
+            if (typeof v !== 'object') throw new TypeError("textContextInjectionMap format is wrong");
+            if (typeof v.coordsAdaptor !== 'function') throw new TypeError("textContextInjectionMap coordsAdaptor format is wrong");
+            if (typeof v.textAdaptor !== 'function') throw new TypeError("textContextInjectionMap textAdaptor format is wrong");
+            if (!(v.writer instanceof ContextTextWriter)) throw new TypeError("textContextInjectionMap writer is not instance of ContextTextWriter");
+        })
+    }
+
+    setDoDrawAngleRing(bool) {
+        if (bool === this.drawAngleRing) return;
+        this.drawAngleRing = bool;
+        this.globe.DrawRender();
+    }
+
+
+    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) {
+        constraintFloat(opacity, 0, 1);
+        this._opacity = opacity;
+        this._textContextInjectionMap.forEach(({ writer }) => writer.setOpacity(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])
+                    }],
+                    ["circleDashAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.circleDashAngle / 360])
+                    }]
+                ]
+            );
+        }
+
+
+        const obj = function (bufferManagerComp) {
+            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
+        };
+
+        this.lineVao = this.lineProgram.createVAO(
+            ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', '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", "bigRadius", "rgba", "circleDashAngle", "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);
+        if (this.drawAngleRing) {
+            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);
+        }
+        if (this.drawBearingLine) {
+            this.angledLineProgram.draw(this.angledLineVao, this.bufferOrchestrator.length, this._opacity * 0.8);
+        }
+        if (this.drawVRM) {
+            this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+        }
+        if (this.drawText) {
+            this._textContextInjectionMap.forEach((e) => { e.writer.draw(); });
+        }
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+
+    /**
+     * @typedef {{key, long, lat, endLong, endLat, bearingAngle, radius,  rgba:[4numbers], rgbaMode, bigRadius, dashRatio, dashOpacity, circleDashAngle}} item
+     * @property {string} key   
+     * @property {number} long
+     * @property {number} lat
+     * @property {number} endLong
+     * @property {number} endLat 
+     * @property {number} bearingAngle 0-360
+     * @property {number} radius angle ring radius
+     * @property {Array<4numbers>} rgba [r,g,b,a]
+     * @property {number} rgbaMode 0 constant, 1 fading, 2 hides angle ring
+     * @property {number} bigRadius undefined means it will be calculated from long, lat, endLong, endLat
+     * @property {number} dashRatio 0-1
+     * @property {number} dashOpacity 0-1
+     * @property {number} circleDashAngle 0-360
+     * @param {Array<item>} items 
+     * @param {Array<string>} textWriterInjectionSubSetIDs | textContextInjectionMap keys to be used for writing text.
+     */
+    insertBulk(items, textWriterInjectionSubSetIDs = []) {
+        const { globe, bufferOrchestrator, bufferManagersCompMap } = this;// angleTextContext, distanceTextContext,
+        const textWriterInjectionSubSets = textWriterGetOrThrow(this._textContextInjectionMap, textWriterInjectionSubSetIDs);
+        const data = []
+        for (let item of items) {
+            this._insertTexts(item, textWriterInjectionSubSets);
+            data.push(this.__insertAdaptor(item));
+        }
+        bufferOrchestrator.insertBulk(data, bufferManagersCompMap);
+        this._textContextInjectionMap.forEach((v) => {
+            const { writer } = v;
+            writer.updateOpacityBulk(items, (e) => e.key, (e) => e.rgba[3]);
+        })
+        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);
+    }
+
+    /**
+     * 
+     * @param {Array<{key, long, lat, endLong, endLat, bearingAngle}>} items
+     * @param {Array<string>} textWriterInjectionSubSetIDs | textContextInjectionMap keys to be used for writing text.
+     */
+    updateCoordinatesBulk(items, textWriterInjectionSubSetIDs = []) { //TODO
+        const injectionsSubSet = textWriterGetOrThrow(this._textContextInjectionMap, textWriterInjectionSubSetIDs);;
+        const { globe, bufferOrchestrator, bufferManagersCompMap, } = this;
+        const data = []
+        for (let item of items) {
+            this._insertTexts(item, injectionsSubSet);
+            data.push(this.__updateCoordsAdaptor(item));
+        }
+
+        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords", "targetCoords", "startAngle", "tailAngle", "bearingAngle", "bigRadius", "radius"]);
+        globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {*} items some colums EXCEPT positional ones
+     * @param {string} propertyIDs 
+     * @param {string} textWriterInjectionSubSetIDs 
+     * Do NOT send empty data if property ID of this data is entered or NaN is loaded to the buffer, resulting in an unwanted behaviour.
+     */
+    updatePartial(items, propertyIDs = [], textWriterInjectionSubSetIDs = []) { // textWriterInjectionSubSetIDs = []
+        if (propertyIDs.length === 0) console.warn("updatePartial is called with no target propertyIDs");
+        const { _textContextInjectionMap, bufferOrchestrator, bufferManagersCompMap } = this;
+        const writers = textWriterGetOrThrow(this._textContextInjectionMap, textWriterInjectionSubSetIDs);
+        for (let item of items) { this._insertTexts(item, writers) }
+        bufferOrchestrator.updateBulk(items, bufferManagersCompMap, propertyIDs);
+        // patch to update text opacity
+        for (const property of propertyIDs) {
+            if (property === "rgba") {
+                _textContextInjectionMap.forEach((v) => {
+                    const { writer } = v;
+                    writer.updateOpacityBulk(items, (e) => e.key, (e) => e.rgba[3]);
+                })
+            }
+        }
+        this.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 circleDashAngle = item.circleDashAngle !== undefined ? item.circleDashAngle : 360;
+        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,
+            circleDashAngle,
+            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, textWriterInjectionSubSet) {
+        //TODO This method can be more performant if it works horizontally, tabular
+        textWriterInjectionSubSet.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 textWriterGetOrThrow = mapGetOrThrow("BearingLine textContextInjection id does not exist in map")
+
+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/package.json

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

package/pin/pin-point-totem.js

@@ -0,0 +1,77 @@
+/**
+ * This class registered as globe plugin one for each globe. to the head of plugin call stack. 
+ */
+
+class PinPointTotem {
+    constructor(globe) {
+
+        this.objectArrayMap = new Map()
+    }
+
+
+    /**
+     * objectArray
+     * callbacks ={
+     *  mouseDown,
+     *  mouseMove,
+     *  mouseUp,
+     *  mouseClick,
+     *  mouseDbClick,
+     *  keyDown,
+     *  keyUp
+     * }
+     */
+    registerPinMap(objectArray, callbacks) {
+        this.objectArrayMap.set(objectArray, callbacks);
+    }
+
+    unregisterPinMap(objectArray) {
+        if (this.objectArrayMap.has(objectArray)) {
+            this.objectArrayMap.delete(objectArray);
+        } else {
+            console.warn('PinPointTotem objectArrayMap does not contain the objectArray')
+        }
+    }
+
+
+    // GlobeMethods
+    // haritada sol butona basıldığında çağrılır
+    mouseDown(x, y, event) {
+
+        return false
+    }
+
+    // mouse'a basılıp hareket ettirildiğinde, mouseDown'dan true dönmüşse çağrılır
+    mouseMove(x, y, event) {
+
+    }
+
+    // mouse up'ın left'i mouseDown'dan true dönmüşse çağrılır, edit mode içindir
+    // right'i ise sağ tıka basılıp bırakıldığında çağrılır
+    mouseUp(x, y, event) {
+
+    }
+
+    // harita üzerinde tıklandığında çağrılır
+    mouseClick(x, y, event) {
+
+        return false
+    }
+
+    // harita üzerinde çift tıklandığında çağrılır
+    mouseDblClick(x, y, event) {
+        return false
+    }
+
+    // klavyeden bir tuşa basıldığı anda ve tuşa basılı kalınmaya devam edildiği durumlarda çalışır
+    keyDown(event) {
+        return false
+    }
+
+    // klavyedeki bir tuştan parmak çekildiği anda çalışır
+    keyUp(event) {
+
+        return false
+    }
+
+}

package/programs/line-on-globe/circle-accurate.js

@@ -58,7 +58,7 @@ void main() {
         v_limp = vec2(0.0, 0.0);
     } else {
         vec2 position;  
-        if ( radius < 1000.0) {
+        if ( radius < 0.0) {
             float cosine1 = cos(asin(tanh(center_position.y / 6378137.0)));
             position = circleLimpFromLongLatRadCenterMercatorCompass_accurate(center_position, radius /  cosine1 , angle);
         } else {

package/programs/line-on-globe/naive-accurate.js

@@ -5,7 +5,7 @@ import { noRegisterGlobeProgramCache, globeProgramCache } from "../programcache"
 import BufferOffsetManger from "../../util/account/bufferoffsetmanager";
 import { programCache } from "../rings/distancering/circleflatprogram";
 
-const GLOBE_MIDPOINT_COUNT = 100;
+const GLOBE_MIDPOINT_COUNT = 30;
 const ITEM_SIZE = 9;
 
 const vertexShader = `#version 300 es
@@ -17,7 +17,7 @@ ${mercatorXYToGLPosition}
 ${cartesian3DToGLPosition}
 
 in vec2 start_position;
-in vec3 start_poisition3d;
+in vec3 start_position3d;
 in vec2 end_position;
 in vec3 end_position3d;
 in float dash_ratio;
@@ -34,7 +34,12 @@ void main() {
     vec2 longLat;
     if (is3D) {
         interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT - 1}.0;
-        vec3 cartesian = pointsOnSphereBetween(start_poisition3d, end_position3d, interpolation) * length(end_position3d);
+        vec3 cartesian;
+        if ( length( start_position3d - end_position3d) < 4.4){
+            cartesian = mix( start_position3d, end_position3d, interpolation);
+        } else {
+            cartesian = pointsOnSphereBetween(start_position3d, end_position3d, interpolation) * length(end_position3d);
+        }
         gl_Position = cartesian3DToGLPosition(cartesian);
         v_limp = vec2(0.0, 0.0);
     } else {
@@ -124,11 +129,9 @@ class Logic {
             this._lastOpacity = opacity;
         }
         const drawCount = globe.api_GetCurrentGeometry() === 0 ? GLOBE_MIDPOINT_COUNT : 2;
-        // gl.disable(gl.DEPTH_TEST);
         gl.drawArraysInstanced(gl.LINE_STRIP, 0, drawCount, length);
         gl.bindVertexArray(null);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
-        // gl.enable(gl.DEPTH_TEST);
     }
 
     //

package/programs/rings/partial-ring/piece-of-pie.js

@@ -0,0 +1,315 @@
+import { createProgram, shaderfunctions } from "../../../util";
+import { CameraUniformBlockTotem, CameraUniformBlockString } from "../../totems";
+import { noRegisterGlobeProgramCache, globeProgramCache } from "../../programcache";
+import {
+    POLE,
+    PI,
+    longLatRadToMercator,
+    mercatorXYToGLPosition,
+    longLatRadToCartesian3D,
+    circleLimpFromLongLatRadCenterCartesian3D_accurate,
+    circleLimpFromLongLatRadCenterMercatorCompass_accurate,
+    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
+    cartesian3DToGLPosition
+
+
+} from "../../../util/shaderfunctions/geometrytransformations";
+
+
+/**
+ * TODO:
+ * 1. Triangle face looks at screen. if rotation angle is positive the last vertex must be the faintest.
+ * 
+ */
+
+const drawModeMap = Object.freeze({
+    LINE_STRIP: 0,
+    TRIANGLE_FAN: 1,
+});
+
+
+
+const vertexShaderSource = `#version 300 es
+
+${CameraUniformBlockString} 
+${PI} 
+${longLatRadToMercator}
+${mercatorXYToGLPosition}
+${longLatRadToCartesian3D}
+${circleLimpFromLongLatRadCenterCartesian3D_accurate}
+${circleLimpFromLongLatRadCenterMercatorCompass_accurate}
+${circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate}
+${cartesian3DToGLPosition}
+
+uniform float edge_count;
+uniform int draw_mode; // %2 => 0: LINE_STRIP, 1: TRIANGLE_FAN 
+uniform float plugin_alpha_multiplier;
+//, lat, startAngle, tailAngle, ...rgba, radius, rgbaMode
+// in vec2 center; // long, lat in radian
+in vec2 center2d;
+in vec3 center3d;
+in float start_angle2d; 
+in float tail_angle2d;
+
+in float start_angle3d;
+in float tail_angle3d;
+
+in vec4 color;
+in float radius; // in meter
+in float color_mode; // 0.0: constant, 1.0: fading, 2.0: hide
+// flat out int vid;
+// flat out float v_phase;
+out vec2 v_pos;
+out vec4 v_color;
+// flat out float v_angle;
+
+void main() {
+    // vid = gl_VertexID;
+    if (color_mode == 2.0 || radius == 0.0) { return; }
+    float start_angle, tail_angle;
+    if (is3D) {
+        start_angle = start_angle3d;
+        tail_angle = tail_angle3d;
+    } else {
+        start_angle = start_angle2d;
+        tail_angle = tail_angle2d;
+    }
+    float color_mode_ = color_mode;
+    if ( draw_mode == 0 && color_mode == 1.0) {color_mode_ = 0.0;}
+    float vertexID = float(gl_VertexID);
+    float radius_ = radius;
+    float alpha = plugin_alpha_multiplier;
+    if (draw_mode == 1) { // TRIANGLE_FAN
+        if (gl_VertexID == 0) { 
+            radius_ = 0.0; 
+            if ( color_mode == 1.0 ) { alpha = 0.0; }
+        }
+        vertexID -= 1.0;
+    }
+    float phase = ( vertexID  / (edge_count - 1.0) );
+    // v_angle = tail_angle;
+    
+    if ( color_mode_ == 1.0 ) {
+        if ( tail_angle < 0.0 ) {
+                v_color = vec4( color.rgb , color.a * ( 1.0 - phase ) * alpha );
+            } else {
+                v_color = vec4( color.rgb , color.a * phase * alpha );
+        }
+    } else {
+        v_color = vec4( color.rgb , color.a * alpha );
+    }
+    if ( color_mode == 0.0 && draw_mode == 1 ) {
+        v_color.a /= 2.0;
+    }
+    float angle;
+    if ( tail_angle > 0.0 ) { 
+        angle =  tail_angle * (-phase + 1.0) + start_angle;
+        } else {
+        angle = tail_angle * phase + start_angle;
+    }
+    if (is3D) {
+        vec3 pos = circleLimpFromLongLatRadCenterCartesian3D_accurate(center3d, radius_, angle);
+        v_pos = vec2(0.0, 0.0);
+        gl_Position = cartesian3DToGLPosition(pos);
+    }
+    else {
+        vec2 pos2 = circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate(center2d, radius_, angle);
+        v_pos = pos2;
+        gl_Position = mercatorXYToGLPosition(pos2);
+    }
+
+    gl_PointSize = 10.0;
+}`;
+
+
+const fragmentShaderSource = `#version 300 es` + POLE + PI + `
+precision highp float;
+// flat in int vid;
+in vec4 v_color;
+in vec2 v_pos;
+// flat in float v_phase;
+// in float v_angle;
+out vec4 outColor;
+void main() {
+    // if( vid % 2 == 0 ) { discard; }
+    // if ( mod(v_angle, PI / 36.0 ) < (PI / 72.0)) { discard; }
+    // if ( mod(v_angle * v_phase,  PI / 90.0 ) < (PI / 180.0)) { discard; }
+    if ( v_pos.x < -POLE || v_pos.x > POLE || v_pos.y < -POLE || v_pos.y > POLE ) { discard; }
+    outColor = v_color;
+}`;
+
+export const ITEM_SIZE = 10;
+
+export class Logic {
+
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this._lastMode = 0;
+        this._lastEdgeCount = 64;
+        this._lastAlphaMultiplier = 1.0;
+
+        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
+        const { gl, program } = this;
+        {   // set attributes locations 
+            gl.bindAttribLocation(program, 0, 'center2d');
+            gl.bindAttribLocation(program, 1, 'center3d')
+            gl.bindAttribLocation(program, 2, 'start_angle2d');
+            gl.bindAttribLocation(program, 3, 'tail_angle2d');
+            gl.bindAttribLocation(program, 4, 'start_angle3d');
+            gl.bindAttribLocation(program, 5, 'tail_angle3d');
+            gl.bindAttribLocation(program, 6, 'color');
+            gl.bindAttribLocation(program, 7, 'radius');
+            gl.bindAttribLocation(program, 8, 'color_mode');
+            // vao
+            // instanced draw read 1 
+        }
+        {   // Uniforms
+            this._edgeCountLocation = gl.getUniformLocation(program, 'edge_count');
+            this._draw_modeLocation = gl.getUniformLocation(program, 'draw_mode');
+            this._plugin_alpha_multiplierLocation = gl.getUniformLocation(program, 'plugin_alpha_multiplier');
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1i(this._draw_modeLocation, this._lastMode);
+            gl.uniform1f(this._edgeCountLocation, this._lastEdgeCount);
+            gl.uniform1f(this._plugin_alpha_multiplierLocation, 1.0);
+
+            this.cameraBlockBindingPoint = 0;
+            this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+            const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+            gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
+
+            gl.useProgram(currentProgram);
+        }
+
+    }
+
+
+
+    draw(length, vao, edgeCount, alphaMultiplier, drawMode) {
+        const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this
+
+        // gl.disable(gl.DEPTH_TEST);
+        gl.useProgram(program);
+        if (drawMode !== this._lastMode) {
+            gl.uniform1i(this._draw_modeLocation, drawModeMap[drawMode]);
+            this._lastMode = drawMode;
+        }
+        if (edgeCount !== this._lastEdgeCount) {
+            gl.uniform1f(this._edgeCountLocation, edgeCount);
+            this._lastEdgeCount = edgeCount;
+        }
+        if (alphaMultiplier !== this._lastAlphaMultiplier) {
+            gl.uniform1f(this._plugin_alpha_multiplierLocation, alphaMultiplier);
+            this._lastAlphaMultiplier = alphaMultiplier;
+        }
+        const overdraw = drawModeMap[drawMode];
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        gl.bindVertexArray(vao);
+        gl.drawArraysInstanced(gl[drawMode], 0, edgeCount + overdraw, length);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        gl.bindVertexArray(null);
+        // gl.enable(gl.DEPTH_TEST);
+    }
+
+
+    free() {
+        noRegisterGlobeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+        this.gl.deleteProgram(this.program);
+        this.program = null;
+    }
+
+
+    /**
+     * in vec2 center; // long, lat in radian
+    in float start_angle; // the start of partial circle from bearing point
+    in float tail_angle; // the rotation of the partial circle
+    in vec4 color;
+    in float radius; // in meter
+    in float color_mode; // 0.0: constant, 1.0: fading, 2.0: hide
+     */
+
+    createVAO(center2dObj, center3dObj, startAngle2DObj, tailAngle2DObj, startAngle3DObj, tailAngle3DObj, colorObj, radiusObj, colorModeObj) {
+
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+
+        {
+            const { buffer, stride, offset } = center2dObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(0, 1);
+        }
+
+        {
+            const { buffer, stride, offset } = center3dObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 3, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(1, 1);
+        }
+
+        {
+            const { buffer, stride, offset } = startAngle2DObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(2, 1);
+        }
+        {
+            const { buffer, stride, offset } = tailAngle2DObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(3, 1);
+        }
+        {
+            const { buffer, stride, offset } = startAngle3DObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(4);
+            gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(4, 1);
+        }
+        {
+            const { buffer, stride, offset } = tailAngle3DObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(5);
+            gl.vertexAttribPointer(5, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(5, 1);
+        }
+        {
+            const { buffer, stride, offset } = colorObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(6);
+            gl.vertexAttribPointer(6, 4, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(6, 1);
+        }
+        {
+            const { buffer, stride, offset } = radiusObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(7);
+            gl.vertexAttribPointer(7, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(7, 1);
+        }
+        {
+            const { buffer, stride, offset } = colorModeObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(8);
+            gl.vertexAttribPointer(8, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(8, 1);
+        }
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return vao;
+    }
+
+
+
+}
+
+export const pieceOfPieProgramCache = Object.freeze({
+    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
+});

package/util/check/get.js

@@ -4,7 +4,7 @@ export const mapGetOrThrow = (errorNote) => {
         const result = [];
         for (let i = 0; i < ids.length; i++) {
             const e = mapInstance.get(ids[i]);
-            if (e === undefined) throw new Error(errorNote + ":" + ids[i]);
+            if (e === undefined) throw new Error(errorNote + " " + ids[i]);
             result.push(e);
         }
         return result;

package/util/shaderfunctions/geometrytransformations.js

@@ -134,10 +134,11 @@ vec2 circleLimpFromLongLatRadCenterMercatorRealDistance(vec2 center, float radiu
 
     float delta_long = atan(sin(ang) * sin_r * cos(center.y), cos_r - sin(center.y) * sin_lat);
     float longi = center.x + delta_long;
+    
 
     return vec2(
         R * longi,
-        R * log(tan(PI / 4.0 + lat / 2.0))
+        R * log(tan(PI / 4.0 + lat / 2.0)) 
     );
 }`;
 
@@ -343,10 +344,10 @@ vec2 circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate(vec2 mercato
 
     float delta_long = atan(sin(ang) * sin_r * cos(center.y), cos_r - sin(center.y) * sin_lat);
     float longi = center.x + delta_long;
-
+    float y = mix(-80.5, 80.5, abs(lat + PI / 2.0));
     return vec2(
         R * longi,
-        R * log(tan(PI / 4.0 + lat / 2.0))
+        R * log(tan(PI / 4.0 + lat / 2.0)) - y
     );
 }`;