@pirireis/webglobeplugins 0.3.5 → 0.3.7

package/bearing-line/plugin.js

@@ -147,7 +147,6 @@ export default class Plugin {
                         'adaptor': (item) => new Float32Array([item.dashOpacity])
                     }],
                     ["circleDashAngle", {
-
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
                         'adaptor': (item) => new Float32Array([item.circleDashAngle / 360])
                     }]

package/circle-lines/plugin.js

@@ -0,0 +1,17 @@
+/**
+ * import programs, buffer orchestrator
+ * 
+ * 
+ * import dext managers
+ * 
+ * Entities:
+ * AcircleLine
+ *  - circle
+ *  - line
+ * 
+ * Chain 
+ * - multiple circlelines connected 
+ * - a wrapper around buffer orchester to hold one to many relationship
+ * 
+ * # Mouse interations
+*/

package/circle-lines/readme.md

@@ -0,0 +1,57 @@
+# Road Map
+
+## CircleLine
+Atomic unit is the circle-line constructed from a circle and a line with start and end point which indicates the radius.
+
+### Attributes
+Main attributes: StartPoint, EndPoint, Radius
+Other attributes: Color, opacity, dash opacity, dash ratio
+
+### API
+API is the manipulation of above attributes
+
+### Implementation
+
+Buffer Orchestrater is enough.
+
+## ChainOfCircleLines
+Composit unit is a chain of circle-lines. 
+
+### Attributes
+
+Main attributes: one to many relation of a chain and its circle-lines
+
+
+# API
+- startChain(chainID) //
+- addPointToChain(chainID) 
+- editPointOfChain(chainID, pointID) // 
+- divideChain(chainID, )
+
+
+
+# Concept Formation
+
+Circle-Line has ( startPoint, endPoint )
+
+Chain Has [...circle-line] -> [ c0, c1, c2 ...] -> c0.endPoint == c1.startPoint, c1.endPoint == c2.startPoint
+
+## Modes 
+ 
+ Focus Mod
+ - mouse icon hides and edge point icon is displayed
+ 
+ 
+ ## interaction points ( this can be a new module)
+      changes the mouse icon
+      plugin creates them. 
+      interaction points carryin carries information about how to interact with the plugin.
+  
+ - On Edges
+      Updates coordinates on right click and carry
+      deletes on right
+ - on mid point of a radius line (+)
+      Addes an edge to mid points. ( deletes the old one and inserts 2)
+ 
+ UserInterface
+ - drawNewMethod

package/package.json

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

package/partialrings/plugin.js

@@ -115,7 +115,6 @@ class BufferManager extends BufferOffsetManager {
      */
     insertBulk(items) {
         if (items.length === 0) return;
-        console.log(items)
         this.autoExtendBuffer(items.length);
         const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

package/partialrings/program.js

@@ -49,14 +49,14 @@ in float tail_angle; // the rotation of the partial circle
 in vec4 color;
 in float radius; // in meter
 in float color_mode; // 0.0: constant, 1.0: fading, 2.0: hide
-flat out int vid;
-out float v_phase;
+// flat out int vid;
+// flat out float v_phase;
 out vec2 v_pos;
 out vec4 v_color;
-flat out float v_angle;
+// flat out float v_angle;
 
 void main() {
-    vid = gl_VertexID;
+    // vid = gl_VertexID;
     if (color_mode == 2.0 || radius == 0.0) { return; }
     float color_mode_ = color_mode;
     if ( draw_mode == 0 && color_mode == 1.0) {color_mode_ = 0.0;}
@@ -71,8 +71,7 @@ void main() {
         vertexID -= 1.0;
     }
     float phase = ( vertexID  / (edge_count - 1.0) );
-    v_angle = tail_angle;
-    
+    // v_angle = tail_angle;
     
     if ( color_mode_ == 1.0 ) {
         if ( tail_angle < 0.0 ) {
@@ -111,11 +110,11 @@ void main() {
 
 const fragmentShaderSource = `#version 300 es` + POLE + PI + `
 precision highp float;
-flat in int vid;
+// flat in int vid;
 in vec4 v_color;
 in vec2 v_pos;
-flat in float v_phase;
-in float v_angle;
+// flat in float v_phase;
+// in float v_angle;
 out vec4 outColor;
 void main() {
     // if( vid % 2 == 0 ) { discard; }
@@ -137,7 +136,6 @@ export class Logic {
         this._lastAlphaMultiplier = 1.0;
 
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
-
         const { gl, program } = this;
         {   // set attributes locations 
             gl.bindAttribLocation(program, 0, 'center');

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -220,9 +220,9 @@ export class BufferManager extends BufferOffsetManager {
         }
         const requiredSpace = this.__requiredSpaceForBulk(data);
         const spaceLeft = this.spaceLeft;
-        console.log("space left:", spaceLeft, "required space:", requiredSpace);
+        // console.log("space left:", spaceLeft, "required space:", requiredSpace);
         if (requiredSpace > spaceLeft) {
-            console.log("new capacity:", this.capacity + requiredSpace - spaceLeft)
+            // console.log("new capacity:", this.capacity + requiredSpace - spaceLeft)
             this.extendBuffer(this.capacity + requiredSpace - spaceLeft);
         }
 

package/programs/rings/distancering/paddyflatprogram.js

@@ -114,16 +114,16 @@ class Logic {
         // draw instanced
         if (padCount !== this._padCount) {
             this._padCount = padCount;
-            console.log("padCount", padCount);
+            // console.log("padCount", padCount);
             gl.uniform1f(_padCountLocation, padCount);
         }
         if (compass !== this._compassMode) {
-            console.log("compass", compass);
+            // console.log("compass", compass);
             gl.uniform1i(_compassLocation, compass);
             this._compassMode = compass;
         }
         if (opacity !== this._opacity) {
-            console.log("opacity", opacity);
+            // console.log("opacity", opacity);
             this._opacity = opacity;
             gl.uniform1f(this._opacityLocation, opacity);
         }

package/rangerings/rangerings.js

@@ -87,7 +87,6 @@ export default class {
         const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager, _opacity } = this;
         if (this.bufferManager !== null && bufferManager.length > 0) {
             gl.disable(gl.DEPTH_TEST);
-            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);

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

@@ -67,12 +67,12 @@ export class BufferManager {
 
         const newArray = new Float32Array(newCapacity * itemSize);
         const bufferData = this._getBufferData(occupiedCapacity);
-        console.log("bufferData", bufferData);
+        // console.log("bufferData", bufferData);
         let newOffset = 0;
         for (const offset of offsetValues) {
             const itemOffset = offset * itemSize;
             newArray.set(bufferData.slice(itemOffset, itemOffset + itemSize), newOffset);
-            console.log("oldOffset", itemOffset, "newOffset", newOffset);
+            // console.log("oldOffset", itemOffset, "newOffset", newOffset);
             newOffset += itemSize;
         }
 
@@ -87,7 +87,7 @@ export class BufferManager {
         const { gl, buffer, bufferType } = this;
         const itemSize = this.itemSize;
         const bufferData = this._getBufferData(occupiedCapacity);
-        console.log("extending buffer from", occupiedCapacity, "to", newCapacity, 'item size', itemSize);
+        // console.log("extending buffer from", occupiedCapacity, "to", newCapacity, 'item size', itemSize);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, newCapacity * itemSize * 4, gl[bufferType]);
         gl.bufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
@@ -96,9 +96,9 @@ export class BufferManager {
 
     _getBufferData(occupiedCapacity) {
         const { gl, buffer } = this;
-        console.log(occupiedCapacity, this.itemSize)
+        // console.log(occupiedCapacity, this.itemSize)
         const size = occupiedCapacity * this.itemSize;
-        console.log("size", size);
+        // console.log("size", size);
         const bufferData = new Float32Array(size);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.getBufferSubData(gl.ARRAY_BUFFER, 0, bufferData);

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

@@ -102,6 +102,8 @@
  
  */
 
+const EXTRA_SIZE = 10;
+
 export class BufferOrchestrator {
 
     constructor({ capacity = 10 } = {}) {
@@ -172,7 +174,7 @@ export class BufferOrchestrator {
         for (const [key, { bufferManager }] of bufferManagersMap) {
             bufferManager.deleteBulk(offsets);
         }
-        console.log("deleteBulk after item size", this.offsetMap.size);
+        //console.log("deleteBulk after item size", this.offsetMap.size);
     }
 
 
@@ -196,9 +198,9 @@ export class BufferOrchestrator {
     autoExtendBuffers(itemsLength, bufferManagersMap) {
         if (itemsLength <= this.emptySpace) return;
         const newCapacity = this.length + itemsLength;
-        console.log("autoExtendBuffers", "item L", itemsLength, "E space", this.emptySpace, "cap", this.capacity, "length", this.length, 'new Cap', newCapacity);
+        //console.log("autoExtendBuffers", "item L", itemsLength, "E space", this.emptySpace, "cap", this.capacity, "length", this.length, 'new Cap', newCapacity);
         for (const [key, { bufferManager }] of bufferManagersMap) {
-            console.log("length", this.length, "newCapacity", newCapacity);
+            //console.log("length", this.length, "newCapacity", newCapacity);
             bufferManager.extendBuffer(this.length, newCapacity);
         }
         this._capacity = newCapacity;
@@ -207,23 +209,23 @@ export class BufferOrchestrator {
 
     defrag(bufferManagers, bufferKeys) { // TODO defrag and leave some empty space
         const offsetMap = this.offsetMap;
-        console.log("defrag size", offsetMap.size, "cap", this.capacity, "length", this.length);
+        const newCapacity = offsetMap.size + EXTRA_SIZE;
         if (bufferKeys) {
             for (const key of bufferKeys) {
                 const offset = offsetMap.get(key);
                 if (offset !== undefined) {
                     for (const [key, { bufferManager }] of bufferManagers) {
-                        bufferManager.defrag([offset], this.length, offsetMap.size);
+                        bufferManager.defrag([offset], this.length, newCapacity);
                     }
                 }
             }
         } else {
             for (const [key, { bufferManager }] of bufferManagers) {
-                bufferManager.defrag(offsetMap.values(), this.length, offsetMap.size);
+                bufferManager.defrag(offsetMap.values(), this.length, newCapacity);
             }
         }
         this._defrag();
-        this._length = this._capacity = offsetMap.size;
+        this._length = this._capacity = newCapacity;
         this.tombstoneOffsets = [];
     }
 
@@ -233,7 +235,7 @@ export class BufferOrchestrator {
         const newOffsetMap = new Map();
         let newOffset = 0;
         for (const [key, offset] of this.offsetMap) {
-            console.log("defrag", key, offset, newOffset);
+            //console.log("defrag", key, offset, newOffset);
             newOffsetMap.set(key, newOffset++);
         }
         this.offsetMap = newOffsetMap

package/util/geometry/geodatafromtexture.js

@@ -27,10 +27,10 @@ export class GeoDataFromTexture {
     getFloored(lat, long) {
         const x = (long - this.bbox[0]) / this._longRatio;
         const y = (lat - this.bbox[1]) / this._latRatio;
-        console.log(x + " = (" + long + " - " + this.bbox[0] + ") / " + this._longRatio);
-        console.log(y + " = (" + lat + " - " + this.bbox[1] + ") / " + this._latRatio);
+        //console.log(x + " = (" + long + " - " + this.bbox[0] + ") / " + this._longRatio);
+        //console.log(y + " = (" + lat + " - " + this.bbox[1] + ") / " + this._latRatio);
         const index = Math.floor(y) * this.width + Math.floor(x);
-        console.log({ index, x, y, w: this.width, h: this.height, "total": this.width * this.height });
+        //console.log({ index, x, y, w: this.width, h: this.height, "total": this.width * this.height });
         return this.textureData[index];
     }
 

package/util/jshelpers/timefilters.js

@@ -9,7 +9,7 @@ function instantDebounce(func, delay) {
             if (runAtEnd) {
                 func(...lastArgs);
                 lastArgs = null;
-                console.log("processed with delay")
+                // console.log("processed with delay")
                 runAtEnd = false;
             }
             timeout = null;
@@ -23,7 +23,7 @@ function instantDebounce(func, delay) {
             return;
         } else {
             func(...args);
-            console.log("processed instantly")
+            // console.log("processed instantly")
             timeout = timeoutMethod();
         }
     }

package/util/programs/texturetoglobe.js

@@ -7,7 +7,7 @@ import { latLongBboxtoPixelXYBbox } from "..";
 
 
 class TextureToGlobeProgram {
-    constructor (gl, globe) {
+    constructor(gl, globe) {
         this.globe = globe;
         this.gl = gl;
         this._is3D = true;
@@ -19,7 +19,7 @@ class TextureToGlobeProgram {
     }
 
     _initUniforms() {
-        
+
         const { gl, _programWrapper } = this;
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_programWrapper.program);
@@ -32,7 +32,7 @@ class TextureToGlobeProgram {
         gl.uniform1f(_programWrapper.u_is3D, 1.0);
         gl.uniform1f(_programWrapper.height, 0.0);
         gl.useProgram(currentProgram);
-        
+
     }
 
     _createProgramWrapper() {
@@ -94,7 +94,7 @@ class TextureToGlobeProgram {
 
         const program = createProgram(gl, vertexSource, fragmentSource);
         const vao = gl.createVertexArray();
-        
+
         const buffer = gl.createBuffer();
         gl.bindVertexArray(vao);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
@@ -104,7 +104,7 @@ class TextureToGlobeProgram {
             1, 1,
             0, 1
         ]), gl.STATIC_DRAW);
-        const a_position =- gl.getAttribLocation(program, 'a_position');
+        const a_position = - gl.getAttribLocation(program, 'a_position');
         gl.enableVertexAttribArray(a_position);
         gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
         gl.bindVertexArray(null);
@@ -123,8 +123,8 @@ class TextureToGlobeProgram {
         };
     }
 
-    draw( modelViewMatrix, projectionMatrix, transPos, texture) {
-        console.log('draw')
+    draw(modelViewMatrix, projectionMatrix, transPos, texture) {
+        // console.log('draw')
         const { gl, _programWrapper, _is3D } = this;
         gl.useProgram(_programWrapper.program);
         gl.bindVertexArray(_programWrapper.vao);
@@ -138,12 +138,12 @@ class TextureToGlobeProgram {
             const mapWH = this.globe.api_GetCurrentWorldWH();
             gl.uniform2f(_programWrapper.u_mapWH, mapWH.width, mapWH.height);
         }
-    
+
         gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
         gl.drawArrays(gl.POINTS, 0, 4);
     }
-    
-    setBBox( minx, maxx, miny, maxy) {
+
+    setBBox(minx, maxx, miny, maxy) {
         const { gl, _programWrapper } = this;
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_programWrapper.program);
@@ -155,7 +155,7 @@ class TextureToGlobeProgram {
         gl.useProgram(currentProgram);
     }
 
-    setLatLongBBox(minx, maxx, miny, maxy){
+    setLatLongBBox(minx, maxx, miny, maxy) {
         const bboxMatrix = latLongBboxtoPixelXYBbox(minx, miny, maxx, maxy);
         const { gl, _programWrapper } = this;
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
@@ -165,7 +165,7 @@ class TextureToGlobeProgram {
     }
 
 
-    setScreenWH(){
+    setScreenWH() {
         const { gl, _programWrapper, globe } = this;
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_programWrapper.program);
@@ -179,7 +179,7 @@ class TextureToGlobeProgram {
         this.setScreenWH();
     }
 
-    setGeometry( ){
+    setGeometry() {
         const { gl, globe, _programWrapper } = this;
         this._is3D = globe.api_GetCurrentGeometry() === 0;
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
@@ -189,15 +189,15 @@ class TextureToGlobeProgram {
         this.resize();
     }
 
-    free(){
+    free() {
         window.removeEventListener('resize',
-        this._resizeHandler, true);
+            this._resizeHandler, true);
     }
 
-    _resizeEventHandler(){
+    _resizeEventHandler() {
         this.resize();
     }
 
 }
 
-export {TextureToGlobeProgram};
+export { TextureToGlobeProgram };

package/util/shaderfunctions/geometrytransformations.js

@@ -102,22 +102,22 @@ vec3 circleLimpFromLongLatRadCenterCartesian3D( vec2 center, float radius, float
     tangent1 = normalize(tangent1);
     // rotate tangent with given angle
     tangent1 =  cos(angle) * tangent1 - sin(angle) * cross(normal, tangent1);
-    return (geoW * cos(radius/R))+ tangent1 * radius / 1000.0;
+    float radius_in_angle = radius/R;
+    float projected_radius = sin(radius_in_angle) * R / 1000.0;
+    return (geoW * cos(radius_in_angle))+ tangent1 * projected_radius;
     }
 `;
 
 // TODO: Make it precise. Y axis is not correct.
 
-// ln | tan [ (x/2) + (π/4) ] | + C
-export const circleLimpFromLongLatRadCenterMercatorRealDistance = `
+export const circleLimpFromLongLatRadCenterMercatorRealDistance = PI + `
 vec2 circleLimpFromLongLatRadCenterMercatorRealDistance(vec2 center, float radius, float angle){
-    float radius_radian =  radius / R;
-    float lat = center.y - radius_radian * sin(angle);
-    float scale = 1.0/abs( cos( lat ) );
-    float y =  log( tan( PI / 4.0 + lat / 2.0 ) ) * R;
-    vec2 center_ = longLatRadToMercator(center);
-    float x = center_.x + scale * radius * cos(angle);
-    return vec2(x, y);
+    float ang = angle + PI / 2.0; // this is there because the other methods are implemented in, angle 0 is +x axis orientatation
+    float r =  radius / R;
+    float sin_lat =  sin( center.y) * cos(r) + cos(center.y)*sin(r)* cos(ang);
+    float lat = asin(sin_lat);
+    float longi = center.x + atan( sin(ang) * sin(r) * cos(center.y), cos(r) - sin(center.y) * sin_lat);
+    return longLatRadToMercator(vec2(longi, lat));
 }
 `;
 
@@ -206,7 +206,7 @@ export const angleBetweenTwoPointsRadian = `
 float angleBetweenTwoPointsRadian(vec2 start_, vec2 end_) {
     float start_lat = log( tan( ( 1.0 - start_.y ) * PI / 2.0  ) );
     float end_lat = log( tan( ( 1.0 - end_.y ) * PI / 2.0  ) );
-    float angle = atan( (end_lat - start_lat )/ (end_.x - start_.x));
+    float angle = atan( (end_lat - start_lat ) / (end_.x - start_.x));
     return angle;   
 }
 `