@pirireis/webglobeplugins 0.5.11 → 0.6.0

package/circle-line-chain/chain-list-map.js

@@ -101,11 +101,11 @@ export class ChainListMap {
             const index = this.getIndexOfNode(chainKey, node.key)
             const chainNode = this._chainMap.get(chainKey)[index];
             if (node.circleProperties) {
-                if (chainNode.circleProperties === undefined) chainNode.circleProperties = {}
+                if (typeof chainNode.circleProperties !== 'object') chainNode.circleProperties = {}
                 node.circleProperties.forEach((value, key, container) => chainNode.circleProperties[key] = value);
             }
             if (node.lineProperties) {
-                if (chainNode.lineProperties === undefined) chainNode.lineProperties = {}
+                if (typeof chainNode.lineProperties !== 'object') chainNode.lineProperties = {}
                 node.lineProperties.forEach((value, key, container) => chainNode.lineProperties[key] = value);
             }
         });

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

@@ -0,0 +1,182 @@
+import { PixelPaddingForFlatCompassCache } from "../programs/two-d/pixel-padding-for-compass";
+import { BufferManager, BufferOrchestrator } from "../util/account";
+// import { ContextTextWriter2 } from "../write-text/context-text2";
+import { ContextTextWriter2Offsets } from "./compass-text-writer"
+
+const PaddingAngle = 30;
+
+export class PixelPaddingCompassPlugin {
+    constructor(id, {
+        opacity = 1,
+        textAngle = true,
+        defaultProperties = {
+            rgba: [1, 1, 1, 1],
+            pixelRadiusBig: 350,
+            pixelRadiusSmall: 270
+        }
+    } = {}) {
+        this.id = id;
+        this.textWriters = null
+        this.textAngle = textAngle
+        this.defaultProperties = defaultProperties
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+
+        this.compassMap = new CompassMap(this);
+        this._opacity = opacity;
+    }
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        if (this.textAngle) {
+            this._createTextWriter();
+        }
+        this._initOrchestrations()
+    }
+
+    insert(key, long, lat, properties = null) {
+        this.__insertText(key, null, null, properties);
+        this.compassMap.insert(key, long, lat, properties);
+        this.globe.DrawRender();
+
+    }
+
+
+    delete(key) {
+        this.compassMap.delete(key);
+        this.globe.DrawRender();
+    }
+
+
+
+    setTextStyle(textStyle) {
+        this.writer.setStyle(textStyle);
+        this.globe.DrawRender();
+    }
+
+    setOpacity(opacity) {
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+
+    _initOrchestrations() {
+        const { gl, globe } = this;
+        this.paddingProgram = PixelPaddingForFlatCompassCache.get(globe);
+        {
+            // createBuffers
+            const bufferType = "DYNAMIC_DRAW";
+            const initialCapacity = this.bufferOrchestrator.capacity;
+            this.bufferManagersCompMap = new Map(
+                [
+                    ["screenCoordinates", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.x, item.y])
+                    }],
+                    ["pixelRadiusSmall", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusSmall])
+                    }],
+                    ["pixelRadiusBig", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusBig])
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(item.properties.rgba)
+                    }],
+                ]
+            );
+
+            const obj = function (bufferManagerComp) {
+                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))));
+        }
+    }
+
+    _createTextWriter() {
+        this.writer = new ContextTextWriter2Offsets(this.globe, { angle: PaddingAngle });
+    }
+
+    __insertText(key, x, y, properties) {
+        if (!this.writer) return;
+        let radius;
+        if (properties != null && properties.pixelRadiusBig) {
+            radius = properties.pixelRadiusBig
+        } else {
+            radius = this.defaultProperties.pixelRadiusBig;
+        }
+        this.writer.insertTextItem(key, x, y, radius);
+    }
+
+    // Globe API interface methods
+
+    draw2D() {
+        const { gl, globe, paddingProgram, paddingVao, bufferOrchestrator, bufferManagersCompMap } = this;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        if (is3D) return;
+        const items = this.compassMap.query(globe, this.writer);
+        if (items.length === 0) return;
+        bufferOrchestrator.flush();
+        bufferOrchestrator.insertBulk(items, bufferManagersCompMap);
+        items.forEach((v) => {
+            this.__insertText(v.key, v.x, v.y)
+        });
+        gl.disable(gl.DEPTH_TEST);
+        paddingProgram.draw(paddingVao, bufferOrchestrator.length, this._opacity)
+        gl.enable(gl.DEPTH_TEST);
+        this.writer?.draw();
+    }
+
+    free() {
+
+
+    }
+}
+
+
+
+class CompassMap {
+    constructor(parent) {
+        this.coordsMemory = new Map();
+        this.propertyMemory = new Map();
+        this.parent = parent;
+    }
+
+    insert(key, long, lat, properties = null) {
+        this.coordsMemory.set(key, [long, lat]);
+        if (properties) this.propertyMemory.set(key, properties);
+    }
+
+    delete(key) {
+        this.coordsMemory.delete(key);
+        this.propertyMemory.delete(key);
+    }
+
+    query(globe, writer) {
+        const { coordsMemory, propertyMemory } = this;
+        const defaultProperties = this.parent.defaultProperties;
+        const result = [];
+        coordsMemory.forEach((v, k, c) => {
+            const { x, y } = globe.api_GetScreenPointFromGeo(
+                {
+                    long: v[0],
+                    lat: v[1],
+                    z: 0,
+                },
+
+            );
+            writer?.insertTextItem(k, x, y);
+
+            if (x !== null) {
+                const properties = { ...defaultProperties, ...propertyMemory.get(k) };
+                result.push({ key: k, x, y, properties })
+            }
+        })
+        return result;
+    }
+}
+
+function isOnTheScreen(globe, points) { }
+

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

@@ -0,0 +1,120 @@
+import { CSZMode } from "@pirireis/webglobe";
+
+const defaultStyle = {
+    textFont: {
+        name: 'Arial',
+        textColor: '#FFFFFF', // beyaz
+        hollowColor: '#000000', // siyah
+        size: 12, // piksel
+        hollow: true,
+        bold: true,
+        italic: false,
+    },
+    opacity: 1.0,
+    zMode: CSZMode.Z_GROUND_PERVERTEX,
+}
+
+/**
+ * TODOs:
+ * 1) update all if initials change (propably need a context and a callback to iterate over data)
+ * 2) expose a mechanic to update text on zoom change
+ * 3) extend the mechanic on 2 to other events
+ */
+export class ContextTextWriter2Offsets {
+    constructor(globe, { style = null, doDraw = true, angle = 30, } = {}) {
+        this.globe = globe;
+        this.itemMap = new Map();
+        this.style = style || defaultStyle;
+        this.doDraw = doDraw;
+        this.angle = angle;
+
+
+    }
+
+    setKeyAdaptor(adaptor) {
+        this.keyAdaptor = adaptor;
+    }
+
+    setDoDraw(bool) {
+        this.doDraw = bool;
+    }
+
+    setStyle(style) {
+        this.style = style;
+    }
+
+    setOpacity(opacity) {
+        this.style.opacity = opacity;
+    }
+
+
+
+    draw() {
+        if (!this.doDraw) return;
+        const { globe, style, itemMap } = this;
+        const { textFont, opacity: opacity_ } = style;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        if (is3D) return;
+        const angleIsOn = is3D ? (this.angleAdaptorIsOn && this.angleOnSphere) : (this.angleAdaptorIsOn)
+        for (const [key, { center, offsets, texts, opacity = null, angles }] of itemMap) {
+            const o = opacity === null ? opacity_ : opacity * opacity_;
+            if (center.x !== null && center.y !== null) {
+                offsets.forEach(({ offsetX, offsetY }, i) => {
+                    const text = texts[i];
+                    const angle = angles[i];
+                    console.log("asdfadsf", text, angle, center, offsetX, offsetY);
+                    globe.api_DrawContextTextMultiLine(text, textFont, o, { x: center.x + offsetX, y: center.y + offsetY }, angleIsOn, angle);
+                });
+            }
+
+        }
+    }
+
+
+    insertTextItem(key, x, y, radius) {
+        const item = this.getItem(key);
+        item.center = { x, y };
+        if (item.radius != undefined && item.radius === radius) return;
+        item.radius = radius;
+        const { offsets, angles, texts } = this.__offsetAngleText(radius);
+        item.offsets = offsets;
+        item.angles = angles;
+        item.texts = texts;
+    }
+
+    getItem(key) {
+        if (!this.itemMap.has(key)) this.itemMap.set(key, {});
+        return this.itemMap.get(key);
+    }
+
+    __calculateOffset(radius, angle) {
+        const rAngle = (angle - 90) * (Math.PI / 180);
+        return { offsetX: Math.cos(rAngle) * radius, offsetY: Math.sin(rAngle) * radius };
+    }
+
+    __offsetAngleText(radius) {
+        const angle = this.angle;
+        const offsets = []
+        const angles = []
+        const texts = []
+        let currentAngle = 0;
+        while (currentAngle < 360) {
+            offsets.push(this.__calculateOffset(radius + 10, currentAngle));
+            angles.push(currentAngle);
+            if (currentAngle == 0) {
+                texts.push("K");
+            } else {
+                texts.push(currentAngle.toString());
+            }
+            currentAngle += angle;
+        }
+        return { offsets, angles, texts };
+    }
+
+
+    clear() {
+        this.itemMap.clear();
+    }
+}
+
+

package/package.json

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

package/programs/totems/camerauniformblock.js

@@ -10,10 +10,14 @@ layout(std140) uniform CameraUniformBlock {
     vec2 mapWH; // 8 bytes           144
     vec2 screenWH; //  8 bytes       152
     float z_level; // 4 bytes        160 | 164
-}; // 11 lines
+    float world_distance; // 4 bytes 164
+    float world_tilt; // 4 bytes     168
+    float world_north_angle; // 4 bytes 172
+    vec2 world_center_radian; // 8 bytes    176 | 184
+}; // 14 lines
 `;
 
-
+const Radian = Math.PI / 180.0;
 
 export default class
 
@@ -44,7 +48,7 @@ export default class
         const { gl } = this;
         const ubo = gl.createBuffer();
         gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        gl.bufferData(gl.UNIFORM_BUFFER, 164, gl.STREAM_DRAW);
+        gl.bufferData(gl.UNIFORM_BUFFER, 184, gl.STREAM_DRAW);
         gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
         gl.bindBuffer(gl.UNIFORM_BUFFER, null);
         return ubo;
@@ -87,9 +91,20 @@ export default class
                 gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
             }
         }
+        {
+            // float world_distance; // 4 bytes 164
+            // float world_tilt; // 4 bytes     168
+            // float world_north_angle; // 4 bytes 172
+            // vec2 world_center_radian; // 8 bytes    180
+            const { CenterLong, CenterLat, Distance, Tilt, NorthAng } = globe.api_GetCurrentLookInfo();
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 164, new Float32Array([
+                Distance, Radian * Tilt, Radian * NorthAng, Radian * CenterLong, Radian * CenterLat
+            ]));
+
+        }
         gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
 
+    }
 
     getUBO() {
         return this.ubo;

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

@@ -1,9 +1,10 @@
 import { createProgram } from "../../util";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
-import { globeProgramCache } from "../programcache";
+import { noRegisterGlobeProgramCache } from "../programcache";
 const vertexCount = 720;
 const vertexShaderSource = `#version 300 es
 ${CameraUniformBlockString}
+
 in vec2 screen_coordinate;
 in float pixel_radius_small;
 in float pixel_radius_big;
@@ -11,34 +12,53 @@ in vec4 rgba;
 
 out vec4 v_rgba;
 
-uniform float world_angle_radiance;
 uniform float plugin_opacity;
 
-vec2 coords(){
+vec3 coord_opacity(){
     float radius;
     float angle;
     if( gl_VertexID % 2 == 0){
         if ( gl_VertexID % 60 == 0){
             radius = pixel_radius_small;
+        } else if( gl_VertexID % 10 == 0) {
+            float gap = (pixel_radius_big - pixel_radius_small) / 4.0;
+            radius =  pixel_radius_small + gap;
         } else {
-            radius = (pixel_radius_big + pixel_radius_small) / 2.0;
+            float gap = (pixel_radius_big - pixel_radius_small) * 0.75;
+            radius =  pixel_radius_small + gap;
         }
         angle = (float(gl_VertexID) / (${vertexCount}.0));
-
     } else {
-        radius = pixel_radius_big;
+        if ( gl_VertexID % 60 == 1){
+            radius = pixel_radius_big + 10.0;
+
+        } else {
+            radius = pixel_radius_big;
+         }
         angle = (float(gl_VertexID - 1) / (${vertexCount}.0));
     }
-    angle *= ${Math.PI * 2.0} + world_angle_radiance;
-    return screen_coordinate + vec2( cos(angle), sin(angle)) * radius;
+    float opacity =  fract(angle + 0.2475) / 1.5 + 0.33;
+    angle = angle * ${Math.PI * 2.0} + world_north_angle;
+
+    return vec3( screen_coordinate + vec2( cos(angle), sin(angle)) * radius, opacity);
 }
 
+vec2 adjust_pos(vec2 pos) {
+    return vec2(
+        (pos.x / screenWH.x - 0.5) * 2.0,
+        (0.5 - pos.y / screenWH.y) * 2.0
+    );
+}
 
 void main(){
-    vec2 c = coords();
-    gl_Position = vec4( vec2(c.x / screenWH.x, c.y/ screenWH.y), 0.0,1.0);
+    vec3 c = coord_opacity();
+    gl_Position = vec4( adjust_pos(c.xy), 0.0, 1.0);
+    // gl_Position = vec4( 0.0, 0.0, 0.0, 1.0);
     v_rgba = rgba;
     v_rgba.a *= plugin_opacity;
+    // float opacity = (float((gl_VertexID + 179) % 720 ) / (${vertexCount}.0)) / 1.5 + 0.5;
+    v_rgba.a *= c.z;
+    gl_PointSize = 10.0;
 }
 `
 
@@ -60,10 +80,15 @@ class Logic {
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
         const { gl, program } = this;
         { // assign attribute locations
-            gl.bindAttriblocation(program, 0, "screen_coordinate");
-            gl.bindAttriblocation(program, 1, "pixel_radius_small");
-            gl.bindAttriblocation(program, 2, "pixel_radius_big");
-            gl.bindAttriblocation(program, 3, "rgba");
+            //             in vec2 screen_coordinate;
+            // in float pixel_radius_small;
+            // in float pixel_radius_big;
+            // 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, 3, "rgba");
         }
         {
             this._opacityLocation = gl.getUniformLocation(program, "plugin_opacity");
@@ -86,11 +111,11 @@ class Logic {
         if (globe.api_GetCurrentGeometry() === 0) return;
         gl.useProgram(program);
         cameraBlockTotem.bind(cameraBlockBindingPoint);
-        gl.bindVertexArray(vao);
         if (opacity !== this._lastOpacity) {
             this._lastOpacity = opacity;
             gl.uniform1f(_opacityLocation, opacity);
         }
+        gl.bindVertexArray(vao);
         gl.drawArraysInstanced(gl.LINES, 0, vertexCount, length);
         gl.bindVertexArray(null);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
@@ -98,7 +123,6 @@ class Logic {
 
     createVAO(screenCoordsBufferObj, pixelRadiusSmallBufferObj, pixelRadiusBigBufferObj, rgbaBufferObj) {
         const { gl } = this;
-
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
         {
@@ -111,26 +135,27 @@ class Logic {
         {
             const { buffer, stride = 0, offset = 0 } = pixelRadiusSmallBufferObj;
             gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(0);
+            gl.enableVertexAttribArray(1);
             gl.vertexAttribPointer(1, 1, gl.FLOAT, false, stride, offset);
             gl.vertexAttribDivisor(1, 1);
         }
         {
             const { buffer, stride = 0, offset = 0 } = pixelRadiusBigBufferObj;
             gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(0);
+            gl.enableVertexAttribArray(2);
             gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
             gl.vertexAttribDivisor(2, 1);
         }
         {
             const { buffer, stride = 0, offset = 0 } = rgbaBufferObj;
             gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(0);
+            gl.enableVertexAttribArray(3);
             gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
             gl.vertexAttribDivisor(3, 1);
         }
 
         gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
         return vao;
 
     }
@@ -139,6 +164,7 @@ class Logic {
 
 
     free() {
+        const { globe } = this;
         CameraUniformBlockTotemCache.release(globe);
     }
 }
@@ -146,10 +172,6 @@ class Logic {
 
 
 export const PixelPaddingForFlatCompassCache = Object.freeze({
-    get: (globe) => {
-        globeProgramCache.getProgram(globe, Logic)
-    },
-    release: (globe) => {
-        globeProgramCache.releaseProgram(globe, Logic)
-    }
+    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
 })

package/util/account/bufferoffsetmanager.js

@@ -134,6 +134,7 @@ export default class {
     }
 
 
+
     extendBuffer(newCapacity) {
         const { gl, buffer, bufferType } = this;
         const itemSize = this.itemSize;

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

@@ -147,8 +147,11 @@ export class BufferOrchestrator {
         const offsets = [];
         for (const item of items) {
             const offset = offsetMap.get(item.key);
-            if (offset !== undefined) { offsets.push(offset); } else { throw new Error("updateBulk item Key does not exist"); }
-
+            if (offset !== undefined) {
+                offsets.push(offset);
+            } else {
+                throw new Error("updateBulk item Key does not exist");
+            }
         }
         if (bufferKeys) {
             for (const key of bufferKeys) {
@@ -230,6 +233,15 @@ export class BufferOrchestrator {
     }
 
 
+    /**
+     * Flushes metadata and sets length to 0 without actualize change on buffers
+     * This method created for cases in which data is loaded on each frame
+     */
+    flush() {
+        this._length = 0;
+        this.tombstoneOffSet = []
+        this.offsetMap.clear();
+    }
 
     _defrag() {
         const newOffsetMap = new Map();

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

@@ -1,76 +0,0 @@
-import { PixelPaddingForFlatCompassCache } from "../programs/two-d/pixel-padding-for-compass";
-
-
-
-export class PixelPaddingCompassPlugin {
-    constructor(id, { } = {}) {
-        this.id = id;
-        this.memory = new Map();
-
-    }
-
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-
-        this._initOrchestrations()
-    }
-
-
-
-    _initOrchestrations() {
-        const { gl, globe } = this;
-        this.paddingProgram = PixelPaddingForFlatCompassCache.get(globe);
-
-
-        {
-            // createBuffers
-            const bufferType = "DYNAMIC_DRAW";
-            const initialCapacity = this.bufferOrchestrator.capacity;
-            this.bufferManagersCompMap = new Map(
-                [
-                    ["screenCoordinates", {
-                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => {
-                            const { x, y } = globe.api_GetScreenPointFromGeo(
-                                {
-                                    long: item.long,
-                                    lat: item.lat,
-                                    z: 0,
-                                });
-                            return new Float32Array([x, y]);
-                        }
-                    }],
-                    ["pixelRadiusSmall", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.pixelRadiusSmall])
-                    }],
-                    ["pixelRadiusBig", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.pixelRadiusBig])
-                    }],
-                    ["rgba", {
-                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                        'adaptor': (item) => {
-                            if (item.lineProperties?.rgba) return new Float32Array(item.lineProperties.rgba);
-                            return new Float32Array(item.rgba);
-                        }
-                    }],
-
-                ]
-            );
-            const obj = function (bufferManagerComp) {
-                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))));
-        }
-
-    }
-}
-
-
-
-
-function isOnTheScreen(globe, points) { }
-