@pirireis/webglobeplugins 0.6.31-a → 0.6.34

package/circle-line-chain/plugin.js

@@ -63,136 +63,15 @@ export class CircleLineChainPlugin {
 
     // init
 
-    init(globe, gl) {
-        this.gl = gl;
-        this.globe = globe
-        this._initOrchestrations()
-    }
-
-    _checktextWritersMap(textWritersMap) {
-        if (!(textWritersMap instanceof Map)) throw new Error("textWritersMap is not an instance of Map");
-        textWritersMap.forEach((v) => {
-            if (!(v instanceof ContextTextWriter3)) throw new Error("textWritersMap element is not an instance of ContextTextWriter3");
-        });
-    }
-
-    _initOrchestrations() {
-        const { gl, globe } = this;
-        this.lineProgram = LineOnGlobeCache.get(globe);
-        this.circleProgram2d = CircleCache.get(globe);
-        this.circle3DProgram = Circle3DCache.get(globe);
-
-        // this.lineToTheOriginProgram = LineToTheOriginCache.get(globe);
-        const _circleFlatEdgeCount = this._circleFlatEdgeCount;
-        {
-            // createBuffers
-            const bufferType = "DYNAMIC_DRAW";
-            const initialCapacity = this.bufferOrchestrator.capacity;
-            this.bufferManagersCompMap = new Map(
-                [
-                    ["centerCoords2d", {
-                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
-                    }],
-                    ["centerCoords3d", {
-                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.long, item.lat, 0, 0)),
-                    }],
-                    ["targetCoords2d", {
-                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.targetLong, item.targetLat)),
-                    }],
-                    ["targetCoords3d", {
-                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.targetLong, item.targetLat, 0, 0)),
-                    }],
-                    ["rgba", {
-                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                        'adaptor': (item) => {
-                            if (item.lineProperties?.rgba) return new Float32Array(item.lineProperties.rgba);
-                            return new Float32Array(item.chainProperties.rgba);
-                        }
-                    }],
-                    ["bigRadius", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.bigRadius])
-                    }],
-                    ["dashRatio", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.chainProperties.dashRatio])
-                    }],
-
-                    ["dashOpacity", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.chainProperties.dashOpacity])
-                    }],
-                    ["circleDashAngle", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => {
-                            if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
-                            return new Float32Array([item.chainProperties.circleDashAngle / 360]);
-                        }
-                    }],
-                    ["rgbaCircle", {
-                        "bufferManager": new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                        "adaptor": (item) => {
-                            if (item.circleProperties?.rgba) return new Float32Array(item.circleProperties.rgba);
-                            return new Float32Array(item.chainProperties.rgba);
-                        }
-                    }],
-                    // Mercator buffers
-                    ["circleDashAngleMercator", {
-                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => {
-                            if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
-                            return populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.circleDashAngle / 360);
-                        }
-                    }],
-                    ["rgbaCircleMercator", {                            // 62
-                        "bufferManager": new BufferManager(gl, 4 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        "adaptor": (item) => {
-                            if (item.circleProperties?.rgba) return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.circleProperties.rgba);
-                            return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.chainProperties.rgba);
-                        }
-                    }],
-                    ["dashOpacityMercator", {
-                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.dashOpacity)
-                    }],
-                    ["centerCoords2dMercator", {
-                        'bufferManager': new BufferManager(gl, 2 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => item.centerCoords2dflat,
-                    }],
-                ]
-            );
-            // (startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj)
-            const obj = function (bufferManagerComp) {
-                return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
-            };
-            this.lineVao = this.lineProgram.createVAO(
-                ...['centerCoords2d', 'centerCoords3d', 'targetCoords2d', 'targetCoords3d', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
-            this.circleVao2d = this.circleProgram2d.createVAO(
-                ...["centerCoords2dMercator", "rgbaCircleMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key))));
-            // this.toOriginVao = this.lineToTheOriginProgram.createVAO(
-            //     ...["targetCoords3d", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key))));
-            this.circle3DVao = this.circle3DProgram.createVAO(
-                ...["centerCoords3d", "bigRadius", "rgbaCircle", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
-            );
-
-        }
-
-    }
-
-
     // API
     setDrawCircleOn(bool) {
         if (typeof bool !== 'boolean') throw new Error("setDrawCircleOn parameter must be a boolean");
         this._drawCircleOn = bool;
         this.globe.DrawRender();
     }
-    // -- update bulk family
+
+    // ---- updateBulk
     /**
-     * 
      * @param {Array<chain>} data 
      * @typedef chain
      * @property {string} chainKey
@@ -220,7 +99,6 @@ export class CircleLineChainPlugin {
 
 
     /**
-     * 
      * @param {*} chainKey 
      * @param {Array<{nodeKey, circleProperties:Map[propertyName ,value],  lineProperties:Map[propertyName ,value] }} propertyMap 
      */
@@ -232,7 +110,6 @@ export class CircleLineChainPlugin {
     }
 
     /**
-     * 
      * @param {*} chainKey 
      * @param {Map<propertyName ,value} propertyMap 
      */
@@ -242,7 +119,23 @@ export class CircleLineChainPlugin {
         if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
     }
 
-    // ---- insertBulk family
+
+    updateNodeCoordinates(node, chainKey, { textWriterIDs = [] } = {}) {
+        this._chainListMap.updateCoordsinatesOfNode(node, chainKey);
+        if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
+        this._reconstructChains([chainKey]);
+        this.globe.DrawRender();
+    }
+
+
+    updateText(textWriterIDs) {
+        const chainKeyIterator = this._chainListMap.getAllChainKeysIterator();
+        this._updateTexts(chainKeyIterator, textWriterIDs);
+        this.globe.DrawRender();
+    }
+
+
+    // ---- insertBulk
     /**
      * 
      * @param {Array<chain>} data 
@@ -275,7 +168,6 @@ export class CircleLineChainPlugin {
     }
 
     /**
-     * 
      * @param {{key, long, lat}} node
      * @param {*} chainKey 
      * @param {*} theNodeKeyFront | node key of the next node, null places to the last
@@ -289,16 +181,6 @@ export class CircleLineChainPlugin {
     }
 
 
-
-    updateNodeCoordinates(node, chainKey, { textWriterIDs = [] } = {}) {
-        this._chainListMap.updateCoordsinatesOfNode(node, chainKey);
-        if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
-        this._reconstructChains([chainKey]);
-        this.globe.DrawRender();
-    }
-
-
-
     setOpacity(opacity) {
         if (typeof opacity !== 'number') throw new Error("opacity must be a number");
         if (opacity < 0 || 1 < opacity) throw new Error("opacity must be between 0-1");
@@ -349,14 +231,126 @@ export class CircleLineChainPlugin {
     }
 
 
-    updateText(textWriterIDs) {
-        const chainKeyIterator = this._chainListMap.getAllChainKeysIterator();
-        this._updateTexts(chainKeyIterator, textWriterIDs);
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe
+        this._initOrchestrations()
     }
 
-
     // implicit
 
+    _checktextWritersMap(textWritersMap) {
+        if (!(textWritersMap instanceof Map)) throw new Error("textWritersMap is not an instance of Map");
+        textWritersMap.forEach((v) => {
+            if (!(v instanceof ContextTextWriter3)) throw new Error("textWritersMap element is not an instance of ContextTextWriter3");
+        });
+    }
+
+    _initOrchestrations() {
+        const { gl, globe } = this;
+        this.lineProgram = LineOnGlobeCache.get(globe);
+        this.circleProgram2d = CircleCache.get(globe);
+        this.circle3DProgram = Circle3DCache.get(globe);
+
+        // this.lineToTheOriginProgram = LineToTheOriginCache.get(globe);
+        const _circleFlatEdgeCount = this._circleFlatEdgeCount;
+        {
+            // createBuffers
+            const bufferType = "DYNAMIC_DRAW";
+            const initialCapacity = this.bufferOrchestrator.capacity;
+            this.bufferManagersCompMap = new Map(
+                [
+                    ["centerCoords2d", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
+                    }],
+                    ["centerCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.long, item.lat, 0, 0)),
+                    }],
+                    ["targetCoords2d", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.targetLong, item.targetLat)),
+                    }],
+                    ["targetCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.targetLong, item.targetLat, 0, 0)),
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => {
+                            if (item.lineProperties?.rgba) return new Float32Array(item.lineProperties.rgba);
+                            return new Float32Array(item.chainProperties.rgba);
+                        }
+                    }],
+                    ["bigRadius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.bigRadius])
+                    }],
+                    ["dashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.chainProperties.dashRatio])
+                    }],
+                    ["dashOpacity", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.chainProperties.dashOpacity])
+                    }],
+                    ["circleDashAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => {
+                            if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
+                            return new Float32Array([item.chainProperties.circleDashAngle / 360]);
+                        }
+                    }],
+                    ["rgbaCircle", {
+                        "bufferManager": new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        "adaptor": (item) => {
+                            if (item.circleProperties?.rgba) return new Float32Array(item.circleProperties.rgba);
+                            return new Float32Array(item.chainProperties.rgba);
+                        }
+                    }],
+                    // Mercator buffers
+                    ["circleDashAngleMercator", {
+                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => {
+                            if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
+                            return populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.circleDashAngle / 360);
+                        }
+                    }],
+                    ["rgbaCircleMercator", {                            // 62
+                        "bufferManager": new BufferManager(gl, 4 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        "adaptor": (item) => {
+                            if (item.circleProperties?.rgba) return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.circleProperties.rgba);
+                            return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.chainProperties.rgba);
+                        }
+                    }],
+                    ["dashOpacityMercator", {
+                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.dashOpacity)
+                    }],
+                    ["centerCoords2dMercator", {
+                        'bufferManager': new BufferManager(gl, 2 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => item.centerCoords2dflat,
+                    }],
+                ]
+            );
+            const obj = function (bufferManagerComp) {
+                return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
+            };
+            this.lineVao = this.lineProgram.createVAO(
+                ...['centerCoords2d', 'centerCoords3d', 'targetCoords2d', 'targetCoords3d', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+            this.circleVao2d = this.circleProgram2d.createVAO(
+                ...["centerCoords2dMercator", "rgbaCircleMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key))));
+            this.circle3DVao = this.circle3DProgram.createVAO(
+                ...["centerCoords3d", "bigRadius", "rgbaCircle", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
+            );
+
+        }
+
+    }
+
+
+
     _updateTexts(chainKeys, textWriterIDs) {
         if (textWriterIDs.length === 0) return;
         const textWriters = textWriterGetOrThrow(this._textWritersMap, textWriterIDs)

package/package.json

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

package/programs/totems/camerauniformblock.js

@@ -48,7 +48,8 @@ export default class
         const { gl } = this;
         const ubo = gl.createBuffer();
         gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        gl.bufferData(gl.UNIFORM_BUFFER, 184, gl.STREAM_DRAW);
+        // 184 bytes in reality. Overflow on linux for some reason. So, 200 bytes.
+        gl.bufferData(gl.UNIFORM_BUFFER, 200, gl.STREAM_DRAW);
         gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
         gl.bindBuffer(gl.UNIFORM_BUFFER, null);
         return ubo;

package/timetracks/adaptors-line-strip.js

@@ -0,0 +1,80 @@
+import { latLongToPixelXY } from "../util";
+
+
+
+/**
+ * @param {Array.<Array.<number>>} coordinates
+ * @param {Array.<number>} timestamps
+ * @param {Array.<String>} styleGroupNameArray
+ * @param {Object.<string, TrackStyleGroup>} _groupColorMap
+ * @param {Float32Array} floatArray
+ * @param {number} offset
+ * 
+ * create floatArray with createFloat32Array before calling this function.
+ * start offset from 0.
+ * feed the floatArray with a track data and offset that is returned from the previous call.
+ */
+function featuresToLineStringData(data) {
+    /**
+     * features are the tracks
+     * feature[i].geometry.coordinates are the points of the track
+     * feature[i].properties.messageTime are the timestamps of the points
+     * 
+     */
+    const features = data.features;
+    let size = data.features.length - 1;
+
+    let startTime = features[0].properties.messageTime[0];
+    let endTime = features[0].properties.messageTime[features[0].properties.messageTime.length - 1];
+
+    for (let feature of features) {
+        size += feature.properties.messageTime.length;
+        startTime = Math.min(startTime, feature.properties.messageTime[0]);
+        endTime = Math.max(endTime, feature.properties.messageTime[feature.properties.messageTime.length - 1]);
+    }
+    const array = new Float32Array(size * 9);
+    let offset = 0;
+
+    {
+        const feature = features[0];
+        const coordinates = feature.geometry.coordinates;
+        const timestamps = feature.properties.messageTime.map((time) => (time - startTime) / 1000);
+        offset = fillSliceOfFloat32ArrayLineStrip(array, offset, coordinates, timestamps);
+    }
+    for (let i = 1; i < features.length; i++) {
+        const feature = features[i];
+        const coordinates = feature.geometry.coordinates;
+        const timestamps = feature.properties.messageTime.map((time) => (time - startTime) / 1000);
+        offset = addCuttingPointLineStrip(array, offset);
+        offset = fillSliceOfFloat32ArrayLineStrip(array, offset, coordinates, timestamps);
+    }
+
+    return { data: array, startTime, endTime };
+}
+
+
+function fillSliceOfFloat32ArrayLineStrip(floatArray, offset, coordinates, timestamps, { styleGroupNameArray = null, groupColorFunction = () => [Math.random(), Math.random(), Math.random()] } = {}) {
+    const startTime = timestamps[0];
+    const endTime = timestamps[timestamps.length - 1];
+    for (let i = 0; i < coordinates.length; i++) {
+        const time = timestamps[i];
+        const coord = coordinates[i];
+        const styleGroupName = styleGroupNameArray ? styleGroupNameArray[i] : "default";
+        const { x, y } = latLongToPixelXY(coord[1], coord[0]);
+        const z = coord[2] ? coord[2] / 1000.0 : 0;
+        floatArray.set([x, y, z, time, ...groupColorFunction(styleGroupName), startTime, endTime], offset);
+        offset += 9;
+    }
+    return offset;
+}
+
+function addCuttingPointLineStrip(floatArray, offset) {
+    floatArray.set([0, 0, 0, 0, -1.0, -1.0, -1.0, 0, 0], offset);
+    return offset + 9;
+}
+
+
+
+
+
+export { addCuttingPointLineStrip, featuresToLineStringData, fillSliceOfFloat32ArrayLineStrip, latLongToPixelXY };

package/timetracks/index.js

@@ -1,3 +1,6 @@
 import TimeTracks from './plugin';
 import { Adaptor, fillSliceOfFloat32Array, createFloat32Array } from './adaptors';
-export { Adaptor, fillSliceOfFloat32Array, createFloat32Array, TimeTracks };
+
+import TimeTracksLineStrip from './plugin-line-strip';
+import { addCuttingPointLineStrip, featuresToLineStringData, fillSliceOfFloat32ArrayLineStrip, latLongToPixelXY } from './adaptors-line-strip';
+export { Adaptor, fillSliceOfFloat32Array, createFloat32Array, TimeTracks, TimeTracksLineStrip, addCuttingPointLineStrip, featuresToLineStringData, fillSliceOfFloat32ArrayLineStrip, latLongToPixelXY };