@pirireis/webglobeplugins 0.17.0 → 1.0.2

package/semiplugins/shape-on-terrain/terrain-polygon/data/master-worker.ts

@@ -0,0 +1,209 @@
+/// <reference lib="webworker" />
+
+import { PolygonInput, WorkerInput, WorkerOutput, BBOXZOOMDATA } from "../types";
+
+interface WorkerWrapper {
+    worker: Worker;
+    inProgress: boolean;
+    insertDeleteQueue: (PolygonInput | string)[];
+    lastBBOXData: BBOXZOOMDATA | null;
+    itemCount: number;
+    lastOutput: WorkerOutput | null;
+}
+
+const _workers: WorkerWrapper[] = [];
+const _workerMap: Map<string, number> = new Map();
+let _maxWorkers = 4; // Default, updated in init
+let _nextWorkerIndex = 0;
+
+// Configuration state to pass to new workers or re-broadcast
+let _pickableState: boolean | undefined;
+let _variativeColorsOn: boolean | undefined;
+
+// Initialize workers
+function initWorkers() {
+    _maxWorkers = Math.max(1, (navigator.hardwareConcurrency || 4) - 1);
+    for (let i = 0; i < _maxWorkers; i++) {
+        addWorker();
+    }
+}
+
+function addWorker() {
+    // @ts-ignore
+    const worker = new Worker(new URL("./worker.js", import.meta.url), { type: 'module' });
+
+    const wrapper: WorkerWrapper = {
+        worker,
+        inProgress: false,
+        insertDeleteQueue: [],
+        lastBBOXData: null,
+        itemCount: 0,
+        lastOutput: null
+    };
+
+    worker.onmessage = (event: MessageEvent<WorkerOutput>) => {
+        wrapper.inProgress = false;
+        wrapper.lastOutput = event.data;
+        mergeAndSendResults();
+        sendToSubWorker(wrapper);
+    };
+
+    // Initialize sub-worker with current global state
+    worker.postMessage({
+        pickableState: _pickableState,
+        variativeColorsOn: _variativeColorsOn,
+        insertDeleteQueue: [],
+        bboxes: null,
+    });
+
+    _workers.push(wrapper);
+}
+
+function mergeAndSendResults() {
+    let totalVec3s = 0;
+    let totalIndices = 0;
+    let totalLongLats = 0;
+    let totalPickIndices = 0;
+    let totalVariativeColors = 0;
+
+    const validOutputs: WorkerOutput[] = [];
+
+    for (const w of _workers) {
+        if (w.lastOutput) {
+            validOutputs.push(w.lastOutput);
+            totalVec3s += w.lastOutput.vec3s.length;
+            totalIndices += w.lastOutput.indices.length;
+            totalLongLats += w.lastOutput.longLats.length;
+            if (w.lastOutput.pickIndices) totalPickIndices += w.lastOutput.pickIndices.length;
+            if (w.lastOutput.variativeColors) totalVariativeColors += w.lastOutput.variativeColors.length;
+        }
+    }
+
+    if (validOutputs.length === 0) return;
+
+    const merged: WorkerOutput = {
+        vec3s: new Float32Array(totalVec3s),
+        indices: new Uint32Array(totalIndices),
+        longLats: new Float32Array(totalLongLats),
+        pickIndices: totalPickIndices > 0 ? new Float32Array(totalPickIndices) : null,
+        variativeColors: totalVariativeColors > 0 ? new Float32Array(totalVariativeColors) : null
+    };
+
+    let offsetVec3s = 0;
+    let offsetIndices = 0;
+    let offsetLongLats = 0;
+    let offsetPickIndices = 0;
+    let offsetVariativeColors = 0;
+    let vertexOffset = 0;
+
+    for (const out of validOutputs) {
+        merged.vec3s.set(out.vec3s, offsetVec3s);
+        offsetVec3s += out.vec3s.length;
+
+        for (let i = 0; i < out.indices.length; i++) {
+            merged.indices[offsetIndices + i] = out.indices[i] + vertexOffset;
+        }
+        offsetIndices += out.indices.length;
+        vertexOffset += out.vec3s.length / 3;
+
+        merged.longLats.set(out.longLats, offsetLongLats);
+        offsetLongLats += out.longLats.length;
+
+        if (merged.pickIndices && out.pickIndices) {
+            merged.pickIndices.set(out.pickIndices, offsetPickIndices);
+            offsetPickIndices += out.pickIndices.length;
+        }
+
+        if (merged.variativeColors && out.variativeColors) {
+            merged.variativeColors.set(out.variativeColors, offsetVariativeColors);
+            offsetVariativeColors += out.variativeColors.length;
+        }
+    }
+
+    // Send merged result to Main Thread
+    self.postMessage(merged, [
+        merged.vec3s.buffer,
+        merged.indices.buffer,
+        merged.longLats.buffer,
+        ...(merged.pickIndices ? [merged.pickIndices.buffer] : []),
+        ...(merged.variativeColors ? [merged.variativeColors.buffer] : [])
+    ]);
+}
+
+function sendToSubWorker(wrapper: WorkerWrapper) {
+    if (wrapper.inProgress) return;
+    if (wrapper.insertDeleteQueue.length === 0 && wrapper.lastBBOXData === null) return;
+
+    wrapper.inProgress = true;
+    wrapper.worker.postMessage({
+        pickableState: undefined, // State is set on init, only send updates if needed
+        variativeColorsOn: undefined,
+        bboxes: wrapper.lastBBOXData,
+        insertDeleteQueue: wrapper.insertDeleteQueue,
+    } as WorkerInput);
+
+    wrapper.lastBBOXData = null;
+    wrapper.insertDeleteQueue = [];
+}
+
+function triggerAllWorkers() {
+    for (const w of _workers) {
+        sendToSubWorker(w);
+    }
+}
+
+// Handle messages from Main Thread
+self.onmessage = (event: MessageEvent<WorkerInput>) => {
+    const { bboxes, insertDeleteQueue, pickableState, variativeColorsOn } = event.data;
+
+    // Initialize if not already done
+    if (_workers.length === 0) {
+        _pickableState = pickableState;
+        _variativeColorsOn = variativeColorsOn;
+        initWorkers();
+    }
+
+    // Handle BBOX updates
+    if (bboxes) {
+        for (const w of _workers) {
+            w.lastBBOXData = bboxes;
+        }
+    }
+
+    // Handle Insert/Delete
+    if (insertDeleteQueue && insertDeleteQueue.length > 0) {
+        if (insertDeleteQueue[0] === "__CLEAR_ALL_ITEMS__") {
+            _workerMap.clear();
+            for (const w of _workers) {
+                w.insertDeleteQueue = ["__CLEAR_ALL_ITEMS__"];
+                w.itemCount = 0;
+                w.lastOutput = null;
+            }
+        } else {
+            for (const item of insertDeleteQueue) {
+                if (typeof item === 'string') {
+                    // Delete
+                    const workerIdx = _workerMap.get(item);
+                    if (workerIdx !== undefined) {
+                        _workers[workerIdx].insertDeleteQueue.push(item);
+                        _workers[workerIdx].itemCount--;
+                        _workerMap.delete(item);
+                    }
+                } else {
+                    // Insert
+                    let workerIdx = _workerMap.get(item.key);
+                    if (workerIdx === undefined) {
+                        workerIdx = _nextWorkerIndex;
+                        _workerMap.set(item.key, workerIdx);
+                        _workers[workerIdx].itemCount++;
+                        _nextWorkerIndex = (_nextWorkerIndex + 1) % _workers.length;
+                    }
+                    _workers[workerIdx].insertDeleteQueue.push(item.key);
+                }
+            }
+        }
+    }
+
+    // Trigger all workers to process the new data
+    triggerAllWorkers();
+}

package/semiplugins/shape-on-terrain/terrain-polygon/data/polygon-to-triangles.ts

@@ -0,0 +1,144 @@
+/**
+ * # Purpose
+ * Divide long edges of polygons into smaller segments
+ * 
+ * This algorithm should be called after earcutting / triangulation. 
+ * Then earcut should run second time to further divide long edges.
+ * 
+ * populate points on a arc between two given points on a sphere
+ * 
+ */
+
+
+import { Radian } from "../../../../types";
+
+import { PolygonPluginInput, TrianglesMiddleData } from "../types";
+import { haversine } from "../../../../Math/haversine";
+
+
+import earcut from "earcut";
+
+
+/**
+ * 
+ */
+
+function __pointsInBetweenGreateCircle(
+    lat1: Radian,
+    lon1: Radian,
+    lat2: Radian,
+    lon2: Radian,
+    unitSphereDistance: number
+): number[] | null {
+    const points: number[] = [];
+
+    const d1 = haversine(lat1, lon1, lat2, lon2);
+    if (d1 <= unitSphereDistance) {
+        return null;
+    }
+
+    const numSegments = Math.ceil(d1 / unitSphereDistance);
+    for (let i = 1; i < numSegments; i++) {
+        const f = i / numSegments;
+        const A = Math.sin((1 - f) * d1) / Math.sin(d1);
+        const B = Math.sin(f * d1) / Math.sin(d1);
+        const x = A * Math.cos(lat1) * Math.cos(lon1) + B * Math.cos(lat2) * Math.cos(lon2);
+        const y = A * Math.cos(lat1) * Math.sin(lon1) + B * Math.cos(lat2) * Math.sin(lon2);
+        const z = A * Math.sin(lat1) + B * Math.sin(lat2);
+        const latN = Math.atan2(z, Math.sqrt(x * x + y * y));
+        const lonN = Math.atan2(y, x);
+        points.push(latN, lonN);
+    }
+
+    return points;
+}
+
+
+
+function _dividePolygonEdgeSize(
+    polygon: PolygonPluginInput,
+    kmThreshold: number
+): PolygonPluginInput {
+    const unitSphereDistance = kmThreshold / 6371; // Earth radius in km
+
+    const newGeometries = polygon.geometry.map(geom => {
+        const { vertices, holes } = geom;
+        const newVertices: number[] = [];
+        const newHoles: number[] = [];
+
+        const processRing = (start: number, end: number) => {
+            for (let i = start; i < end; i++) {
+                const long1 = vertices[2 * i];
+                const lat1 = vertices[2 * i + 1];
+                const next_i = (i + 1 < end) ? i + 1 : start;
+                const long2 = vertices[2 * next_i];
+                const lat2 = vertices[2 * next_i + 1];
+
+                newVertices.push(long1, lat1);
+                const extraPoints = __pointsInBetweenGreateCircle(
+                    lat1, long1, lat2, long2, unitSphereDistance
+                );
+                if (extraPoints) {
+                    newVertices.push(...extraPoints);
+                }
+            }
+        };
+
+        const shellEnd = holes.length > 0 ? holes[0] : vertices.length / 2;
+        processRing(0, shellEnd);
+
+        for (let h = 0; h < holes.length; h++) {
+            newHoles.push(newVertices.length / 2);
+            const holeStart = holes[h];
+            const holeEnd = h + 1 < holes.length ? holes[h + 1] : vertices.length / 2;
+            processRing(holeStart, holeEnd);
+        }
+        return { vertices: newVertices, holes: newHoles };
+    });
+
+    return {
+        ...polygon,
+        geometry: newGeometries,
+    };
+}
+
+// TODO: 
+// divide TrianglesMiddleData edges longer than threshold
+// function _divideTriangleEdges(
+//     key: string,
+//     vertices: number[],
+//     indices: number[],
+//     kmThreshold: number // maybe
+// ): TrianglesMiddleData {
+//     return { key, vertices, indices };
+// }
+
+
+
+// TODO: NEED TEST
+function triangulation(polygon: PolygonPluginInput, kmThreshold: number): TrianglesMiddleData {
+
+    const finalVertices: number[] = [];
+    const finalIndices: number[] = [];
+    let vertexIndexOffset = 0;
+
+    for (const geom of polygon.geometry) {
+        const indices = earcut(geom.vertices, geom.holes, 2);
+        
+        finalVertices.push(...geom.vertices);
+
+        for (const index of indices) {
+            finalIndices.push(index + vertexIndexOffset);
+        }
+
+        vertexIndexOffset += geom.vertices.length / 2;
+    }
+
+    return {
+        key: polygon.key,
+        vertices: finalVertices,
+        indices: finalIndices
+    };
+}
+
+export { triangulation };

package/semiplugins/shape-on-terrain/terrain-polygon/data/random.ts

@@ -0,0 +1,165 @@
+/**
+ * Generates random polygon data for testing PolygonPluginInput
+ */
+
+import { GlobeBBox } from "../../../../types";
+
+/**
+ * Generates a random polygon with optional holes
+ * @param {Object} options - Configuration options
+ * @param {number} options.minVertices - Minimum number of vertices for the shell (default: 3)
+ * @param {number} options.maxVertices - Maximum number of vertices for the shell (default: 8)
+ * @param {number} options.holeCount - Number of holes to generate (default: 0)
+ * @param {number} options.minLat - Minimum latitude (default: -85)
+ * @param {number} options.maxLat - Maximum latitude (default: 85)
+ * @param {number} options.minLng - Minimum longitude (default: -180)
+ * @param {number} options.maxLng - Maximum longitude (default: 180)
+ * @param {number} options.dimensions - Number of dimensions per vertex (default: 2)
+ * @returns {Object} PolygonPluginInput object
+ */
+function generateRandomPolygon(options: {
+    minVertices?: number;
+    maxVertices?: number;
+    holeCount?: number;
+    minLat?: number;
+    maxLat?: number;
+    minLng?: number;
+    maxLng?: number;
+    radius?: number;
+    dimensions?: number;
+} = {}) {
+    const {
+        minVertices = 3,
+        maxVertices = 8,
+        holeCount = 0,
+        minLat = -85,
+        maxLat = 85,
+        minLng = -180,
+        maxLng = 180,
+        dimensions = 2,
+        radius = 4,
+    } = options;
+
+    const key = `polygon_${Date.now()}_${Math.floor(Math.random() * 1000)}_${Math.random()}`;
+    const vertices = [];
+    const holes = [];
+
+    // Generate shell vertices
+    const shellVertexCount = Math.floor(Math.random() * (maxVertices - minVertices + 1)) + minVertices;
+    const centerLng = Math.random() * (maxLng - minLng) + minLng;
+    const centerLat = Math.random() * (maxLat - minLat) + minLat;
+
+    // Generate shell as a rough circle with random variations
+    for (let i = 0; i < shellVertexCount; i++) {
+        const angle = (i / shellVertexCount) * 2 * Math.PI;
+        const radiusVariation = radius * (0.7 + Math.random() * 0.6); // Add variation to radius
+        const lng = centerLng + Math.cos(angle) * radiusVariation;
+        const lat = centerLat + Math.sin(angle) * radiusVariation;
+
+        vertices.push(lng, lat);
+        if (dimensions > 2) {
+            for (let d = 2; d < dimensions; d++) {
+                vertices.push(Math.random() * 1000); // Random additional dimensions
+            }
+        }
+    }
+
+    // Generate holes
+    for (let h = 0; h < holeCount; h++) {
+        const holeStartIndex = vertices.length / dimensions;
+        holes.push(holeStartIndex);
+
+        const holeVertexCount = Math.floor(Math.random() * 4) + 3; // 3-6 vertices for holes
+        const holeRadius = radius * (0.2 + Math.random() * 0.3); // Smaller radius for holes
+        const holeCenterLng = centerLng + (Math.random() - 0.5) * radius * 0.8;
+        const holeCenterLat = centerLat + (Math.random() - 0.5) * radius * 0.8;
+
+        for (let i = 0; i < holeVertexCount; i++) {
+            const angle = (i / holeVertexCount) * 2 * Math.PI;
+            const lng = holeCenterLng + Math.cos(angle) * holeRadius;
+            const lat = holeCenterLat + Math.sin(angle) * holeRadius;
+
+            vertices.push(lng, lat);
+            if (dimensions > 2) {
+                for (let d = 2; d < dimensions; d++) {
+                    vertices.push(Math.random() * 1000);
+                }
+            }
+        }
+    }
+
+    return {
+        key,
+        geometry: [{ vertices, holes }],
+        color: [Math.random(), Math.random(), Math.random(), 1.0],
+    };
+}
+
+/**
+ * Generates multiple random polygons
+ * @param {number} count - Number of polygons to generate
+ * @param {Object} options - Options to pass to generateRandomPolygon
+ * @returns {Array} Array of PolygonPluginInput objects
+ */
+function generateRandomPolygons(count: number, options = {}) {
+    const polygons = [];
+    for (let i = 0; i < count; i++) {
+        polygons.push(generateRandomPolygon(options));
+    }
+    return polygons;
+}
+
+/**
+ * Generates a simple rectangular polygon for basic testing
+ * @param {number} lng - Center longitude
+ * @param {number} lat - Center latitude
+ * @param {number} width - Width in degrees
+ * @param {number} height - Height in degrees
+ * @returns {Object} PolygonPluginInput object
+ */
+function generateRectanglePolygon(lng = 0, lat = 0, width = 2, height = 1) {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+
+    return {
+        key: `rectangle_${Date.now()}`,
+        geometry: [{
+            vertices: [
+                lng - halfWidth, lat - halfHeight,  // Bottom-left
+                lng + halfWidth, lat - halfHeight,  // Bottom-right
+                lng + halfWidth, lat + halfHeight,  // Top-right
+                lng - halfWidth, lat + halfHeight   // Top-left
+            ],
+            holes: []
+        }]
+    };
+}
+
+function generateRectangleFromBBOX(bbox: GlobeBBox, key: string | null = null) {
+    const { ll, ur } = bbox;
+    return {
+        key: key || `rectangle_${Date.now()}`,
+        geometry: [{
+            vertices: [
+                ll.x, ll.y,  // Bottom-left
+                ur.x, ll.y,  // Bottom-right
+                ur.x, ur.y,  // Top-right
+                ll.x, ur.y   // Top-left
+            ],
+            holes: []
+        }]
+    };
+}
+
+// // Example usage:
+// console.log('Polygon with holes:', generateRandomPolygon({ holeCount: 2 }));
+// console.log('Multiple polygons:', generateRandomPolygons(3));
+// console.log('Rectangle polygon:', generateRectanglePolygon(-74, 40.7, 0.1, 0.05));
+
+export {
+    generateRandomPolygon,
+    generateRandomPolygons,
+    generateRectanglePolygon,
+    generateRectangleFromBBOX
+};
+

package/semiplugins/shape-on-terrain/terrain-polygon/data/readme.md

@@ -0,0 +1,5 @@
+# TODO:
+
+need a glue to manage cache, connect cache to processed data, ready to be consumed by texture-dem-program 
+
+It should be able to work on web worker.

package/semiplugins/shape-on-terrain/terrain-polygon/data/types.ts

@@ -0,0 +1,37 @@
+import { Color } from "../../../../types";
+import { TriangleTessellationMeta } from "../../../../Math/tessellation/triangle-tessellation";
+import { PolygonPluginInput } from "../types";
+
+
+
+type CatchedType = {
+    polygon: PolygonPluginInput,
+    offset: number,
+    tessellationMeta: TriangleTessellationMeta,
+    minX: number,
+    minY: number,
+    maxX: number,
+    maxY: number,
+};
+
+
+type CacheTriangle = {
+    parentKey: string;
+    tessellationMeta: TriangleTessellationMeta;
+}
+
+
+type Cache = Map<string,
+    {
+        triangles: CacheTriangle[],
+        properties: PolygonProperties
+    }>;
+
+
+
+type PolygonProperties = {
+    color: Color,
+    height: number,
+}
+
+export { CacheTriangle, Cache, PolygonProperties, CatchedType };

package/semiplugins/shape-on-terrain/terrain-polygon/data/worker-contact.ts

@@ -0,0 +1,81 @@
+import { PolygonInput, TerrainPolygonOptions } from "../types";
+import { WorkerInput, WorkerOutput, BBOXZOOMDATA } from "../types";
+import { Globe } from "../../../../types";
+import { MergedTilesInfo } from "../../../../Math/tessellation/tile-merger";
+import { DemTextureManager, DemTextureManagerCache } from "../../../../programs/totems/dem-textures-manager";
+import { RADIAN } from "../../../../Math/methods";
+
+export class WorkerContact {
+    private _masterWorker: Worker;
+    private _options: Pick<TerrainPolygonOptions, "pickable" | "variativeColorsOn">;
+    private onResult: (result: WorkerOutput) => void;
+    private demTextureManager: DemTextureManager = null as any;
+
+    constructor(globe: Globe, options: Pick<TerrainPolygonOptions, "pickable" | "variativeColorsOn">, onResult: (result: WorkerOutput) => void) {
+        this._options = options;
+        this.onResult = onResult;
+
+        // Initialize the Master Worker
+        // @ts-ignore
+        this._masterWorker = new Worker(new URL("./master-worker.js", import.meta.url), { type: 'module' });
+
+        this._masterWorker.onmessage = (event: MessageEvent<WorkerOutput>) => {
+            this.onResult(event.data);
+        }
+
+        // Initialize Master Worker state
+        this._masterWorker.postMessage({
+            pickableState: this._options.pickable,
+            variativeColorsOn: this._options.variativeColorsOn,
+            insertDeleteQueue: [],
+            bboxes: null,
+        } as WorkerInput);
+
+        this.demTextureManager = DemTextureManagerCache.get(globe);
+        this.demTextureManager.register(this);
+    }
+
+    setMergedTiles(mergedTilesInfo: MergedTilesInfo[]) {
+        const bboxesData: BBOXZOOMDATA = new Array(mergedTilesInfo.length);
+        for (let i = 0; i < mergedTilesInfo.length; i++) {
+            const { bbox, zoom } = mergedTilesInfo[i];
+            bboxesData[i] = {
+                zoom: zoom,
+                minX: bbox.ll.x * RADIAN,
+                minY: bbox.ll.y * RADIAN,
+                maxX: bbox.ur.x * RADIAN,
+                maxY: bbox.ur.y * RADIAN,
+            };
+        }
+
+        // Send BBOX updates to Master Worker
+        this._masterWorker.postMessage({
+            bboxes: bboxesData
+        } as Partial<WorkerInput>);
+    }
+
+    free() {
+        this.demTextureManager.unregister(this);
+        this._masterWorker.terminate();
+    }
+
+    insertBulk(polygons: PolygonInput[]) {
+        this._masterWorker.postMessage({
+            insertDeleteQueue: polygons
+        } as Partial<WorkerInput>);
+    }
+
+    deleteBulk(keys: string[]) {
+        this._masterWorker.postMessage({
+            insertDeleteQueue: keys
+        } as Partial<WorkerInput>);
+    }
+
+    clear() {
+        this._masterWorker.postMessage({
+            insertDeleteQueue: ["__CLEAR_ALL_ITEMS__"]
+        } as Partial<WorkerInput>);
+    }
+}
+
+