@pirireis/webglobeplugins 0.6.24-a → 0.6.26-a

package/compass-rose/compass-rose-padding-flat.js

@@ -13,8 +13,8 @@ export class PixelPaddingCompassPlugin {
 
         defaultProperties = {
             rgba: [1, 1, 1, 1],
-            pixelRadiusBig: 250,
-            pixelRadiusSmall: 200
+            pixelRadiusRatioBig: 0.8,
+            pixelRadiusRatioSmall: 0.6,
         },
         font = {
             name: 'Arial',
@@ -50,6 +50,7 @@ export class PixelPaddingCompassPlugin {
 
     init(globe, gl) {
         this.globe = globe;
+        this.resize();
         this.gl = gl;
         if (this.textAngleOn) {
             this._createTextWriter();
@@ -63,8 +64,8 @@ export class PixelPaddingCompassPlugin {
      * @param {number} long
      * @param {number} lat
      * @typedef properties
-     * @property {number} pixelRadiusBig
-     * @property {number} pixelRadiusSmall
+     * @property {number} pixelRadiusRatioBig
+     * @property {number} pixelRadiusRatioSmall
      * @property {[4 numbers between 0-1]} rgba 
      */
     insert(key, long, lat, properties = null) {
@@ -115,13 +116,13 @@ export class PixelPaddingCompassPlugin {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
                         'adaptor': (item) => new Float32Array([item.x, item.y])
                     }],
-                    ["pixelRadiusSmall", {
+                    ["pixelRadiusRatioSmall", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusSmall])
+                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusRatioSmall])
                     }],
-                    ["pixelRadiusBig", {
+                    ["pixelRadiusRatioBig", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusBig])
+                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusRatioBig])
                     }],
                     ["rgba", {
                         'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
@@ -134,7 +135,7 @@ export class PixelPaddingCompassPlugin {
                 return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
             };
             this.paddingVao = this.paddingProgram.createVAO(
-                ...['screenCoordinates', 'pixelRadiusSmall', 'pixelRadiusBig', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+                ...['screenCoordinates', 'pixelRadiusRatioSmall', 'pixelRadiusRatioBig', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
         }
     }
 
@@ -143,15 +144,19 @@ export class PixelPaddingCompassPlugin {
     }
 
 
+    resize() {
+        this.writer?.resize();
+    }
+
 
     __insertText(key, x, y, { properties, update = false } = {}) {
         if (!this.writer) return;
         if (update) {
             let radius;
-            if (properties != null && properties.pixelRadiusBig) {
-                radius = properties.pixelRadiusBig
+            if (properties != null && properties.pixelRadiusRatioBig) {
+                radius = properties.pixelRadiusRatioBig * this.radiusMultiplier;
             } else {
-                radius = this.defaultProperties.pixelRadiusBig;
+                radius = this.defaultProperties.pixelRadiusRatioBig * this.radiusMultiplier;
             }
             this.writer.insertTextItem(key, x, y, radius + textGapFit);
         } else {
@@ -185,6 +190,23 @@ export class PixelPaddingCompassPlugin {
         })
 
     }
+
+    resize() {
+        this.radiusMultiplier = this._shorterDimension() * 0.5;
+        this._reinsertAllText();
+    }
+
+
+    _reinsertAllText() {
+        this.compassMap.query(this.globe, this.writer).forEach((v) => {
+            this.__insertText(v.key, v.x, v.y, { properties: v.properties, update: true });
+        });
+    }
+
+    _shorterDimension() {
+        const globe = this.globe;
+        return Math.min(globe.api_ScrW(), globe.api_ScrH());
+    }
 }
 
 

package/compass-rose/compass-text-writer.js

@@ -1,4 +1,4 @@
-// import { CSZMode } from "@pirireis/webglobe";
+import { CSZMode, CSMeasureTextPositionTypes } from "@pirireis/webglobe";
 
 // const defaultStyle = {
 //     textFont: {
@@ -49,16 +49,25 @@ export class PixelPaddingCompassTextWriter {
         this.northFont = northFont;
         this.doDraw = doDraw;
         this.angle = angle;
-
+        console.log("CSMeasureTextPositionTypes", CSMeasureTextPositionTypes);
         this.angles = []
         this.texts = []
+        this.positions = []
         let currentAngle = 0;
         while (currentAngle < 360) {
+            if (currentAngle > 180) {
+                this.positions.push(CSMeasureTextPositionTypes.CENTER);
+            } else {
+                this.positions.push(null);
+            }
             this.angles.push(currentAngle);
             if (currentAngle == 0) {
                 this.texts.push("K");
             } else {
-                this.texts.push(currentAngle.toString());
+                // to string 3 chars fill left with 0
+
+
+                this.texts.push(currentAngle.toString().padStart(3, '0'));
             }
             currentAngle += this.angle;
         }
@@ -92,7 +101,6 @@ export class PixelPaddingCompassTextWriter {
     _checkSetOffsets() {
         const { globe } = this;
         const newAngle = globe.api_GetCurrentLookInfo()["NorthAng"] * (Math.PI / 180);;
-        console.log("n angle", newAngle);
         if (newAngle !== this._lastNorthAngle) {
             this._lastNorthAngle = newAngle;
             this.offsets = this.__offset();
@@ -102,7 +110,7 @@ export class PixelPaddingCompassTextWriter {
 
     draw() {
         if (!this.doDraw) return;
-        const { globe, font, opacity: opacity_, northFont, itemMap, texts, angles } = this;
+        const { globe, font, opacity: opacity_, northFont, itemMap, texts, angles, positions } = this;
         this._checkSetOffsets();//  zMode: CSZMode.Z_GROUND_PERVERTEX,
         const offsets = this.offsets;
         for (const [key, { center, radius, opacity = null }] of itemMap) {
@@ -111,6 +119,7 @@ export class PixelPaddingCompassTextWriter {
                 offsets.forEach(({ offsetX, offsetY }, i) => {
                     const text = texts[i];
                     const angle = angles[i];
+                    font.position = positions[i];
                     if (angle === 0) {
                         globe.api_DrawContextTextMultiLine(text, northFont, o, { x: center.x + offsetX * radius + xGapFit, y: center.y + offsetY * radius + yGapFit });
 

package/package.json

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

package/programs/line-on-globe/lines-color-instanced-flat.js

@@ -1,5 +1,5 @@
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
-import { mercatorXYToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
+import { mercatorXYToGLPosition, POLE } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { createProgram } from "../../util";
 import { vaoAttributeLoader } from "../../util/account/util";
@@ -25,26 +25,29 @@ in vec2 posA;
 in vec2 posB;
 in vec4 color;
 
+out vec2 v_frame;
 out vec4 v_color;
-
 void main() {
+    
     if ( is3D ) {
         return;
     }
+    float gap =  distance(posA, posB);
     float z_alpha;
-    if ( z_alpha_on == 1){
-        z_alpha =  z_level * z_level / (distance(posA, posB) / 100.0 );
+    if ( z_alpha_on == 1 || gap > 40000000.0){
+        z_alpha =  z_level * z_level /  ( gap / 100.0 );
         if( z_alpha < 0.1 ) {return;}
         if( z_alpha > 1.0 ) {z_alpha = 1.0;}
     } else {
         z_alpha = 1.0;
     }
         vec2 pos;
-        if ( gl_VertexID == 0 ) {
-            pos = posA;
-            } else {
-                pos = posB;
-        }
+    if ( gl_VertexID == 0 ) {
+        pos = posA;
+        } else {
+            pos = posB;
+    }
+    v_frame = pos;
     gl_Position = mercatorXYToGLPosition( pos );
     v_color = color;
     v_color.a *= z_alpha * opacity;
@@ -53,10 +56,14 @@ void main() {
 
 
 const fragmentShaderSource = `#version 300 es
+${POLE}
 precision highp float;
 in vec4 v_color;
+in vec2 v_frame;
 out vec4 outColor;
 void main() {
+    if ( v_frame.x < -POLE || v_frame.x > POLE || v_frame.y < -POLE || v_frame.y > POLE ){ discard; }
+
     outColor = v_color;
 }`;
 

package/programs/line-on-globe/naive-accurate.js

@@ -41,6 +41,7 @@ void main() {
         gl_Position = cartesian3DToGLPosition(cartesian);
         v_limp = vec2(0.0, 0.0);
     } else {
+        if ( distance( start_position, end_position) > 30000000.0) { return; }
         interpolation = float(gl_VertexID);
         if (gl_VertexID % 2 == 0) {
             longLat = start_position;

package/programs/two-d/pixel-padding-for-compass.js

@@ -6,8 +6,8 @@ const vertexShaderSource = `#version 300 es
 ${CameraUniformBlockString}
 
 in vec2 screen_coordinate;
-in float pixel_radius_small;
-in float pixel_radius_big;
+in float pixel_radius_small_ratio;
+in float pixel_radius_big_ratio;
 in vec4 rgba;
 out vec4 v_rgba;
 uniform float plugin_opacity;
@@ -15,31 +15,31 @@ uniform float plugin_opacity;
 vec3 coord_opacity(){
     float radius;
     float angle;
-    float gap = (pixel_radius_big - pixel_radius_small);
+    float gap = (pixel_radius_big_ratio - pixel_radius_small_ratio);
     if( gl_VertexID % 2 == 0){
-        if( gl_VertexID % 180 == 0){
-             radius = pixel_radius_small ;
-        }
-        else if ( gl_VertexID % 60 == 0){
-            radius =  pixel_radius_small + gap * 0.5; 
+        // if( gl_VertexID % 180 == 0){
+        //      radius = pixel_radius_small_ratio ;
+        // } else
+        if ( gl_VertexID % 60 == 0){
+            radius =  pixel_radius_small_ratio; 
         } else if( gl_VertexID % 10 == 0) {
-            radius =  pixel_radius_small + gap * 0.75;
+            radius =  pixel_radius_small_ratio + gap * 0.5;
         } else {
-            radius =  pixel_radius_small + gap* 0.90;
+            radius =  pixel_radius_small_ratio + gap* 0.75;
         }
         angle = (float(gl_VertexID) / (${vertexCount}.0));
     } else {
         if ( gl_VertexID % 180 == 1){
-            radius = pixel_radius_big + gap * 0.1;
+            radius = pixel_radius_big_ratio + gap * 0.1;
 
         } else {
-            radius = pixel_radius_big;
+            radius = pixel_radius_big_ratio;
          }
         angle = (float(gl_VertexID - 1) / (${vertexCount}.0));
     }
     float opacity =  fract(angle + 0.2475) / 1.5 + 0.33;
     angle = angle * ${Math.PI * 2.0} + world_north_angle;
-
+    radius = radius *  min(screenWH.x, screenWH.y) / 2.0;;
     return vec3( screen_coordinate + vec2( cos(angle), sin(angle)) * radius, opacity);
 }
 
@@ -78,13 +78,13 @@ class Logic {
         const { gl, program } = this;
         { // assign attribute locations
             //             in vec2 screen_coordinate;
-            // in float pixel_radius_small;
-            // in float pixel_radius_big;
+            // in float pixel_radius_small_ratio;
+            // in float pixel_radius_big_ratio;
             // in vec4 rgba;
 
             gl.bindAttribLocation(program, 0, "screen_coordinate");
-            gl.bindAttribLocation(program, 1, "pixel_radius_small");
-            gl.bindAttribLocation(program, 2, "pixel_radius_big");
+            gl.bindAttribLocation(program, 1, "pixel_radius_small_ratio");
+            gl.bindAttribLocation(program, 2, "pixel_radius_big_ratio");
             gl.bindAttribLocation(program, 3, "rgba");
         }
         {
@@ -118,7 +118,7 @@ class Logic {
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
     }
 
-    createVAO(screenCoordsBufferObj, pixelRadiusSmallBufferObj, pixelRadiusBigBufferObj, rgbaBufferObj) {
+    createVAO(screenCoordsBufferObj, pixelRadiusRatioSmallBufferObj, pixelRadiusRatioBigBufferObj, rgbaBufferObj) {
         const { gl } = this;
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
@@ -130,14 +130,14 @@ class Logic {
             gl.vertexAttribDivisor(0, 1);
         }
         {
-            const { buffer, stride = 0, offset = 0 } = pixelRadiusSmallBufferObj;
+            const { buffer, stride = 0, offset = 0 } = pixelRadiusRatioSmallBufferObj;
             gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
             gl.enableVertexAttribArray(1);
             gl.vertexAttribPointer(1, 1, gl.FLOAT, false, stride, offset);
             gl.vertexAttribDivisor(1, 1);
         }
         {
-            const { buffer, stride = 0, offset = 0 } = pixelRadiusBigBufferObj;
+            const { buffer, stride = 0, offset = 0 } = pixelRadiusRatioBigBufferObj;
             gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
             gl.enableVertexAttribArray(2);
             gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);

package/rangerings-2/rangeringangletext.js

@@ -356,7 +356,7 @@ export default class RangeRingAngleText {
             // fidkey is the key
             attribs.push({
                 "__fid__": key,
-                "aci": (360 - aci).toString()
+                "aci": (360 - aci).toString().padStart(3, '0')
             })
             aci += stepAngle;
         }

package/compassrose/compassrose-2d.js

@@ -1,29 +0,0 @@
-// 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;
-}
-`;