@pirireis/webglobeplugins 0.5.11 → 0.5.12

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,173 @@
+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 "../write-text/context-text-2d-offsets"
+
+export class PixelPaddingCompassPlugin {
+    constructor(id, {
+        opacity = 1,
+        textAngle = null, defaultProperties = {
+            rgba: [1, 1, 1, 1],
+            pixelRadiusBig: 350,
+            pixelRadiusSmall: 270
+        }
+    } = {}) {
+        this.id = id;
+        this._textAngle = textAngle;
+        this.textWriters = null
+        if (textAngle == null) {
+            this._createTextWriters();
+        }
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+        this.compassMap = new CompassMap({ defaultProperties });
+        this._opacity = opacity;
+    }
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+
+        this._initOrchestrations()
+    }
+
+    insert(key, long, lat, properties = null) {
+        this.compassMap.insert(key, long, lat, properties);
+        this.globe.DrawRender();
+    }
+
+
+    delete(key) {
+        this.compassMap.delete(key);
+        this.globe.DrawRender();
+    }
+
+
+    setTextAngle(textAngle) {
+        this._textAngle = textAngle;
+        this._createTextWriters();
+        this.globe.DrawRender();
+    }
+
+    setTextStyle(textStyle) {
+        this.textWriters?.forEach((writer) => 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))));
+        }
+    }
+
+    _createTextWriters() {
+        this.writer = new ContextTextWriter2Offsets(this.globe);
+    }
+
+    // Globe API interface methods
+
+    draw2D() {
+
+        const { gl, globe, paddingProgram, paddingVao, bufferOrchestrator, bufferManagersCompMap } = this;
+        const items = this.compassMap.query(globe);
+        if (items.length === 0) return;
+        const { x, y, properties } = items[0];
+        console.log(x, y, properties);
+        bufferOrchestrator.flush();
+        bufferOrchestrator.insertBulk(items, bufferManagersCompMap);
+        gl.disable(gl.DEPTH_TEST);
+        paddingProgram.draw(paddingVao, bufferOrchestrator.length, this._opacity)
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+    free() {
+
+    }
+}
+
+
+
+class CompassMap {
+    constructor({ defaultProperties = null } = {}) {
+        this.coordsMemory = new Map();
+        this.propertyMemory = new Map();
+        if (defaultProperties !== null) {
+
+            this.defaultProperties = defaultProperties
+        } else {
+
+            this.defaultProperties = {
+                rgba: [1, 1, 1, 1],
+                pixelRadiusBig: 350,
+                pixelRadiusSmall: 270
+            }
+        }
+    }
+
+    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) {
+        const { coordsMemory, propertyMemory, defaultProperties } = this;
+        const result = [];
+        coordsMemory.forEach((v, k, c) => {
+            const { x, y } = globe.api_GetScreenPointFromGeo(
+                {
+                    long: v[0],
+                    lat: v[1],
+                    z: 0,
+                },
+
+            );
+            if (x !== null) {
+                const properties = { ...defaultProperties, ...propertyMemory.get(k) };
+                result.push({ key: k, x, y, properties })
+            }
+        })
+        return result;
+    }
+}
+
+function isOnTheScreen(globe, points) { }
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "0.5.11",
+    "version": "0.5.12",
     "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,10 +12,9 @@ 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){
@@ -24,21 +24,32 @@ vec2 coords(){
             radius = (pixel_radius_big + pixel_radius_small) / 2.0;
         }
         angle = (float(gl_VertexID) / (${vertexCount}.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.25;
+    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 +71,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 +102,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 +114,6 @@ class Logic {
 
     createVAO(screenCoordsBufferObj, pixelRadiusSmallBufferObj, pixelRadiusBigBufferObj, rgbaBufferObj) {
         const { gl } = this;
-
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
         {
@@ -111,26 +126,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 +155,7 @@ class Logic {
 
 
     free() {
+        const { globe } = this;
         CameraUniformBlockTotemCache.release(globe);
     }
 }
@@ -146,10 +163,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/write-text/context-text-2d-offsets.js

@@ -0,0 +1,149 @@
+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, textAdaptor = null, coordinatesAdaptor = null, keyAdaptor = null, opacityAdaptor = null, angleAdaptor = null, angleOnSphere = false } = {}) {
+        this.globe = globe;
+        this.itemMap = new Map();
+        this.style = style || defaultStyle;
+        this.doDraw = doDraw;
+
+
+        this.textAdaptor = textAdaptor;
+        this.coordinatesAdaptor = coordinatesAdaptor;
+        this.keyAdaptor = keyAdaptor;
+
+        this.opacityAdaptor = opacityAdaptor ? opacityAdaptor : () => 1;
+        this.angleOnSphere = angleOnSphere;
+        if (angleAdaptor) {
+            this.angleAdaptor = angleAdaptor
+            this.angleAdaptorIsOn = true;
+        } else {
+            this.angleAdaptor = () => null
+            this.angleAdaptorIsOn = false
+        }
+    }
+
+    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;
+        const angleIsOn = is3D ? (this.angleAdaptorIsOn && this.angleOnSphere) : (this.angleAdaptorIsOn)
+        for (const [key, { center, offsets, texts, opacity = null, angle = null }] 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];
+                    globe.api_DrawContextTextMultiLine(text, textFont, o, { x: center.x + offsetX, y: center.y + offsetY }, angleIsOn, angle);
+                });
+            }
+
+        }
+    }
+
+
+    updateOpacityOfItem(item, i, container, properties) {
+        const opacity = this.opacityAdaptor(item, i, container, properties);
+        if (opacity == null) return;
+        const key = this.keyAdaptor(item, i, container, properties);
+        const data = this.itemMap.get(key)
+        data.opacity = opacity;
+    }
+
+    updateOpacityContainer(container, properties) {
+        container.forEach((v, i, c) => {
+            this.updateOpacityOfItem(v, i, c, properties);
+        })
+    }
+
+
+    insertTextBulk(container, properties) {
+        container.forEach((v, i, c) => {
+            this.insertText(v, i, c, properties);
+        })
+    }
+
+    updateTextCoords(item, i, container, properties) {
+        const coords = this.coordinatesAdaptor(item, i, container, properties);
+        if (coords == null) return;
+        const key = this.keyAdaptor(item, i, container, properties);
+        const data = this.itemMap.get(key)
+        data.angle = this.angleAdaptor(item, i, container, properties);
+        data.long = coords.long;
+        data.lat = coords.lat;
+    }
+
+    updateTextCoordsBulk(container, properties) {
+        container.forEach((v, i, c) => {
+            this.updateTextCoords(v, i, c, properties)
+        })
+    }
+
+    deleteTextBulk(keys) {
+        for (const key of keys) {
+            this.itemMap.delete(key);
+        }
+    }
+
+
+    insertText(item, id, container, properties) {
+        const key = this.keyAdaptor(item, id, container, properties)
+        const coords = this.coordinatesAdaptor(item, id, container, properties)
+        if (coords == null) {
+            this.itemMap.delete(key);
+            return;
+        }
+        const text = this.textAdaptor(item, id, container, properties)
+        if (text == null) {
+            this.itemMap.delete(key);
+            return
+        };
+        const opacity = this.opacityAdaptor(item, id, container, properties);
+        const angle = this.angleAdaptor(item, id, container, properties);
+        this.itemMap.set(key, { long: coords.long, lat: coords.lat, text, opacity, angle });
+    }
+
+    clear() {
+        this.itemMap.clear();
+    }
+}
+
+

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) { }
-