@pirireis/webglobeplugins 1.0.2 → 1.0.4

package/{semiplugins/shape-on-terrain/terrain-polygon/terrain-polygon.ts → webglobeplugins/semiplugins/shape-on-terrain/terrain-polygon/terrain-polygon.js}

@@ -1,265 +1,282 @@
-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);
-
-    }
-}
+import { WorkerContact } from "./data/worker-contact";
+import { TextureDemTriangles } from "../../../programs/polygon-on-globe/texture-dem-triangles";
+import { noRegisterGlobeProgramCache } from "../../../programs/programcache";
+import { PickerDisplayer } from "../../../util/picking/picker-displayer";
+import { IndexPolygonMap } from "./data/index-polygon-map";
+import { TestRecords } from "./test-records";
+export class TerrainPolygonSemiPlugin {
+    id;
+    globe = null;
+    _options = {
+        drawEdges: true,
+        pickable: false,
+        variativeColorsOn: false,
+        defaultColor: [0.5, 0.5, 1, 1],
+        pickedColor: [1, 0, 0, 1],
+        opacity: 1.0,
+        showTesselationPoints: false,
+    };
+    _workerContact = null;
+    _program = null;
+    _pickerDisplayer = null;
+    _indexPolygonMap = new IndexPolygonMap();
+    _lastPickedPolygon = null;
+    _elementArrayBuffer = null;
+    _vec3Buffer = null;
+    _pickIndexBuffer = null;
+    _variativeColorBuffer = null;
+    _mercatorXYBuffer = null;
+    _vao = null;
+    _uboHandler = null;
+    _uboForRealEdgeArcs = null;
+    _drawPointsRangeIndexParams = {
+        drawRange: {
+            first: 0,
+            count: 0,
+        },
+        drawMode: WebGL2RenderingContext.POINTS,
+        elementBufferIndexType: WebGL2RenderingContext.UNSIGNED_INT,
+        elementBuffer: WebGLBuffer = null,
+    };
+    _drawRealEdgeArcs = {
+        drawRange: {
+            first: 0,
+            count: 0,
+        },
+        drawMode: WebGL2RenderingContext.LINE_STRIP,
+        elementBufferIndexType: WebGL2RenderingContext.UNSIGNED_INT,
+        elementBuffer: WebGLBuffer = null,
+    };
+    _drawRangeIndexParams = {
+        drawRange: {
+            first: 0,
+            count: 0,
+        },
+        drawMode: WebGL2RenderingContext.TRIANGLES,
+        elementBufferIndexType: WebGL2RenderingContext.UNSIGNED_INT,
+        elementBuffer: WebGLBuffer = null,
+    };
+    constructor(id, options = {}) {
+        this.id = id;
+        this._options = { ...this._options, ...options };
+        console.log("TerrainPolygonSemiPlugin options:", this._options);
+    }
+    ;
+    init(globe, gl) {
+        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.drawEdges) {
+            this._uboForRealEdgeArcs = this._program.createUBO();
+            this._uboForRealEdgeArcs.updateSingle("defaultColor", new Float32Array([1, 1, 0, 1]));
+            this._uboForRealEdgeArcs.updateSingle("dontUseColor", new Float32Array([1]));
+            this._drawRealEdgeArcs.elementBuffer = gl.createBuffer();
+        }
+        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) => {
+            // console.log('TerrainPolygonSemiPlugin received data from worker', result);
+            this.setBuffers(result);
+        });
+        this._drawRangeIndexParams.elementBuffer = this._elementArrayBuffer;
+        this._drawPointsRangeIndexParams.elementBuffer = this._elementArrayBuffer;
+    }
+    insertBulk(polygons) {
+        // if (this._indexPolygonMap) {
+        let filteredPolygons = polygons.filter(inputCheck);
+        filteredPolygons = this._indexPolygonMap.insertBulk(filteredPolygons);
+        // }
+        this._workerContact.insertBulk(filteredPolygons);
+    }
+    deleteBulk(keys) {
+        this._workerContact.deleteBulk(keys);
+        this._indexPolygonMap.deleteBulk(keys);
+    }
+    setUniform(name, value) {
+        // 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[name] === value) {
+                return;
+            }
+            this._options[name] = value;
+        }
+        this._uboHandler.updateSingle(name, value);
+        this.globe.DrawRender();
+    }
+    setOpacity(opacity) {
+        if (this._options.opacity !== opacity) {
+            this._options.opacity = opacity;
+            this._uboHandler.updateSingle("opacity", new Float32Array([opacity]));
+            this._uboForRealEdgeArcs?.updateSingle("opacity", new Float32Array([opacity]));
+            this.globe.DrawRender();
+        }
+    }
+    setBuffers(data) {
+        const gl = this.globe.gl;
+        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);
+        }
+        if (this._options.drawEdges && data.realEdgeArcIndices) {
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._drawRealEdgeArcs.elementBuffer);
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data.realEdgeArcIndices, gl.STREAM_DRAW);
+            this._drawRealEdgeArcs.drawRange.count = data.realEdgeArcIndices.length;
+        }
+        else {
+            this._drawRealEdgeArcs.drawRange.count = 0;
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this._drawRangeIndexParams.drawRange.count = data.indices.length;
+        this._drawPointsRangeIndexParams.drawRange.count = data.indices.length;
+        this.globe.DrawRender();
+    }
+    getPickedPolygon() {
+        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;
+        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();
+        }
+        if (this._options.drawEdges) {
+            gl.disable(gl.DEPTH_TEST);
+            // gl.enable(gl.POLYGON_OFFSET_FILL);
+            // gl.polygonOffset(-3.0, -3.0);
+            this._program.draw(this._vao, this._drawRealEdgeArcs, this._uboForRealEdgeArcs);
+            // gl.disable(gl.POLYGON_OFFSET_FILL);
+        }
+        gl.enable(gl.DEPTH_TEST);
+    }
+    free() {
+        this._workerContact.free();
+        noRegisterGlobeProgramCache.releaseProgram(this.globe, TextureDemTriangles);
+    }
+    loadTest(recordName) {
+        if (!TestRecords.has(recordName)) {
+            console.warn(`Test record ${recordName} not found.`);
+            return;
+        }
+        else {
+            this.insertBulk(TestRecords.get(recordName));
+        }
+    }
+}
+function inputCheck(input) {
+    if (!input.geometry || !Array.isArray(input.geometry) || input.geometry.length === 0) {
+        console.warn("Invalid polygon input: geometry is required and must be a non-empty array.");
+        return false;
+    }
+    // lat and long should be in range
+    for (const geom of input.geometry) {
+        const vertices = geom.vertices;
+        for (let i = 0; i < vertices.length / 2; i++) {
+            const lon = vertices[i * 2];
+            const lat = vertices[i * 2 + 1];
+            if (lon < -180 || lon > 180 || lat < -90 || lat > 90) {
+                console.warn(`Invalid polygon input: longitude ${lon} or latitude ${lat} out of range.`);
+                return false;
+            }
+        }
+    }
+    return true;
+}

package/webglobeplugins/semiplugins/shape-on-terrain/terrain-polygon/test-records.js

@@ -0,0 +1,14 @@
+const rect2 = {
+    key: "2 rectangles",
+    geometry: [
+        {
+            vertices: [-5, -5, -5, 0, 0, 0, 0, -5],
+        },
+        {
+            vertices: [-15, -15, -15, -10, -10, -10, -10, -15],
+        }
+    ],
+};
+export const TestRecords = new Map([
+    ["2 rectangles", [rect2]],
+]);

package/webglobeplugins/semiplugins/shape-on-terrain/terrain-polygon/types.js

@@ -0,0 +1,8 @@
+/**
+ * @module WebGLobePlugins/SemiPlugins/ShapeOnTerrain/TerrainPolygon
+ * @description
+ * Type definitions for TerrainPolygon plugin
+ * /
+ *
+ */
+export {};

package/webglobeplugins/semiplugins/shell/bbox-renderer/index.js

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