@pirireis/webglobeplugins 0.8.8 → 0.8.10

package/bearing-line/plugin.js

@@ -7,7 +7,7 @@ import { mapGetOrThrow } from "../util/check/get";
 import { populateFloat32Array } from "../util/jshelpers/data-filler";
 import { ContextTextWriter3 } from '../write-text/context-text3'
 import { constraintFloat, isBoolean } from '../util/check/typecheck';
-
+import { normalize } from '../util/geometry';
 import { createBufferAndReadInfo } from '../util/gl-util/buffer/integrate-buffer';
 
 export const RINGPARTIAL_DRAW_MODE = Object.freeze({
@@ -322,6 +322,9 @@ export default class BearingLinePlugin {
         this.circle3DProgram = Circle3DCache.get(globe);
         const circleFlatEdgeCount = this.circleFlatEdgeCount
         {
+            const sphereCoord = (long, lat) => {
+                return normalize(globe.api_GetCartesian3DPoint(long, lat, 0, 0), 6378.137);
+            }
             // createBuffers
             const bufferType = "DYNAMIC_DRAW";
             const initialCapacity = this.bufferOrchestrator.capacity;
@@ -337,7 +340,7 @@ export default class BearingLinePlugin {
                     }],
                     ["centerCoords3d", {
                         'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.long, item.lat, 0, 0)),
+                        'adaptor': (item) => sphereCoord(item.long, item.lat, 0, 0),
                     }],
                     ["targetCoords2d", {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
@@ -345,7 +348,8 @@ export default class BearingLinePlugin {
                     }],
                     ["targetCoords3d", {
                         'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.endLong, item.endLat, 0, 0))
+                        'adaptor': (item) => new Float32Array(
+                            globe.api_GetCartesian3DPoint(item.endLong, item.endLat, 0, 0))
                     }],
                     ["bearingTargetCoords2d", {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
@@ -442,7 +446,7 @@ export default class BearingLinePlugin {
             ...["centerCoords2dflat", "rgbaMercator", "circleDashAngleMercator", "dashOpacityMercator"
             ].map(key => vaoOBJ(key)));
         this.circle3DVao = this.circle3DProgram.createVAO(
-            ...["centerCoords3d", "bigRadius", "rgba", "circleDashAngle", "dashOpacity", "startAngle3d"
+            ...["centerCoords3d", "targetCoords3d", "rgba", "circleDashAngle", "dashOpacity"
             ].map(key => vaoOBJ(key)));
     }
 

package/circle-line-chain/plugin.js

@@ -9,7 +9,7 @@ import { populateFloat32Array } from "../util/jshelpers/data-filler";
 import { ContextTextWriter3 } from '../write-text/context-text3';
 import { isBoolean, constraintFloat, opacityCheck } from '../util/check/typecheck';
 import { createBufferAndReadInfo } from '../util/gl-util/buffer/integrate-buffer';
-
+import { normalize } from '../util/geometry/index';
 /**
  * Insert info to chain list map (nodes and properties)
  * 
@@ -264,6 +264,10 @@ export class CircleLineChainPlugin {
 
         const _circleFlatEdgeCount = this._circleFlatEdgeCount;
         {
+            const sphereCoord = (long, lat) => {
+                return normalize(globe.api_GetCartesian3DPoint(long, lat, 0, 0), 6378.137);
+            }
+
             // createBuffers
             const bufferType = "DYNAMIC_DRAW";
             const initialCapacity = this.bufferOrchestrator.capacity;
@@ -275,7 +279,7 @@ export class CircleLineChainPlugin {
                     }],
                     ["centerCoords3d", {
                         'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.long, item.lat, 0, 0)),
+                        'adaptor': (item) => new sphereCoord(item.long, item.lat, 0, 0),
                     }],
                     ["targetCoords2d", {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
@@ -283,7 +287,7 @@ export class CircleLineChainPlugin {
                     }],
                     ["targetCoords3d", {
                         'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.targetLong, item.targetLat, 0, 0)),
+                        'adaptor': (item) => sphereCoord(item.long, item.lat, 0, 0),
                     }],
                     ["rgba", {
                         'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
@@ -292,10 +296,10 @@ export class CircleLineChainPlugin {
                             return new Float32Array(item.chainProperties.rgba);
                         }
                     }],
-                    ["bigRadius", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.bigRadius])
-                    }],
+                    // ["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])
@@ -354,7 +358,7 @@ export class CircleLineChainPlugin {
                 ].map(key => obj(key)));
 
             this.circle3DVao = this.circle3DProgram.createVAO(
-                ...["centerCoords3d", "bigRadius", "rgbaCircle", "circleDashAngle", "dashOpacity"
+                ...["centerCoords3d", "targetCoords3d", "rgbaCircle", "circleDashAngle", "dashOpacity"
                 ].map(key => obj(key))
             );
 
@@ -376,7 +380,7 @@ export class CircleLineChainPlugin {
     _reconstructChains(chainKeys) {
         const { globe } = this;
 
-        const radiusM = radiusMethod(globe);
+        // const radiusM = radiusMethod(globe);
         const callback = (v, i, array, chainProperties) => {
             if (i === array.length - 1) return null;
 
@@ -384,7 +388,7 @@ export class CircleLineChainPlugin {
 
             return {
                 chainProperties: chainProperties,
-                bigRadius: radiusM(v, i, array),
+                // bigRadius: radiusM(v, i, array),
                 targetLong: array[i + 1].long,
                 targetLat: array[i + 1].lat,
                 long: v.long,
@@ -458,7 +462,7 @@ export class CircleLineChainPlugin {
 
 
 
-const radiusMethod = (globe) => (v, i, array) => {
-    return globe.Math.GetDist3D(v.long, v.lat, array[i + 1].long, array[i + 1].lat)
-}
+// const radiusMethod = (globe) => (v, i, array) => {
+//     return globe.Math.GetDist3D(v.long, v.lat, array[i + 1].long, array[i + 1].lat)
+// }
 

package/package.json

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

package/point-heat-map/point-to-heat-map-flow.js

@@ -67,7 +67,7 @@ class PointHeatmapFlow {
 
     /**
      * @param {Float32Array} data 
-     * @format [x, y, z, height] x,y,z is normalized 3d cartesian coordinates. Height in kilometers. Set 6371.137 for ground level.
+     * @format [x, y, z, height] x,y,z is normalized 3d cartesian coordinates. Height in kilometers. Set 6378.137 for ground level.
      */
     setData(data) {
         const { gl, buffer } = this;

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

@@ -4,11 +4,11 @@ import { noRegisterGlobeProgramCache } from "../programcache";
 // import { vaoAttributeLoader } from "../../util/account/util";
 import { attributeLoader } from "../../util/gl-util/buffer/integrate-buffer";
 import {
-    longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition, realDistanceOnSphereR1,
+    cartesian3DToGLPosition,
     circleLimpFromLongLatRadCenterCartesian3D_accurate,
-    circleLimpFromLongLatRadCenterMercatorCompass_accurate,
-    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
-    POLE
+    circleOnSphere,
+    POLE,
+    PI
 } from "../../util/shaderfunctions/geometrytransformations";
 
 
@@ -21,27 +21,22 @@ import {
  * center_position is too small or doenst loaded as expected.
  */
 const EDGE_COUNT_ON_SPHERE = 360;
-
+//${circleLimpFromLongLatRadCenterCartesian3D_accurate}
 const vertexShaderSource = `#version 300 es
 precision highp float;
+${PI}
 ${CameraUniformBlockString}
-${longLatRadToMercator}
-${longLatRadToCartesian3D}
 ${cartesian3DToGLPosition}
-${mercatorXYToGLPosition}
-${realDistanceOnSphereR1}
-${circleLimpFromLongLatRadCenterCartesian3D_accurate}
-${circleLimpFromLongLatRadCenterMercatorCompass_accurate}
-${circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate}
+${circleOnSphere}
 
 uniform float edge_count;
 
 in vec3 center_position3d;
-in float radius;
+in vec3 target_position3d;
+// in float radius;
 in vec4 color;
 in float dash_ratio;
 in float dash_opacity;
-in float initial_angle;
 
 out float interpolation;
 out vec4 v_color;
@@ -51,7 +46,7 @@ void main() {
     interpolation = float( gl_VertexID ) / ${EDGE_COUNT_ON_SPHERE}.0;
     if ( is3D ) {
         float angle = PI * 2.0 * interpolation;
-        vec3 position = circleLimpFromLongLatRadCenterCartesian3D_accurate(center_position3d, radius, angle + initial_angle);
+        vec3 position = circleOnSphere(center_position3d, target_position3d, angle);
         gl_Position = cartesian3DToGLPosition(position);
     } else {
         return;
@@ -107,11 +102,10 @@ class Logic {
 
         {   // assign attribute locations
             gl.bindAttribLocation(program, 0, "center_position3d");
-            gl.bindAttribLocation(program, 1, "radius");
+            gl.bindAttribLocation(program, 1, "target_position3d");
             gl.bindAttribLocation(program, 2, "color");
             gl.bindAttribLocation(program, 3, "dash_ratio");
             gl.bindAttribLocation(program, 4, "dash_opacity");
-            gl.bindAttribLocation(program, 5, "initial_angle");
         }
 
         this.cameraBindingPoint = 0;
@@ -120,7 +114,7 @@ class Logic {
         gl.uniformBlockBinding(program, cameraBlockLocation, this.cameraBindingPoint);
     }
 
-    createVAO(center3dObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj, initialAngleObj) {
+    createVAO(center3dObj, target3dObj, colorObj, dashRatioObj, dashOpacityObj) {
         const { gl } = this;
         const vao = gl.createVertexArray();
         const divisor = 1;
@@ -128,12 +122,11 @@ class Logic {
         gl.bindVertexArray(vao);
 
         attributeLoader(gl, center3dObj, 0, 3, { divisor });
-        attributeLoader(gl, radiusObj, 1, 1, { divisor });
+        attributeLoader(gl, target3dObj, 1, 3, { divisor });
+        // attributeLoader(gl, radiusObj, 1, 1, { divisor });
         attributeLoader(gl, colorObj, 2, 4, { divisor });
         attributeLoader(gl, dashRatioObj, 3, 1, { divisor });
         attributeLoader(gl, dashOpacityObj, 4, 1, { divisor });
-        attributeLoader(gl, initialAngleObj, 5, 1, { divisor, escapeValues: [0] });
-
 
         gl.bindVertexArray(null);
         gl.bindVertexArray(null);

package/programs/line-on-globe/degree-padding-around-circle-3d.js

@@ -1,7 +1,8 @@
 import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totems/camerauniformblock";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { vaoAttributeLoader } from "../../util/account/util";
+// import { vaoAttributeLoader } from "../../util/account/util";
+import { attributeLoader } from "../../util/gl-util/buffer/integrate-buffer";
 import { Z_ALPHA_MODE } from "./util";
 import {
     cartesian3DToGLPosition,
@@ -127,24 +128,16 @@ class Logic {
         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 } = center3dObj;
-            vaoAttributeLoader(gl, buffer, 0, 3, stride, offset, divisor);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = bigRadiusObj;
-            vaoAttributeLoader(gl, buffer, 1, 1, stride, offset, divisor);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = smallRadiusObj;
-            vaoAttributeLoader(gl, buffer, 2, 1, stride, offset, divisor);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = colorObj;
-            vaoAttributeLoader(gl, buffer, 3, 4, stride, offset, divisor);
-        }
 
-        gl.bindVertexArray(null);
+
+        attributeLoader(gl, center3dObj, 0, 3, { divisor });
+
+        attributeLoader(gl, bigRadiusObj, 1, 1, { divisor });
+
+        attributeLoader(gl, smallRadiusObj, 2, 1, { divisor });
+
+        attributeLoader(gl, colorObj, 3, 4, { divisor });
+
         gl.bindVertexArray(null);
         return vao;
     }

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

@@ -193,8 +193,8 @@ class Logic {
 
 
     createVAO(
-        startPotisionBufferObj, startPotision3DBufferObj,
-        endPositionBufferObj, endPosition3DBufferObj,
+        startPotision2DBufferObj, startPotision3DBufferObj,
+        endPosition2DBufferObj, endPosition3DBufferObj,
         dashRatioBufferObj,
         dashOpacityBufferObj,
         colorBufferObj) {
@@ -205,9 +205,9 @@ class Logic {
 
         const divisor = 1;
 
-        attributeLoader(gl, startPotisionBufferObj, 0, 2, { divisor });
+        attributeLoader(gl, startPotision2DBufferObj, 0, 2, { divisor });
         attributeLoader(gl, startPotision3DBufferObj, 1, 3, { divisor });
-        attributeLoader(gl, endPositionBufferObj, 2, 2, { divisor });
+        attributeLoader(gl, endPosition2DBufferObj, 2, 2, { divisor });
         attributeLoader(gl, endPosition3DBufferObj, 3, 3, { divisor });
         attributeLoader(gl, dashRatioBufferObj, 4, 1, { divisor, escapeValues: [escapeValue] });
         attributeLoader(gl, dashOpacityBufferObj, 5, 1, { divisor, escapeValues: [escapeValue] });

package/rangerings/plugin.js

@@ -57,11 +57,14 @@ import RangeRingAngleText from "./rangeringangletext";
 import { Z_ALPHA_MODE } from "../programs/line-on-globe/util";
 import { ENUM_HIDE } from "./enum";
 import { opacityCheck, constraintFloat } from "../util/check/typecheck";
+import { normalize } from "../util/geometry"
 const CIRCLE_FLAT_EDGE_COUNT = 362; // 360 + 2 for closing the circle and a cutting point
 
 
-
-
+const coordOnSphere = (long, lat, globe) => {
+    const coord = globe.api_GetCartesian3DPoint(long, lat, 0, 0);
+    return normalize(coord, 6378.137);
+}
 
 class RangeRings {
     constructor(id,
@@ -106,9 +109,9 @@ class RangeRings {
         } = this;
         for (const { centerID } of items) {
             const datas = this.__reconstructCentralRings(centerID);
-            bufferOrchestrator.updateBulk(datas, bufferManagersCompMap, ["centerCoords3d", "centerCoords2dflat", "centerCoords2dflatForPadding"]);
+            bufferOrchestrator.updateBulk(datas, bufferManagersCompMap, ["centerCoords3d", "centerCoords2dflat", "targetCoords3d", "centerCoords2dflatForPadding"]);
             const paddingDatas = this.__reconstructCentralRingsBigPaddings(centerID);
-            paddingBufferOrchestrator.updateBulk(paddingDatas, bufferManagersCompMapPadding, ["circlePoint", "paddingPoint", "circlePoint3d", "paddingPoint3d"]);
+            paddingBufferOrchestrator.updateBulk(paddingDatas, bufferManagersCompMapPadding, ["circlePoint2d", "paddingPoint2d", "circlePoint3d", "paddingPoint3d"]);
         }
         this.paddingTextPlugin?.updateCentersXY(items);
 
@@ -144,7 +147,7 @@ class RangeRings {
         for (const item of items) {
             _ringAccount.insertCenter(item);
             const datas = this.__reconstructCentralRings(item.centerID);
-            bufferOrchestrator.insertBulk(datas, bufferManagersCompMap,);
+            bufferOrchestrator.insertBulk(datas, bufferManagersCompMap);
             const paddingDatas = this.__reconstructCentralRingsBigPaddings(item.centerID);
             paddingBufferOrchestrator.insertBulk(paddingDatas, bufferManagersCompMapPadding);
         }
@@ -309,7 +312,7 @@ class RangeRings {
         this._circleProgram3D = CircleCache3D.get(globe);
         this._padding2dProgram = LinesColorInstancedFlatCache.get(globe);
         this._padding3dProgram = CirclePadding3DCache.get(globe);
-        this._bigPadding3dFlatProgram = LineOnGlobeCache.get(globe);
+        this._lineOnGlobe_bigPadding = LineOnGlobeCache.get(globe);
 
     }
 
@@ -329,6 +332,11 @@ class RangeRings {
                     'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
                     'adaptor': (item) => new Float32Array(item.centerCoords3d),
                 }],
+                ["targetCoords3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.targetCoords3d),
+                }],
+
                 ["rgba", {
                     'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
                     'adaptor': (item) => new Float32Array(item.hide === ENUM_HIDE.HIDE ? [0, 0, 0, 0] : item.rgba)
@@ -385,8 +393,9 @@ class RangeRings {
         this._circle2DVao = this._circleProgram2D.createVAO(
             ...["centerCoords2dflat", "rgbaMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key)))
         );
+
         this._circle3DVao = this._circleProgram3D.createVAO(
-            ...["centerCoords3d", "radius3d", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
+            ...["centerCoords3d", "targetCoords3d", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
         );
 
         this._oneDegree2DPaddingVao = this._padding2dProgram.createVAO(
@@ -400,13 +409,13 @@ class RangeRings {
         this.paddingBufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
         this.bufferManagersCompMapPadding = new Map(
             [
-                ["circlePoint", {
+                ["circlePoint2d", {
                     'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.circlePoint,
+                    'adaptor': (item) => item.circlePoint2d,
                 }],
-                ["paddingPoint", {
+                ["paddingPoint2d", {
                     'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.paddingPoint,
+                    'adaptor': (item) => item.paddingPoint2d,
                 }],
                 ["circlePoint3d", {
                     'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
@@ -421,19 +430,19 @@ class RangeRings {
                     'adaptor': (item) => new Float32Array(item.rgba)
                 }],
 
-                ["dashOpacity", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([1]),
-                }],
-                ["dashRatio", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([1]),
-                }],
+                // ["dashOpacity", {
+                //     'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                //     'adaptor': (item) => new Float32Array([1]),
+                // }],
+                // ["dashRatio", {
+                //     'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                //     'adaptor': (item) => new Float32Array([1]),
+                // }],
             ]
         );
 
-        this._bigPadding3dFlatVAO = this._bigPadding3dFlatProgram.createVAO(//"dashRatio", "dashOpacity"
-            ...["circlePoint", "circlePoint3d", "paddingPoint", "paddingPoint3d", null, null, "rgba",].map(key =>
+        this._bigPadding3dFlatVAO = this._lineOnGlobe_bigPadding.createVAO(//"dashRatio", "dashOpacity"
+            ...["circlePoint2d", "circlePoint3d", "paddingPoint2d", "paddingPoint3d", null, null, "rgba",].map(key =>
                 (key === null) ? null : obj(this.bufferManagersCompMapPadding.get(key)))
         );
 
@@ -441,8 +450,11 @@ class RangeRings {
             ...["centerCoords3d", "radius3d", "radius3dsmall", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key)))
         );
 
+
+
     }
 
+    // IMPLICIT METHODS
 
     __reconstructCentralRingsBigPaddings(centerID) {
         const { globe } = this;
@@ -458,10 +470,10 @@ class RangeRings {
                 const paddingPoint = globe.Math.FindPointByPolar(long, lat, radius - padding, azimuthAngle); // long lat
                 result.push({
                     key: ringBigPaddingKeyMethod(centerID, ringID, azimuthAngle),
-                    circlePoint: new Float32Array(globe.api_GetMercator2DPoint(circlePoint.long, circlePoint.lat)),
-                    paddingPoint: new Float32Array(globe.api_GetMercator2DPoint(paddingPoint.long, paddingPoint.lat)),
-                    circlePoint3d: new Float32Array(globe.api_GetCartesian3DPoint(circlePoint.long, circlePoint.lat, 0, 0)),
-                    paddingPoint3d: new Float32Array(globe.api_GetCartesian3DPoint(paddingPoint.long, paddingPoint.lat, 0, 0)),
+                    circlePoint2d: new Float32Array(globe.api_GetMercator2DPoint(circlePoint.long, circlePoint.lat)),
+                    paddingPoint2d: new Float32Array(globe.api_GetMercator2DPoint(paddingPoint.long, paddingPoint.lat)),
+                    circlePoint3d: coordOnSphere(circlePoint.long, circlePoint.lat, globe),
+                    paddingPoint3d: coordOnSphere(paddingPoint.long, paddingPoint.lat, globe),
                     rgba: color,
                     hide,
                     textHide
@@ -473,7 +485,6 @@ class RangeRings {
         return result;
     }
 
-    // IMPLICIT METHODS
 
     __reconstructCentralRings(centerID) {
         const { globe } = this;
@@ -481,7 +492,7 @@ class RangeRings {
         if (centerItem === undefined) throw new Error("Center not found");
 
         const { long, lat, rgba, rings, hide = 0, textHide = 0 } = centerItem;
-        const centerCoords3d = globe.api_GetCartesian3DPoint(long, lat, 0, 0);
+        const centerCoords3d = coordOnSphere(long, lat, globe);
 
         const result = [];
 
@@ -489,10 +500,13 @@ class RangeRings {
             const key = __identity__;
             const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
             const radiusPadding = hide === ENUM_HIDE.HIDE_1_DEGREE_PADDINGS ? radius : radius - padding / 3;
+            const targetPoint = globe.Math.FindPointByPolar(long, lat, radius, 0); // long lat
+            const targetCoords3d = coordOnSphere(targetPoint.long, targetPoint.lat, globe);
             const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radiusPadding, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
             result.push({
                 key,
                 centerCoords3d,
+                targetCoords3d,
                 centerCoords2dflat,
                 radius,
                 padding,
@@ -562,7 +576,7 @@ class RangeRings {
     draw3D() {
         const {
             globe, gl,
-            _circleProgram2D, _circleProgram3D, _padding2dProgram, _padding3dProgram, _bigPadding3dFlatProgram,
+            _circleProgram2D, _circleProgram3D, _padding2dProgram, _padding3dProgram, _lineOnGlobe_bigPadding,
             _circle2DVao, _circle3DVao, _oneDegree2DPaddingVao, _padding3dOneDegreeVao, _bigPadding3dFlatVAO,
             bufferOrchestrator, paddingBufferOrchestrator,
             _opacity, _oneDegreePadding, _zAlphaOnDegreePadding } = this;
@@ -577,8 +591,8 @@ class RangeRings {
             // _padding2dProgram.draw(bigPaddingVAO, paddingBufferOrchestrator.length, _opacity);
             if (_oneDegreePadding) _padding2dProgram.draw(_oneDegree2DPaddingVao, bufferOrchestrator.length * CIRCLE_FLAT_EDGE_COUNT, _opacity, _zAlphaOnDegreePadding);
         }
-        const drawOptions = { drawRange: { first: 0, count: bufferOrchestrator.length } };
-        _bigPadding3dFlatProgram.draw(_bigPadding3dFlatVAO, drawOptions, _opacity);
+        const drawOptions = { drawRange: { first: 0, count: paddingBufferOrchestrator.length } };
+        _lineOnGlobe_bigPadding.draw(_bigPadding3dFlatVAO, drawOptions, _opacity);
         this._textWritersMap.forEach((textWriter) => textWriter.draw());
         gl.enable(gl.DEPTH_TEST);
     }
@@ -604,7 +618,7 @@ class RangeRings {
         this._circleProgram3D = null;
         this._padding2dProgram = null;
         this._padding3dProgram = null;
-        this._bigPadding3dFlatProgram = null;
+        this._lineOnGlobe_bigPadding = null;
         this.paddingTextPlugin?.free();
         this._isFreed = true;
     }

package/util/geometry/index.js

@@ -26,4 +26,20 @@ export function latLongBboxtoPixelXYBbox(minX, minY, maxX, maxY) {
 }
 
 
-// export { GeoDataFromTexture } from './geodatafromtexture';
+/**
+ * 
+ * @param {Float32List} array 
+ * @returns {Float32Array}
+ */
+export function normalize(array, newLength = 1) {
+    let total = 0;
+    for (let i = 0; i < array.length; i++) {
+        total += array[i] * array[i];
+    }
+    const len = newLength / Math.sqrt(total);
+    const result = new Float32Array(array.length);
+    for (let i = 0; i < array.length; i++) {
+        result[i] = array[i] * len;
+    }
+    return result;
+}

package/util/shaderfunctions/geometrytransformations.js

@@ -245,10 +245,10 @@ vec3 pointsOnSphereBetween(vec3 a, vec3 b, float ratio) {
     b = normalize(b);
 
     // Compute the dot product and clamp it to avoid numerical issues
-    float dotProduct = clamp(dot(a, b), -1.0, 1.0);
+    // float dotProduct = clamp(dot(a, b), -1.0, 1.0);
 
     // Compute the angle between the points
-    float theta = acos(dotProduct);
+    float theta = acos(dot(a, b));
 
     // Handle the edge case where the points are nearly identical
     if (theta < 0.0001) {
@@ -284,7 +284,66 @@ vec3 circleLimpFromLongLatRadCenterCartesian3D_accurate( vec3 geoW, float radius
     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;
+    return (geoW * cos(radius_in_angle)) + tangent1 * projected_radius;
+}`;
+
+
+const circleOnSphere = `
+vec3 rotateVectorAroundAxis(vec3 v, vec3 axis, float angle) {
+    float c = cos(angle);
+    float s = sin(angle);
+    float t = 1.0 - c;
+    vec3 normalizedAxis = normalize(axis); // Ensure axis is unit length
+
+    return vec3(
+        (t * normalizedAxis.x * normalizedAxis.x + c) * v.x +
+        (t * normalizedAxis.x * normalizedAxis.y - s * normalizedAxis.z) * v.y +
+        (t * normalizedAxis.x * normalizedAxis.z + s * normalizedAxis.y) * v.z,
+
+        (t * normalizedAxis.x * normalizedAxis.y + s * normalizedAxis.z) * v.x +
+        (t * normalizedAxis.y * normalizedAxis.y + c) * v.y +
+        (t * normalizedAxis.y * normalizedAxis.z - s * normalizedAxis.x) * v.z,
+
+        (t * normalizedAxis.x * normalizedAxis.z - s * normalizedAxis.y) * v.x +
+        (t * normalizedAxis.y * normalizedAxis.z + s * normalizedAxis.x) * v.y +
+        (t * normalizedAxis.z * normalizedAxis.z + c) * v.z
+    );
+
+    // Alternative, more compact way using cross and dot products:
+    // vec3 crossProd = cross(normalizedAxis, v);
+    // float dotProd = dot(normalizedAxis, v);
+    // return v * c + crossProd * s + normalizedAxis * dotProd * t;
+}
+
+/**
+ * @brief Calculates a point on a circle drawn on the surface of a sphere.
+ * The sphere is assumed to be centered at the origin (0,0,0).
+ * The circle's center on the sphere surface is M, and H is a starting point on the circle.
+ * The function returns the point obtained by rotating H around the axis defined by M by angle A.
+ *
+ * @param M The center point of the circle on the sphere's surface. The vector from the origin to M defines the rotation axis.
+ * @param H A starting point on the circle (also on the sphere's surface).
+ * @param A The angle of rotation in radians. Use radians(degrees) if your input is in degrees.
+ * @return A vec3 representing the calculated point on the sphere's surface.
+ */
+vec3 circleOnSphere(vec3 M, vec3 H, float A) {
+    // The rotation axis is the vector from the origin to the circle's center point M on the sphere.
+    // This axis vector needs to be normalized for the rotation formula.
+    vec3 rotationAxis = normalize(M);
+
+    // Rotate the starting point H around the rotation axis by angle A.
+    vec3 rotatedPoint = rotateVectorAroundAxis(H, rotationAxis, A);
+
+    // Optional but recommended: Re-normalize the result to ensure it stays exactly on the sphere's surface,
+    // counteracting potential floating-point inaccuracies, especially if the original sphere radius was 1.
+    // If the sphere has a different radius R, you might want to normalize and multiply by R:
+    // float radius = length(M); // Assuming M is exactly on the surface
+    // return normalize(rotatedPoint) * radius;
+    // If it's a unit sphere:
+    // return normalize(rotatedPoint);
+
+    // For simplicity, returning the direct result of rotation. Assume M and H were perfectly on the sphere.
+    return rotatedPoint;
 }`;
 
 const circleLimpFromLongLatRadCenterMercatorCompass_accurate = `
@@ -324,6 +383,6 @@ export {
     slerp,
     circleLimpFromLongLatRadCenterCartesian3D_accurate,
     circleLimpFromLongLatRadCenterMercatorCompass_accurate,
-    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate
-
+    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
+    circleOnSphere,
 }