@pirireis/webglobeplugins 0.12.0-alpha → 0.13.0-alpha

package/shape-on-terrain/circle/plugin.js

@@ -1,4 +1,4 @@
-import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip";
+import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip/linestrip";
 import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
 import { CameraUniformBlockTotemCache } from "../../programs/totems/camerauniformblock";
 import { createBufferAndReadInfo } from '../../util/gl-util/buffer/attribute-loader';
@@ -50,6 +50,7 @@ const defineStregthLevel = (lod, radiusMeters) => {
     return Math.min(level, ATTRACTION_LEVELS - 1);
 };
 const AnglesStash = CircleCDF.createCummulativeTemplateStash(ATTRACTION_LEVELS, CIRCLE_POINTS_COUNT_HALF, DENSE_PART_SAMPLE_RATIO, STRENGTH_FACTOR);
+const _colorArray = new Float32Array(4); // Used to store the color for each circle
 export class CircleOnTerrainPlugin {
     id;
     globe = null;
@@ -65,14 +66,91 @@ export class CircleOnTerrainPlugin {
     _vao = null;
     _dobuild = true; // This is used to trigger the build of circles when the camera position changes.
     _staticDynamicStrategy = null;
-    constructor(id) {
+    _styleOptions = {
+        variativeColorsOn: false,
+        defaultColor: [0.1, 0.1, 1, 1], // Default color in RGBA format
+        defaultHeightFromGroundIn3D: 30.0
+    };
+    constructor(id, styleOptions = {
+        variativeColorsOn: false, defaultColor: [0.1, 0.1, 1, 1]
+    }) {
         this.id = id;
+        this._styleOptions = styleOptions;
+        this._styleOptions.defaultColor = new Float32Array(this._styleOptions.defaultColor);
     }
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        // Initialize the program cache for line strip rendering.
+        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, 8);
+        this.lineProgram = LineStripProgramCache.get(globe);
+        // const g3D = globe3Dcoordinates(globe, 30);
+        const g2D = globe2Dcoordinates(globe);
+        // Initialize with a reasonable initial capacity to prevent buffer size issues
+        const initialCapacity = 100; // Start with capacity for 100 circles
+        this.bufferManagerMap.set("position3d", {
+            bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 3, { initialCapacity }), // plus 1 is for butting linestrips
+            adaptor: (item) => {
+                const { longLatArr, height = this._styleOptions.defaultHeightFromGroundIn3D } = item;
+                const result = globe3Dcoordinates(globe, height)(longLatArr, { paddingCount: 1, paddingValue: NaN });
+                return result;
+            }
+        });
+        this.bufferManagerMap.set("position2d", {
+            bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 2, { initialCapacity }),
+            adaptor: (item) => {
+                const { longLatArr } = item;
+                const result = g2D(longLatArr, { paddingCount: 1, paddingValue: NaN });
+                return result;
+            }
+        });
+        if (this._styleOptions.variativeColorsOn) {
+            this.bufferManagerMap.set("color", {
+                bufferManager: new BufferManager(gl, 4, { initialCapacity }),
+                adaptor: (item) => {
+                    const { radius } = item;
+                    // Calculate color based on radius
+                    if (item.color) {
+                        _colorArray.set(item.color);
+                        return _colorArray;
+                    }
+                    else {
+                        return this._styleOptions.defaultColor;
+                    }
+                }
+            });
+        }
+        this._vao = this.lineProgram.createVAO(createBufferAndReadInfo(this.bufferManagerMap.get("position3d")?.bufferManager.buffer), createBufferAndReadInfo(this.bufferManagerMap.get("position2d")?.bufferManager.buffer), this._styleOptions.variativeColorsOn ?
+            createBufferAndReadInfo(this.bufferManagerMap.get("color")?.bufferManager.buffer) : null);
+        this._circleUBOHandler = this.lineProgram.createUBO();
+        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+    }
+    insertCircle(key, longitude, latitude, radius, height = null) {
+        const circle = {
+            center: [longitude, latitude],
+            radius: radius
+        };
+        const circleForAzimuthCalc = CircleMethods.createCircleClosestAzimuthAngleProperties(circle);
+        this.circleMap.set(key, [circle, circleForAzimuthCalc, height]);
+        // @ts-ignore
+        if (this._staticDynamicStrategy.getState() !== StaticDynamicState.DYNAMIC) {
+            this.__buildStaticCircles([key]);
+        }
+        this.globe?.DrawRender();
+    }
+    deleteCircle(keys) {
+        for (const key of keys) {
+            if (this.circleMap.has(key)) {
+                this.circleMap.delete(key);
+                this.globe?.DrawRender();
+            }
+        }
+        this._dobuild = true;
+        this.globe?.DrawRender();
+    }
+    // IMPLICIT METHODS
     _buildCircles() {
-        // 
         // @ts-ignore
-        this.__buildCircles();
-        return;
         this._staticDynamicStrategy?.updateState();
         const state = this._staticDynamicStrategy?.getState();
         if (state === StaticDynamicState.TO_STATIC)
@@ -94,7 +172,8 @@ export class CircleOnTerrainPlugin {
         // Prepare the data for the buffers
         const data = [{
                 key: "",
-                longLatArr: []
+                longLatArr: [],
+                height: null
             }];
         const lookAtPosition = _cameraUniformBlock.getLookAtVector();
         const cameraPosition = _cameraUniformBlock.getNormalizedCameraVector();
@@ -102,10 +181,9 @@ export class CircleOnTerrainPlugin {
         vec3.add(cameraPosition, cameraPosition, lookAtPosition);
         vec3.normalize(cameraPosition, cameraPosition);
         const currentLOD = globe.api_GetCurrentLODWithDecimal();
-        // const currentGeom = globe.api_GetCurrentGeometry();
         const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
         for (const [key, circle] of this.circleMap.entries()) {
-            const [{ radius, center }, circleForAzimuthCalc] = circle;
+            const [{ radius, center }, circleForAzimuthCalc, height] = circle;
             const closestAzimuthAngle = CircleMethods.closestAzimuthAngle(circleForAzimuthCalc, cameraPosition);
             const stregthLevel = defineStregthLevel(currentLOD, radius);
             // console.log('DrawStregthLevel', stregthLevel, currentLOD, radius);
@@ -117,6 +195,7 @@ export class CircleOnTerrainPlugin {
             CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, closestAzimuthAngle, templateAngles);
             data[0].key = key;
             data[0].longLatArr = circlePointsLongLat;
+            data[0].height = height;
             // Add to buffer orchestrator
             this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
         }
@@ -130,7 +209,8 @@ export class CircleOnTerrainPlugin {
             throw new Error("Plugin not initialized properly");
         const data = [{
                 key: "",
-                longLatArr: []
+                longLatArr: [],
+                height: null
             }];
         // ensure buffer orchestrotrator have enough capacity
         // all circles are build with even sampling, AttractionLevel = 0
@@ -140,10 +220,11 @@ export class CircleOnTerrainPlugin {
             const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
             bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
             for (const [key, circle] of this.circleMap.entries()) {
-                const [{ radius, center }, _] = circle;
+                const [{ radius, center }, _, height] = circle;
                 CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
                 data[0].key = key;
                 data[0].longLatArr = circlePointsLongLat;
+                data[0].height = height;
                 this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
             }
         }
@@ -157,66 +238,17 @@ export class CircleOnTerrainPlugin {
                     console.warn(`CircleOnTerrainPlugin: Circle ${key} not found in circleMap.`);
                     continue;
                 }
-                const [{ radius, center }, _] = this.circleMap.get(key);
+                const [{ radius, center }, _, height] = this.circleMap.get(key);
                 const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
                 CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
                 data[0].key = key;
                 data[0].longLatArr = circlePointsLongLat;
+                data[0].height = height;
                 this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
             }
         }
     }
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        // Initialize the program cache for line strip rendering.
-        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, 8);
-        this.lineProgram = LineStripProgramCache.get(globe);
-        const g3D = globe3Dcoordinates(globe, 30);
-        const g2D = globe2Dcoordinates(globe);
-        this.bufferManagerMap.set("position3d", {
-            bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 3), // plus 1 is for butting linestrips
-            adaptor: (item) => {
-                const { longLatArr } = item;
-                const result = g3D(longLatArr, { paddingCount: 1, paddingValue: NaN });
-                return result;
-            }
-        });
-        this.bufferManagerMap.set("position2d", {
-            bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 2),
-            adaptor: (item) => {
-                const { longLatArr } = item;
-                const result = g2D(longLatArr, { paddingCount: 1, paddingValue: NaN });
-                return result;
-            }
-        });
-        this._vao = this.lineProgram.createVAO(createBufferAndReadInfo(this.bufferManagerMap.get("position3d")?.bufferManager.buffer), createBufferAndReadInfo(this.bufferManagerMap.get("position2d")?.bufferManager.buffer), null, null, null);
-        this._circleUBOHandler = this.lineProgram.createUBO();
-        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
-    }
-    insertCircle(key, longitude, latitude, radius) {
-        const circle = {
-            center: [longitude, latitude],
-            radius: radius
-        };
-        const circleForAzimuthCalc = CircleMethods.createCircleClosestAzimuthAngleProperties(circle);
-        this.circleMap.set(key, [circle, circleForAzimuthCalc]);
-        // @ts-ignore
-        if (this._staticDynamicStrategy.getState() === StaticDynamicState.STATIC) {
-            this.__buildStaticCircles([key]);
-        }
-        this.globe?.DrawRender();
-    }
-    deleteCircle(keys) {
-        for (const key of keys) {
-            if (this.circleMap.has(key)) {
-                this.circleMap.delete(key);
-                this.globe?.DrawRender();
-            }
-        }
-        this._dobuild = true;
-        this.globe?.DrawRender();
-    }
+    // GLOBE API INTERFACE
     draw3D() {
         const { _isFree, globe, gl, lineProgram, bufferOrchestrator, bufferManagerMap, _vao, _circleUBOHandler } = this;
         if (_isFree || !globe || !gl || !lineProgram || !bufferOrchestrator ||

package/shape-on-terrain/type.js

@@ -0,0 +1 @@
+export {};

package/util/account/index.js

@@ -1,3 +1,3 @@
-import BufferOffsetManager from './bufferoffsetmanager';
-export { BufferOffsetManager };
+// import BufferOffsetManager from './bufferoffsetmanager';
+// export { BufferOffsetManager };
 export * from './single-attribute-buffer-management/index';

package/util/account/single-attribute-buffer-management/buffer-manager.js

@@ -22,13 +22,12 @@ export class BufferManager {
     itemSize;
     bufferType;
     isFreed = false;
-    constructor(gl, itemSize, { bufferType = "STATIC_DRAW", buffer = null, initialCapacity = null } = {}) {
+    constructor(gl, itemSize, { bufferType = "STATIC_DRAW", buffer = null, initialCapacity = 10 } = {}) {
         this.gl = gl;
         this.itemSize = itemSize;
         this.bufferType = bufferType;
         this.buffer = buffer === null ? gl.createBuffer() : buffer;
-        if (initialCapacity !== null)
-            this.resetWithCapacity(initialCapacity);
+        this.resetWithCapacity(initialCapacity);
     }
     resetWithCapacity(capacity) {
         const { gl, buffer, bufferType, itemSize } = this;

package/util/build-strategy/static-dynamic.js

@@ -17,7 +17,7 @@ export class StaticDynamicStrategy {
     updateState() {
         const currentLOD = this.globe.api_GetCurrentLODWithDecimal();
         const state = currentLOD < this._transitionLevel ? StaticDynamicState.STATIC : StaticDynamicState.DYNAMIC;
-        if (this._lastStaticDynamicState === StaticDynamicState.STATIC && state === StaticDynamicState.DYNAMIC) {
+        if (this._lastStaticDynamicState === StaticDynamicState.DYNAMIC && state === StaticDynamicState.STATIC) {
             this._staticDynamicState = StaticDynamicState.TO_STATIC;
         }
         else {

package/programs/rings/distancering/shader.js

@@ -1 +0,0 @@
-"use strict";