@pirireis/webglobeplugins 1.0.7 → 1.0.8

package/package.json

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

package/programs/polygon-on-globe/texture-dem-triangles.js

@@ -212,7 +212,7 @@ export class TextureDemTriangles {
         if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
             drawOnTopBegin(gl);
         }
-        drawArrays(gl, gl.TRIANGLES, drawOptions);
+        drawArrays(gl, drawOptions.drawMode ?? gl.TRIANGLES, drawOptions);
         if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
             drawOnTopEnd(gl);
         }

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

@@ -4,6 +4,7 @@ import { noRegisterGlobeProgramCache } from "../../../programs/programcache";
 import { PickerDisplayer } from "../../../util/picking/picker-displayer";
 import { IndexPolygonMap } from "./data/index-polygon-map";
 import { TestRecords } from "./test-records";
+import { defaultblendfunction } from "../../../util/globe-default-gl-states";
 export class TerrainPolygonSemiPlugin {
     id;
     globe = null;
@@ -218,6 +219,8 @@ export class TerrainPolygonSemiPlugin {
     draw3D() {
         const gl = this.globe.gl;
         gl.disable(gl.DEPTH_TEST);
+        gl.enable(gl.BLEND);
+        defaultblendfunction(gl);
         // drawPoints 
         if (this._options.showTesselationPoints) {
             this._program.draw(this._vao, this._drawPointsRangeIndexParams, this._uboHandler);
@@ -280,3 +283,23 @@ function inputCheck(input) {
     }
     return true;
 }
+function getGlStates(gl) {
+    return {
+        depthTest: gl.isEnabled(gl.DEPTH_TEST),
+        cullFace: gl.isEnabled(gl.CULL_FACE),
+        blend: gl.isEnabled(gl.BLEND),
+        scissorTest: gl.isEnabled(gl.SCISSOR_TEST),
+        depthMask: gl.getParameter(gl.DEPTH_WRITEMASK),
+        colorMask: gl.getParameter(gl.COLOR_WRITEMASK),
+        frontFace: gl.getParameter(gl.FRONT_FACE),
+        viewport: gl.getParameter(gl.VIEWPORT),
+        scissorBox: gl.getParameter(gl.SCISSOR_BOX),
+        currentProgram: gl.getParameter(gl.CURRENT_PROGRAM),
+        vao: gl.getParameter(gl.VERTEX_ARRAY_BINDING),
+        arrayBuffer: gl.getParameter(gl.ARRAY_BUFFER_BINDING),
+        elementArrayBuffer: gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING),
+        framebuffer: gl.getParameter(gl.FRAMEBUFFER_BINDING),
+        activeTexture: gl.getParameter(gl.ACTIVE_TEXTURE),
+        texture2DArray: gl.getParameter(gl.TEXTURE_BINDING_2D_ARRAY),
+    };
+}

package/util/picking/picker-displayer copy.js

@@ -0,0 +1,176 @@
+/**
+ * add implicit texture display program for color
+ * add fence on query return and return id.
+*/
+import { textureOnCanvasProgramCache } from "../programs/draw-texture-on-canvas";
+import { fence } from "./fence";
+const ESCAPE_VALUE = -1;
+class PickerDisplayer {
+    globe;
+    gl;
+    colorTexture;
+    indexTexture;
+    fbo;
+    _pbo;
+    _pboSize;
+    displayer;
+    _inProgress;
+    _indexType; // R32I for Integer, R32F for Float
+    _typedArrayConstructor;
+    constructor(globe, indexType = "R32I") {
+        this.globe = globe;
+        this.gl = globe.gl;
+        const gl = this.gl;
+        this.colorTexture = gl.createTexture(); // bind to color attachment 0
+        this.indexTexture = gl.createTexture(); // bind to color attachment 1
+        this.fbo = gl.createFramebuffer();
+        if (indexType === "R32F" && this.gl.getExtension("EXT_color_buffer_float") === null) {
+            throw new Error("EXT_color_buffer_float extension is required for R32F index type.");
+        }
+        this._indexType = indexType;
+        if (indexType === "R32I") {
+            this._typedArrayConstructor = Int32Array;
+        }
+        else if (indexType === "R32F") {
+            this._typedArrayConstructor = Float32Array;
+        }
+        else {
+            throw new Error("Invalid index type. Must be 'R32I' or 'R32F'.");
+        }
+        this._pbo = undefined;
+        this._pboSize = 0;
+        this._inProgress = false;
+        this.resize();
+        this.displayer = textureOnCanvasProgramCache.get(this.gl);
+    }
+    resize(width = null, height = null) {
+        if (width === null || height === null) {
+            width = this.globe.api_ScrW();
+            height = this.globe.api_ScrH();
+        }
+        const { gl, colorTexture, indexTexture } = this;
+        gl.deleteTexture(colorTexture);
+        gl.deleteTexture(indexTexture);
+        const colorTextureNew = gl.createTexture();
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, colorTextureNew);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height);
+        const indexTextureNew = gl.createTexture();
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, indexTextureNew);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl[this._indexType], width, height); //  gl.R32I or gl.R32F
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        this.colorTexture = colorTextureNew;
+        this.indexTexture = indexTextureNew;
+    }
+    clearTextures() {
+        const { gl, colorTexture, indexTexture } = this;
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
+        if (this._indexType === "R32I") {
+            gl.clearBufferiv(gl.COLOR, 1, new Int32Array([-1, -1, -1, -1]));
+        }
+        else {
+            gl.clearBufferfv(gl.COLOR, 1, new Float32Array([-1, -1, -1, -1]));
+        }
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+        gl.clearBufferfv(gl.COLOR, 0, new Float32Array([0, 0, 0, 0]));
+    }
+    // call before drawing the scene with gl picker shader
+    bindFBO() {
+        const { gl, colorTexture, indexTexture, fbo } = this;
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this.indexTexture, 0);
+        gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);
+        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+        if (status !== gl.FRAMEBUFFER_COMPLETE) {
+            throw new Error(`Framebuffer is not complete: ${status.toString(16)}`);
+        }
+    }
+    // call after drawing the scene with gl picker shader
+    drawColorTexture() {
+        const { gl, colorTexture } = this;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.disable(gl.DEPTH_TEST);
+        this.displayer.draw(colorTexture);
+        gl.enable(gl.DEPTH_TEST);
+    }
+    pickXY(x, y, selectionPointFilling = 1, callback = () => { }) {
+        const size = Math.pow(1 + 2 * selectionPointFilling, 2);
+        return this._pick(size, x - selectionPointFilling, y - selectionPointFilling, 1 + 2 * selectionPointFilling, 1 + 2 * selectionPointFilling, callback);
+    }
+    pickBbox(left, top, right, bottom, callback) {
+        const size = (right - left) * (bottom - top);
+        return this._pick(size, left, top, right - left, bottom - top, callback);
+    }
+    _pick(size, startX, startY, lengthX, lengthY, callback) {
+        if (this._inProgress)
+            return false;
+        this._inProgress = true;
+        this._initHoldBuffer(size * 4);
+        const { gl, _pbo } = this;
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
+        this.bindFBO();
+        gl.readBuffer(gl.COLOR_ATTACHMENT1); // This is the attachment we want to read
+        const format = this._indexType === "R32I" ? gl.RED_INTEGER : gl.RED;
+        const type = this._indexType === "R32I" ? gl.INT : gl.FLOAT;
+        gl.readPixels(// This will read the pixels to the buffer asynchronously
+        startX, startY, lengthX, lengthY, format, type, 0);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+        fence(this.gl).then(() => {
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
+            // const data = new Int16Array(size);
+            const data = new this._typedArrayConstructor(size); // Int32Array or Float32Array
+            gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data);
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+            const result = this._pickFromBuffer(data, size);
+            callback(result);
+            // gl.deleteBuffer(pbo);
+            this._inProgress = false;
+        });
+        return true;
+    }
+    _pickFromBuffer(array, size) {
+        const selectedObjects = new Set();
+        for (let i = 0; i < size; i += 1) {
+            const id = array[i];
+            if (id !== ESCAPE_VALUE) {
+                selectedObjects.add(id);
+            }
+        }
+        return selectedObjects;
+    }
+    _initHoldBuffer(size) {
+        if (this._pbo && this._pboSize >= size) {
+            return;
+        }
+        const { gl } = this;
+        const pbo = gl.createBuffer();
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbo);
+        gl.bufferData(gl.PIXEL_PACK_BUFFER, size, gl.STREAM_READ);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+        this._pboSize = size;
+        if (this._pbo !== undefined) {
+            gl.deleteBuffer(this._pbo);
+        }
+        this._pbo = pbo;
+    }
+    free() {
+        const { gl, colorTexture, indexTexture, fbo } = this;
+        gl.deleteTexture(colorTexture);
+        gl.deleteTexture(indexTexture);
+        gl.deleteFramebuffer(fbo);
+        if (this._pbo) {
+            gl.deleteBuffer(this._pbo);
+        }
+        textureOnCanvasProgramCache.release(this.gl);
+    }
+}
+export { PickerDisplayer };

package/util/picking/picker-displayer.js

@@ -43,48 +43,108 @@ class PickerDisplayer {
         this.resize();
         this.displayer = textureOnCanvasProgramCache.get(this.gl);
     }
+    _saveState() {
+        const gl = this.gl;
+        const framebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+        const pixelPackBuffer = gl.getParameter(gl.PIXEL_PACK_BUFFER_BINDING);
+        const readBuffer = gl.getParameter(gl.READ_BUFFER);
+        const depthTestEnabled = gl.isEnabled(gl.DEPTH_TEST);
+        const activeTexture = gl.getParameter(gl.ACTIVE_TEXTURE);
+        gl.activeTexture(gl.TEXTURE0);
+        const tex2D_unit0 = gl.getParameter(gl.TEXTURE_BINDING_2D);
+        gl.activeTexture(gl.TEXTURE1);
+        const tex2D_unit1 = gl.getParameter(gl.TEXTURE_BINDING_2D);
+        // Restore active texture last
+        gl.activeTexture(activeTexture);
+        const drawBuffer0 = gl.getParameter(gl.DRAW_BUFFER0);
+        const drawBuffer1 = gl.getParameter(gl.DRAW_BUFFER1);
+        return {
+            framebuffer,
+            pixelPackBuffer,
+            readBuffer,
+            depthTestEnabled,
+            activeTexture,
+            tex2D_unit0,
+            tex2D_unit1,
+            drawBuffer0,
+            drawBuffer1,
+        };
+    }
+    _restoreState(s) {
+        const gl = this.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, s.framebuffer);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, s.pixelPackBuffer);
+        gl.readBuffer(s.readBuffer);
+        if (s.depthTestEnabled)
+            gl.enable(gl.DEPTH_TEST);
+        else
+            gl.disable(gl.DEPTH_TEST);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, s.tex2D_unit0);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, s.tex2D_unit1);
+        gl.activeTexture(s.activeTexture);
+        // drawBuffers restore: default framebuffer expects BACK/NONE (implementation details vary),
+        // so only restore the number of buffers that makes sense for the bound FB.
+        if (s.framebuffer === null) {
+            gl.drawBuffers([s.drawBuffer0]);
+        }
+        else {
+            gl.drawBuffers([s.drawBuffer0, s.drawBuffer1]);
+        }
+    }
     resize(width = null, height = null) {
         if (width === null || height === null) {
             width = this.globe.api_ScrW();
             height = this.globe.api_ScrH();
         }
-        const { gl, colorTexture, indexTexture } = this;
-        gl.deleteTexture(colorTexture);
-        gl.deleteTexture(indexTexture);
-        const colorTextureNew = gl.createTexture();
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, colorTextureNew);
-        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height);
-        const indexTextureNew = gl.createTexture();
-        gl.activeTexture(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, indexTextureNew);
-        gl.texStorage2D(gl.TEXTURE_2D, 1, gl[this._indexType], width, height); //  gl.R32I or gl.R32F
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        this.colorTexture = colorTextureNew;
-        this.indexTexture = indexTextureNew;
+        const gl = this.gl;
+        const saved = this._saveState();
+        try {
+            const { colorTexture, indexTexture } = this;
+            gl.deleteTexture(colorTexture);
+            gl.deleteTexture(indexTexture);
+            const colorTextureNew = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, colorTextureNew);
+            gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            const indexTextureNew = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, indexTextureNew);
+            gl.texStorage2D(gl.TEXTURE_2D, 1, gl[this._indexType], width, height); // gl.R32I or gl.R32F
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            this.colorTexture = colorTextureNew;
+            this.indexTexture = indexTextureNew;
+        }
+        finally {
+            this._restoreState(saved);
+        }
     }
     clearTextures() {
-        const { gl, colorTexture, indexTexture } = this;
-        gl.activeTexture(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
-        if (this._indexType === "R32I") {
-            gl.clearBufferiv(gl.COLOR, 1, new Int32Array([-1, -1, -1, -1]));
+        const gl = this.gl;
+        const saved = this._saveState();
+        try {
+            // Must clear the *FBO attachments*, not "textures".
+            this.bindFBO();
+            if (this._indexType === "R32I") {
+                gl.clearBufferiv(gl.COLOR, 1, new Int32Array([-1, -1, -1, -1]));
+            }
+            else {
+                gl.clearBufferfv(gl.COLOR, 1, new Float32Array([-1, -1, -1, -1]));
+            }
+            gl.clearBufferfv(gl.COLOR, 0, new Float32Array([0, 0, 0, 0]));
         }
-        else {
-            gl.clearBufferfv(gl.COLOR, 1, new Float32Array([-1, -1, -1, -1]));
+        finally {
+            this._restoreState(saved);
         }
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
-        gl.clearBufferfv(gl.COLOR, 0, new Float32Array([0, 0, 0, 0]));
     }
     // call before drawing the scene with gl picker shader
     bindFBO() {
-        const { gl, colorTexture, indexTexture, fbo } = this;
-        gl.activeTexture(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+        const { gl, fbo } = this;
         gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+        // No need to bind textures or change ACTIVE_TEXTURE for framebufferTexture2D.
         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0);
         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this.indexTexture, 0);
         gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);
@@ -95,11 +155,16 @@ class PickerDisplayer {
     }
     // call after drawing the scene with gl picker shader
     drawColorTexture() {
-        const { gl, colorTexture } = this;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        gl.disable(gl.DEPTH_TEST);
-        this.displayer.draw(colorTexture);
-        gl.enable(gl.DEPTH_TEST);
+        const gl = this.gl;
+        const saved = this._saveState();
+        try {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.disable(gl.DEPTH_TEST);
+            this.displayer.draw(this.colorTexture);
+        }
+        finally {
+            this._restoreState(saved);
+        }
     }
     pickXY(x, y, selectionPointFilling = 1, callback = () => { }) {
         const size = Math.pow(1 + 2 * selectionPointFilling, 2);
@@ -113,29 +178,44 @@ class PickerDisplayer {
         if (this._inProgress)
             return false;
         this._inProgress = true;
-        this._initHoldBuffer(size * 4);
-        const { gl, _pbo } = this;
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
-        this.bindFBO();
-        gl.readBuffer(gl.COLOR_ATTACHMENT1); // This is the attachment we want to read
-        const format = this._indexType === "R32I" ? gl.RED_INTEGER : gl.RED;
-        const type = this._indexType === "R32I" ? gl.INT : gl.FLOAT;
-        gl.readPixels(// This will read the pixels to the buffer asynchronously
-        startX, startY, lengthX, lengthY, format, type, 0);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-        fence(this.gl).then(() => {
+        const gl = this.gl;
+        const saved = this._saveState();
+        try {
+            this._initHoldBuffer(size * 4);
+            const { _pbo } = this;
             gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
-            // const data = new Int16Array(size);
-            const data = new this._typedArrayConstructor(size); // Int32Array or Float32Array
-            gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data);
-            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-            const result = this._pickFromBuffer(data, size);
-            callback(result);
-            // gl.deleteBuffer(pbo);
+            this.bindFBO();
+            gl.readBuffer(gl.COLOR_ATTACHMENT1);
+            const format = this._indexType === "R32I" ? gl.RED_INTEGER : gl.RED;
+            const type = this._indexType === "R32I" ? gl.INT : gl.FLOAT;
+            gl.readPixels(startX, startY, lengthX, lengthY, format, type, 0);
+            // Restore state immediately after issuing readPixels (PBO keeps data for later getBufferSubData)
+            this._restoreState(saved);
+            fence(this.gl)
+                .then(() => {
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
+                const data = new this._typedArrayConstructor(size);
+                gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data);
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+                const result = this._pickFromBuffer(data, size);
+                callback(result);
+            })
+                .catch(() => {
+                // Swallow or rethrow based on your app needs; important is not to wedge _inProgress.
+            })
+                .finally(() => {
+                this._inProgress = false;
+            });
+            return true;
+        }
+        catch {
+            this._restoreState(saved);
             this._inProgress = false;
-        });
-        return true;
+            throw new Error("Picking failed.");
+        }
+        finally {
+            this._restoreState(saved);
+        }
     }
     _pickFromBuffer(array, size) {
         const selectedObjects = new Set();