@pirireis/webglobeplugins 1.1.13 → 1.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "1.1.13",
+    "version": "1.1.15",
     "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,
 };
+// last value of uint16 is 65535
 export const IndexAttributeEscapeValue = -1;
 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
@@ -45,7 +46,7 @@ in uvec4 a_color;
 ${styleBlockManager.glslCode()}
 
 out vec4 v_color;
-flat out int v_index;
+flat out uint v_index;
 
 ${relativeBBoxPositionRadian}
 
@@ -54,6 +55,8 @@ void main() {
     float elevation = ${WORLD_RADIUS_3D};
     float altitude = 0.0;
 
+    // Always define v_index to avoid undefined varyings when picking is disabled.
+
     vec4 decodedColor = vec4(
         float(a_color.r) / 255.0,
         float(a_color.g) / 255.0,
@@ -62,7 +65,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 +90,13 @@ void main() {
         gl_Position = mercatorXYToGLPosition(mercatorXY);
     }
 
-    if (private_isPickedOn ==  1.0){
-        if (a_index == private_pickedIndex) {
+    if (private_isPickedOn ==  true){
+        if (a_index == float(private_pickedIndex)) {
             v_color = pickedColor;
         }
-        v_index = int(a_index + 0.5); // +0.5 to avoid rounding issues
+        v_index = uint(a_index);
+    } else {
+        v_index = 0u;
     }
 
     
@@ -109,19 +114,15 @@ 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;
     outIndex = v_index;
 }
 `;
-function resCalculation(sourceResolution, mergeCount) {
-    return sourceResolution + (mergeCount - 1) * (sourceResolution - 1);
-}
-const RESOLUTION = resCalculation(5, 20); // 5 is tile dimension length, 12 is merge count
 export class TextureDemTriangles {
     globe;
     gl;
@@ -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: "uint32",
             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);
@@ -209,13 +208,24 @@ export class TextureDemTriangles {
         this.demTextureManager.bindData(0, uniformBindingPoints.dem);
         gl.bindVertexArray(vao);
         ubo.bind();
-        if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
-            drawOnTopBegin(gl);
-        }
+        // This program has two fragment outputs (location 0: color, location 1: index).
+        // When rendering to the default framebuffer (no picking FBO bound), only location 0
+        // is valid; explicitly discard location 1 to avoid GL_INVALID_OPERATION.
+        // const boundFbo = gl.getParameter(gl.FRAMEBUFFER_BINDING) as WebGLFramebuffer | null;
+        // if (boundFbo == null) {
+        // gl.drawBuffers([gl.BACK, gl.NONE]);
+        // // }
+        // if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
+        //     drawOnTopBegin(gl);
+        // }
         drawArrays(gl, drawOptions.drawMode ?? gl.TRIANGLES, drawOptions);
-        if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
-            drawOnTopEnd(gl);
-        }
+        // if (this.globe.api_GetCurrentLODWithDecimal() < 14.5) {
+        //     drawOnTopEnd(gl);
+        // }
+        // if (boundFbo == null) {
+        //     // Restore the default draw buffer mapping for subsequent draws.
+        //     gl.drawBuffers([gl.BACK]);
+        // }
         this.demTextureManager.unbindData(0, uniformBindingPoints.dem);
         gl.bindVertexArray(null);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);

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";
@@ -110,15 +110,19 @@ export class TerrainPolygonSemiPlugin {
         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));
         }
+        else {
+            this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([0.0]));
+        }
         if (this._options.drawEdges) {
             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", this._effectiveOpacity("edgeArc"));
+            this._uboForRealEdgeArcs.updateSingle("private_isPickedOn", new Float32Array([0.0]));
             this._drawRealEdgeArcs.elementBuffer = gl.createBuffer();
         }
         if (this._options.variativeColorsOn) {
@@ -143,7 +147,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;
@@ -290,30 +293,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);
@@ -378,7 +357,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]));
                 }
             }
         });

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

@@ -1,27 +1,32 @@
-/**
- * @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, } = {}) => {
+    // WebGL returns -1 for inactive attributes (optimized out). Treat as a no-op.
+    // This also avoids accidentally mutating global generic attribute state.
+    if (index < 0) {
+        return;
+    }
+    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);
+        // Disable array and set constant value
+        gl.disableVertexAttribArray(index);
+        // If the shader expects an integer attribute (in uint/int/ivec*/uvec*),
+        // WebGL requires the constant to be set via vertexAttribI4i/vertexAttribI4ui.
+        // Otherwise you'll hit: "Vertex shader input type does not match...".
+        if (escapeValues != null) {
+            setConstantAttribute(gl, index, size, escapeValues, typeInfo);
+        }
+        else if (typeInfo.useIntegerPointer) {
+            // Default constant for integer attributes when not provided.
+            setConstantAttribute(gl, index, size, [0, 0, 0, 0], typeInfo);
+        }
         return;
     }
     const { buffer, stride, offset } = bufferAndReadInfo;
@@ -34,10 +39,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,16 +64,34 @@ const createBufferAndReadInfo = (buffer, stride = 0, offset = 0) => {
         return null;
     return { buffer, stride, offset };
 };
-const constantFunction = (gl, index, size, escapeValues, integer, integerUnsigned) => {
-    if (!integer) {
-        const func = `vertexAttrib${size}f`;
+const setConstantAttribute = (gl, index, size, values, typeInfo) => {
+    // Array should already be disabled by caller
+    if (size < 1 || size > 4) {
+        throw new Error(`Attribute size must be between 1 and 4. Got ${size}.`);
+    }
+    if (typeInfo.useIntegerPointer) {
+        return;
+        gl.vertexAttrib4f(index, 0, 0, 0, 1);
+        // Integer attributes: WebGL2 ONLY supports vertexAttribI4i/I4ui for constants.
+        const intValues = values.map((v) => Math.trunc(v));
+        while (intValues.length < 4)
+            intValues.push(0);
+        const func = typeInfo.isSigned ? "vertexAttribI4i" : "vertexAttribI4ui";
         // @ts-ignore
-        gl[func](index, ...escapeValues);
+        gl[func](index, intValues[0], intValues[1], intValues[2], intValues[3]);
         return;
     }
-    const values = escapeValues.map((v) => Math.trunc(v));
-    const func = integerUnsigned ? `vertexAttribI${size}ui` : `vertexAttribI${size}i`;
-    // @ts-ignore
-    gl[func](index, ...values);
+    // Float attributes: use vertexAttrib{1..4}f.
+    const v = values.slice(0, 4);
+    while (v.length < 4)
+        v.push(size === 4 ? 0 : (v.length === 3 ? 1 : 0));
+    if (size === 1)
+        gl.vertexAttrib1f(index, v[0]);
+    else if (size === 2)
+        gl.vertexAttrib2f(index, v[0], v[1]);
+    else if (size === 3)
+        gl.vertexAttrib3f(index, v[0], v[1], v[2]);
+    else
+        gl.vertexAttrib4f(index, v[0], v[1], v[2], v[3]);
 };
 export { attributeLoader, createBufferAndReadInfo };

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);
         }