@pirireis/webglobeplugins 0.14.0-alpha → 0.15.1-alpha

package/package.json

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

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

@@ -149,7 +149,7 @@ export class LineProgram {
         cameraBlockTotem.bind(uniformBindingPoints.camera);
         ubo.bind();
         gl.bindVertexArray(vao);
-        drawArrays(gl, gl.POINTS, drawOptions);
+        // drawArrays(gl, gl.POINTS, drawOptions);
         drawArrays(gl, gl.LINE_STRIP, drawOptions);
         gl.bindVertexArray(null);
         ubo.unbind();

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

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

package/range-tools-on-terrain/circle-line-chain/plugin.js

@@ -124,7 +124,6 @@ export class CircleLineChainPlugin {
         // Reconstruct chains
         this._reconstructChains(chainKeys);
         // Update texts
-        console.log("insertBulk", chainKeys, textWriterIDs);
         this._updateTexts(chainKeys, textWriterIDs);
         this.globe?.DrawRender();
     }
@@ -253,6 +252,24 @@ export class CircleLineChainPlugin {
         this._updateTexts(chainKeys, textWriterIDs);
         this.globe?.DrawRender();
     }
+    setDefaultSemiPluginColor(semiPluginName, color) {
+        switch (semiPluginName) {
+            case "circleOnTerrain":
+                this._semiPluginOptions.circleOnTerrainOptions.defaultColor = color;
+                this.circlePlugin?.setDefaultColor(color);
+                break;
+            case "arcOnTerrain":
+                this._semiPluginOptions.arcOnTerrainOptions.defaultColor = color;
+                this.arcPlugin?.setDefaultColor(color);
+                break;
+            case "line":
+                this._semiPluginOptions.lineOptions.defaultColor = color;
+                this.linePlugin?.setDefaultColor(color);
+                break;
+            default:
+                throw new Error(`Unknown semi-plugin name: ${semiPluginName}`);
+        }
+    }
     // IMPLICIT METHODS
     _checktextWritersMap(textWritersMap) {
         if (!(textWritersMap instanceof Map))
@@ -335,16 +352,16 @@ export class CircleLineChainPlugin {
         switch (currentGeometry) {
             case 0: {
                 // globe view
-                const arcOpacity = getOpacity(this._opacities, "globeArcFitsTerrain");
-                if (arcOpacity !== 0) {
-                    this.arcPlugin?.setPluginOpacity(arcOpacity);
-                    this.arcPlugin?.draw3D();
-                }
                 const lineOpacity = getOpacity(this._opacities, "globeArc");
                 if (lineOpacity !== 0) {
                     this.linePlugin?.setPluginOpacity(lineOpacity);
                     this.linePlugin?.draw3D();
                 }
+                const arcOpacity = getOpacity(this._opacities, "globeArcFitsTerrain");
+                if (arcOpacity !== 0) {
+                    this.arcPlugin?.setPluginOpacity(arcOpacity);
+                    this.arcPlugin?.draw3D();
+                }
                 break;
             }
             case 1: {

package/range-tools-on-terrain/range-ring/adapters.js

@@ -6,7 +6,7 @@
 //         color: rangeRing.rgba as Color,
 //         altitude: rangeRing.altitude,
 //     };
-// }   
+// }
 export const rangeRingToCircleInputAdapter = (rangeRing) => {
     return rangeRing.rings.map(ring => ({
         key: ring.rindID,

package/semiplugins/lightweight/line-plugin.js

@@ -81,6 +81,15 @@ export class LinePlugin {
         this._options.defaultColor[3] = opacity; // Update the default color's alpha channel
         this.globe?.DrawRender();
     }
+    setDefaultColor(color) {
+        if (!this.globe || !this.gl) {
+            console.warn("Globe or WebGL context is not initialized.");
+            return;
+        }
+        this._options.defaultColor = color;
+        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
+        this.globe?.DrawRender();
+    }
     // GLOBE INTERACTION METHODS
     draw3D() {
         if (this._freed) {

package/semiplugins/shape-on-terrain/arc-plugin.js

@@ -49,7 +49,7 @@ export class ArcOnTerrainPlugin {
             defaultColor: defaultColor ? defaultColor : [0.1, 0.1, 1, 1],
             defaultHeightFromGroundIn3D: defaultHeightFromGroundIn3D ? defaultHeightFromGroundIn3D : 30.0,
             vertexCount: vertexCount ? vertexCount : 70,
-            cameraAttractionIsOn: cameraAttractionIsOn ? cameraAttractionIsOn : true
+            cameraAttractionIsOn: cameraAttractionIsOn ? true : false
         };
     }
     insertBulk(arcs) {
@@ -112,6 +112,15 @@ export class ArcOnTerrainPlugin {
         this._opacity = opacity;
         this.globe.DrawRender();
     }
+    setDefaultColor(color) {
+        if (!this.globe || !this.gl) {
+            console.warn("Globe or WebGL context is not initialized.");
+            return;
+        }
+        this._options.defaultColor = color;
+        this._arcUBOHandler?.updateSingle("u_color", new Float32Array(color));
+        this.globe.DrawRender();
+    }
     setCameraAttraction(isOn) {
         if (!this.globe || !this.gl) {
             console.warn("Globe or WebGL context is not initialized.");

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

@@ -177,6 +177,14 @@ export class CircleOnTerrainPlugin {
         this._opacity = opacity;
         this.globe.DrawRender();
     }
+    setDefaultColor(color) {
+        if (!this.globe || !this.gl) {
+            console.warn("Globe or WebGL context is not initialized.");
+            return;
+        }
+        this._circleUBOHandler?.updateSingle("u_color", new Float32Array(color));
+        this.globe.DrawRender();
+    }
     // IMPLICIT METHODS
     _buildCircles() {
         // @ts-ignore

package/semiplugins/shape-on-terrain/derived/padding-plugin.js

@@ -41,21 +41,25 @@ export const chargerAdaptor = (chargerInput, plugin, padding) => {
 export class PaddingPlugin {
     id;
     arcPlugin;
+    globe = null;
     _memory = new Map();
     isFreed = false;
-    constructor(id) {
+    constructor(id, { variativeColorsOn = true, defaultColor = [1, 1, 1, 1], defaultHeightFromGroundIn3D = 30.0, vertexCount = EDGE_COUNT } = {}) {
         this.id = id;
         this.arcPlugin = new ArcOnTerrainPlugin(id, {
             cameraAttractionIsOn: false,
-            vertexCount: EDGE_COUNT,
+            vertexCount: vertexCount,
+            variativeColorsOn: variativeColorsOn,
+            defaultColor: defaultColor,
+            defaultHeightFromGroundIn3D: defaultHeightFromGroundIn3D,
         });
     }
-    insertBulk(items, globe) {
+    insertBulk(items) {
         for (const padding of items) {
             this.__delete(padding.key);
             this._memory.set(padding.key, padding);
         }
-        const arcInputs = items.flatMap(padding => adapterPadding2Arc(globe, padding));
+        const arcInputs = items.flatMap(padding => adapterPadding2Arc(this.globe, padding));
         this.arcPlugin.insertBulk(arcInputs);
     }
     deleteBulk(keys) {
@@ -82,6 +86,7 @@ export class PaddingPlugin {
         }
     }
     init(globe, gl) {
+        this.globe = globe;
         this.arcPlugin.init(globe, gl);
     }
     draw3D() {

package/semiplugins/shape-on-terrain/one-degree-padding.js

@@ -0,0 +1,85 @@
+"use strict";
+// //      One Degree Padding
+// /**
+//  * 2d coordinates are loaded ones
+//  * 3d coordinates are calculated on the fly.
+//  *
+//  * 2d paddings are fixed size
+//  * 3d paddings gets shortened as lod increases
+//  *
+//  * color buffer is shared and does not change on unless insert or delete
+//  * changing color can be done by re inserting
+//  *
+//  *
+//  *
+//  */
+// import { Globe, LongLat, Meter, Color } from '../../types';
+// import { BufferManagersMap } from '../../util/account/single-attribute-buffer-management/types';
+// import { BufferManager } from '../../util/account/single-attribute-buffer-management/buffer-manager';
+// import { BufferOrchestrator } from '../../util/acconut/single-attribute-buffer-management/buffer-orchestrator';
+// import { LineStripProgramCache, LineProgram } from '../../programs/line-on-globe/linestrip/linestrip';
+// import { ProgramInterface } from '../../types';
+// export type OneDegreePaddingInput = {
+//     key: string;
+//     center: LongLat;
+//     outerRadius: Meter;
+//     color: Color;
+// };
+// const _float32Array = new Float32Array(360 * 3 * 2).fill(NaN);
+// export class Paddings1Degree implements ProgramInterface {
+//     id: string;
+//     private globe: Globe | null = null;
+//     private bufferOrchestrator: BufferOrchestrator;
+//     private bufferManagersMap: BufferManagersMap;
+//     private lineProgram: LineProgram | null = null;
+//     private _LODCoeffecientForPaddingScale: number = 1;
+//     private _PaddingSizeRatio = 0.1; // 0.1 means 10% of the padding size is used for 3d padding
+//     private _finalPaddingSizeRatio = 0.1; // this._LODCoefficientForPaddingScale * this._PaddingSizeRatio; // final padding size ratio is the product of LOD coefficient and padding size ratio
+//     constructor(id: string, { capacity = 1000 } = {}) {
+//         this.id = id;
+//         this.bufferOrchestrator = new BufferOrchestrator({ capacity });
+//         this.bufferManagersMap = new Map();
+//         this.lineProgram = null;
+//     }
+//     init(globe: Globe): void {
+//         this.globe = globe;
+//         this.lineProgram = LineStripProgramCache.get(globe);
+//     }
+//     __updateLODCoefficientForPaddingScale(): void {
+//         // TODO: call this ones when lod changes or each frame // maybe only on 3d geometry
+//     }
+//     __fillBufferManagersMap() {
+//         const globe = this.globe as Globe;
+//         const gl = globe.gl as WebGL2RenderingContext;
+//         this.bufferManagersMap.set("position2d", {
+//             bufferManager: new BufferManager(gl,
+//                 360 * (2 + 1), // plus 1 to cut
+//                 { bufferType: "STATIC_DRAW", initialCapacity: 10 }),
+//             adaptor: (PaddingInput: OneDegreePaddingInput) => {
+//                 for (let i = 0; i < 360; i++) {
+//                     let { long, lat } = globe.Math.FindPointByPolar(
+//                         PaddingInput.center[0], // center long
+//                         PaddingInput.center[1], // center lat
+//                         PaddingInput.outerRadius, // outer radius
+//                         i, // angle
+//                     )
+//                     let corrds = globe.api_GetMercator2DPoint(long, lat);
+//                     // fill the second coordinate with 0
+//                     _float32Array[i * 3] = corrds[0];
+//                     _float32Array[i * 3 + 1] = corrds[1];
+//                     ({ long, lat } = globe.Math.FindPointByPolar(
+//                         PaddingInput.center[0], // center long
+//                         PaddingInput.center[1], // center lat
+//                         PaddingInput.outerRadius * this._finalPaddingSizeRatio, // inner radius
+//                         i, // angle
+//                     ));
+//                     let innerCorrds = globe.api_GetMercator2DPoint(long, lat);
+//                     // fill the second coordinate with 0
+//                     _float32Array[i * 3 + 2] = innerCorrds[0];
+//                     _float32Array[i * 3 + 3] = innerCorrds[1];
+//                 }
+//                 return _float32Array;
+//             }
+//         });
+//         // Other methods like draw, insertBulk, deleteBulk, etc. would go here
+//     }

package/util/webglobjectbuilders.js

@@ -211,8 +211,8 @@ export function decodeBase64(data) {
  * @returns An HTMLImageElement with the image data loaded.
  */
 export function createImageFromBase64(encodedData) {
-    const bytes = decodeBase64(encodedData);
-    const blob = new Blob([bytes.buffer], { type: "image/png" });
+    const source = decodeBase64(encodedData).buffer;
+    const blob = new Blob([source], { type: "image/png" });
     const urlCreator = window.URL || window.webkitURL;
     const imageUrl = urlCreator.createObjectURL(blob);
     const image = new Image();