@pirireis/webglobeplugins 1.0.2 → 1.0.3

package/util/picking/{picker-displayer.ts → picker-displayer.js}

@@ -1,226 +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;
-
-interface Globe {
-    gl: WebGL2RenderingContext;
-    api_ScrW(): number;
-    api_ScrH(): number;
-}
-
-interface Displayer {
-    draw(texture: WebGLTexture): void;
-}
-
-class PickerDisplayer {
-    private globe: Globe;
-    private gl: WebGL2RenderingContext;
-    private colorTexture: WebGLTexture;
-    private indexTexture: WebGLTexture;
-    private fbo: WebGLFramebuffer;
-    private _pbo: WebGLBuffer | undefined;
-    private _pboSize: number;
-    private displayer: Displayer;
-    private _inProgress: boolean;
-    private _indexType: "R32I" | "R32F"; // R32I for Integer, R32F for Float
-    private _typedArrayConstructor: Int32ArrayConstructor | Float32ArrayConstructor;
-    constructor(globe: Globe, indexType: "R32I" | "R32F" = "R32I") {
-        this.globe = globe;
-        this.gl = globe.gl;
-        const gl = this.gl;
-        this.colorTexture = gl.createTexture() as WebGLTexture; // bind to color attachment 0
-        this.indexTexture = gl.createTexture() as WebGLTexture; // bind to color attachment 1
-        this.fbo = gl.createFramebuffer() as WebGLFramebuffer;
-
-        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: number | null = null, height: number | null = null): void {
-        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() as WebGLTexture;
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, colorTextureNew);
-        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height);
-        const indexTextureNew = gl.createTexture() as WebGLTexture;
-        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(): void {
-        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(): void {
-        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(): void {
-        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: number, y: number, selectionPointFilling = 1, callback: (result: Set<number>) => void = () => { }): boolean {
-        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: number, top: number, right: number, bottom: number, callback: (result: Set<number>) => void): boolean {
-        const size = (right - left) * (bottom - top);
-        return this._pick(size, left, top, right - left, bottom - top, callback);
-    }
-
-
-    private _pick(size: number, startX: number, startY: number, lengthX: number, lengthY: number, callback: (result: Set<number>) => void): boolean {
-        if (this._inProgress) return false;
-        this._inProgress = true;
-
-        this._initHoldBuffer(size * 4);
-        const { gl, _pbo } = this;
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo as WebGLBuffer);
-        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 as WebGLBuffer);
-            // 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;
-    }
-
-
-    private _pickFromBuffer(array: Int32Array | Float32Array, size: number): Set<number> {
-        const selectedObjects = new Set<number>();
-        for (let i = 0; i < size; i += 1) {
-            const id = array[i];
-            if (id !== ESCAPE_VALUE) {
-                selectedObjects.add(id);
-            }
-        }
-        return selectedObjects;
-    }
-
-
-    private _initHoldBuffer(size: number): void {
-        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(): void {
-        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 };
+/**
+ * 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 };