@pirireis/webglobeplugins 0.6.20 → 0.6.21

package/bearing-line/plugin.js

@@ -1,7 +1,7 @@
 import { pieceOfPieProgramCache } from '../programs/rings/partial-ring/piece-of-pie';
 import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
 import { CircleCache as Circle3DCache } from '../programs/line-on-globe/circle-accurate-3d';
-import { CircleCache, EDGE_COUNT as flatCircleEdgeCount } from '../programs/line-on-globe/circle-accurate-flat';
+import { CircleCache, EDGE_COUNT as flatCircleEdgeCount, centerCoords2dflatDataCreator } from '../programs/line-on-globe/circle-accurate-flat';
 import { BufferOrchestrator, BufferManager } from '../util/account';
 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";
@@ -41,10 +41,19 @@ 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 } = {}) {
+    constructor(id,
+        {
+            opacity = 1,
+            textContextInjectionMap = new Map(),
+            drawVRM = true,
+            drawBearingLine = true,
+            drawAngleRing = true,
+            drawText = true,
+            circleFlatEdgeCount = flatCircleEdgeCount - 2
+        } = {}) {
         this.id = id;
         this._opacity = opacity;
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
@@ -53,7 +62,11 @@ export default class Plugin {
         this.drawVRM = drawVRM;
         this.drawBearingLine = drawBearingLine;
         this.drawAngleRing = drawAngleRing;
+
+
         this.drawText = drawText;
+
+        this.circleFlatEdgeCount = circleFlatEdgeCount + 2;//circleFlatEdgeCount;
     }
 
     setDoDrawVRM(bool) {
@@ -122,6 +135,7 @@ export default class Plugin {
         this.circle3DProgram = Circle3DCache.get(globe);
         // this.angleTextContext = new ContextTextWriter(globe);
         // this.distanceTextContext = new ContextTextWriter(globe);
+        const circleFlatEdgeCount = this.circleFlatEdgeCount
         {
             // createBuffers
             const bufferType = "DYNAMIC_DRAW";
@@ -134,7 +148,7 @@ export default class Plugin {
                         'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
                     }],
                     ["centerCoords2dflat", {
-                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount * 2, { bufferType, initialCapacity }),
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount * 2, { bufferType, initialCapacity }),
                         'adaptor': (item) => item.centerCoords2dflat,
                     }],
                     ["centerCoords3d", {
@@ -216,21 +230,21 @@ export default class Plugin {
 
                     // normal circle
                     ["circleDashAngle", {
-                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount, { bufferType, initialCapacity }),
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
                         'adaptor': (item) => new Float32Array(item.rgba),
                     }],
                     // CIRCLE Mercator
                     ["rgbaMercator", {
-                        'bufferManager': new BufferManager(gl, 4 * flatCircleEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillWithListData(flatCircleEdgeCount, item.rgba),
+                        'bufferManager': new BufferManager(gl, 4 * circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillWithListData(circleFlatEdgeCount, item.rgba),
                     }],
                     ["circleDashAngleMercator", {
-                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(flatCircleEdgeCount, item.circleDashAngle / 360),
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(circleFlatEdgeCount, item.circleDashAngle / 360),
                     }],
                     ["dashOpacityMercator", {
-                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(flatCircleEdgeCount, item.dashOpacity),
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(circleFlatEdgeCount, item.dashOpacity),
                     }],
 
                 ]
@@ -286,7 +300,7 @@ export default class Plugin {
             if (is3D) {
                 this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
             } else {
-                this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+                this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this.circleFlatEdgeCount, this._opacity);
             }
         }
         if (this.drawText) {
@@ -436,22 +450,7 @@ export default class Plugin {
             tailAngle3d -= Math.PI * 2;
         }
 
-        const centerCoords2dflat = new Float32Array(flatCircleEdgeCount * 2);
-        const radius2d = globe.Math.GetDist2D(item.long, item.lat, item.endLong, item.endLat);
-        const pointsLongLat = globe.Math.GetEllipseGeo(
-            item.long,
-            item.lat,
-            radius2d,
-            radius2d,
-            startAngleOfCircle,
-            360 / (flatCircleEdgeCount - 2), // 1 for return to start point, 1 for cutting circles
-        );
-
-        for (let i = 1; i < flatCircleEdgeCount; i++) {
-            const { long: lg, lat: lt } = pointsLongLat[i - 1];
-            centerCoords2dflat.set(globe.api_GetMercator2DPoint(lg, lt), i * 2);
-        }
-
+        const centerCoords2dflat = centerCoords2dflatDataCreator(globe, item.long, item.lat, item.endLong, item.endLat, { startAngleOfCircle, edgeCount: this.circleFlatEdgeCount });
         return {
             key: item.key,
             lat: item.lat,

package/circle-line-chain/plugin.js

@@ -1,5 +1,5 @@
 import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
-import { CircleCache, EDGE_COUNT as EDGE_COUNT_2D_CIRCLE, centerCoords2dflatDataCreator } from '../programs/line-on-globe/circle-accurate-flat';
+import { CircleCache, EDGE_COUNT as flatCircleEdgeCount, centerCoords2dflatDataCreator } from '../programs/line-on-globe/circle-accurate-flat';
 import { CircleCache as Circle3DCache } from '../programs/line-on-globe/circle-accurate-3d';
 import { LineToTheOriginCache } from "../programs/line-on-globe/to-the-origin"
 import { BufferOrchestrator, BufferManager } from "../util/account";
@@ -47,7 +47,8 @@ export class CircleLineChainPlugin {
     constructor(id, {
         drawCircleOn = true,
         textContextWriterInjectionMap = new Map(),
-        textDataPreAdaptor = null
+        textDataPreAdaptor = null,
+        circleFlatEdgeCount = flatCircleEdgeCount - 2
     } = {}) {
         this.id = id;
         this._checkTextContextWriterInjectionMap(textContextWriterInjectionMap);
@@ -58,6 +59,7 @@ export class CircleLineChainPlugin {
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
         this._drawCircleOn = drawCircleOn;
         this._textDataPreAdaptor = textDataPreAdaptor;
+        this._circleFlatEdgeCount = circleFlatEdgeCount + 2;
     }
 
     // init
@@ -82,6 +84,7 @@ export class CircleLineChainPlugin {
         this.circle3DProgram = Circle3DCache.get(globe);
 
         this.lineToTheOriginProgram = LineToTheOriginCache.get(globe);
+        const _circleFlatEdgeCount = this._circleFlatEdgeCount;
         {
             // createBuffers
             const bufferType = "DYNAMIC_DRAW";
@@ -140,25 +143,25 @@ export class CircleLineChainPlugin {
                     }],
                     // Mercator buffers
                     ["circleDashAngleMercator", {
-                        'bufferManager': new BufferManager(gl, 1 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
                         'adaptor': (item) => {
                             if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
-                            return new populateFloat32Array.fillFloat32Array(EDGE_COUNT_2D_CIRCLE, item.chainProperties.circleDashAngle / 360);
+                            return new populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.circleDashAngle / 360);
                         }
                     }],
                     ["rgbaCircleMercator", {                            // 62
-                        "bufferManager": new BufferManager(gl, 4 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                        "bufferManager": new BufferManager(gl, 4 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
                         "adaptor": (item) => {
-                            if (item.circleProperties?.rgba) return populateFloat32Array.fillWithListData(EDGE_COUNT_2D_CIRCLE, item.circleProperties.rgba);
-                            return populateFloat32Array.fillWithListData(EDGE_COUNT_2D_CIRCLE, item.chainProperties.rgba);
+                            if (item.circleProperties?.rgba) return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.circleProperties.rgba);
+                            return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.chainProperties.rgba);
                         }
                     }],
                     ["dashOpacityMercator", {
-                        'bufferManager': new BufferManager(gl, 1 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(EDGE_COUNT_2D_CIRCLE, item.chainProperties.dashOpacity)
+                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.dashOpacity)
                     }],
                     ["centerCoords2dMercator", {
-                        'bufferManager': new BufferManager(gl, 2 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                        'bufferManager': new BufferManager(gl, 2 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
                         'adaptor': (item) => item.centerCoords2dflat,
                     }],
                 ]
@@ -377,7 +380,7 @@ export class CircleLineChainPlugin {
         const callback = (v, i, array, chainProperties) => {
             if (i == array.length - 1) return null;
 
-            const centerCoords2dflat = centerCoords2dflatDataCreator(globe, v.long, v.lat, array[i + 1].long, array[i + 1].lat);
+            const centerCoords2dflat = centerCoords2dflatDataCreator(globe, v.long, v.lat, array[i + 1].long, array[i + 1].lat, { edgeCount: this._circleFlatEdgeCount });
 
             return {
                 chainProperties: chainProperties,
@@ -440,7 +443,7 @@ export class CircleLineChainPlugin {
             if (is3D) {
                 this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
             } else {
-                this.circleProgram2d.draw(this.circleVao2d, this.bufferOrchestrator.length, this._opacity);
+                this.circleProgram2d.draw(this.circleVao2d, this.bufferOrchestrator.length, this._circleFlatEdgeCount, this._opacity);
             }
         }
         gl.enable(gl.DEPTH_TEST);

package/package.json

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

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

@@ -11,14 +11,17 @@ import {
 * Insert the points from the second index and skip 1 point as you placed 361 points
 */
 
-const EDGE_COUNT = 62; // 1 for returning to the start point. 1 for cutting the circle into pieces. 
+/**
+ * Plus 1 for returning to the start point. 1 for cutting the circle into pieces. 
+ */
+const EDGE_COUNT = 62;
 
 const vertexShaderSource = `#version 300 es
 precision highp float;
 ${CameraUniformBlockString}
 ${mercatorXYToGLPosition}
 
-uniform float edge_count;
+uniform int edge_count;
 
 
 in vec2 position2d;
@@ -32,8 +35,8 @@ out float v_dash_ratio;
 out float v_dash_opacity;
 out vec2 v_limp;
 void main() {
-    interpolation = float( gl_VertexID % 62 ) / ${EDGE_COUNT}.0;
-    if ( gl_VertexID % 62 == 0 ) { return; } // cut on the first point.
+    interpolation = float( gl_VertexID % edge_count ) / float(edge_count);
+    if ( gl_VertexID % edge_count == 0 ) { return; } // cut on the first point.
     if ( is3D ) {
         return;
         v_limp = vec2(0.0, 0.0);
@@ -79,11 +82,13 @@ class Logic {
         this.gl = globe.gl;
         this._lastOpacity = 1.0;
         this._lastMercatorMode = 0;
+        this._lastEdgeCount = EDGE_COUNT;
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
 
         const { gl, program } = this;
         this.program.uniforms = {
             opacity: gl.getUniformLocation(program, "opacity"),
+            edgeCount: gl.getUniformLocation(program, "edge_count"),
             mercator_calculation_mode: gl.getUniformLocation(program, "mercator_calculation_mode")
         };
 
@@ -91,6 +96,7 @@ class Logic {
             const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
             gl.useProgram(program);
             gl.uniform1f(program.uniforms.opacity, 1.0);
+            gl.uniform1i(program.uniforms.edgeCount, EDGE_COUNT);
             gl.uniform1i(program.uniforms.mercator_calculation_mode, 0);
             gl.useProgram(currentProgram);
 
@@ -138,16 +144,20 @@ class Logic {
     }
 
 
-    draw(vao, length, opacity) {
+    draw(vao, length, edgeCount, opacity) {
         const { gl, program, cameraBlockTotem, cameraBindingPoint } = this;
         gl.useProgram(program);
         if (this._lastOpacity !== opacity) {
             gl.uniform1f(program.uniforms.opacity, opacity);
             this._lastOpacity = opacity;
         }
+        if (this._lastEdgeCount !== edgeCount) {
+            gl.uniform1i(program.uniforms.edgeCount, edgeCount);
+            this._lastEdgeCount = edgeCount;
+        }
         gl.bindVertexArray(vao);
         cameraBlockTotem.bind(cameraBindingPoint);
-        gl.drawArrays(gl.LINE_STRIP, 0, length * EDGE_COUNT)
+        gl.drawArrays(gl.LINE_STRIP, 0, length * edgeCount)
         // gl.drawArrays(gl.POINTS, 0, length * EDGE_COUNT)
         cameraBlockTotem.unbind(cameraBindingPoint);
         gl.bindVertexArray(null);
@@ -170,8 +180,8 @@ const CircleCache = Object.freeze({
 });
 
 
-function centerCoords2dflatDataCreator(globe, centerLong, centerLat, targetLong, targetLat, { startAngleOfCircle = null } = {}) {
-    const centerCoords2dflat = new Float32Array(EDGE_COUNT * 2);
+function centerCoords2dflatDataCreator(globe, centerLong, centerLat, targetLong, targetLat, { startAngleOfCircle = null, edgeCount = EDGE_COUNT } = {}) {
+    const centerCoords2dflat = new Float32Array(edgeCount * 2);
     const radius2d = globe.Math.GetDist2D(centerLong, centerLat, targetLong, targetLat);
     let angle;
     if (startAngleOfCircle === null) {
@@ -185,10 +195,10 @@ function centerCoords2dflatDataCreator(globe, centerLong, centerLat, targetLong,
         radius2d,
         radius2d,
         angle,
-        360 / (EDGE_COUNT - 2), // 1 for return to start point, 1 for cutting circles
+        360 / (edgeCount - 2), // 1 for return to start point, 1 for cutting circles
     );
 
-    for (let i = 1; i < EDGE_COUNT; i++) {
+    for (let i = 1; i < edgeCount; i++) {
         const { long: lg, lat: lt } = pointsLongLat[i - 1];
         centerCoords2dflat.set(globe.api_GetMercator2DPoint(lg, lt), i * 2);
     }

package/programs/rings/distancering/paddyflatprogram2d.js

@@ -0,0 +1,151 @@
+import { createProgram, shaderfunctions } from "../../../util";
+import {
+    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
+    circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate
+} from "../../../util/shaderfunctions/geometrytransformations";
+import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
+import { globeProgramCache, noRegisterGlobeProgramCache } from "../../programcache";
+
+const vertexShader = `#version 300 es ` +
+    shaderfunctions.PI +
+    shaderfunctions.R +
+    shaderfunctions.POLE +
+    CameraUniformBlockString +
+    shaderfunctions.mercatorXYToGLPosition +
+    shaderfunctions.longLatRadToMercator +
+    shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
+
+${circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate}
+
+in vec2 center;
+in float radius;
+in float pad_range;
+in vec4 color;
+in float flag;
+
+uniform int compass;
+uniform float pad_count;
+
+uniform float opacity;
+
+
+out vec2 v_limp;
+out vec4 v_color;
+
+
+void main() {   
+
+    float alpha_padding =  z_level * z_level / (pad_range/ 100.0 );
+    if( flag == 2.0 || flag == 1.0 || radius == 0.0 || alpha_padding < 0.1 || z_level < 3.0 ) return; // 1.0 is hide 
+    v_color = vec4(color.rgb, color.a * alpha_padding * opacity);
+
+    gl_PointSize = 2.0;
+
+    float odd = mod(float(gl_VertexID), 2.0);
+    float index = (float(gl_VertexID)- odd ) / 2.0;
+    float angle = 3.1415926535897932384626433832795 * 2.0 * (index / pad_count );
+    float radius_ = radius - (pad_range * odd);
+
+    if ( is3D){  
+        gl_Position = projection * view * vec4(
+            circleLimpFromLongLatRadCenterCartesian3D_accurate( center, radius_, angle) - translate, 1.0);
+        v_limp = vec2(0.0, 0.0);
+        return;
+    }
+    vec2 limp;
+    if ( compass == 1 ){
+        limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
+    } else {
+        // limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
+        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+    }
+    v_limp = limp;
+    gl_Position = mercatorXYToGLPosition(limp);
+}`;
+
+const fragmentShader = `#version 300 es
+precision highp float; `+
+    shaderfunctions.POLE + `
+in vec4 v_color;
+in vec2 v_limp;
+out vec4 outColor;
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }
+    outColor = v_color;
+}`;
+
+class Logic {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+        { // bind positions so bufferManager can use them
+            this.gl.bindAttribLocation(this.program, 0, "center");
+            this.gl.bindAttribLocation(this.program, 1, "radius");
+            this.gl.bindAttribLocation(this.program, 2, "pad_range");
+            this.gl.bindAttribLocation(this.program, 3, "color");
+            this.gl.bindAttribLocation(this.program, 4, "flag");
+        }
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this._padCountLocation = this.gl.getUniformLocation(this.program, "pad_count");
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+        this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+        this._compassMode = 1;
+        this._opacity = 1.0;
+        this._padCount = 360;
+        {
+            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1i(this._compassLocation, 1);
+            this.gl.uniform1f(this._opacityLocation, 1.0);
+            this.gl.uniform1f(this._padCountLocation, 360)
+            this.gl.useProgram(currentProgram);
+        }
+
+    }
+
+
+    draw(attrBufferManager, padCount, compass, opacity) {
+        const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
+        gl.useProgram(program);
+        attrBufferManager.bindPaddingVAO();
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        // draw instanced
+        if (padCount !== this._padCount) {
+            this._padCount = padCount;
+            // console.log("padCount", padCount);
+            gl.uniform1f(_padCountLocation, padCount);
+        }
+        if (compass !== this._compassMode) {
+            // console.log("compass", compass);
+            gl.uniform1i(_compassLocation, compass);
+            this._compassMode = compass;
+        }
+        if (opacity !== this._opacity) {
+            // console.log("opacity", opacity);
+            this._opacity = opacity;
+            gl.uniform1f(this._opacityLocation, opacity);
+        }
+        gl.drawArraysInstanced(gl.LINES, 0, padCount * 2, attrBufferManager.length);
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+    }
+
+    free() {
+        this.gl.deleteProgram(this.program);
+        globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+    }
+}
+
+
+
+export const PaddingProgramCache = Object.freeze({
+    getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+})

package/programs/rings/distancering/paddyflatprogram3d.js

@@ -0,0 +1,151 @@
+import { createProgram, shaderfunctions } from "../../../util";
+import {
+    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
+    circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate
+} from "../../../util/shaderfunctions/geometrytransformations";
+import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
+import { globeProgramCache, noRegisterGlobeProgramCache } from "../../programcache";
+
+const vertexShader = `#version 300 es ` +
+    shaderfunctions.PI +
+    shaderfunctions.R +
+    shaderfunctions.POLE +
+    CameraUniformBlockString +
+    shaderfunctions.mercatorXYToGLPosition +
+    shaderfunctions.longLatRadToMercator +
+    shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
+
+${circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate}
+
+in vec2 center;
+in float radius;
+in float pad_range;
+in vec4 color;
+in float flag;
+
+uniform int compass;
+uniform float pad_count;
+
+uniform float opacity;
+
+
+out vec2 v_limp;
+out vec4 v_color;
+
+
+void main() {   
+
+    float alpha_padding =  z_level * z_level / (pad_range/ 100.0 );
+    if( flag == 2.0 || flag == 1.0 || radius == 0.0 || alpha_padding < 0.1 || z_level < 3.0 ) return; // 1.0 is hide 
+    v_color = vec4(color.rgb, color.a * alpha_padding * opacity);
+
+    gl_PointSize = 2.0;
+
+    float odd = mod(float(gl_VertexID), 2.0);
+    float index = (float(gl_VertexID)- odd ) / 2.0;
+    float angle = 3.1415926535897932384626433832795 * 2.0 * (index / pad_count );
+    float radius_ = radius - (pad_range * odd);
+
+    if ( is3D){  
+        gl_Position = projection * view * vec4(
+            circleLimpFromLongLatRadCenterCartesian3D_accurate( center, radius_, angle) - translate, 1.0);
+        v_limp = vec2(0.0, 0.0);
+        return;
+    }
+    vec2 limp;
+    if ( compass == 1 ){
+        limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
+    } else {
+        // limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
+        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+    }
+    v_limp = limp;
+    gl_Position = mercatorXYToGLPosition(limp);
+}`;
+
+const fragmentShader = `#version 300 es
+precision highp float; `+
+    shaderfunctions.POLE + `
+in vec4 v_color;
+in vec2 v_limp;
+out vec4 outColor;
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }
+    outColor = v_color;
+}`;
+
+class Logic {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+        { // bind positions so bufferManager can use them
+            this.gl.bindAttribLocation(this.program, 0, "center");
+            this.gl.bindAttribLocation(this.program, 1, "radius");
+            this.gl.bindAttribLocation(this.program, 2, "pad_range");
+            this.gl.bindAttribLocation(this.program, 3, "color");
+            this.gl.bindAttribLocation(this.program, 4, "flag");
+        }
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this._padCountLocation = this.gl.getUniformLocation(this.program, "pad_count");
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+        this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+        this._compassMode = 1;
+        this._opacity = 1.0;
+        this._padCount = 360;
+        {
+            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1i(this._compassLocation, 1);
+            this.gl.uniform1f(this._opacityLocation, 1.0);
+            this.gl.uniform1f(this._padCountLocation, 360)
+            this.gl.useProgram(currentProgram);
+        }
+
+    }
+
+
+    draw(attrBufferManager, padCount, compass, opacity) {
+        const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
+        gl.useProgram(program);
+        attrBufferManager.bindPaddingVAO();
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        // draw instanced
+        if (padCount !== this._padCount) {
+            this._padCount = padCount;
+            // console.log("padCount", padCount);
+            gl.uniform1f(_padCountLocation, padCount);
+        }
+        if (compass !== this._compassMode) {
+            // console.log("compass", compass);
+            gl.uniform1i(_compassLocation, compass);
+            this._compassMode = compass;
+        }
+        if (opacity !== this._opacity) {
+            // console.log("opacity", opacity);
+            this._opacity = opacity;
+            gl.uniform1f(this._opacityLocation, opacity);
+        }
+        gl.drawArraysInstanced(gl.LINES, 0, padCount * 2, attrBufferManager.length);
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+    }
+
+    free() {
+        this.gl.deleteProgram(this.program);
+        globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+    }
+}
+
+
+
+export const PaddingProgramCache = Object.freeze({
+    getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+})

package/rangerings-2/plugin.js

@@ -1,3 +1,42 @@
 /**
  * Re implementation of rangering plugin.
  */
+
+
+/**
+ * Circlelari cizen programlar
+ * Circlelari cizen bufferlarin muhasevesi. 
+ * 
+ * 1 derecelikler çok masraflı.
+ * bir dereceklikler için ayrı buffer orchastrator oluşturulmalı.
+ * 
+ * 
+ * A Range Ring {
+ *  rings: [ ring, ]
+ * }
+ */
+
+
+/**
+ * @typedef RangeRingData
+ * @property {number} centerX
+ * @property {number} centerY
+ * @property {Array<Ring>} rings
+ * 
+ * @typedef Ring
+ * @property {number} radius
+ * @property {number} padding
+ * @property {[number, number, number]} color
+ * 
+ * 
+ * @method setOpacity
+ * @method insertBulk
+ * @method updateCentersXY
+ * @method updateCentersColor
+ * @method removeCenters
+ * @method updateCentersHide
+ * 
+ * @method setOneDegreePaddingOn //  performance consuming, might be removed
+ * @method setCompass // removed
+ * 
+ */