@pirireis/webglobeplugins 0.1.6 → 0.1.8

package/compassrose/compassrose-2d.js

@@ -0,0 +1,29 @@
+// TODO: Implement compass rose in 2D
+// TODO: enrich cameraBlockTotem with globe tile and more...
+
+const vertexShader = `#version 300 es
+
+
+in vec2 center;
+in float pixel_radius;
+in vec4 color;
+out vec4 v_color;
+void main() {
+    const float PI = 3.14159265359;
+    float angle = float(gl_VertexID) / 180.0  * PI;
+    vec2 limp = vec2( 
+        
+    )
+    vec2 position = 
+    v_color = color;
+}
+`;
+
+const fragmentShader = `#version 300 es
+precision mediump float;
+in vec4 v_color;
+out vec4 outColor;
+void main() {
+    outColor = v_color;
+}
+`;

package/compassrose/compassrose.js

@@ -132,8 +132,8 @@ const object = {
                     "x": 16,
                     "y": -16
                 },
-                "vAlignment": 0,
-                "hAlignment": 0,
+                "vAlignment": 2,
+                "hAlignment": 2,
                 "size": 20,
                 "hollowColor": "#000",
                 "textColor": "#FFF",
@@ -219,7 +219,8 @@ export default class CompassRose {
 
         this.primaryKey = primaryKey;
 
-        this.object = Object.assign({}, object);
+        this.object = structuredClone(object);
+        this.object.id = id;
 
         setIconSize(this.object, size);
         if (imageURL) {
@@ -320,6 +321,10 @@ export default class CompassRose {
         }
     }
 
+    removeFromMap() {
+        this.globe.ObjectArray.Delete(this.id);
+    }
+
 
     // private
     _setData(data) {
@@ -337,6 +342,7 @@ export default class CompassRose {
         globe.ObjectArray.UpdateData(object, operation, [data], canChange);
     }
 
+
 }
 
 const getID = (data, primaryKey) => data.attribs[primaryKey];

package/package.json

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

package/programs/index.js

@@ -5,7 +5,7 @@ import ArrowField from "./arrowfield";
 import { glProgramCache, globeProgramCache, noRegisterGlobeProgramCache } from "./programcache";
 import * as vectorfield from "./vectorfields";
 import { FadeAway } from "./helpers";
-import rings from "./rings";
+import * as rings from "./rings";
 export {
     Float2LegendWithRatio,
     GlobeShellWiggle,

package/programs/line-on-globe/program.js

@@ -0,0 +1,115 @@
+import { CameraUniformBlockString, CameraUniformBlockTotem } from "../totems";
+import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYTo2DPoint } from "../shaderfunctions/geometrytransformations";
+import { createProgram } from "../webgl/program";
+import { noRegisterGlobeProgramCache, globeProgramCache } from "../programcache";
+import { BufferOffsetManger } from "../../util/account";
+
+const GLOBE_MIDPOINT_COUNT = 100;
+const ITEM_SIZE = 8;
+
+const vertexShader = `#version 300 es
+precision highp float;
+${CameraUniformBlockString}
+${longLatRadToMercator}
+${longLatRadToCartesian3D}
+${cartesian3DToGLPosition}
+${mercatorXYTo2DPoint}
+
+in vec2 start_position;
+in vec2 end_position;
+in vec4 color;
+out vec4 v_color;
+
+void main() {
+    
+    vec2 longLat;
+    if (is3D) {
+        float interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT}.0;
+        longLat = mix(start_position, end_position, interpolation)
+        vec3 cartesian = longLatRadToMercator(longLat);
+        gl_Position = cartesian3DToGLPosition(cartesian);
+    } else {
+        if ( gl_VertexID == 0 ) {
+            longLat = start_position;
+        } else {
+            longLat = end_position;
+        }
+        vec2 mercator = longLatRadToMercator(longLat);
+        gl_Position = mercatorXYTo2DPoint(mercator);
+    }
+    v_color = color;
+}
+`
+
+const fragmentShader = `#version 300 es
+precision highp float;
+in vec4 v_color;
+out vec4 color;
+void main() {
+    color = v_color;
+}
+`
+
+
+class Logic {
+
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = gl;
+        this.program = createProgram(gl, vertexShader, fragmentShader);
+        const { gl, program } = this;
+        {
+            // assign attribute locations
+            gl.bindAttribLocation(program, 0, "start_position");
+            gl.bindAttribLocation(program, 1, "end_position");
+            gl.bindAttribLocation(program, 2, "color");
+
+        }
+
+
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+
+    }
+
+
+    draw(bufferManager) {
+
+    }
+
+
+
+}
+
+
+class BufferManager extends BufferOffsetManger {
+
+    constructor(gl, { capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+        super(ITEM_SIZE, { capacity, bufferType });
+        this.gl = gl;
+        this.buffer = gl.createBuffer();
+
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, _capacity * ITEM_SIZE * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        this.vao = gl.createVertexArray();
+        {
+
+        }
+    }
+
+    insertBulk(items) {
+
+    }
+}
+
+
+
+export const programCache = Object.freeze({
+    get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    release: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+});
+

package/programs/rings/distancering/circleflatprogram.js

@@ -2,7 +2,7 @@ import { createProgram, shaderfunctions } from "../../../util";
 import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
 import { noRegisterGlobeProgramCache, globeProgramCache } from "../../programcache";
 
-const CIRCLE_EDGE_COUNT = 72;
+const CIRCLE_EDGE_COUNT = 360;
 
 const vertexShader = `#version 300 es ` +
     shaderfunctions.PI +
@@ -19,6 +19,8 @@ const vertexShader = `#version 300 es ` +
 uniform int compass;
 uniform float circle_edge_count;
 
+uniform float opacity;
+
 in vec2 center;
 in float radius;
 in vec4 color;
@@ -28,7 +30,7 @@ out vec2 v_limp;
 
 void main() {
     if( flag == 1.0 || radius == 0.0) return; // flag 1.0 is hide
-    v_color = color;
+    v_color = vec4(color.rgb, color.a * opacity);
     if ( gl_VertexID == 270 ) v_color.rgb += 0.2;
     float angle = 3.1415926535897932384626433832795 * 2.0 * (float(gl_VertexID) /  circle_edge_count);
     if ( is3D ){
@@ -76,36 +78,46 @@ class Logic {
         const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
         this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
 
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
         this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
         this._circleEdgeCountLocation = this.gl.getUniformLocation(this.program, "circle_edge_count");
-        this._circle_edge_count = CIRCLE_EDGE_COUNT;
+        this._circleEdgeCount = CIRCLE_EDGE_COUNT;
         this._compassmode = 1;
+        this._opacity = 1.0;
         {
             const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
             this.gl.useProgram(this.program);
             this.gl.uniform1i(this._compassLocation, 1);
             this.gl.uniform1f(this._circleEdgeCountLocation, CIRCLE_EDGE_COUNT);
+            this.gl.uniform1f(this._opacityLocation, 1.0);
+
             this.gl.useProgram(currentProgram);
         }
 
     }
 
 
-    draw(attrBufferManager, compass, circle_edge_count) {
+    draw(attrBufferManager, compass, circleEdgeCount, opacity) {
         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this;
         gl.useProgram(program);
         cameraBlockTotem.bind(cameraBlockBindingPoint);
         attrBufferManager.bindCircleVAO();
 
-        if (compass !== this._compassLocation) {
+        if (compass !== this._compassmode) {
             gl.uniform1i(this._compassLocation, compass);
             this._compassmode = compass;
         }
-        if (circle_edge_count !== this._circleEdgeCountLocation) {
-            gl.uniform1f(this._circleEdgeCountLocation, circle_edge_count);
-            this._circle_edge_count = circle_edge_count;
+
+        if (opacity !== this._opacity) {
+            gl.uniform1f(this._opacityLocation, opacity);
+            this._opacity = opacity;
+        }
+
+        if (circleEdgeCount !== this._circleEdgeCount) {
+            gl.uniform1f(this._circleEdgeCountLocation, circleEdgeCount);
+            this._circleEdgeCount = circleEdgeCount;
         }
-        gl.drawArraysInstanced(gl.LINE_LOOP, 0, circle_edge_count, attrBufferManager.length);
+        gl.drawArraysInstanced(gl.LINE_LOOP, 0, circleEdgeCount, attrBufferManager.length);
         gl.bindVertexArray(null);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
     }
@@ -118,18 +130,7 @@ class Logic {
 }
 
 
-export default class {
-    constructor(globe, gl) {
-        this.gl = gl;
-        this.globe = globe;
-        this.logic = noRegisterGlobeProgramCache.getProgram(globe, Logic);
-    }
-
-    draw(attrBufferManager, compass, circle_edge_count) {
-        this.logic.draw(attrBufferManager, compass, circle_edge_count);
-    }
-
-    free() {
-        noRegisterGlobeProgramCache.releaseProgram(this.gl, Logic);
-    }
-}
+export const programCache = Object.freeze({
+    getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+});

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -25,13 +25,16 @@ in float pad_angle;
 
 uniform int compass;
 
+uniform float opacity;
+
 out vec2 v_limp;
 out vec4 v_color;
 
 
 void main() {   
     if( flag == 1.0 || radius == 0.0 ) return; // 1.0 is hide 
-    v_color = color;
+    v_color = vec4(color.rgb, color.a * opacity);
+
     if ( pad_angle == 0.0 ) v_color.rgb -= 0.2;
     gl_PointSize = 2.0;
 
@@ -80,12 +83,13 @@ class Logic {
 
         {
             const gl = this.gl;
-            this.center = gl.getAttribLocation(this.program, "center");
-            this.radius = gl.getAttribLocation(this.program, "radius");
-            this.pad_range = gl.getAttribLocation(this.program, "pad_range");
-            this.color = gl.getAttribLocation(this.program, "color");
-            this.flag = gl.getAttribLocation(this.program, "flag");
-            this.pad_angle = gl.getAttribLocation(this.program, "pad_angle");
+            // assign attribute locations
+            gl.bindAttribLocation(this.program, 0, "center");
+            gl.bindAttribLocation(this.program, 1, "radius");
+            gl.bindAttribLocation(this.program, 2, "pad_range");
+            gl.bindAttribLocation(this.program, 3, "color");
+            gl.bindAttribLocation(this.program, 4, "flag");
+            gl.bindAttribLocation(this.program, 5, "pad_angle");
 
         }
 
@@ -94,19 +98,20 @@ class Logic {
         this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
         this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
         this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
-
-
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+        this._opacity = 1.0;
         {
             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._lastCompass = 1;
             this.gl.useProgram(currentProgram);
         }
     }
 
 
-    draw(attrBufferManager, compass) {
+    draw(attrBufferManager, compass, opacity) {
 
         const { gl, program, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
 
@@ -117,6 +122,10 @@ class Logic {
             gl.uniform1i(_compassLocation, compass);
             this._lastCompass = compass;
         }
+        if (opacity !== this._opacity) {
+            gl.uniform1f(this._opacityLocation, opacity);
+            this._opacity = opacity;
+        }
         gl.disable(gl.DEPTH_TEST);
         gl.drawArraysInstanced(gl.LINES, 0, 2, attrBufferManager.length);
         gl.enable(gl.DEPTH_TEST);
@@ -124,7 +133,7 @@ class Logic {
         gl.bindVertexArray(null);
 
     }
-    initilizeBufferManager({ bufferType = "DYNAMIC_DRAW", initialRingCapacity = 10 } = {}) {
+    createBuffer({ bufferType = "DYNAMIC_DRAW", initialRingCapacity = 10 } = {}) {
         return new BufferManager(this.gl, bufferType, initialRingCapacity);
 
     }
@@ -214,7 +223,7 @@ export class BufferManager extends BufferOffsetManager {
         console.log("space left:", spaceLeft, "required space:", requiredSpace);
         if (requiredSpace > spaceLeft) {
             console.log("new capacity:", this.capacity + requiredSpace - spaceLeft)
-            this.extendBuffer(gl, buffer, this.bufferType, this.capacity + requiredSpace - spaceLeft);
+            this.extendBuffer(this.capacity + requiredSpace - spaceLeft);
         }
 
         const items = [];

package/programs/rings/distancering/index.js

@@ -1,5 +1,5 @@
-import CircleFlatProgram from './circleflatprogram';
-import PaddyFlatProgram from './paddyflatprogram';
+import { programCache as circleProgramCache } from './circleflatprogram';
+import { PaddingProgramCache } from './paddyflatprogram';
 import CirclePaddySharedBuffer from './circlepaddysharedbuffer';
 import { PaddingFreeAngleCache } from './circlepaddingfreeangleprogram';
-export { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer, PaddingFreeAngleCache };
+export { circleProgramCache, PaddingProgramCache, CirclePaddySharedBuffer, PaddingFreeAngleCache };

package/programs/rings/distancering/paddyflatprogram.js

@@ -24,6 +24,9 @@ in float flag;
 uniform int compass;
 uniform float pad_count;
 
+uniform float opacity;
+
+
 out vec2 v_limp;
 out vec4 v_color;
 
@@ -32,7 +35,7 @@ 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, alpha_padding);
+    v_color = vec4(color.rgb, color.a * alpha_padding * opacity);
 
     gl_PointSize = 2.0;
 
@@ -86,27 +89,44 @@ class Logic {
         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) {
+    draw(attrBufferManager, padCount, compass, opacity) {
         const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
         gl.useProgram(program);
         attrBufferManager.bindPaddingVAO();
         cameraBlockTotem.bind(cameraBlockBindingPoint);
         // draw instanced
-        gl.uniform1f(_padCountLocation, padCount);
-        gl.uniform1i(_compassLocation, compass);
+        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);
@@ -120,17 +140,7 @@ class Logic {
 
 
 
-export default class {
-    constructor(globe, gl) {
-        this.gl = gl;
-        this.logic = noRegisterGlobeProgramCache.getProgram(globe, Logic);
-    }
-
-    draw(attrBufferManager, padCount, compass) {
-        this.logic.draw(attrBufferManager, padCount, compass);
-    }
-
-    free() {
-        noRegisterGlobeProgramCache.releaseProgram(this.gl, Logic);
-    }
-}
+export const PaddingProgramCache = Object.freeze({
+    getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+})

package/programs/rings/index.js

@@ -1,9 +1 @@
-import CirclePaddySharedBuffer from './distancering/circlepaddysharedbuffer';
-import CircleFlatProgram from './distancering/circleflatprogram';
-import PaddyFlatProgram from './distancering/paddyflatprogram';
-
-export default {
-    CirclePaddySharedBuffer,
-    CircleFlatProgram,
-    PaddyFlatProgram,
-};
+export * from "./distancering";

package/rangerings/index.js

@@ -1,3 +1,4 @@
 import RangeRings from './rangerings';
+import RangeRingAngleText from './rangeringangletext';
 import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from './enum';
-export { RangeRings, ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES };
+export { RangeRings, ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES, RangeRingAngleText };

package/rangerings/rangeringangletext.js

@@ -32,7 +32,7 @@ const object = {
 
 
 export default class RangeRingAngleText {
-    constructor(globe, id, { style = null, flatCompassMode = COMPASS_MODES.REAL, hideAll = false } = {}) {
+    constructor(globe, id, { style = null, flatCompassMode = COMPASS_MODES.REAL, hideAll = false, opacity = 1 } = {}) {
         this.globe = globe;
         this.ObjectArray = globe.ObjectArray;
         this.id = id;
@@ -40,7 +40,7 @@ export default class RangeRingAngleText {
         this._lastImplicitCompassMode = this.__implicitCompassMode();
 
         this._hideAll = hideAll;
-
+        this._opacity = opacity;
         const style_ = style !== null ? style : this.getDefaultStyle();
         this.object = Object.assign({}, object, { style: style_, id: this.id });
 
@@ -66,10 +66,10 @@ export default class RangeRingAngleText {
         label.text = "`${aci}`"
         // this.style.filter = [
         //     {
-        //         rule: ["any", ["<", "startLod", "LOD"]],
+        //         rule: ["any", ["===", "aci", "K"]],
         //         name: "startLODRule",
         //         style: {
-        //             opacity: 0
+        //             ...
         //         }
 
         //     }
@@ -80,11 +80,19 @@ export default class RangeRingAngleText {
 
     setStyle(style) {
         if (style === null) return;
+        style.opacity = this._opacity;
         this.object.style = style;
         this.ObjectArray.StyleChanged(this.object);
     }
 
 
+    setOpacity(opacity) {
+        this._opacity = opacity;
+        const { style } = this.object;
+        style.opacity = opacity;
+        this.ObjectArray.StyleChanged(this.object);
+    }
+
     setCompass(mode) {
         if (mode === this._flatCompassMode) return;
         this._flatCompassMode = mode;

package/rangerings/rangerings.js

@@ -3,7 +3,7 @@ import { COMPASS_MODES } from "./enum";
 import { PaddingFreeAngleCache } from "../programs/rings/distancering";
 
 import RangeRingAngleText from "./rangeringangletext";
-const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
+const { circleProgramCache, PaddingProgramCache, CirclePaddySharedBuffer } = rings;
 
 /**
  * @typedef RangeRingData
@@ -22,11 +22,12 @@ const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
 
 export default class {
 
-    constructor(id, { oneDegreePadding = true, compass = COMPASS_MODES.REAL, showNumbers = true, numbersStyle = null } = {}) {
+    constructor(id, { oneDegreePadding = true, compass = COMPASS_MODES.REAL, showNumbers = true, numbersStyle = null, opacity = 1 } = {}) {
         this.id = id;
         this.compass = compass;
         this._showNumbers = showNumbers;
         this._numbersStyle = numbersStyle;
+        this._opacity = opacity;
         this.circleEdgeCount = 360;
         this._onedegreepaddingOn = oneDegreePadding;
         this.bufferManager = null;
@@ -40,25 +41,35 @@ export default class {
     init(globe, gl) {
         this.gl = gl;
         this.globe = globe;
-        this.circleFlatProgram = new CircleFlatProgram(globe, gl);
-        this.paddyFlatProgram = new PaddyFlatProgram(globe, gl);
+        this.circleFlatProgram = circleProgramCache.getProgram(globe);
+        this.paddyFlatProgram = PaddingProgramCache.getProgram(globe);
         this.paddingFreeAngleProgram = PaddingFreeAngleCache.getProgram(globe);
         if (this._showNumbers) {
-            this.textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass, style: this._numbersStyle });
+            this.textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass, style: this._numbersStyle, opacity: this._opacity });
             delete this._numbersStyle;
         }
     }
 
     // TODO: Add text free
     free() {
-        this.circleFlatProgram.free();
-        this.paddyFlatProgram.free();
+        this.circleFlatProgram?.free();
+        this.paddyFlatProgram?.free();
         this.bufferManager?.free();
+        this.paddingBufferManager?.free();
         this.textPlugin?.free();
+        this.circleFlatProgram = null;
+        this.paddyFlatProgram = null;
+        this.bufferManager = null;
+        this.paddingBufferManager = null;
+        this.textPlugin = null;
     }
 
 
-
+    setOpacity(opacity) {
+        this._opacity = opacity;
+        this.textPlugin?.setOpacity(opacity); // TODO impolement this
+        this.globe.DrawRender();
+    }
 
     setGeometry() {
         this.textPlugin?.setGeometry();
@@ -66,16 +77,15 @@ export default class {
 
 
     draw3D() {
-        const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager } = this;
-        // if (globe.api_GetCurrentGeometry() === 0) return; // do not draw in 3D mode
+        const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager, _opacity } = this;
         if (this.bufferManager !== null && bufferManager.length > 0) {
             gl.disable(gl.DEPTH_TEST);
             // gl.enable(gl.BLEND);
             // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-            circleFlatProgram.draw(bufferManager, compass, circleEdgeCount);
-            if (this._onedegreepaddingOn) paddyFlatProgram.draw(bufferManager, 360, compass);
-            paddingFreeAngleProgram.draw(paddingBufferManager, compass);
-
+            console.log("the opacity", _opacity);
+            circleFlatProgram.draw(bufferManager, compass, circleEdgeCount, _opacity);
+            if (this._onedegreepaddingOn) paddyFlatProgram.draw(bufferManager, 360, compass, _opacity);
+            paddingFreeAngleProgram.draw(paddingBufferManager, compass, _opacity);
             gl.enable(gl.DEPTH_TEST);
         }
     }
@@ -96,7 +106,7 @@ export default class {
         const { gl, globe } = this
         this.bufferDrawType = bufferDrawType;
         this.bufferManager = new CirclePaddySharedBuffer(gl, globe, { bufferType: bufferDrawType, initialRingCapacity: initialRingCapacity });
-        this.paddingBufferManager = this.paddingFreeAngleProgram.initilizeBufferManager({ bufferType: bufferDrawType, initialRingCapacity });
+        this.paddingBufferManager = this.paddingFreeAngleProgram.createBuffer({ bufferType: bufferDrawType, initialRingCapacity });
     }
 
 
@@ -117,6 +127,10 @@ export default class {
     }
 
 
+    /**
+     * 
+     * @param {Array<{centerID, x, y}>} items 
+     */
     updateCentersXY(items) {
         this.bufferManager.updateCentersXY(items);
         this.paddingBufferManager.updateCentersXY(items);
@@ -125,6 +139,9 @@ export default class {
     }
 
 
+    /**
+     * @param   {Array<{centerID, rgba:[4 numbers]}>} centerColors
+     */
     updateCentersColor(centerColors) {
         this.bufferManager.updateCentersColor(centerColors);
         this.paddingBufferManager.updateCentersColor(centerColors);
@@ -132,7 +149,9 @@ export default class {
     }
 
 
-    // TODO: test
+    /**
+     * @param {Array<{centerID}>} centerIds
+     */
     removeCenters(centerIds) {
         this.bufferManager.removeCenters(centerIds);
         this.paddingBufferManager.removeCenters(centerIds);
@@ -143,7 +162,10 @@ export default class {
 
     }
 
-    //TODO: test
+    /**
+     * 
+     * @param {Array<{centerID, hide, textHide}>} centerHides
+     */
     updateCentersHide(centerHides) {
         this.bufferManager.updateCentersHide(centerHides);
         this.paddingBufferManager.updateCentersHide(centerHides);
@@ -153,6 +175,8 @@ export default class {
 }
 
 
+
+
 const ringItemsToCircleBufferInsertDataAdaptor = (ringItems) => {
 
     const result = [];

package/util/account/bufferoffsetmanager.js

@@ -116,7 +116,8 @@ export default class {
     }
 
 
-    extendBuffer(gl, buffer, bufferType, newCapacity) {
+    extendBuffer(newCapacity) {
+        const { gl, buffer, bufferType } = this;
         const itemSize = this.itemSize;
         const bufferData = this._getBufferData();
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
@@ -136,7 +137,8 @@ export default class {
      * @param {number} partOffset
      * @returns 
      */
-    _updatePartial(items, partOffset, gl, buffer) {
+    _updatePartial(items, partOffset) {
+        const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         const partStart = partOffset * 4;
         for (let { key, payload } of items) {

package/waveparticles/index.js

@@ -1,3 +1,3 @@
 import VectorFieldWaveParticle from "./plugin";
 import { centigradePlus90ToVectorArray } from "./adaptor";
-export { centigradePlus90ToVectorArray, VectorFieldWaveParticle };
+export { centigradePlus90ToVectorArray, VectorFieldWaveParticle };