@pirireis/webglobeplugins 0.17.1 → 1.0.2

package/semiplugins/shape-on-terrain/terrain-polygon/data/worker.js

@@ -0,0 +1,146 @@
+/// <reference lib="webworker" />
+
+import { Cache } from "./cache";
+import { partialTessellation, zoomLevelShowThreshold } from "../../../../Math/tessellation/triangle-tessellation";
+import { IndexAttributeEscapeValue } from "../../../../programs/polygon-on-globe/texture-dem-triangles";
+
+const cache = new Cache(100); // 100 km threshold
+let _pickableState = false;
+let _variativeColorsOnState = false;
+
+let showThreshold = 0;
+// eslint-disable-next-line no-restricted-globals
+self.onmessage = (event) => {
+    try {
+        const { bboxes, insertDeleteQueue, pickableState, variativeColorsOn } = event.data;
+        if (variativeColorsOn !== undefined) {
+            _variativeColorsOnState = variativeColorsOn;
+        }
+        if (pickableState !== undefined) {
+            _pickableState = pickableState;
+        }
+
+        // Process insert/delete queue
+        if (insertDeleteQueue[0] === "__CLEAR_ALL_ITEMS__") {
+            insertDeleteQueue.shift();
+            cache.clear();
+        }
+
+        for (const item of insertDeleteQueue) {
+            if (typeof item === 'string') {
+                cache.remove(item);
+            } else {
+                cache.insert(item.key, item);
+            }
+        }
+
+        // Update bboxes if provided
+        if (bboxes) {
+            cache.setBBOXes(bboxes);
+            showThreshold = zoomLevelShowThreshold(bboxes[0].zoom, 0.03);
+        }
+
+        // Search for triangles in view
+        const trianglesInView = cache.search();
+
+        // Prepare arrays for merging
+        const results = [];
+
+        // Convert bbox to BBoxZoom format for partialTessellation
+        const bboxZooms = bboxes ? bboxes.map(b => ({
+            bbox: {
+                min: [b.minX, b.minY],
+                max: [b.maxX, b.maxY]
+            },
+            zoom: b.zoom
+        })) : []; // This will be empty if no bbox, causing issues
+
+        let counter = 0;
+        let indexCounter = 0;
+        // Process each triangle
+        for (const triangle of trianglesInView) {
+            if (triangle.tessellationMeta.showThreshold * 0.075 > showThreshold) {
+                continue;
+            }
+
+            const result = (triangle.tessellationMeta.showThreshold < showThreshold) ? partialTessellation(
+                triangle.tessellationMeta,
+                bboxZooms,
+                5 // innerCuts parameter
+            ) : triangle.tessellationMeta.shortCut;
+
+
+            counter += result.vec3s.length;
+            indexCounter += result.indices.length;
+            if (_pickableState) {
+                // TODO: find a better way to fill indeces to final array
+                result.pickIndex = triangle.polygon.index;
+            }
+            if (_variativeColorsOnState) {
+                const color = triangle.polygon.color || [IndexAttributeEscapeValue, IndexAttributeEscapeValue, IndexAttributeEscapeValue, IndexAttributeEscapeValue];
+                result.variativeColors = color;
+                // Update offset for next triangle
+            }
+            results.push(result);
+        }
+
+        // Send results back
+        const output = {
+            vec3s: new Float32Array(counter),
+            longLats: new Float32Array(counter / 3 * 2),
+            indices: new Uint32Array(indexCounter),
+
+        };
+
+        if (_pickableState) {
+            output.pickIndices = new Float32Array(counter / 3);
+        }
+        if (_variativeColorsOnState) {
+            output.variativeColors = new Float32Array(counter / 3 * 4);
+        }
+
+        let currentVertexOffset = 0;
+        let indexOffset = 0;
+        for (const result of results) {
+            output.vec3s.set(result.vec3s, currentVertexOffset);
+            output.longLats.set(result.longLats, (currentVertexOffset / 3) * 2);
+            output.indices.set(result.indices.map(i => i + currentVertexOffset / 3), indexOffset);
+            currentVertexOffset += result.vec3s.length;
+            indexOffset += result.indices.length;
+            if (_pickableState) {
+                const subArray = output.pickIndices.subarray(currentVertexOffset / 3 - result.vec3s.length / 3, currentVertexOffset / 3);
+                subArray.fill(result.pickIndex);
+            }
+            if (_variativeColorsOnState && result.variativeColors) {
+                const vertexCount = result.vec3s.length / 3;
+                const colorStartIndex = (currentVertexOffset / 3 - vertexCount) * 4;
+                for (let i = 0; i < vertexCount; i++) {
+                    const offset = colorStartIndex + i * 4;
+                    output.variativeColors[offset] = result.variativeColors[0];
+                    output.variativeColors[offset + 1] = result.variativeColors[1];
+                    output.variativeColors[offset + 2] = result.variativeColors[2];
+                    output.variativeColors[offset + 3] = result.variativeColors[3];
+                }
+            }
+        }
+
+        const buffers = [
+            output.vec3s.buffer,
+            output.indices.buffer,
+            output.longLats.buffer,
+        ];
+        if (pickableState && output.pickIndices) {
+            buffers.push(output.pickIndices.buffer);
+        }
+        if (_variativeColorsOnState && output.variativeColors) {
+            buffers.push(output.variativeColors.buffer);
+        }
+        // eslint-disable-next-line no-restricted-globals
+        self.postMessage(output,
+            buffers);
+    } catch (error) {
+        console.error('Error in worker:', error);
+
+        // self.postMessage({ error: error.message || 'Unknown error in worker' });
+    }
+};

package/semiplugins/shape-on-terrain/terrain-polygon/notes.md

@@ -0,0 +1,90 @@
+# Requirements
+
+- webgl program
+- interaction with globe elevation api
+- mesh algorithm
+
+
+# WEBGL PROGRAM
+
+Triangles with Webgl picking. Program can have color hightlighting too for selected item.
+
+# Interation with Globe Elevation API
+
+Elevation resolution is based on camera and focus positions. 
+Instead of blindly ask for elevation of coordinates, what else can be done?
+
+## 1. Server side solution
+A detailed version can be requested from server. Server create mesh. The mesh preferably high resolution.
+Therefore zoom level and camera information is no longer parameters.
+
+On edit mod the change is on fly. Server probably cannot catch the speed of spontanius editting. On this case less detailed mesh can be 
+processed be client side. One edit finished, client asks for detailed final version. 
+
+**Criterias:** Visual compatibility with Globe surface, Performance, Memory, Web Traffic(maybe opening a mesh server at backand)
+
+# Mesh Algorithm & Data Structure
+
+  olygon to elevation mesh
+
+Data structure would be points and indexes. 
+
+Adaptors employed to convert user input to desired ınput.
+
+Flat version of mesh can be build on front end if possible
+
+
+
+***********
+
+
+[-] Mesh algorthm concave
+[-] triangle plugin with gpu picking. input ( key, mesh (Variative size ?) , color,)
+
+
+--------
+
+# Loading DEM to texture array
+
+There is 6 Tiles with dem in an instance of time.
+
+These 6 tiles can be loaded to gpu as texture[6].
+And 6 bbox can be loaded as vec4[6] rgba -> ur lr rl ll
+Each vertex finds which tile they are blonged to, and calculate dem from points relative position to their bbox
+If a vertex is not inside of a tile elevation  is Zero. 
+
+****
+
+Taking interseption between points of six tile ( 5 * 5 * 6 ) and polygons will give necessery points. 
+
+In theory, That way we can contract polygon mesh that fits the Elevation model perfectly with minimal count of points.
+
+{
+If 'tiles' are not spontaninus. ve can predefine meshes acounding to current zoom level. If zoom level changes the shapes inside visibility bbox will be updated.
+}
+    
+
+
+Hasana sorular 
+
+Ekrana yüklenen ekrandaki yükseklikler merkez baz alınarak 6 tane
+
+5 * 5 * 6 ?
+
+bir anda sadece 6 tile in yükseikli ile mi çizim yapılmakta ?
+
+
+GLOBA bunları bboxları ile alabileceğim bir method çıkabilir miyiz?
+
+Dönen istekleri alabileceğim
+
+--
+
+Hasan ile konuştum. 
+
+
+---
+
+mesh 
+
+try mapbox delunay

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

@@ -0,0 +1,265 @@
+import { WorkerContact } from "./data/worker-contact";
+import { TextureDemTriangles } from "../../../programs/polygon-on-globe/texture-dem-triangles";
+import { Globe, DrawRangeIndexParams, UBOHandler, DrawRange } from "../../../types";
+import { noRegisterGlobeProgramCache } from "../../../programs/programcache";
+import { PolygonInput, PolygonPluginInput } from "./types";
+import { PickerDisplayer } from "../../../util/picking/picker-displayer";
+import { IndexPolygonMap } from "./data/index-polygon-map";
+import { WorkerOutput, TerrainPolygonOptions } from "./types";
+
+export class TerrainPolygonSemiPlugin {
+    id: string;
+    globe: Globe = null as any;
+    private _options: TerrainPolygonOptions = {
+        pickable: false,
+        variativeColorsOn: false,
+        defaultColor: [0.5, 0.5, 1, 1],
+        pickedColor: [1, 0, 0, 1],
+        opacity: 1.0,
+        showTesselationPoints: false,
+    };
+    private _workerContact: WorkerContact = null as any;
+    private _program: TextureDemTriangles = null as any;
+    private _pickerDisplayer: PickerDisplayer | null = null;
+    private _indexPolygonMap: IndexPolygonMap = new IndexPolygonMap();
+    private _lastPickedPolygon: PolygonPluginInput | null = null;
+    private _elementArrayBuffer: WebGLBuffer = null as any;
+    private _vec3Buffer: WebGLBuffer = null as any;
+    private _pickIndexBuffer: WebGLBuffer | null = null;
+    private _variativeColorBuffer: WebGLBuffer = null as any;
+    private _mercatorXYBuffer: WebGLBuffer = null as any;
+    private _vao: WebGLVertexArrayObject = null as any;
+    private _uboHandler: UBOHandler = null as any;
+
+    private _drawPointsRangeIndexParams: DrawRangeIndexParams = {
+        drawRange: {
+            first: 0,
+            count: 0,
+        },
+        drawMode: WebGL2RenderingContext.POINTS,
+        elementBufferIndexType: WebGL2RenderingContext.UNSIGNED_INT,
+        elementBuffer: WebGLBuffer = null as any,
+    };
+
+    private _drawRangeIndexParams: DrawRangeIndexParams = {
+        drawRange: {
+            first: 0,
+            count: 0,
+        },
+        drawMode: WebGL2RenderingContext.TRIANGLES,
+        elementBufferIndexType: WebGL2RenderingContext.UNSIGNED_INT,
+        elementBuffer: WebGLBuffer = null as any,
+    };
+
+    constructor(id: string, options: Partial<TerrainPolygonOptions> = {}) {
+        this.id = id;
+        this._options = { ...this._options, ...options };
+    };
+
+
+    init(globe: Globe, gl: WebGL2RenderingContext) {
+        this.globe = globe;
+
+        this._drawRangeIndexParams.drawMode = globe.gl.TRIANGLES;
+        this._drawRangeIndexParams.elementBufferIndexType = globe.gl.UNSIGNED_INT
+
+        this._program = noRegisterGlobeProgramCache.getProgram(this.globe, TextureDemTriangles);
+        this._elementArrayBuffer = gl.createBuffer();
+        this._vec3Buffer = gl.createBuffer();
+        this._mercatorXYBuffer = gl.createBuffer();
+
+        this._uboHandler = this._program.createUBO();
+        this._uboHandler.updateSingle("opacity", new Float32Array([this._options.opacity]));
+        this._uboHandler.updateSingle("defaultColor", new Float32Array(this._options.defaultColor));
+
+        if (this._options.pickable) {
+            this._pickIndexBuffer = gl.createBuffer();
+            this._pickerDisplayer = new PickerDisplayer(this.globe, "R32I");
+            this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([1.0]));
+            this._uboHandler.updateSingle("pickedColor", new Float32Array(this._options.pickedColor));
+        }
+
+        if (this._options.variativeColorsOn) {
+            this._variativeColorBuffer = gl.createBuffer();
+        }
+
+        this._vao = this._program.createVAO({
+            offset: 0,
+            stride: 0,
+            buffer: this._vec3Buffer
+        }, {
+            offset: 0,
+            stride: 0,
+            buffer: this._mercatorXYBuffer
+        }, this._options.pickable ? {
+            offset: 0,
+            stride: 0,
+            buffer: this._pickIndexBuffer!
+        } : undefined,
+            this._options.variativeColorsOn ? {
+                offset: 0,
+                stride: 0,
+                buffer: this._variativeColorBuffer!
+            } : undefined
+        );
+
+
+        this._drawRangeIndexParams.elementBuffer = this._elementArrayBuffer;
+        this._workerContact = new WorkerContact(this.globe, this._options, (result: WorkerOutput) => {
+            // console.log('TerrainPolygonSemiPlugin received data from worker', result);
+            this.setBuffers(result);
+        });
+        this._drawRangeIndexParams.elementBuffer = this._elementArrayBuffer;
+        this._drawPointsRangeIndexParams.elementBuffer = this._elementArrayBuffer;
+    }
+
+
+    insertBulk(polygons: PolygonPluginInput[]) {
+        // if (this._indexPolygonMap) {
+        polygons = this._indexPolygonMap.insertBulk(polygons);
+        // }
+        this._workerContact.insertBulk(polygons as PolygonInput[]);
+    }
+
+    deleteBulk(keys: string[]) {
+        this._workerContact.deleteBulk(keys);
+        this._indexPolygonMap.deleteBulk(keys);
+    }
+
+
+
+    setUniform(name: string, value: any) {
+        // check options have the key name
+        if (name.startsWith("private_")) {
+            throw new Error(`Cannot set private uniform ${name}`);
+        }
+        if (this._options.hasOwnProperty(name)) {
+            if ((this._options as any)[name] === value) {
+                return;
+            }
+            (this._options as any)[name] = value;
+        }
+        this._uboHandler.updateSingle(name, value);
+        this.globe.DrawRender();
+    }
+
+    setOpacity(opacity: number) {
+        if (this._options.opacity !== opacity) {
+            this._options.opacity = opacity;
+            this._uboHandler.updateSingle("opacity", new Float32Array([opacity]));
+            this.globe.DrawRender();
+        }
+    }
+
+    setBuffers(data: WorkerOutput) {
+        console.log("TerrainPolygonSemiPlugin updating buffers", data.indices.length / 3, "triangles");
+        const gl = this.globe.gl as WebGL2RenderingContext;
+
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._elementArrayBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data.indices, gl.STREAM_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._vec3Buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data.vec3s, gl.STREAM_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._mercatorXYBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data.longLats, gl.STREAM_DRAW);
+        if (this._options.pickable) {
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._pickIndexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, data.pickIndices, gl.STREAM_DRAW);
+        }
+        if (this._options.variativeColorsOn) {
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._variativeColorBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, data.variativeColors!, gl.STREAM_DRAW);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this._drawRangeIndexParams.drawRange.count = data.indices.length;
+        this._drawPointsRangeIndexParams.drawRange.count = data.indices.length;
+        this.globe.DrawRender();
+    }
+
+    getPickedPolygon(): PolygonPluginInput | null {
+        if (this._options.pickable === false) {
+            throw new Error("TerrainPolygonSemiPlugin is not pickable. Set pickable option to true on construction to enable picking.");
+        }
+        return this._lastPickedPolygon;
+    }
+
+
+    _selfSelect() {
+        const { globe, _pickerDisplayer } = this;
+        const pos = globe.api_GetMousePos();
+        const x = pos.canvasX;
+        const y = globe.api_ScrH() - pos.canvasY;
+        _pickerDisplayer!.pickXY(x, y, 0, (selectedIDsSet) => {
+            if (selectedIDsSet.size > 0) {
+                const selectedID = Array.from(selectedIDsSet)[0];
+                const newPolygon = this._indexPolygonMap.get(selectedID) || null;
+                if (newPolygon !== this._lastPickedPolygon) {
+                    this._lastPickedPolygon = newPolygon;
+                    globe.DrawRender();
+                    this._uboHandler.updateSingle("private_pickedIndex", new Float32Array([selectedID]));
+                }
+            } else {
+                if (this._lastPickedPolygon !== null) {
+                    this._lastPickedPolygon = null;
+                    globe.DrawRender();
+                    this._uboHandler.updateSingle("private_pickedIndex", new Float32Array([-1]));
+                }
+            }
+        })
+    }
+
+
+
+    clear() {
+        this._workerContact.clear();
+        this._indexPolygonMap.clear();
+    }
+
+    // GLOBE API INTERACTION METHODS
+
+    resize() {
+        if (this._options.pickable) {
+            this._pickerDisplayer?.resize();
+        }
+    }
+
+    draw3D() {
+        const gl = this.globe.gl as WebGL2RenderingContext;
+        gl.disable(gl.DEPTH_TEST);
+
+        // drawPoints 
+        if (this._options.showTesselationPoints) {
+            this._program.draw(
+                this._vao,
+                this._drawPointsRangeIndexParams,
+                this._uboHandler);
+        }
+
+        if (this._pickerDisplayer) {
+            this._pickerDisplayer.bindFBO();
+            this._pickerDisplayer.clearTextures();
+            // gl.enable(gl.DEPTH_TEST);
+        } else {
+            // gl.disable(gl.DEPTH_TEST);
+        }
+        gl.frontFace(gl.CW);
+        this._program.draw(
+            this._vao,
+            this._drawRangeIndexParams,
+            this._uboHandler);
+        gl.frontFace(gl.CCW);
+
+        if (this._pickerDisplayer) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            this._pickerDisplayer.drawColorTexture();
+            this._selfSelect();
+        }
+        gl.enable(gl.DEPTH_TEST);
+
+    }
+
+    free() {
+        this._workerContact.free();
+        noRegisterGlobeProgramCache.releaseProgram(this.globe, TextureDemTriangles);
+
+    }
+}

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

@@ -0,0 +1,69 @@
+
+/**
+ * @module WebGLobePlugins/SemiPlugins/ShapeOnTerrain/TerrainPolygon
+ * @description
+ * Type definitions for TerrainPolygon plugin
+ * /
+ * 
+ */
+
+import { Color } from "../../../types";
+
+
+/**
+ * @type PolygonInput
+ * @description
+ * Represents the input structure for defining a polygon on terrain.
+ * Position starts with the shell vertices followed by hole vertices.
+ * @param vertices - A flat array of vertex coordinates (e.g., [x1, y1, x2, y2, ...]).
+ * @param holes - An array of indices indicating the start of each hole in the positions array.
+ * @param dimensions - The number of dimensions for each vertex (typically 2 for 2D coordinates).
+ */
+export type PolygonPluginInput = {
+    key: string;
+    geometry: { vertices: number[]; holes: number[] }[]
+    color?: Color;
+};
+
+export type TerrainPolygonOptions = {
+    pickable: boolean;
+    variativeColorsOn: boolean;
+    defaultColor: Color;
+    pickedColor: Color;
+    opacity: number;
+    showTesselationPoints: boolean;
+    pickedCallback?: (polygon: PolygonPluginInput | null) => void;
+}
+
+export type PolygonInput = PolygonPluginInput & { index: number };
+
+
+
+export type TrianglesMiddleData = {
+    key: string;
+    vertices: number[];
+    indices: number[];
+}
+
+export type BBOXZOOMDATA = {
+    minX: number,
+    minY: number,
+    maxX: number,
+    maxY: number,
+    zoom: number
+}[];
+
+export type WorkerInput = {
+    pickableState: boolean | undefined;
+    variativeColorsOn: boolean | undefined;
+    bboxes: BBOXZOOMDATA | null | undefined;
+    insertDeleteQueue: (PolygonPluginInput | string)[] | null | undefined;
+};
+
+export type WorkerOutput = {
+    vec3s: Float32Array;
+    indices: Uint32Array;
+    longLats: Float32Array;
+    pickIndices: Float32Array | null;
+    variativeColors: Float32Array | null;
+};

package/semiplugins/shell/bbox-renderer/index.ts

@@ -0,0 +1,2 @@
+import { BBOXGlobeShell } from './object'
+export { BBOXGlobeShell };