@pirireis/webglobeplugins 0.6.14 → 0.6.16

package/circle-line-chain/plugin.js

@@ -1,5 +1,5 @@
-import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
-import { CircleCache } from '../programs/line-on-globe/circle';
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
+import { CircleCache } from '../programs/line-on-globe/circle-accurate';
 import { LineToTheOriginCache } from "../programs/line-on-globe/to-the-origin"
 import { BufferOrchestrator, BufferManager } from "../util/account";
 import { ChainListMap } from "./chain-list-map";
@@ -84,13 +84,21 @@ export class CircleLineChainPlugin {
             const initialCapacity = this.bufferOrchestrator.capacity;
             this.bufferManagersCompMap = new Map(
                 [
-                    ["centerCoords", {
+                    ["centerCoords2d", {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([radian * item.long, radian * item.lat]),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
                     }],
-                    ["targetCoords", {
+                    ["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([radian * item.targetLong, radian * item.targetLat])
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.targetLong, item.targetLat)),
+                    }],
+                    ["targetCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.targetLong, item.targetLat, 0, 0)),
                     }],
                     ["rgba", {
                         'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
@@ -133,11 +141,11 @@ export class CircleLineChainPlugin {
                 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.circleVao = this.circleProgram.createVAO(
-                ...["centerCoords", "bigRadius", "rgbaCircle", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
-            this.toOriginVao = this.lineToTheOriginProgram.createVAO(
-                ...["targetCoords", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key))));
+                ...["centerCoords2d", "centerCoords3d", "bigRadius", "rgbaCircle", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+            // this.toOriginVao = this.lineToTheOriginProgram.createVAO(
+            //     ...["targetCoords", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key))));
         }
 
     }

package/circle-line-chain/plugin_old.js

@@ -0,0 +1,398 @@
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
+import { CircleCache } from '../programs/line-on-globe/circle';
+import { LineToTheOriginCache } from "../programs/line-on-globe/to-the-origin"
+import { BufferOrchestrator, BufferManager } from "../util/account";
+import { ChainListMap } from "./chain-list-map";
+import { mapGetOrThrow } from "../util/check/get";
+import { keyMethod } from "./util";
+import { ContextTextWriter3 } from '../write-text/context-text3';
+// TODO: Add update buffer and update text mehods on add, delete, update methods
+
+
+/**
+ * Insert info to chain list map (nodes and properties)
+ * 
+ * ask chain list map for text data
+ * ask chain list map for buffer data
+ * 
+ * 
+ * addNode
+ * insertBulk
+ * deleteChain
+ * deleteNodes
+ * updateCoordinates()
+ * updateChainProperties
+ */
+
+
+/**
+ * @typedef StyleProperties
+ * @property {[0-1,0-1,0-1,0-1]} rgba
+ * @property { 0-1 } dashOpacity 
+ * @property { 0-1 } dashRatio
+ * @property {0-360} circleDashAngle 
+ * @property {Array<node>} nodes
+ */
+
+const radian = Math.PI / 180;
+
+export class CircleLineChainPlugin {
+    /**
+     * 
+     * @param {*} id 
+     * @param {Map<[key, ContextTextWriter3]} textContextWriterInjectionMap //import { ContextTextWriter3 } from "@pirireis/webglobeplugins/write-text/context-text3"; 
+     */
+    constructor(id, {
+        drawCircleOn = true,
+        textContextWriterInjectionMap = new Map(),
+        textDataPreAdaptor = null
+    } = {}) {
+        this.id = id;
+        this._checkTextContextWriterInjectionMap(textContextWriterInjectionMap);
+        this._textContextWriterInjectionMap = textContextWriterInjectionMap;
+        this._textContextWriterInjectionMap.forEach((writer) => writer.setKeyAdaptor((v, i, c, properties) => v.__identity__));
+        this._opacity = 1;
+        this._chainListMap = new ChainListMap(keyMethod);
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+        this._drawCircleOn = drawCircleOn;
+        this._textDataPreAdaptor = textDataPreAdaptor;
+    }
+
+    // init
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe
+        this._initOrchestrations()
+    }
+
+    _checkTextContextWriterInjectionMap(textContextWriterInjectionMap) {
+        if (!(textContextWriterInjectionMap instanceof Map)) throw new Error("textContextWriterInjectionMap is not an instance of Map");
+        textContextWriterInjectionMap.forEach((v) => {
+            if (!(v instanceof ContextTextWriter3)) throw new Error("textContextWriterInjectionMap element is not an instance of ContextTextWriter3");
+        });
+    }
+
+    _initOrchestrations() {
+        const { gl, globe } = this;
+        this.lineProgram = LineOnGlobeCache.get(globe);
+        this.circleProgram = CircleCache.get(globe);
+        this.lineToTheOriginProgram = LineToTheOriginCache.get(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([radian * item.long, radian * item.lat]),
+                    }],
+                    ["targetCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([radian * item.targetLong, radian * item.targetLat])
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => {
+                            if (item.lineProperties?.rgba) return new Float32Array(item.lineProperties.rgba);
+                            return new Float32Array(item.chainProperties.rgba);
+                        }
+                    }],
+                    ["bigRadius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.bigRadius])
+                    }],
+                    ["dashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.chainProperties.dashRatio])
+                    }],
+
+                    ["dashOpacity", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.chainProperties.dashOpacity])
+                    }],
+                    ["circleDashAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => {
+                            if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
+                            return new Float32Array([item.chainProperties.circleDashAngle / 360]);
+                        }
+                    }],
+                    ["rgbaCircle", {
+                        "bufferManager": new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        "adaptor": (item) => {
+                            if (item.circleProperties?.rgba) return new Float32Array(item.circleProperties.rgba);
+                            return new Float32Array(item.chainProperties.rgba);
+                        }
+                    }]
+                ]
+            );
+            // (startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj)
+            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.circleVao = this.circleProgram.createVAO(
+                ...["centerCoords", "bigRadius", "rgbaCircle", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+            this.toOriginVao = this.lineToTheOriginProgram.createVAO(
+                ...["targetCoords", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key))));
+        }
+
+    }
+
+
+    // API
+    setDrawCircleOn(bool) {
+        if (typeof bool !== 'boolean') throw new Error("setDrawCircleOn parameter must be a boolean");
+        this._drawCircleOn = bool;
+        this.globe.DrawRender();
+    }
+    // -- update bulk family
+    /**
+     * 
+     * @param {Array<chain>} data 
+     * @typedef chain
+     * @property {string} chainKey
+     * @property {Array<node>} nodes
+     * @typedef {Object} node
+     * @property {string} key
+     * @property {number} long
+     * @property {number} lat  
+     */
+    updateCoordinatesBulk(data, { textWriterIDs = [] } = {}) {
+        // update implicit data structure
+        // find keys to update.. (inserted data and the radius of "from")
+        // updateBuffers
+        // update text
+        const chainKeys = [];
+        for (const chain of data) {
+            chainKeys.push(chain.chainKey);
+            chain.nodes.forEach((node) => {
+                this._chainListMap.updateCoordsinatesOfNode(node, chain.chainKey);
+            });
+        }
+        this._reconstructChains(chainKeys);
+        this._updateTexts(chainKeys, textWriterIDs);
+    }
+
+
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {Array<{nodeKey, circleProperties:Map[propertyName ,value],  lineProperties:Map[propertyName ,value] }} propertyMap 
+     */
+    updateNodesProperties(chainKey, nodesAndPropertyMap, { textWriterIDs = [] } = {}) {
+        this._chainListMap.updateNodesProperties(chainKey, nodesAndPropertyMap)
+        this._reconstructChains([chainKey]);
+        this._updateTexts([chainKey], textWriterIDs);
+        this.globe.DrawRender();
+    }
+
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {Map<propertyName ,value} propertyMap 
+     */
+    updateChainProperties(chainKey, propertyMap, { textWriterIDs = [] } = {}) {
+        this._chainListMap.updateChainProperties(chainKey, propertyMap);
+        this._reconstructChains([chainKey]);
+        if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
+    }
+
+    // ---- insertBulk family
+    /**
+     * 
+     * @param {Array<chain>} data 
+     * @typedef chain
+     * @property {string} chainKey
+     * @property {StyleProperties} chainProperties
+
+     *  } chainProperties
+     * 
+     * @typedef {Object} node
+     * @property {string} key
+     * @property {number} long
+     * @property {number} lat  
+     * @property {StyleProperties} circleProperties
+     */
+    insertBulk(data, { textWriterIDs = [] } = []) {
+        // first insert everything to implicit structure,
+        // then iterate over data again to update text
+        // let _reconstractChainBufferData method interact with data and bufferOrchestrator.
+        const chainKeysToConstruct = [];
+
+        for (const { chainKey, chainProperties, nodes } of data) {
+            this._chainListMap.setChain(chainKey, nodes);
+            this._chainListMap.setChainProperties(chainKey, chainProperties);
+            chainKeysToConstruct.push(chainKey);
+        }
+        this._reconstructChains(chainKeysToConstruct);
+        if (textWriterIDs) this._updateTexts(chainKeysToConstruct, textWriterIDs);
+        this.globe.DrawRender();
+    }
+
+    /**
+     * 
+     * @param {{key, long, lat}} node
+     * @param {*} chainKey 
+     * @param {*} theNodeKeyFront | node key of the next node, null places to the last
+     */
+    addNode(node, chainKey, { theNodeKeyFront = null, textWriterIDs = [] } = {}) {
+        // TODO: if before object is null update the last two elements of the chain only. 
+        this._chainListMap.addNode(node, chainKey, theNodeKeyFront);
+        if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
+        this._reconstructChains([chainKey]);
+        this.globe.DrawRender();
+
+    }
+
+
+
+    updateNodeCoordinates(node, chainKey, { textWriterIDs = [] } = {}) {
+        this._chainListMap.updateCoordsinatesOfNode(node, chainKey);
+        if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
+        this._reconstructChains([chainKey]);
+        this.globe.DrawRender();
+    }
+
+
+
+    setOpacity(opacity) {
+        if (typeof opacity !== 'number') throw new Error("opacity must be a number");
+        if (opacity < 0 || 1 < opacity) throw new Error("opacity must be between 0-1");
+        this._textContextWriterInjectionMap.forEach((writer) => writer.setOpacity(opacity));
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+
+
+
+    getChain(chainKey) {
+        this._chainListMap.getChain(chainKey);
+    }
+
+    /**
+     * 
+     * @param {*} chainKeys 
+     */
+    deleteChains(chainKeys) {
+        const bufferKeys = [];
+        for (const chainKey of chainKeys) {
+            bufferKeys.push(...this._chainListMap.deleteChainAndReturnChainKeys(chainKey));
+        }
+        this._textContextWriterInjectionMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
+        this._updateTexts(chainKeys, this._textContextWriterInjectionMap.keys());
+        this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {Array<{chainKey, nodeKeys:[]} keysAndNodes
+     */
+    deleteNodes(keysAndNodes, { textWriterIDs = [] } = {}) {
+        const bufferKeys = [];
+        const chainKeysToReconstuct = [];
+        keysAndNodes.forEach(({ chainKey, nodeKeys }) => {
+            bufferKeys.push(...this._chainListMap.deleteNodesBelongToAChain(chainKey, nodeKeys));
+            chainKeysToReconstuct.push(chainKey);
+        });
+        this._textContextWriterInjectionMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
+        this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
+        this._reconstructChains(chainKeysToReconstuct);
+        this._updateTexts(chainKeysToReconstuct, textWriterIDs);
+        this.globe.DrawRender();
+
+    }
+
+
+    updateText(textWriterIDs) {
+        const chainKeyIterator = this._chainListMap.getAllChainKeysIterator();
+        this._updateTexts(chainKeyIterator, textWriterIDs);
+    }
+
+
+    // implicit
+
+    _updateTexts(chainKeys, textWriterIDs) {
+        if (textWriterIDs.length === 0) return;
+        const textWriters = textWriterGetOrThrow(this._textContextWriterInjectionMap, textWriterIDs)
+        chainKeys.forEach((chainKey) => {
+            this._chainListMap.textUpdate(chainKey, textWriters, this._textDataPreAdaptor);
+        })
+    }
+
+
+    _reconstructChains(chainKeys) {
+        const { globe } = this;
+        //     this.lineVao = this.lineProgram.createVAO(
+        //         ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        //     this.circleVao = this.circleProgram.createVAO(
+        //         ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+        // }   
+
+        const radiusM = radiusMethod(globe);
+        const callback = (v, i, array, chainProperties) => {
+            if (i == array.length - 1) return null;
+            return {
+                chainProperties: chainProperties,
+                bigRadius: radiusM(v, i, array),
+                targetLong: array[i + 1].long,
+                targetLat: array[i + 1].lat,
+                long: v.long,
+                lat: v.lat,
+                lineProperties: v.lineProperties,
+                circleProperties: v.circleProperties,
+                key: v.__identity__
+            }
+        }
+        const bulkData = [];
+        chainKeys.forEach((k) => {
+            this._chainListMap.calculateBufferPropertiesChain(k, callback, bulkData);
+        })
+
+        this._insertBulk(bulkData);
+    }
+
+
+    _insertBulk(bulkData) {
+        this.bufferOrchestrator.insertBulk(bulkData, this.bufferManagersCompMap);
+        this.globe.DrawRender();
+    }
+
+
+    // GLOBE API
+    //TODO:
+    free() {
+        if (this.isFreed) return;
+        this.bufferManagersCompMap.forEach(({ bufferManager }) => {
+            bufferManager.free();
+        })
+        LineOnGlobeCache.release(this.globe);
+        CircleCache.release(this.globe);
+        this.lineProgram = null;
+        this.circleProgram = null;
+        this.isFreed = true;
+    }
+
+    draw3D() {
+        const { gl, globe } = this;
+        gl.disable(gl.DEPTH_TEST);
+        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
+        if (this._drawCircleOn) this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+        this._textContextWriterInjectionMap.forEach((writer) => writer.draw());
+        gl.enable(gl.DEPTH_TEST);
+        this.lineToTheOriginProgram.draw(this.toOriginVao, this.bufferOrchestrator.length, this._opacity);
+    }
+}
+
+
+
+const radiusMethod = (globe) => (v, i, array) => {
+    return globe.Math.GetDist3D(v.long, v.lat, array[i + 1].long, array[i + 1].lat)
+}
+
+const textWriterGetOrThrow = mapGetOrThrow("textWriterIds is invalid")

package/compass-rose/compass-rose-padding-flat.js

@@ -179,7 +179,10 @@ export class PixelPaddingCompassPlugin {
     }
 
     free() {
-
+        this.compassMap.free();
+        this.bufferManagersCompMap.forEach(v => {
+            v.bufferManager.free();
+        })
 
     }
 }
@@ -203,6 +206,13 @@ class CompassMap {
         this.propertyMemory.delete(key);
     }
 
+    free() {
+        this.coordsMemory.clear();
+        this.propertyMemory.clear();
+        this.coordsMemory = null;
+        this.propertyMemory = null;
+    }
+
     query(globe, writer) {
         const { coordsMemory, propertyMemory } = this;
         const defaultProperties = this.parent.defaultProperties;

package/package.json

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

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

@@ -0,0 +1,195 @@
+import { createProgram } from "../../util/webglobjectbuilders";
+import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totems/camerauniformblock";
+import { noRegisterGlobeProgramCache } from "../programcache";
+import { vaoAttributeLoader } from "../../util/account/util";
+import {
+    longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition, realDistanceOnSphereR1,
+    circleLimpFromLongLatRadCenterCartesian3D_accurate,
+    circleLimpFromLongLatRadCenterMercatorCompass_accurate,
+    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
+    POLE
+} from "../../util/shaderfunctions/geometrytransformations";
+
+
+/**
+ * TODO: 
+ * 1. integrate geometry functions for radius angle and center
+ * 2. integrate attributes
+ * 
+ * TODO:
+ * center_position is too small or doenst loaded as expected.
+ */
+const EDGE_COUNT_ON_SPHERE = 360;
+
+const vertexShaderSource = `#version 300 es
+precision highp float;
+${CameraUniformBlockString}
+${longLatRadToMercator}
+${longLatRadToCartesian3D}
+${cartesian3DToGLPosition}
+${mercatorXYToGLPosition}
+${realDistanceOnSphereR1}
+${circleLimpFromLongLatRadCenterCartesian3D_accurate}
+${circleLimpFromLongLatRadCenterMercatorCompass_accurate}
+${circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate}
+
+uniform float edge_count;
+
+in vec2 center_position;
+in vec3 center_position3d;
+in float radius;
+in vec4 color;
+in float dash_ratio;
+in float dash_opacity;
+
+out float interpolation;
+out vec4 v_color;
+out float v_dash_ratio;
+out float v_dash_opacity;
+out vec2 v_limp;
+void main() {
+    interpolation = float( gl_VertexID ) / ${EDGE_COUNT_ON_SPHERE}.0;
+    float angle = PI * 2.0 * interpolation;
+    if ( is3D ) {
+
+        vec3 position = circleLimpFromLongLatRadCenterCartesian3D_accurate(center_position3d, radius, angle);
+    
+        gl_Position = cartesian3DToGLPosition(position);
+        v_limp = vec2(0.0, 0.0);
+    } else {
+        vec2 position;  
+        position = circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate( center_position, radius, angle);
+        v_limp = position;
+        gl_Position = mercatorXYToGLPosition( position);
+
+    }
+    v_dash_ratio = dash_ratio;
+    v_dash_opacity = dash_opacity;
+    v_color = color;
+
+}`
+
+const fragmentShaderSource = `#version 300 es
+${POLE}
+precision highp float;
+uniform float opacity;
+in vec4 v_color;
+in float v_dash_ratio;
+in float v_dash_opacity;
+in float interpolation;
+in vec2 v_limp;
+out vec4 color;
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ color = vec4(0.0,0.0,0.0,0.0); return; }
+    color = v_color;
+    color.a *= opacity;
+    if ( v_dash_ratio == 1.0 || v_dash_ratio == 0.0 ) return;
+    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5 ) {
+        color.a *= v_dash_opacity;
+    }   
+}
+`;
+
+
+
+class Logic {
+
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this._lastOpacity = 1.0;
+
+        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
+
+        const { gl, program } = this;
+        this.program.uniforms = {
+            opacity: gl.getUniformLocation(program, "opacity")
+        };
+
+        { // initial uniform values
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1f(program.uniforms.opacity, 1.0);
+            gl.useProgram(currentProgram);
+        }
+
+        {   // assign attribute locations
+            gl.bindAttribLocation(program, 0, "center_position");
+            gl.bindAttribLocation(program, 1, "center_position3d");
+            gl.bindAttribLocation(program, 2, "radius");
+            gl.bindAttribLocation(program, 3, "color");
+            gl.bindAttribLocation(program, 4, "dash_ratio");
+            gl.bindAttribLocation(program, 5, "dash_opacity");
+        }
+
+        this.cameraBindingPoint = 0;
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+        const cameraBlockLocation = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+        gl.uniformBlockBinding(program, cameraBlockLocation, this.cameraBindingPoint);
+    }
+
+    createVAO(centerObj, center3dObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj) {
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        const divisor = 1;
+        gl.bindVertexArray(vao);
+        {  // make this a function end import from account module. 
+            const { buffer, stride = 0, offset = 0 } = centerObj;
+            vaoAttributeLoader(gl, buffer, 0, 2, stride, offset, divisor);
+        }
+        {  // make this a function end import from account module. 
+            const { buffer, stride = 0, offset = 0 } = center3dObj;
+            vaoAttributeLoader(gl, buffer, 1, 3, stride, offset, divisor);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = radiusObj;
+            vaoAttributeLoader(gl, buffer, 2, 1, stride, offset, divisor);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = colorObj;
+            vaoAttributeLoader(gl, buffer, 3, 4, stride, offset, divisor);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = dashRatioObj;
+            vaoAttributeLoader(gl, buffer, 4, 1, stride, offset, divisor);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = dashOpacityObj;
+            vaoAttributeLoader(gl, buffer, 5, 1, stride, offset, divisor);
+        }
+        gl.bindVertexArray(null);
+        gl.bindVertexArray(null);
+        return vao;
+    }
+
+    draw(vao, length, opacity) {
+        const { gl, program, cameraBlockTotem, cameraBindingPoint } = this;
+        gl.useProgram(program);
+
+        if (this._lastOpacity !== opacity) {
+            gl.uniform1f(program.uniforms.opacity, opacity);
+            this._lastOpacity = opacity;
+        }
+        gl.bindVertexArray(vao);
+        cameraBlockTotem.bind(cameraBindingPoint);
+        gl.drawArraysInstanced(gl.LINE_STRIP, 0, EDGE_COUNT_ON_SPHERE + 1, length);
+        cameraBlockTotem.unbind(cameraBindingPoint);
+        gl.bindVertexArray(null);
+    }
+
+
+
+    free() {
+        if (this.isFreed) return;
+        CameraUniformBlockTotemCache.release(this.globe);
+        this.gl.deleteProgram(this.program);
+        this.isFreed = true;
+    }
+}
+
+
+
+export const CircleCache = Object.freeze({
+    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
+});

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

@@ -0,0 +1,219 @@
+import { CameraUniformBlockString, CameraUniformBlockTotem } from "../totems";
+import { pointsOnSphereBetween, POLE, R_3D, mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
+import { createProgram } from "../../util";
+import { noRegisterGlobeProgramCache, globeProgramCache } from "../programcache";
+import BufferOffsetManger from "../../util/account/bufferoffsetmanager";
+import { programCache } from "../rings/distancering/circleflatprogram";
+
+const GLOBE_MIDPOINT_COUNT = 100;
+const ITEM_SIZE = 9;
+
+const vertexShader = `#version 300 es
+precision highp float;
+${R_3D}
+${CameraUniformBlockString}
+${pointsOnSphereBetween}
+${mercatorXYToGLPosition}
+${cartesian3DToGLPosition}
+
+in vec2 start_position;
+in vec3 start_poisition3d;
+in vec2 end_position;
+in vec3 end_position3;
+in float dash_ratio;
+in vec4 color;
+in float dash_opacity;
+out vec4 v_color;
+out vec2 v_limp;
+out float interpolation;
+out float v_dash_ratio;
+out float v_dash_opacity;
+
+
+void main() {
+    vec2 longLat;
+    if (is3D) {
+        interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT - 1}.0;
+        vec3 cartesian = pointsOnSphereBetween(start_poisition3d, end_position3, interpolation) * R_3D;
+        gl_Position = cartesian3DToGLPosition(cartesian);
+        v_limp = vec2(0.0, 0.0);
+    } else {
+        interpolation = float(gl_VertexID);
+        if (gl_VertexID % 2 == 0) {
+            longLat = start_position;
+        } else {
+            longLat = end_position;
+        }
+        v_limp = longLat;
+        gl_Position = mercatorXYToGLPosition(longLat);
+    }
+    // if ( gl_VertexID % 2 == 0) {v_color = color;}
+    // else {v_color = vec4(0.0, 0.0, 0.0, 0.0);}
+    v_color = color;
+    v_dash_ratio = dash_ratio;
+    v_dash_opacity = dash_opacity;
+}
+`;
+
+const fragmentShader = `#version 300 es
+${POLE}
+precision highp float;
+uniform float opacity;
+in vec4 v_color;
+out vec4 color;
+in float interpolation;
+in float v_dash_ratio;
+in vec2 v_limp;
+in float v_dash_opacity;
+void main() {
+    if (v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE) { discard; }
+    color = v_color;
+    color.a *= opacity;
+    if ( v_dash_ratio >= 1.0 ) { return; }
+    if (interpolation > 0.95) { return; }
+    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5) { color.a *= v_dash_opacity; }
+
+}
+`;
+
+
+class Logic {
+
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+        this._lastOpacity = 1.0;
+        const { gl, program } = this;
+        {
+            // assign attribute locations
+            gl.bindAttribLocation(program, 0, "start_position");
+            gl.bindAttribLocation(program, 1, "start_position3d");
+            gl.bindAttribLocation(program, 2, "end_position");
+            gl.bindAttribLocation(program, 3, "end_position3d");
+            gl.bindAttribLocation(program, 4, "dash_ratio");
+            gl.bindAttribLocation(program, 5, "color");
+            gl.bindAttribLocation(program, 6, "dash_opacity");
+        }
+
+        {
+            this._opacityLocation = gl.getUniformLocation(program, "opacity");
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1f(this._opacityLocation, this._lastOpacity);
+            gl.useProgram(currentProgram);
+
+        }
+
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+
+
+    }
+
+
+    draw(vao, length, opacity) {
+        const { gl, program, globe, cameraBlockTotem, cameraBlockBindingPoint } = this;
+        gl.useProgram(program);
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        gl.bindVertexArray(vao);
+        if (opacity !== this._lastOpacity) {
+            gl.uniform1f(this._opacityLocation, opacity);
+            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);
+    }
+
+    //
+    createVAO(
+        startPotisionBufferObj, startPotision3DBufferObj,
+        endPositionBufferObj, endPosition3DBufferObj,
+        dashRatioBufferObj,
+        dashOpacityBufferObj,
+        colorBufferObj) {
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        {
+            const { buffer, stride = 0, offset = 0 } = startPotisionBufferObj;
+            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 = 0, offset = 0 } = startPotision3DBufferObj;
+            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 = 0, offset = 0 } = endPositionBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 2, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(2, 1);
+        }
+        {
+
+            const { buffer, stride = 0, offset = 0 } = endPosition3DBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 3, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(3, 1);
+        }
+        {
+            const { buffer, stride = 0, offset = 0 } = dashRatioBufferObj;
+            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 = 0, offset = 0 } = colorBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(5);
+            gl.vertexAttribPointer(5, 4, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(5, 1);
+        }
+
+        {
+            const { buffer, stride = 0, offset = 0 } = dashOpacityBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(6);
+            gl.vertexAttribPointer(6, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(6, 1);
+        }
+
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return vao;
+
+    }
+
+
+    free() {
+        if (this.isFreed) return;
+        programCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+        this.gl.deleteProgram(this.program);
+        this.isFreed = true;
+    }
+}
+
+
+
+export const LineOnGlobeCache = Object.freeze({
+    get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    release: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+});
+

package/programs/two-d/pixel-padding-for-compass.js

@@ -53,11 +53,8 @@ vec2 adjust_pos(vec2 pos) {
 void main(){
     vec3 c = coord_opacity();
     gl_Position = vec4( adjust_pos(c.xy), 0.0, 1.0);
-    // gl_Position = vec4( 0.0, 0.0, 0.0, 1.0);
     v_rgba = rgba;
     v_rgba.a *= plugin_opacity;
-    // float opacity = (float((gl_VertexID + 179) % 720 ) / (${vertexCount}.0)) / 1.5 + 0.5;
-    v_rgba.a *= c.z;
     gl_PointSize = 10.0;
 }
 `

package/util/shaderfunctions/geometrytransformations.js

@@ -118,6 +118,8 @@ vec3 circleLimpFromLongLatRadCenterCartesian3D( vec2 center, float radius, float
     }
 `;
 
+
+
 // TODO: Make it precise. Y axis is not correct.
 
 export const circleLimpFromLongLatRadCenterMercatorRealDistanceNew = PI + `
@@ -289,4 +291,69 @@ float realDistanceOnSphereR1(vec2 longLat1, vec2 longLat2) {
     float c = 2.0 * atan(sqrt(a), sqrt(1.0 - a));
     return c;
 }
-`;
+`;
+
+const pointsOnSphereBetween = `vec3 pointsOnSphereBetween(vec3 a, vec3 b, float ratio) {
+    // Normalize the input points to ensure they are on the unit sphere
+    a = normalize(a);
+    b = normalize(b);
+
+    // Compute the angle between the points
+    float theta = acos(dot(a, b));
+
+    // Compute the interpolated point using spherical linear interpolation (slerp)
+    vec3 result = (sin((1.0 - ratio) * theta) * a + sin(ratio * theta) * b) / sin(theta);
+
+    // Return the normalized result to ensure it lies on the sphere
+    return normalize(result);
+}`
+
+
+const circleLimpFromLongLatRadCenterCartesian3D_accurate = R + `
+vec3 circleLimpFromLongLatRadCenterCartesian3D_accurate( vec3 geoW, float radius, float angle) {
+    vec3 normal = normalize(geoW);
+    vec3 tangent1 = cross(normal, vec3(0.0, 0.0, -1.0));
+    if ( length(tangent1) < 0.1 ){ tangent1 = cross(normal, vec3(0.0, -1.0, 0.0)); }
+    tangent1 = normalize(tangent1);
+    // rotate tangent with given angle
+    tangent1 =  cos(angle) * tangent1 - sin(angle) * cross(normal, tangent1);
+    float radius_in_angle = radius/R;
+    float projected_radius = sin(radius_in_angle) * R / 1000.0;
+    return (geoW * cos(radius_in_angle))+ tangent1 * projected_radius;
+}`;
+
+const circleLimpFromLongLatRadCenterMercatorCompass_accurate = `
+vec2 circleLimpFromLongLatRadCenterMercatorCompass_accurate(vec2 center, float radius, float angle){
+    float y = -sin(angle) * radius + center.y;
+    float x = cos(angle) * radius + center.x;
+    return vec2(x, y);
+} `;
+
+//TODO make it work...
+const circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate = PI + `
+vec2 circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate(vec2 mercator_center, float radius, float angle) {
+    vec2 center = vec2(mercator_center.x /6378137.0 , asin(tanh(mercator_center.y / 6378137.0 )));
+    float ang = angle + PI / 2.0; // Shift angle to align with +x axis
+    float r = radius / R;
+    float cos_r = cos(r);
+    float sin_r = sin(r);
+
+    float sin_lat = sin(center.y) * cos_r + cos(center.y) * sin_r * cos(ang);
+    float lat = asin(sin_lat);
+
+    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))
+    );
+}`;
+
+export {
+    pointsOnSphereBetween,
+    circleLimpFromLongLatRadCenterCartesian3D_accurate,
+    circleLimpFromLongLatRadCenterMercatorCompass_accurate,
+    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate
+
+}