@pirireis/webglobeplugins 0.17.0 → 1.0.2

package/util/interpolation/timetrack/timetrack-interpolator.js

@@ -1,79 +1,94 @@
-import { findFirstIndexInRange } from '../../algorithms/search-binary';
-import { sphericalLinearInterpolation_Cartesian3d, sphericalLinearInterpolation_Mercator, } from '../../../Math/methods';
-/**
- * @typedef {Array<number>} vec3 [x, y, z]
- * @typedef {Array<number>} vec2 [x, y]
- * @typedef {Array<number>} vec4 [x, y, z, w]
- * @typedef {number} fraction a number between 0 and 1
- * @typedef {Array<number>} wgs84 [long, lat]
- */
-const _0vec3 = [0, 0, 0];
-const GEOMETRY = Object.freeze({
-    CARTESIAN3D: 0,
-    MERCATOR: 1,
-});
-class TimeTrackInterpolator {
-    /**
-     * @typedef Timetrack
-     * @property {Array<vec4>}} coordinates [x,y,z, length]
-     * @property {Array<Number>} times
-     * @param {Array<Timetrack>} timeTracks
-     */
-    constructor({ timeTracks, bbox = null, geometry = GEOMETRY.CARTESIAN3D } = {}) {
-        this.timeTracks = null;
-        this.timeTracksStartTimes = null;
-        this.geometry = geometry;
-        if (timeTracks)
-            this.setTimetracks(timeTracks);
-        if (bbox)
-            this.setBbox(bbox);
-    }
-    setGeometry(geometry) {
-        if (geometry !== GEOMETRY.CARTESIAN3D && geometry !== GEOMETRY.MERCATOR) {
-            throw new Error('Invalid geometry');
-        }
-        this.geometry = geometry;
-    }
-    setTimetracks(timeTracks) {
-        this.timeTracks = timeTracks;
-    }
-    interpolate(time) {
-        const { timeTracks, geometry } = this;
-        if (!timeTracks) {
-            return null;
-        }
-        const resultArray = [];
-        const info = {
-            outOfRange: 0,
-            processed: 0,
-        };
-        for (let i = 0; i < timeTracks.length; i++) {
-            const { times, coordinates } = timeTracks[i];
-            if (times[times.length - 1] < time)
-                continue;
-            info.processed++;
-            const timeIndex = findFirstIndexInRange(times, time);
-            if (timeIndex === null) {
-                info.outOfRange++;
-                continue;
-            }
-            const timeFraction = (time - times[timeIndex]) / (times[timeIndex + 1] - times[timeIndex]);
-            if (geometry === GEOMETRY.CARTESIAN3D) {
-                sphericalLinearInterpolation_Cartesian3d(_0vec3, coordinates[timeIndex], coordinates[timeIndex + 1], timeFraction);
-            }
-            else {
-                sphericalLinearInterpolation_Mercator(_0vec3, coordinates[timeIndex], coordinates[timeIndex + 1], timeFraction);
-            }
-            resultArray.push(..._0vec3);
-        }
-        return new Float32Array(resultArray);
-    }
-    // implicit methods
-    _orderTimeTracks() {
-        this.timeTracks.sort((a, b) => a.times[0] - b.times[0]);
-    }
-    _setStartTimes() {
-        this.timeTracksStartTimes = this.timeTracks.map(tt => tt.times[0]);
-    }
-}
-export { TimeTrackInterpolator, GEOMETRY };
+import { findFirstIndexInRange } from '../../algorithms/search-binary';
+import {
+    sphericalLinearInterpolation_Cartesian3d,
+    sphericalLinearInterpolation_Mercator,
+} from '../../../Math/methods';
+
+
+
+/**
+ * @typedef {Array<number>} vec3 [x, y, z]
+ * @typedef {Array<number>} vec2 [x, y]
+ * @typedef {Array<number>} vec4 [x, y, z, w]
+ * @typedef {number} fraction a number between 0 and 1
+ * @typedef {Array<number>} wgs84 [long, lat]
+ */
+
+const _0vec3 = [0, 0, 0];
+
+const GEOMETRY = Object.freeze({
+    CARTESIAN3D: 0,
+    MERCATOR: 1,
+});
+
+class TimeTrackInterpolator {
+    /**
+     * @typedef Timetrack
+     * @property {Array<vec4>}} coordinates [x,y,z, length]
+     * @property {Array<Number>} times  
+     * @param {Array<Timetrack>} timeTracks 
+     */
+    constructor({ timeTracks, bbox = null, geometry = GEOMETRY.CARTESIAN3D } = {}) {
+        this.timeTracks = null;
+        this.timeTracksStartTimes = null;
+        this.geometry = geometry;
+        if (timeTracks) this.setTimetracks(timeTracks);
+        if (bbox) this.setBbox(bbox);
+    }
+
+
+    setGeometry(geometry) {
+        if (geometry !== GEOMETRY.CARTESIAN3D && geometry !== GEOMETRY.MERCATOR) {
+            throw new Error('Invalid geometry');
+        }
+        this.geometry = geometry;
+    }
+
+    setTimetracks(timeTracks) {
+        this.timeTracks = timeTracks;
+    }
+
+
+    interpolate(time) {
+        const { timeTracks, geometry } = this;
+        if (!timeTracks) { return null; }
+        const resultArray = [];
+        const info = {
+            outOfRange: 0,
+            processed: 0,
+        }
+
+        for (let i = 0; i < timeTracks.length; i++) {
+            const { times, coordinates } = timeTracks[i];
+
+            if (times[times.length - 1] < time) continue;
+            info.processed++;
+            const timeIndex = findFirstIndexInRange(times, time);
+            if (timeIndex === null) { info.outOfRange++; continue; }
+            const timeFraction = (time - times[timeIndex]) / (times[timeIndex + 1] - times[timeIndex]);
+            if (geometry === GEOMETRY.CARTESIAN3D) {
+                sphericalLinearInterpolation_Cartesian3d(_0vec3, coordinates[timeIndex], coordinates[timeIndex + 1], timeFraction);
+            } else {
+                sphericalLinearInterpolation_Mercator(_0vec3, coordinates[timeIndex], coordinates[timeIndex + 1], timeFraction);
+            }
+            resultArray.push(..._0vec3);
+        }
+        return new Float32Array(resultArray);
+    }
+
+
+    // implicit methods
+
+    _orderTimeTracks() {
+        this.timeTracks.sort((a, b) => a.times[0] - b.times[0]);
+    }
+
+    _setStartTimes() {
+        this.timeTracksStartTimes = this.timeTracks.map(tt => tt.times[0]);
+    }
+
+
+}
+
+
+export { TimeTrackInterpolator, GEOMETRY };

package/util/interpolation/timetrack/web-worker.js

@@ -1,46 +1,51 @@
-import { TimeTrackInterpolator, GEOMETRY } from './timetrack-interpolator';
-const interpolator = new TimeTrackInterpolator({ geometry: GEOMETRY.CARTESIAN3D });
-/* eslint-disable-next-line no-restricted-globals */
-self.onmessage = function (e) {
-    const { geometry = null, timeTracks = null, time = null } = e.data;
-    if (geometry !== null) {
-        try {
-            interpolator.setGeometry(geometry);
-        }
-        catch (error) {
-            /* eslint-disable-next-line no-restricted-globals */
-            self.postMessage({ error: error.message });
-            return;
-        }
-    }
-    if (timeTracks !== null) {
-        try {
-            interpolator.setTimetracks(timeTracks);
-        }
-        catch (error) {
-            /* eslint-disable-next-line no-restricted-globals */
-            self.postMessage({ error: error.message });
-            return;
-        }
-    }
-    if (time !== null) {
-        try {
-            const result = interpolator.interpolate(time);
-            if (result === null) {
-                /* eslint-disable-next-line no-restricted-globals */
-                self.postMessage({ error: 'No TimeTracks Data' });
-                return;
-            }
-            /* eslint-disable-next-line no-restricted-globals */
-            self.postMessage(result, [result.buffer]);
-            return;
-        }
-        catch (error) {
-            /* eslint-disable-next-line no-restricted-globals */
-            self.postMessage({ error: error.message });
-            return;
-        }
-    }
-    /* eslint-disable-next-line no-restricted-globals */
-    self.postMessage(true);
-};
+import { TimeTrackInterpolator, GEOMETRY } from './timetrack-interpolator';
+
+
+const interpolator = new TimeTrackInterpolator({ geometry: GEOMETRY.CARTESIAN3D });
+
+/* eslint-disable-next-line no-restricted-globals */
+self.onmessage = function (e) {
+
+    const { geometry = null, timeTracks = null, time = null } = e.data;
+
+    if (geometry !== null) {
+        try {
+            interpolator.setGeometry(geometry);
+        } catch (error) {
+            /* eslint-disable-next-line no-restricted-globals */
+            self.postMessage({ error: error.message });
+            return;
+        }
+    }
+
+    if (timeTracks !== null) {
+        try {
+            interpolator.setTimetracks(timeTracks);
+        } catch (error) {
+            /* eslint-disable-next-line no-restricted-globals */
+            self.postMessage({ error: error.message });
+            return;
+        }
+    }
+
+    if (time !== null) {
+        try {
+            const result = interpolator.interpolate(time);
+            if (result === null) {
+                /* eslint-disable-next-line no-restricted-globals */
+                self.postMessage({ error: 'No TimeTracks Data' });
+                return;
+            }
+            /* eslint-disable-next-line no-restricted-globals */
+            self.postMessage(result, [result.buffer]);
+            return;
+        } catch (error) {
+            /* eslint-disable-next-line no-restricted-globals */
+            self.postMessage({ error: error.message });
+            return;
+        }
+    }
+    /* eslint-disable-next-line no-restricted-globals */
+    self.postMessage(true);
+}
+

package/util/picking/{fence.js → fence.ts}

@@ -1,41 +1,47 @@
-const fence = (gl) => new Promise((resolve, reject) => {
-    // This will create a fence. If this follows a `readPixels()` call, then it
-    // will signal to WebGL that the read instruction should be asynchronous. 
-    // This means JS can continue to work on other tasks while the read instruction
-    // completes.
-    const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
-    gl.flush();
-    // There are TWO possible ways to check on the status of a WebGLSync object.
-    // 1. This will check it using clientWaitSync()
-    // const checkStatus_v1 = () => {
-    //     const status = gl.clientWaitSync(sync, 0, 0);
-    //     // There are four possible values for status:
-    //     // a. ALREADY_SIGNALED and CONDITION_SATISFIED (done)
-    //     // b. TIMEOUT_EXPIRED (check again later)
-    //     // c. WAIT_FAILED (there was an error)
-    //     if (status === gl.TIMEOUT_EXPIRED) {
-    //         setTimeout(checkStatus_v1, 1);
-    //     } else if (status === gl.ALREADY_SIGNALED || status === gl.CONDITION_SATISFIED) {
-    //         gl.deleteSync(sync);
-    //         resolve();
-    //     } else {
-    //         gl.deleteSync(sync);
-    //         reject(new Error('Fence did not resolve normally for some reason'));
-    //     }
-    // };
-    // 2. This will check with getSyncParameter(s, gl.SYNC_STATUS)
-    const checkStatus_v2 = () => {
-        const status = gl.getSyncParameter(sync, gl.SYNC_STATUS);
-        // There are only two possible values for status: SIGNALED and UNSIGNALED
-        // Note that there is no `error` signal, so there is no reason to use `reject()` here
-        if (status === gl.SIGNALED) {
-            gl.deleteSync(sync);
-            resolve();
-        }
-        else {
-            setTimeout(checkStatus_v2, 1);
-        }
-    };
-    setTimeout(checkStatus_v2, 1);
-});
-export { fence };
+const fence = (gl: WebGL2RenderingContext): Promise<void> => new Promise((resolve, reject) => {
+    // This will create a fence. If this follows a `readPixels()` call, then it
+    // will signal to WebGL that the read instruction should be asynchronous. 
+    // This means JS can continue to work on other tasks while the read instruction
+    // completes.
+    const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+    if (!sync) {
+        reject(new Error('Failed to create fence sync object.'));
+        return;
+    }
+    gl.flush();
+
+    // There are TWO possible ways to check on the status of a WebGLSync object.
+
+    // 1. This will check it using clientWaitSync()
+    // const checkStatus_v1 = () => {
+    //     const status = gl.clientWaitSync(sync, 0, 0);
+
+    //     // There are four possible values for status:
+    //     // a. ALREADY_SIGNALED and CONDITION_SATISFIED (done)
+    //     // b. TIMEOUT_EXPIRED (check again later)
+    //     // c. WAIT_FAILED (there was an error)
+    //     if (status === gl.TIMEOUT_EXPIRED) {
+    //         setTimeout(checkStatus_v1, 1);
+    //     } else if (status === gl.ALREADY_SIGNALED || status === gl.CONDITION_SATISFIED) {
+    //         gl.deleteSync(sync);
+    //         resolve();
+    //     } else {
+    //         gl.deleteSync(sync);
+    //         reject(new Error('Fence did not resolve normally for some reason'));
+    //     }
+    // };
+
+    // 2. This will check with getSyncParameter(s, gl.SYNC_STATUS)
+    const checkStatus_v2 = () => {
+        const status = gl.getSyncParameter(sync, gl.SYNC_STATUS);
+        if (status === gl.SIGNALED) {
+            gl.deleteSync(sync);
+            resolve();
+        } else {
+            setTimeout(checkStatus_v2, 1);
+        }
+    };
+    setTimeout(checkStatus_v2, 1);
+});
+
+export { fence };

package/util/picking/picker-displayer.ts

@@ -0,0 +1,226 @@
+/**
+ * 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 };