@pirireis/webglobeplugins 0.15.1-alpha → 0.15.2-alpha

package/package.json

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

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

@@ -14,8 +14,6 @@ const uniformBindingPoints = {
 // const one = new Float32Array([1]);
 const flexibleBlockManager = new UniformBlockManager('FlexibleAttributes', [
     { name: "u_color", type: "vec4", value: new Float32Array([0.12, 1, 0.1, 1]) },
-    // { name: "u_dash_opacity", type: "float", value: one },
-    // { name: "u_dash_length", type: "float", value: one },
 ], uniformBindingPoints.flexible);
 const vertexShaderSource = `#version 300 es
 precision highp float;

package/programs/rings/partial-ring/piece-of-pie.js

@@ -1,6 +1,8 @@
 import { createProgram } from "../../../util/webglobjectbuilders";
 import { CameraUniformBlockTotem, CameraUniformBlockString } from "../../totems/index";
 import { noRegisterGlobeProgramCache, globeProgramCache } from "../../programcache";
+import { attributeLoader } from "../../../util/gl-util/buffer/attribute-loader";
+import { UniformBlockManager } from "../../../util/gl-util/uniform-block/manager";
 import { POLE, PI, longLatRadToMercator, mercatorXYToGLPosition, longLatRadToCartesian3D, circleLimpFromLongLatRadCenterCartesian3D_accurate, circleLimpFromLongLatRadCenterMercatorCompass_accurate, 
 //circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
 cartesian3DToGLPosition } from "../../../util/shaderfunctions/geometrytransformations";
@@ -9,6 +11,14 @@ cartesian3DToGLPosition } from "../../../util/shaderfunctions/geometrytransforma
  * 1. Triangle face looks at screen. if rotation angle is positive the last vertex must be the faintest.
  *
  */
+const uniformBindingPoints = {
+    camera: 0,
+    flexible: 1,
+};
+const flexibleBlockManager = new UniformBlockManager('FlexibleAttributes', [
+    { name: "u_color", type: "vec4", value: new Float32Array([0.12, 1, 0.1, 1]) },
+    { name: "u_opacity", type: "float", value: new Float32Array([1]) },
+], uniformBindingPoints.flexible);
 const drawModeMap = Object.freeze({
     LINE_STRIP: 0,
     TRIANGLE_FAN: 1,
@@ -25,11 +35,12 @@ ${circleLimpFromLongLatRadCenterCartesian3D_accurate}
 ${circleLimpFromLongLatRadCenterMercatorCompass_accurate}
 ${cartesian3DToGLPosition}
 
+${flexibleBlockManager.glslCode()}
+
+
 uniform float edge_count;
 uniform int draw_mode; // %2 => 0: LINE_STRIP, 1: TRIANGLE_FAN 
-uniform float plugin_alpha_multiplier;
-//, lat, startAngle, tailAngle, ...rgba, radius, rgbaMode
-// in vec2 center; // long, lat in radian
+
 in vec2 center2d;
 in vec3 center3d;
 in float start_angle2d; 
@@ -41,14 +52,15 @@ in float tail_angle3d;
 in vec4 color;
 in float radius; // in meter
 in float filling_mode; // 0.0: constant, 1.0: fading, 2.0: hide
-// flat out int vid;
-// flat out float v_phase;
+
 out vec2 v_pos;
 out vec4 v_color;
-// flat out float v_angle;
+
 
 void main() {
     // vid = gl_VertexID;
+    vec4 _color = (color.r == -1.0) ? u_color : color;
+
     if (filling_mode == 2.0 || radius == 0.0) { return; }
     float start_angle, tail_angle;
     if (is3D) {
@@ -62,7 +74,7 @@ void main() {
     if ( draw_mode == 0 && filling_mode == 1.0) {filling_mode_ = 0.0;}
     float vertexID = float(gl_VertexID);
     float radius_ = radius;
-    float alpha = plugin_alpha_multiplier;
+    float alpha = u_opacity;
     if (draw_mode == 1) { // TRIANGLE_FAN
         if (gl_VertexID == 0) { 
             radius_ = 0.0; 
@@ -71,16 +83,15 @@ void main() {
         vertexID -= 1.0;
     }
     float phase = ( vertexID  / (edge_count - 1.0) );
-    // v_angle = tail_angle;
     
     if ( filling_mode_ == 1.0 ) {
         if ( tail_angle < 0.0 ) {
-                v_color = vec4( color.rgb , color.a * ( 1.0 - phase ) * alpha );
+                v_color = vec4( _color.rgb , _color.a * ( 1.0 - phase ) * alpha );
             } else {
-                v_color = vec4( color.rgb , color.a * phase * alpha );
+                v_color = vec4( _color.rgb , _color.a * phase * alpha );
         }
     } else {
-        v_color = vec4( color.rgb , color.a * alpha );
+        v_color = vec4( _color.rgb , _color.a * alpha );
     }
     if ( filling_mode == 0.0 && draw_mode == 1 ) {
         v_color.a /= 2.0;
@@ -106,16 +117,11 @@ void main() {
 }`;
 const fragmentShaderSource = `#version 300 es` + POLE + PI + `
 precision highp float;
-// flat in int vid;
 in vec4 v_color;
 in vec2 v_pos;
-// flat in float v_phase;
-// in float v_angle;
 out vec4 outColor;
 void main() {
-    // if( vid % 2 == 0 ) { discard; }
-    // if ( mod(v_angle, PI / 36.0 ) < (PI / 72.0)) { discard; }
-    // if ( mod(v_angle * v_phase,  PI / 90.0 ) < (PI / 180.0)) { discard; }
+
     if ( v_pos.x < -POLE || v_pos.x > POLE || v_pos.y < -POLE || v_pos.y > POLE ) { discard; }
     outColor = v_color;
 }`;
@@ -129,9 +135,10 @@ export class Logic {
     program;
     _edgeCountLocation;
     _draw_modeLocation;
-    _plugin_alpha_multiplierLocation;
     cameraBlockBindingPoint;
     cameraBlockTotem; // Type this based on your CameraUniformBlockTotem implementation
+    _ubosPublished = [];
+    _defaultFlexibleUBO;
     constructor(globe) {
         this.globe = globe;
         this.gl = globe.gl;
@@ -156,22 +163,21 @@ export class Logic {
         { // Uniforms
             this._edgeCountLocation = gl.getUniformLocation(program, 'edge_count');
             this._draw_modeLocation = gl.getUniformLocation(program, 'draw_mode');
-            this._plugin_alpha_multiplierLocation = gl.getUniformLocation(program, 'plugin_alpha_multiplier');
             const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
             gl.useProgram(program);
             gl.uniform1i(this._draw_modeLocation, this._lastMode);
             gl.uniform1f(this._edgeCountLocation, this._lastEdgeCount);
-            gl.uniform1f(this._plugin_alpha_multiplierLocation, 1.0);
             this.cameraBlockBindingPoint = 0;
             this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
             const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
             gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
+            flexibleBlockManager.assignBindingPoint(gl, program);
+            this._defaultFlexibleUBO = flexibleBlockManager.createUBO(gl);
             gl.useProgram(currentProgram);
         }
     }
-    draw(length, vao, edgeCount, alphaMultiplier, drawMode) {
+    draw(length, vao, edgeCount, drawMode, ubo = null) {
         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this;
-        // gl.disable(gl.DEPTH_TEST);
         gl.useProgram(program);
         if (drawModeMap[drawMode] !== this._lastMode) {
             gl.uniform1i(this._draw_modeLocation, drawModeMap[drawMode]);
@@ -181,9 +187,11 @@ export class Logic {
             gl.uniform1f(this._edgeCountLocation, edgeCount);
             this._lastEdgeCount = edgeCount;
         }
-        if (alphaMultiplier !== this._lastAlphaMultiplier) {
-            gl.uniform1f(this._plugin_alpha_multiplierLocation, alphaMultiplier);
-            this._lastAlphaMultiplier = alphaMultiplier;
+        if (ubo) {
+            ubo.bind();
+        }
+        else {
+            this._defaultFlexibleUBO.bind();
         }
         const overdraw = drawModeMap[drawMode];
         cameraBlockTotem.bind(cameraBlockBindingPoint);
@@ -191,11 +199,18 @@ export class Logic {
         gl.drawArraysInstanced(gl[drawMode], 0, edgeCount + overdraw, length);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
         gl.bindVertexArray(null);
-        // gl.enable(gl.DEPTH_TEST);
+        if (ubo) {
+            ubo.unbind();
+        }
+        else {
+            this._defaultFlexibleUBO.unbind();
+        }
     }
     free() {
         noRegisterGlobeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
         this.gl.deleteProgram(this.program);
+        this._defaultFlexibleUBO.free();
+        this._ubosPublished.forEach(ubo => ubo.free()); // TODO: can be called 2 times. is it a problem?
         this.program = null;
     }
     /**
@@ -210,74 +225,25 @@ export class Logic {
         const { gl } = this;
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
-        {
-            const { buffer, stride, offset } = center2dObj;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(0);
-            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(0, 1);
-        }
-        {
-            const { buffer, stride, offset } = center3dObj;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(1);
-            gl.vertexAttribPointer(1, 3, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(1, 1);
-        }
-        {
-            const { buffer, stride, offset } = startAngle2DObj;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(2);
-            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(2, 1);
-        }
-        {
-            const { buffer, stride, offset } = tailAngle2DObj;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(3);
-            gl.vertexAttribPointer(3, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(3, 1);
-        }
-        {
-            const { buffer, stride, offset } = startAngle3DObj;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(4);
-            gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(4, 1);
-        }
-        {
-            const { buffer, stride, offset } = tailAngle3DObj;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(5);
-            gl.vertexAttribPointer(5, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(5, 1);
-        }
-        {
-            const { buffer, stride, offset } = colorObj;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(6);
-            gl.vertexAttribPointer(6, 4, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(6, 1);
-        }
-        {
-            const { buffer, stride, offset } = radiusObj;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(7);
-            gl.vertexAttribPointer(7, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(7, 1);
-        }
-        {
-            const { buffer, stride, offset } = colorModeObj;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(8);
-            gl.vertexAttribPointer(8, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(8, 1);
-        }
+        attributeLoader(gl, center2dObj, 0, 2, { divisor: 1 });
+        attributeLoader(gl, center3dObj, 1, 3, { divisor: 1 });
+        attributeLoader(gl, startAngle2DObj, 2, 1, { divisor: 1 });
+        attributeLoader(gl, tailAngle2DObj, 3, 1, { divisor: 1 });
+        attributeLoader(gl, startAngle3DObj, 4, 1, { divisor: 1 });
+        attributeLoader(gl, tailAngle3DObj, 5, 1, { divisor: 1 });
+        attributeLoader(gl, colorObj, 6, 4, { divisor: 1, escapeValues: [-1.0, -1.0, -1.0, -1.0] });
+        attributeLoader(gl, radiusObj, 7, 1, { divisor: 1, escapeValues: [-1.0] });
+        attributeLoader(gl, colorModeObj, 8, 1, { divisor: 1, escapeValues: [-1.0] });
         gl.bindVertexArray(null);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         return vao;
     }
     createUBO() {
+        const { gl } = this;
+        const bufferReadType = gl.DYNAMIC_DRAW;
+        const ubo = flexibleBlockManager.createUBO(gl, "STATIC_DRAW");
+        this._ubosPublished.push(ubo);
+        return ubo;
     }
 }
 export const PieceOfPieProgramCache = Object.freeze({

package/range-tools-on-terrain/bearing-line/plugin.js

@@ -32,6 +32,28 @@ export class BearingLinePlugin {
         flatStraightLineOn: true // This is a new option to control flat straight line drawing
     };
     _memory = new Map();
+    _semiPluginsOptions = {
+        circleOnTerrainOptions: {
+            defaultColor: [0.1, 0.1, 1, 0.5],
+            defaultHeightFromGroundIn3D: 30.0,
+            variativeColorsOn: false,
+        },
+        arcOnTerrainOptions: {
+            defaultHeightFromGroundIn3D: 30.0,
+            variativeColorsOn: false,
+        },
+        lineOptions: {
+            flatViewOn: true,
+            globeViewOn: true,
+            variativeColorsOn: false,
+            defaultColor: [1, 1, 1, 0.5],
+        },
+        pieceOfPieOptions: {
+            defaultColor: [1, 1, 1, 0.5],
+            defaultHeightFromGroundIn3D: 30.0,
+            variativeColorsOn: false,
+        }
+    };
     constructor(id, { textWritersMap, textDataPreAdaptor, opacities, drawOptions, } = {}) {
         this.id = id;
         if (!(textWritersMap instanceof Map))

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

@@ -87,8 +87,13 @@ export class ChainListMap {
         this._chainMap.set(chainKey, newChain);
         return deleteKeys;
     }
-    deleteChainAndReturnChainKeys(chainKey) {
+    deleteChainAndReturnChainKeys(chainKey, writers) {
         const keys = this.getNodeKeysOfChain(chainKey);
+        if (writers.size > 0) {
+            writers.forEach((writer) => {
+                writer.deleteTextBulk(keys);
+            });
+        }
         this._chainMap.delete(chainKey);
         this._chainSideProperties.delete(chainKey); // TODO: this might be this way but adding this know can cause side effects
         for (const key of keys)

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

@@ -164,7 +164,7 @@ export class CircleLineChainPlugin {
             return;
         }
         for (const chainKey of chainKeys) {
-            const keys = this._chainListMap.deleteChainAndReturnChainKeys(chainKey);
+            const keys = this._chainListMap.deleteChainAndReturnChainKeys(chainKey, this._textWritersMap);
             if (keys.length <= 1) {
                 console.warn("No chains were deleted, chainKeys might be invalid.");
                 return;

package/semiplugins/lightweight/piece-of-pie-plugin.js

@@ -15,7 +15,7 @@ export class PieceOfPiePlugin {
     bufferManagersMap = null;
     bufferOrchestrator = new BufferOrchestrator({ capacity: INITIAL_CAPACITY });
     drawMode = "BOTH";
-    opacity = 1;
+    _uboHandler = null;
     _pluginOptions = {
         bufferType: "STATIC_DRAW",
         initialCapacity: INITIAL_CAPACITY,
@@ -37,7 +37,7 @@ export class PieceOfPiePlugin {
     }
     setPluginOpacity(opacity) {
         opacityCheck(opacity);
-        this.opacity = opacity;
+        this._uboHandler?.updateSingle("u_opacity", new Float32Array([opacity]));
         this.globe?.DrawRender();
     }
     setDrawMode(drawMode) {
@@ -145,18 +145,17 @@ export class PieceOfPiePlugin {
     }
     draw3D() {
         if (!this.gl || !this.program || !this.vao || !this.globe) {
-            console.warn("PieChartPlugin is not initialized properly.");
+            console.warn("PieChartPlugin is not initialized properly Or unregistered from globe.");
             return;
         }
         const length = this.bufferOrchestrator.length;
-        console.log("Drawing PieChartPlugin with length:", length);
         this.gl.disable(this.gl.DEPTH_TEST);
         if (this.drawMode === "BOTH") {
-            this.program?.draw(length, this.vao, EDGE_COUNT, this.opacity, "LINE_STRIP");
-            this.program?.draw(length, this.vao, EDGE_COUNT, this.opacity, "TRIANGLE_FAN");
+            this.program?.draw(length, this.vao, EDGE_COUNT, "LINE_STRIP", this._uboHandler);
+            this.program?.draw(length, this.vao, EDGE_COUNT, "TRIANGLE_FAN", this._uboHandler);
         }
         else {
-            this.program?.draw(length, this.vao, EDGE_COUNT, this.opacity, this.drawMode);
+            this.program?.draw(length, this.vao, EDGE_COUNT, this.drawMode, this._uboHandler);
         }
         this.gl.enable(this.gl.DEPTH_TEST);
     }