@pirireis/webglobeplugins 1.1.10 → 1.1.12

package/package.json

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

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

@@ -5,6 +5,7 @@ const _workers = [];
 const _workerMap = new Map();
 let _maxWorkers = 4;
 let _nextWorkerIndex = 0;
+let _stateChanged = false;
 let _pickableState;
 let _arcState;
 let _variativeColorsOn;
@@ -174,13 +175,16 @@ function mergeAndSendResults() {
 function sendToSubWorker(wrapper) {
     if (wrapper.inProgress)
         return false;
-    if (wrapper.insertDeleteQueue.length === 0 && wrapper.lastBBOXData === null)
+    if (wrapper.insertDeleteQueue.length === 0 &&
+        wrapper.lastBBOXData === null &&
+        !_stateChanged)
         return false;
+    _stateChanged = false;
     wrapper.inProgress = true;
     wrapper.worker.postMessage({
-        pickableState: undefined,
-        variativeColorsOn: undefined,
-        arcState: undefined,
+        pickableState: _pickableState,
+        variativeColorsOn: _variativeColorsOn,
+        arcState: _arcState,
         bboxes: wrapper.lastBBOXData,
         insertDeleteQueue: wrapper.insertDeleteQueue,
     });
@@ -215,6 +219,18 @@ self.onmessage = (event) => {
         for (const w of _workers)
             w.lastBBOXData = bboxes;
     }
+    if (arcState !== undefined && arcState !== _arcState) {
+        _arcState = arcState;
+        _stateChanged = true;
+    }
+    if (pickableState !== undefined && pickableState !== _pickableState) {
+        _pickableState = pickableState;
+        _stateChanged = true;
+    }
+    if (variativeColorsOn !== undefined && variativeColorsOn !== _variativeColorsOn) {
+        _variativeColorsOn = variativeColorsOn;
+        _stateChanged = true;
+    }
     if (insertDeleteQueue && insertDeleteQueue.length > 0) {
         if (insertDeleteQueue[0] === "__CLEAR_ALL_ITEMS__") {
             _workerMap.clear();

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

@@ -46,6 +46,18 @@ export class WorkerContact {
         this.demTextureManager.unregister(this);
         this._masterWorker.terminate();
     }
+    setDrawEdgesState(state) {
+        this._options.drawEdges = state;
+        this._masterWorker.postMessage({
+            arcState: state
+        });
+    }
+    setPickableState(state) {
+        this._options.pickable = state;
+        this._masterWorker.postMessage({
+            pickableState: state
+        });
+    }
     insertBulk(polygons) {
         this._masterWorker.postMessage({
             insertDeleteQueue: polygons

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

@@ -12,8 +12,17 @@ export class TerrainPolygonSemiPlugin {
         drawEdges: true,
         pickable: false,
         variativeColorsOn: false,
-        defaultColor: [0.5, 0.5, 1, 1],
-        pickedColor: [1, 0, 0, 1],
+        polygonStyle: {
+            defaultColor: [0.5, 0.5, 1, 1],
+            pickedColor: [1, 0, 0, 1],
+            opacity: 1.0,
+        },
+        edgeStyle: {
+            defaultColor: [1, 1, 0, 1],
+            pickedColor: [1, 0, 0, 1],
+            opacity: 1.0,
+        },
+        // Global opacity multiplier applied on top of style opacities
         opacity: 1.0,
         showTesselationPoints: false,
     };
@@ -37,7 +46,7 @@ export class TerrainPolygonSemiPlugin {
         },
         drawMode: WebGL2RenderingContext.POINTS,
         elementBufferIndexType: WebGL2RenderingContext.UNSIGNED_INT,
-        elementBuffer: WebGLBuffer = null,
+        elementBuffer: null,
     };
     _drawRealEdgeArcs = {
         drawRange: {
@@ -46,7 +55,7 @@ export class TerrainPolygonSemiPlugin {
         },
         drawMode: WebGL2RenderingContext.LINE_STRIP,
         elementBufferIndexType: WebGL2RenderingContext.UNSIGNED_INT,
-        elementBuffer: WebGLBuffer = null,
+        elementBuffer: null,
     };
     _drawRangeIndexParams = {
         drawRange: {
@@ -55,14 +64,31 @@ export class TerrainPolygonSemiPlugin {
         },
         drawMode: WebGL2RenderingContext.TRIANGLES,
         elementBufferIndexType: WebGL2RenderingContext.UNSIGNED_INT,
-        elementBuffer: WebGLBuffer = null,
+        elementBuffer: null,
     };
     constructor(id, options = {}) {
         this.id = id;
-        this._options = { ...this._options, ...options };
+        this._options = {
+            ...this._options,
+            ...options,
+            polygonStyle: {
+                ...this._options.polygonStyle,
+                ...(options.polygonStyle ?? {}),
+            },
+            edgeStyle: {
+                ...this._options.edgeStyle,
+                ...(options.edgeStyle ?? {}),
+            },
+        };
         console.log("TerrainPolygonSemiPlugin options:", this._options);
     }
     ;
+    _effectivePolygonOpacity() {
+        return this._options.opacity * this._options.polygonStyle.opacity;
+    }
+    _effectiveEdgeOpacity() {
+        return this._options.opacity * this._options.edgeStyle.opacity;
+    }
     init(globe, gl) {
         this.globe = globe;
         this._drawRangeIndexParams.drawMode = globe.gl.TRIANGLES;
@@ -72,18 +98,19 @@ export class TerrainPolygonSemiPlugin {
         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));
+        this._uboHandler.updateSingle("opacity", new Float32Array([this._effectivePolygonOpacity()]));
+        this._uboHandler.updateSingle("defaultColor", new Float32Array(this._options.polygonStyle.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));
+            this._uboHandler.updateSingle("pickedColor", new Float32Array(this._options.polygonStyle.pickedColor));
         }
         if (this._options.drawEdges) {
             this._uboForRealEdgeArcs = this._program.createUBO();
-            this._uboForRealEdgeArcs.updateSingle("defaultColor", new Float32Array([1, 1, 0, 1]));
+            this._uboForRealEdgeArcs.updateSingle("defaultColor", new Float32Array(this._options.edgeStyle.defaultColor));
             this._uboForRealEdgeArcs.updateSingle("useDefaultColor", new Float32Array([1]));
+            this._uboForRealEdgeArcs.updateSingle("opacity", new Float32Array([this._effectiveEdgeOpacity()]));
             this._drawRealEdgeArcs.elementBuffer = gl.createBuffer();
         }
         if (this._options.variativeColorsOn) {
@@ -137,31 +164,118 @@ export class TerrainPolygonSemiPlugin {
         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;
-        }
+        const isStyleKey = name === "defaultColor" || name === "pickedColor" || name === "opacity";
         if (target === "polygon") {
-            this._uboHandler.updateSingle(name, value);
+            if (isStyleKey) {
+                const prev = this._options.polygonStyle[name];
+                if (prev === value)
+                    return;
+                this._options.polygonStyle[name] = value;
+                if (name === "opacity") {
+                    this._uboHandler.updateSingle("opacity", new Float32Array([this._effectivePolygonOpacity()]));
+                }
+                else {
+                    this._uboHandler.updateSingle(name, value);
+                }
+            }
+            else {
+                this._uboHandler.updateSingle(name, value);
+            }
         }
         else if (target === "edgeArc") {
-            this._uboForRealEdgeArcs?.updateSingle(name, value);
+            if (isStyleKey) {
+                const prev = this._options.edgeStyle[name];
+                if (prev === value)
+                    return;
+                this._options.edgeStyle[name] = value;
+                if (name === "opacity") {
+                    this._uboForRealEdgeArcs?.updateSingle("opacity", new Float32Array([this._effectiveEdgeOpacity()]));
+                }
+                else {
+                    this._uboForRealEdgeArcs?.updateSingle(name, value);
+                }
+            }
+            else {
+                this._uboForRealEdgeArcs?.updateSingle(name, value);
+            }
         }
         else {
             console.warn(`Unknown target ${target} for setUniform, must be "polygon" or "edgeArc"`);
         }
         this.globe.DrawRender();
     }
+    setDrawEdgesState(state, options = {}) {
+        const oldState = this._options.drawEdges;
+        if (oldState === state)
+            return;
+        if (options?.defaultColor) {
+            this._options.edgeStyle.defaultColor = options.defaultColor;
+        }
+        if (options?.pickedColor) {
+            this._options.edgeStyle.pickedColor = options.pickedColor;
+        }
+        if (options?.opacity !== undefined) {
+            this._options.edgeStyle.opacity = options.opacity;
+        }
+        if (oldState === false && state === true) {
+            this._uboForRealEdgeArcs = this._program.createUBO();
+            this._uboForRealEdgeArcs.updateSingle("defaultColor", new Float32Array(this._options.edgeStyle.defaultColor));
+            this._uboForRealEdgeArcs.updateSingle("useDefaultColor", new Float32Array([1]));
+            this._uboForRealEdgeArcs.updateSingle("opacity", new Float32Array([this._effectiveEdgeOpacity()]));
+            this._drawRealEdgeArcs.elementBuffer = this.globe.gl.createBuffer();
+        }
+        else if (oldState === true && state === false) {
+            this._uboForRealEdgeArcs?.free();
+            this._uboForRealEdgeArcs = null;
+            this.globe.gl.deleteBuffer(this._drawRealEdgeArcs.elementBuffer);
+            this._drawRealEdgeArcs.elementBuffer = null;
+        }
+        this._workerContact.setDrawEdgesState(state);
+        this._options.drawEdges = state;
+        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._uboHandler.updateSingle("opacity", new Float32Array([this._effectivePolygonOpacity()]));
+            this._uboForRealEdgeArcs?.updateSingle("opacity", new Float32Array([this._effectiveEdgeOpacity()]));
             this.globe.DrawRender();
         }
     }
+    setPickableState(state) {
+        const oldState = this._options.pickable;
+        if (oldState === state)
+            return;
+        if (oldState === false && state === true) {
+            // this._pickIndexBuffer = this.globe.gl.createBuffer();
+            this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([1.0]));
+            this._uboHandler.updateSingle("pickedColor", new Float32Array(this._options.polygonStyle.pickedColor));
+            // this._pickerDisplayer = new PickerDisplayer(this.globe, "R32I");
+        }
+        else if (oldState === true && state === false) {
+            // this.globe.gl.deleteBuffer(this._pickIndexBuffer!);
+            // this._pickIndexBuffer = null;
+            this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([0.0]));
+            // this._pickerDisplayer?.free();
+            // this._pickerDisplayer = null;
+            // this._lastPickedPolygon = null;
+        }
+        this._options.pickable = state;
+        this._workerContact.setPickableState(state);
+        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;
+    }
+    getPolygon(key) {
+        const index = this._indexPolygonMap['_polygonKeyMap'].get(key);
+        if (index === undefined)
+            return null;
+        return this._indexPolygonMap.get(index);
+    }
     setBuffers(data) {
         const gl = this.globe.gl;
         const posVertexCount = Math.floor(data.vec3s.length / 3);
@@ -175,26 +289,28 @@ export class TerrainPolygonSemiPlugin {
         }
         // Guard against invalid indices referencing beyond uploaded attribute buffers.
         // This prevents ANGLE "Vertex buffer is not big enough for the draw call" errors.
-        let maxTriangleIndex = -1;
-        for (let i = 0; i < data.indices.length; i++) {
-            const v = data.indices[i];
-            if (v > maxTriangleIndex)
-                maxTriangleIndex = v;
-        }
-        const trianglesInvalid = safeVertexCount === 0 || maxTriangleIndex >= safeVertexCount;
-        if (trianglesInvalid) {
-            console.warn("TerrainPolygonSemiPlugin: skipping draw due to invalid vertex/index sizing", {
-                posVertexCount,
-                xyVertexCount,
-                safeVertexCount,
-                indicesLength: data.indices.length,
-                maxTriangleIndex,
-                pickIndicesLength: data.pickIndices?.length ?? null,
-                variativeColorsLength: data.variativeColors?.length ?? null,
-            });
-            this._drawRangeIndexParams.drawRange.count = 0;
-            this._drawPointsRangeIndexParams.drawRange.count = 0;
-        }
+        // let maxTriangleIndex = -1;
+        // // for (let i = 0; i < data.indices.length; i++) {
+        // //     const v = data.indices[i];
+        // //     if (v > maxTriangleIndex) maxTriangleIndex = v;
+        // // }
+        // const trianglesInvalid = safeVertexCount === 0 || maxTriangleIndex >= safeVertexCount;
+        // if (trianglesInvalid) {
+        //     console.warn(
+        //         "TerrainPolygonSemiPlugin: skipping draw due to invalid vertex/index sizing",
+        //         {
+        //             posVertexCount,
+        //             xyVertexCount,
+        //             safeVertexCount,
+        //             indicesLength: data.indices.length,
+        //             maxTriangleIndex,
+        //             pickIndicesLength: data.pickIndices?.length ?? null,
+        //             variativeColorsLength: data.variativeColors?.length ?? null,
+        //         }
+        //     );
+        //     this._drawRangeIndexParams.drawRange.count = 0;
+        //     this._drawPointsRangeIndexParams.drawRange.count = 0;
+        // }
         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);
@@ -240,18 +356,6 @@ export class TerrainPolygonSemiPlugin {
         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;
-    }
-    getPolygon(key) {
-        const index = this._indexPolygonMap['_polygonKeyMap'].get(key);
-        if (index === undefined)
-            return null;
-        return this._indexPolygonMap.get(index);
-    }
     _selfSelect() {
         const { globe, _pickerDisplayer } = this;
         const pos = globe.api_GetMousePos();
@@ -295,7 +399,7 @@ export class TerrainPolygonSemiPlugin {
         if (this._options.showTesselationPoints) {
             this._program.draw(this._vao, this._drawPointsRangeIndexParams, this._uboHandler);
         }
-        if (this._pickerDisplayer) {
+        if (this._pickerDisplayer && this._options.pickable) {
             this._pickerDisplayer.bindFBO();
             this._pickerDisplayer.clearTextures();
             // gl.enable(gl.DEPTH_TEST);
@@ -303,7 +407,7 @@ export class TerrainPolygonSemiPlugin {
         gl.frontFace(gl.CW);
         this._program.draw(this._vao, this._drawRangeIndexParams, this._uboHandler);
         gl.frontFace(gl.CCW);
-        if (this._pickerDisplayer) {
+        if (this._pickerDisplayer && this._options.pickable) {
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
             this._pickerDisplayer.drawColorTexture();
             this._selfSelect();