@pirireis/webglobeplugins 1.1.12 → 1.1.14

package/package.json

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

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

@@ -14,15 +14,16 @@ const uniformBindingPoints = {
     dem: 2,
     selection: 3,
 };
-export const IndexAttributeEscapeValue = -1;
+// last value of uint16 is 65535
+export const IndexAttributeEscapeValue = 65535;
 const styleBlockManager = new UniformBlockManager('Style', [
     { name: "defaultColor", type: "vec4", value: new Float32Array([0.0, 0.0, 0.0, 0.0]) },
     { name: "pickedColor", type: "vec4", value: new Float32Array([0, 0, 0, 0]) },
     { name: "u_pointSize", type: "float", value: new Float32Array([6.0]) },
     { name: "opacity", type: "float", value: new Float32Array([1.0]) },
-    { name: "private_isPickedOn", type: "float", value: new Float32Array([0]) },
-    { name: "private_pickedIndex", type: "float", value: new Float32Array([0]) },
-    { name: "useDefaultColor", type: "float", value: new Float32Array([0]) },
+    { name: "private_isPickedOn", type: "bool", value: new Float32Array([0]) },
+    { name: "private_pickedIndex", type: "uint", value: new Uint32Array([0]) },
+    { name: "useDefaultColor", type: "bool", value: new Float32Array([0]) },
 ], uniformBindingPoints.style);
 const vertexShaderSource = `#version 300 es
 #pragma vscode_glsllint_stage : vert
@@ -39,13 +40,13 @@ ${DEM_TEXTURE_BLOCK_STRING}
 
 in vec3 a_position;
 in vec2 a_xy;
-in float a_index;
+in uint a_index;
 in uvec4 a_color;
 
 ${styleBlockManager.glslCode()}
 
 out vec4 v_color;
-flat out int v_index;
+flat out uint v_index;
 
 ${relativeBBoxPositionRadian}
 
@@ -62,7 +63,7 @@ void main() {
     );
 
     // a_color.a == 255u is reserved as "no per-vertex color" sentinel.
-    v_color = (a_color.a == 255u || useDefaultColor == 1.0) ? defaultColor : decodedColor;
+    v_color = (a_color.a == 255u || useDefaultColor == true) ? defaultColor : decodedColor;
 
     if (is3D == true) {
         for (int i = 0; i < 6; i++) {
@@ -87,11 +88,11 @@ void main() {
         gl_Position = mercatorXYToGLPosition(mercatorXY);
     }
 
-    if (private_isPickedOn ==  1.0){
+    if (private_isPickedOn ==  true){
         if (a_index == private_pickedIndex) {
             v_color = pickedColor;
         }
-        v_index = int(a_index + 0.5); // +0.5 to avoid rounding issues
+        v_index = a_index;
     }
 
     
@@ -109,9 +110,9 @@ precision highp int;
 
 
 in vec4 v_color; // color from vertex shader
-flat in int v_index; // index from vertex shader
+flat in uint v_index; // index from vertex shader
 layout(location = 0) out vec4 outColor;
-layout(location = 1) out int outIndex;
+layout(location = 1) out uint outIndex;
 
 void main() {
     outColor = v_color;
@@ -177,13 +178,11 @@ export class TextureDemTriangles {
         attributeLoader(this.gl, pos3dBufferInfo, this.locations.attributes.a_position, 3);
         attributeLoader(this.gl, longLatBufferInfo, this.locations.attributes.a_xy, 2);
         attributeLoader(this.gl, indexBufferInfo, this.locations.attributes.a_index, 1, {
+            dataType: "uint16",
             escapeValues: [IndexAttributeEscapeValue],
-            normalized: false,
         });
         attributeLoader(this.gl, variativeColorBuffer, this.locations.attributes.a_color, 4, {
-            type: this.gl.UNSIGNED_BYTE,
-            integer: true,
-            integerUnsigned: true,
+            dataType: "uint8",
             escapeValues: [0, 0, 0, 255]
         });
         this.gl.bindVertexArray(null);

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

@@ -95,7 +95,7 @@ function mergeAndSendResults() {
         indices: new Uint32Array(totalIndices),
         longLats: new Float32Array(totalLongLats),
         realEdgeArcIndices: _arcState && totalRealEdgeArcIndices > 0 ? new Uint32Array(totalRealEdgeArcIndices) : null,
-        pickIndices: totalPickIndices > 0 ? new Float32Array(totalPickIndices) : null,
+        pickIndices: totalPickIndices > 0 ? new Uint16Array(totalPickIndices) : null,
         variativeColors: totalVariativeColors > 0 ? new Uint8Array(totalVariativeColors) : null,
     };
     // Sentinel/header (as in master-worker.js)

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

@@ -106,7 +106,7 @@ self.onmessage = (event) => {
             longLats: new Float32Array((counter / 3) * 2),
             indices: new Uint32Array(indexCounter),
             realEdgeArcIndices: _arcState ? new Uint32Array(totalArcCount) : null,
-            pickIndices: _pickableState ? new Float32Array(counter / 3) : null,
+            pickIndices: _pickableState ? new Uint16Array(counter / 3) : null,
             variativeColors: _variativeColorsOnState ? new Uint8Array((counter / 3) * 4) : null,
         };
         let currentVertexOffset = 0;

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

@@ -1,5 +1,5 @@
 import { WorkerContact } from "./data/worker-contact";
-import { TextureDemTriangles } from "../../../programs/polygon-on-globe/texture-dem-triangles";
+import { TextureDemTriangles, IndexAttributeEscapeValue } 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";
@@ -11,16 +11,19 @@ export class TerrainPolygonSemiPlugin {
     _options = {
         drawEdges: true,
         pickable: false,
+        pickablePause: false,
         variativeColorsOn: false,
         polygonStyle: {
             defaultColor: [0.5, 0.5, 1, 1],
             pickedColor: [1, 0, 0, 1],
             opacity: 1.0,
+            useDefaultColor: false,
         },
         edgeStyle: {
             defaultColor: [1, 1, 0, 1],
             pickedColor: [1, 0, 0, 1],
             opacity: 1.0,
+            useDefaultColor: true,
         },
         // Global opacity multiplier applied on top of style opacities
         opacity: 1.0,
@@ -83,11 +86,16 @@ export class TerrainPolygonSemiPlugin {
         console.log("TerrainPolygonSemiPlugin options:", this._options);
     }
     ;
-    _effectivePolygonOpacity() {
-        return this._options.opacity * this._options.polygonStyle.opacity;
-    }
-    _effectiveEdgeOpacity() {
-        return this._options.opacity * this._options.edgeStyle.opacity;
+    _effectiveOpacity(target) {
+        if (target === "polygon") {
+            return new Float32Array([this._options.opacity * this._options.polygonStyle.opacity]);
+        }
+        else if (target === "edgeArc") {
+            return new Float32Array([this._options.opacity * this._options.edgeStyle.opacity]);
+        }
+        else {
+            throw new Error(`Unknown target ${target} for _effectiveOpacity, must be "polygon" or "edgeArc"`);
+        }
     }
     init(globe, gl) {
         this.globe = globe;
@@ -98,11 +106,11 @@ export class TerrainPolygonSemiPlugin {
         this._vec3Buffer = gl.createBuffer();
         this._mercatorXYBuffer = gl.createBuffer();
         this._uboHandler = this._program.createUBO();
-        this._uboHandler.updateSingle("opacity", new Float32Array([this._effectivePolygonOpacity()]));
+        this._uboHandler.updateSingle("opacity", this._effectiveOpacity("polygon"));
         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._pickerDisplayer = new PickerDisplayer(this.globe, "R16UI");
             this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([1.0]));
             this._uboHandler.updateSingle("pickedColor", new Float32Array(this._options.polygonStyle.pickedColor));
         }
@@ -110,7 +118,7 @@ export class TerrainPolygonSemiPlugin {
             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._uboForRealEdgeArcs.updateSingle("opacity", this._effectiveOpacity("edgeArc"));
             this._drawRealEdgeArcs.elementBuffer = gl.createBuffer();
         }
         if (this._options.variativeColorsOn) {
@@ -135,7 +143,6 @@ export class TerrainPolygonSemiPlugin {
         } : 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;
@@ -164,64 +171,45 @@ export class TerrainPolygonSemiPlugin {
         if (name.startsWith("private_")) {
             throw new Error(`Cannot set private uniform ${name}`);
         }
-        const isStyleKey = name === "defaultColor" || name === "pickedColor" || name === "opacity";
+        const isStyleKey = name === "defaultColor" || name === "pickedColor" || name === "opacity" || name === "useDefaultColor";
+        let targetUBO;
         if (target === "polygon") {
-            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);
-            }
+            targetUBO = this._uboHandler;
         }
         else if (target === "edgeArc") {
-            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);
-                }
+            targetUBO = this._uboForRealEdgeArcs;
+        }
+        else {
+            console.warn(`Unknown target ${target} for setUniform, must be "polygon" or "edgeArc"`);
+            return;
+        }
+        if (isStyleKey) {
+            const prev = this._options.polygonStyle[name];
+            if (prev === value)
+                return;
+            this._options.polygonStyle[name] = value;
+            if (name === "opacity") {
+                targetUBO.updateSingle("opacity", this._effectiveOpacity(target));
             }
             else {
-                this._uboForRealEdgeArcs?.updateSingle(name, value);
+                targetUBO.updateSingle(name, value);
             }
         }
         else {
-            console.warn(`Unknown target ${target} for setUniform, must be "polygon" or "edgeArc"`);
+            targetUBO.updateSingle(name, value);
         }
         this.globe.DrawRender();
     }
-    setDrawEdgesState(state, options = {}) {
+    setDrawEdgesState(state) {
         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._uboForRealEdgeArcs.updateSingle("useDefaultColor", new Float32Array([this._options.edgeStyle.useDefaultColor ? 1 : 0]));
+            this._uboForRealEdgeArcs.updateSingle("pickedColor", new Float32Array(this._options.edgeStyle.pickedColor));
+            this._uboForRealEdgeArcs.updateSingle("opacity", this._effectiveOpacity("edgeArc"));
             this._drawRealEdgeArcs.elementBuffer = this.globe.gl.createBuffer();
         }
         else if (oldState === true && state === false) {
@@ -237,28 +225,42 @@ export class TerrainPolygonSemiPlugin {
     setOpacity(opacity) {
         if (this._options.opacity !== opacity) {
             this._options.opacity = opacity;
-            this._uboHandler.updateSingle("opacity", new Float32Array([this._effectivePolygonOpacity()]));
-            this._uboForRealEdgeArcs?.updateSingle("opacity", new Float32Array([this._effectiveEdgeOpacity()]));
+            this._uboHandler.updateSingle("opacity", this._effectiveOpacity("polygon"));
+            this._uboForRealEdgeArcs?.updateSingle("opacity", this._effectiveOpacity("edgeArc"));
             this.globe.DrawRender();
         }
     }
+    setPausePickableState(state) {
+        if (this._options.pickable === false) {
+            throw new Error("TerrainPolygonSemiPlugin is not pickable. Set pickable option to true on construction to enable picking.");
+        }
+        const oldState = this._options.pickablePause;
+        if (oldState === state)
+            return;
+        this._options.pickablePause = state;
+        // dont initialize anything. just set private_isPickedOn uniform 
+        this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([state ? 0.0 : 1.0]));
+        this.globe.DrawRender();
+    }
     setPickableState(state) {
+        throw new Error("setPickableState is buggy. use setPausePickableState instead.");
         const oldState = this._options.pickable;
         if (oldState === state)
             return;
         if (oldState === false && state === true) {
-            // this._pickIndexBuffer = this.globe.gl.createBuffer();
+            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");
+            this._pickerDisplayer = new PickerDisplayer(this.globe, "R32I");
         }
         else if (oldState === true && state === false) {
-            // this.globe.gl.deleteBuffer(this._pickIndexBuffer!);
-            // this._pickIndexBuffer = null;
+            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._uboHandler.updateSingle("private_pickedIndex", new Float32Array([-1]));
+            this._pickerDisplayer?.free();
+            this._pickerDisplayer = null;
+            this._lastPickedPolygon = null;
         }
         this._options.pickable = state;
         this._workerContact.setPickableState(state);
@@ -287,30 +289,6 @@ export class TerrainPolygonSemiPlugin {
         if (this._options.variativeColorsOn && data.variativeColors) {
             safeVertexCount = Math.min(safeVertexCount, Math.floor(data.variativeColors.length / 4));
         }
-        // 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;
-        // }
         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);
@@ -375,7 +353,7 @@ export class TerrainPolygonSemiPlugin {
                 if (this._lastPickedPolygon !== null) {
                     this._lastPickedPolygon = null;
                     globe.DrawRender();
-                    this._uboHandler.updateSingle("private_pickedIndex", new Float32Array([-1]));
+                    this._uboHandler.updateSingle("private_pickedIndex", new Float32Array([IndexAttributeEscapeValue]));
                 }
             }
         });
@@ -399,7 +377,7 @@ export class TerrainPolygonSemiPlugin {
         if (this._options.showTesselationPoints) {
             this._program.draw(this._vao, this._drawPointsRangeIndexParams, this._uboHandler);
         }
-        if (this._pickerDisplayer && this._options.pickable) {
+        if (this._pickerDisplayer && !this._options.pickablePause) {
             this._pickerDisplayer.bindFBO();
             this._pickerDisplayer.clearTextures();
             // gl.enable(gl.DEPTH_TEST);
@@ -407,7 +385,7 @@ export class TerrainPolygonSemiPlugin {
         gl.frontFace(gl.CW);
         this._program.draw(this._vao, this._drawRangeIndexParams, this._uboHandler);
         gl.frontFace(gl.CCW);
-        if (this._pickerDisplayer && this._options.pickable) {
+        if (this._pickerDisplayer && !this._options.pickablePause) {
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
             this._pickerDisplayer.drawColorTexture();
             this._selfSelect();

package/util/gl-util/buffer/attribute-loader.js

@@ -1,27 +1,17 @@
-/**
- * @typedef BufferAndReadInfo Buffers can be intertwined or interleaved.
- * This object forces user to adapt generic convention of buffer and read information.
- * @type {Object}
- * @property {WebGLBuffer} buffer
- * @property {number} stride
- * @property {number} offset
- */
-/**
- *
- * @param {WebGLBuffer} gl
- * @param {BufferAndReadInfo} bufferAndReadInfo
- * @param {number} index
- * @param {number} size
- * @param {Object} options
- * @param {*} options.type | default gl.FLOAT, gl.UNSIGNED_BYTE, gl.SHORT, gl.UNSIGNED_SHORT, gl.INT, gl.UNSIGNED_INT
- * @param {number} options.divisor
- * @param {Array<number>} options.escapeValues
- * @returns
- */
-const attributeLoader = (gl, bufferAndReadInfo, index, size, { divisor = null, type = null, escapeValues = null, normalized = false, integer = false, integerUnsigned = true, } = {}) => {
+const DATA_TYPE_MAP = {
+    float: { getGLType: (gl) => gl.FLOAT, useIntegerPointer: false, isSigned: true },
+    int8: { getGLType: (gl) => gl.BYTE, useIntegerPointer: true, isSigned: true },
+    uint8: { getGLType: (gl) => gl.UNSIGNED_BYTE, useIntegerPointer: true, isSigned: false },
+    int16: { getGLType: (gl) => gl.SHORT, useIntegerPointer: true, isSigned: true },
+    uint16: { getGLType: (gl) => gl.UNSIGNED_SHORT, useIntegerPointer: true, isSigned: false },
+    int32: { getGLType: (gl) => gl.INT, useIntegerPointer: true, isSigned: true },
+    uint32: { getGLType: (gl) => gl.UNSIGNED_INT, useIntegerPointer: true, isSigned: false },
+};
+const attributeLoader = (gl, bufferAndReadInfo, index, size, { divisor = null, dataType = null, escapeValues = null, normalized = false, } = {}) => {
+    const typeInfo = dataType ? DATA_TYPE_MAP[dataType] : DATA_TYPE_MAP.float;
     if (bufferAndReadInfo == null || bufferAndReadInfo.buffer == null) {
         if (escapeValues)
-            constantFunction(gl, index, size, escapeValues, integer, integerUnsigned);
+            constantFunction(gl, index, size, escapeValues, typeInfo);
         return;
     }
     const { buffer, stride, offset } = bufferAndReadInfo;
@@ -34,10 +24,10 @@ const attributeLoader = (gl, bufferAndReadInfo, index, size, { divisor = null, t
     if (stride < 0 || offset < 0) {
         throw new Error("Stride and offset must be non-negative");
     }
-    const attribType = type === null ? gl.FLOAT : type;
+    const attribType = typeInfo.getGLType(gl);
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
     gl.enableVertexAttribArray(index);
-    if (integer) {
+    if (typeInfo.useIntegerPointer) {
         gl.vertexAttribIPointer(index, size, attribType, stride, offset);
     }
     else {
@@ -59,15 +49,15 @@ const createBufferAndReadInfo = (buffer, stride = 0, offset = 0) => {
         return null;
     return { buffer, stride, offset };
 };
-const constantFunction = (gl, index, size, escapeValues, integer, integerUnsigned) => {
-    if (!integer) {
+const constantFunction = (gl, index, size, escapeValues, typeInfo) => {
+    if (!typeInfo.useIntegerPointer) {
         const func = `vertexAttrib${size}f`;
         // @ts-ignore
         gl[func](index, ...escapeValues);
         return;
     }
     const values = escapeValues.map((v) => Math.trunc(v));
-    const func = integerUnsigned ? `vertexAttribI${size}ui` : `vertexAttribI${size}i`;
+    const func = typeInfo.isSigned ? `vertexAttribI${size}i` : `vertexAttribI${size}ui`;
     // @ts-ignore
     gl[func](index, ...values);
 };

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

@@ -0,0 +1,172 @@
+import { textureOnCanvasProgramCache } from "../programs/draw-texture-on-canvas";
+import { fence } from "./fence";
+/** * Use 0xFFFFFFFF (4,294,967,295) as the "no-object" value.
+ * This allows 0 to be a valid Object ID.
+ */
+const ESCAPE_VALUE = 4294967295;
+class PickerDisplayer {
+    globe;
+    gl;
+    colorTexture;
+    indexTexture;
+    fbo;
+    _pbo = null;
+    _pboSize = 0;
+    displayer;
+    _inProgress = false;
+    _lastWidthHeight = null;
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        const gl = this.gl;
+        this.colorTexture = gl.createTexture();
+        this.indexTexture = gl.createTexture();
+        this.fbo = gl.createFramebuffer();
+        this.resize();
+        this.displayer = textureOnCanvasProgramCache.get(this.gl);
+    }
+    _saveState() {
+        const gl = this.gl;
+        return {
+            framebuffer: gl.getParameter(gl.FRAMEBUFFER_BINDING),
+            pixelPackBuffer: gl.getParameter(gl.PIXEL_PACK_BUFFER_BINDING),
+            readBuffer: gl.getParameter(gl.READ_BUFFER),
+            depthTestEnabled: gl.isEnabled(gl.DEPTH_TEST),
+            activeTexture: gl.getParameter(gl.ACTIVE_TEXTURE),
+            tex2D_unit0: (gl.activeTexture(gl.TEXTURE0), gl.getParameter(gl.TEXTURE_BINDING_2D)),
+            drawBuffers: [gl.getParameter(gl.DRAW_BUFFER0), gl.getParameter(gl.DRAW_BUFFER1)]
+        };
+    }
+    _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(s.activeTexture);
+        gl.drawBuffers(s.drawBuffers.filter(b => b !== gl.NONE));
+    }
+    resize() {
+        const width = this.globe.api_ScrW();
+        const height = this.globe.api_ScrH();
+        if (this._lastWidthHeight?.width === width && this._lastWidthHeight?.height === height)
+            return;
+        this._lastWidthHeight = { width, height };
+        const gl = this.gl;
+        // Attachment 0: Visual Color (RGBA8)
+        gl.bindTexture(gl.TEXTURE_2D, this.colorTexture);
+        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);
+        // Attachment 1: Picking ID (R32UI - Unsigned Integer)
+        gl.bindTexture(gl.TEXTURE_2D, this.indexTexture);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R32UI, width, height);
+        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);
+    }
+    bindFBO() {
+        const gl = this.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.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]);
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+            throw new Error("Framebuffer incomplete");
+        }
+    }
+    clearTextures() {
+        const gl = this.gl;
+        const saved = this._saveState();
+        this.bindFBO();
+        // Clear Color to transparent black
+        gl.clearBufferfv(gl.COLOR, 0, [0, 0, 0, 0]);
+        // Clear Index to Max Uint32 (ESCAPE_VALUE)
+        gl.clearBufferuiv(gl.COLOR, 1, [ESCAPE_VALUE, 0, 0, 0]);
+        this._restoreState(saved);
+    }
+    pickXY(x, y, radius = 0, callback) {
+        const side = 1 + radius * 2;
+        // Invert Y because WebGL screen space starts bottom-left
+        const webglY = this.globe.api_ScrH() - y - radius;
+        return this._pick(x - radius, webglY, side, side, callback);
+    }
+    getEscapeValue() {
+        return ESCAPE_VALUE;
+    }
+    _pick(x, y, w, h, callback) {
+        if (this._inProgress)
+            return false;
+        this._inProgress = true;
+        const gl = this.gl;
+        const saved = this._saveState();
+        const pixelCount = w * h;
+        const byteSize = pixelCount * 4;
+        try {
+            this._initPBO(byteSize);
+            this.bindFBO();
+            gl.readBuffer(gl.COLOR_ATTACHMENT1);
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this._pbo);
+            // CRITICAL: Format must be RED_INTEGER and type UNSIGNED_INT for  UI
+            gl.readPixels(x, y, w, h, gl.RED_INTEGER, gl.UNSIGNED_INT, 0);
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+            this._restoreState(saved);
+            fence(gl).then(() => {
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this._pbo);
+                const data = new Uint32Array(pixelCount);
+                gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data);
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+                const resultSet = new Set();
+                for (let i = 0; i < data.length; i++) {
+                    if (data[i] !== ESCAPE_VALUE)
+                        resultSet.add(data[i]);
+                }
+                callback(resultSet);
+            }).finally(() => {
+                this._inProgress = false;
+            });
+            return true;
+        }
+        catch (e) {
+            console.error("Picking Error:", e);
+            this._restoreState(saved);
+            this._inProgress = false;
+            return false;
+        }
+    }
+    _initPBO(size) {
+        const gl = this.gl;
+        if (this._pbo && this._pboSize >= size)
+            return;
+        if (this._pbo)
+            gl.deleteBuffer(this._pbo);
+        this._pbo = gl.createBuffer();
+        this._pboSize = size;
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this._pbo);
+        gl.bufferData(gl.PIXEL_PACK_BUFFER, size, gl.STREAM_READ);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+    }
+    drawColorTexture() {
+        const gl = this.gl;
+        const saved = this._saveState();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.disable(gl.DEPTH_TEST);
+        this.displayer.draw(this.colorTexture);
+        this._restoreState(saved);
+    }
+    free() {
+        const gl = this.gl;
+        gl.deleteTexture(this.colorTexture);
+        gl.deleteTexture(this.indexTexture);
+        gl.deleteFramebuffer(this.fbo);
+        if (this._pbo)
+            gl.deleteBuffer(this._pbo);
+        textureOnCanvasProgramCache.release(this.gl);
+    }
+}
+export { PickerDisplayer };

package/util/picking/picker-displayer.js

@@ -1,7 +1,8 @@
 /**
  * add implicit texture display program for color
  * add fence on query return and return id.
-*/
+ * support R32I, R32F, R16UI, R32UI
+ */
 import { textureOnCanvasProgramCache } from "../programs/draw-texture-on-canvas";
 import { fence } from "./fence";
 const ESCAPE_VALUE = -1;
@@ -15,8 +16,10 @@ class PickerDisplayer {
     _pboSize;
     displayer;
     _inProgress;
-    _indexType; // R32I for Integer, R32F for Float
+    _indexType;
     _typedArrayConstructor;
+    // The value representing "nothing selected" in the current type format
+    _escapeValue;
     _lastWidthHeight = null;
     constructor(globe, indexType = "R32I") {
         this.globe = globe;
@@ -29,15 +32,25 @@ class PickerDisplayer {
             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'.");
+        // Assign TypedArray constructor and calculate the specific Escape Value
+        switch (indexType) {
+            case "R32I":
+                this._typedArrayConstructor = Int32Array;
+                break;
+            case "R32F":
+                this._typedArrayConstructor = Float32Array;
+                break;
+            case "R16UI":
+                this._typedArrayConstructor = Uint16Array;
+                break;
+            case "R32UI":
+                this._typedArrayConstructor = Uint32Array;
+                break;
+            default:
+                throw new Error("Invalid index type. Must be 'R32I', 'R32F', 'R16UI', or 'R32UI'.");
         }
+        // Calculate what -1 looks like in the target type (e.g., 0xFFFF for Uint16)
+        this._escapeValue = (new this._typedArrayConstructor([ESCAPE_VALUE]))[0];
         this._pbo = undefined;
         this._pboSize = 0;
         this._inProgress = false;
@@ -85,8 +98,6 @@ class PickerDisplayer {
         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]);
         }
@@ -109,14 +120,18 @@ class PickerDisplayer {
         const { colorTexture, indexTexture } = this;
         gl.deleteTexture(colorTexture);
         gl.deleteTexture(indexTexture);
+        // 1. Color Texture (Standard RGBA8)
         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);
+        // 2. Index Texture (Varies based on this._indexType)
         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
+        // Map string type to GL constant
+        const internalFormat = gl[this._indexType];
+        gl.texStorage2D(gl.TEXTURE_2D, 1, internalFormat, width, height);
         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);
@@ -127,14 +142,24 @@ class PickerDisplayer {
         const gl = this.gl;
         const saved = this._saveState();
         try {
-            // Must clear the *FBO attachments*, not "textures".
             this.bindFBO();
+            // Clear Index Attachment (Attachment 1)
             if (this._indexType === "R32I") {
-                gl.clearBufferiv(gl.COLOR, 1, new Int32Array([-1, -1, -1, -1]));
+                // Signed Integer
+                gl.clearBufferiv(gl.COLOR, 1, new Int32Array([ESCAPE_VALUE, ESCAPE_VALUE, ESCAPE_VALUE, ESCAPE_VALUE]));
+            }
+            else if (this._indexType === "R32F") {
+                // Float
+                gl.clearBufferfv(gl.COLOR, 1, new Float32Array([ESCAPE_VALUE, ESCAPE_VALUE, ESCAPE_VALUE, ESCAPE_VALUE]));
             }
             else {
-                gl.clearBufferfv(gl.COLOR, 1, new Float32Array([-1, -1, -1, -1]));
+                // Unsigned Integer (R16UI, R32UI)
+                // We use ESCAPE_VALUE cast to uint. For -1 this is MaxUint (all 1s).
+                // clearBufferuiv expects Uint32Array even for 16-bit buffers.
+                const clearVal = this._escapeValue;
+                gl.clearBufferuiv(gl.COLOR, 1, new Uint32Array([clearVal, clearVal, clearVal, clearVal]));
             }
+            // Clear Color Attachment (Attachment 0)
             gl.clearBufferfv(gl.COLOR, 0, new Float32Array([0, 0, 0, 0]));
         }
         finally {
@@ -146,7 +171,6 @@ class PickerDisplayer {
         const { gl, fbo } = this;
         this.resize();
         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]);
@@ -183,15 +207,39 @@ class PickerDisplayer {
         const gl = this.gl;
         const saved = this._saveState();
         try {
-            this._initHoldBuffer(size * 4);
+            // Allocate PBO with enough size for the specific type (2 bytes or 4 bytes per pixel)
+            const bytesPerPixel = this._typedArrayConstructor.BYTES_PER_ELEMENT;
+            this._initHoldBuffer(size * bytesPerPixel);
             const { _pbo } = this;
             gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _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;
+            let format;
+            let type;
+            switch (this._indexType) {
+                case "R32I":
+                    format = gl.RED_INTEGER;
+                    type = gl.INT;
+                    break;
+                case "R32F":
+                    format = gl.RED;
+                    type = gl.FLOAT;
+                    break;
+                case "R16UI":
+                    format = gl.RED_INTEGER;
+                    type = gl.UNSIGNED_SHORT;
+                    break;
+                case "R32UI":
+                    format = gl.RED_INTEGER;
+                    type = gl.UNSIGNED_INT;
+                    break;
+                default:
+                    // Fallback
+                    format = gl.RED_INTEGER;
+                    type = gl.INT;
+            }
             gl.readPixels(startX, startY, lengthX, lengthY, format, type, 0);
-            // Restore state immediately after issuing readPixels (PBO keeps data for later getBufferSubData)
+            // Restore state immediately after issuing readPixels
             this._restoreState(saved);
             fence(this.gl)
                 .then(() => {
@@ -203,7 +251,7 @@ class PickerDisplayer {
                 callback(result);
             })
                 .catch(() => {
-                // Swallow or rethrow based on your app needs; important is not to wedge _inProgress.
+                // Swallow or rethrow based on your app needs
             })
                 .finally(() => {
                 this._inProgress = false;
@@ -215,30 +263,28 @@ class PickerDisplayer {
             this._inProgress = false;
             throw new Error("Picking failed.");
         }
-        finally {
-            this._restoreState(saved);
-        }
     }
     _pickFromBuffer(array, size) {
         const selectedObjects = new Set();
+        const esc = this._escapeValue;
         for (let i = 0; i < size; i += 1) {
             const id = array[i];
-            if (id !== ESCAPE_VALUE) {
+            if (id !== esc) {
                 selectedObjects.add(id);
             }
         }
         return selectedObjects;
     }
-    _initHoldBuffer(size) {
-        if (this._pbo && this._pboSize >= size) {
+    _initHoldBuffer(sizeInBytes) {
+        if (this._pbo && this._pboSize >= sizeInBytes) {
             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.bufferData(gl.PIXEL_PACK_BUFFER, sizeInBytes, gl.STREAM_READ);
         gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-        this._pboSize = size;
+        this._pboSize = sizeInBytes;
         if (this._pbo !== undefined) {
             gl.deleteBuffer(this._pbo);
         }