@pirireis/webglobeplugins 1.0.2 → 1.0.3

package/tracks/point-heat-map/plugin-webworker.js

@@ -1,148 +1,121 @@
-import { PointHeatmapFlow } from "./point-to-heat-map-flow";
-import { createWorker } from "../../util/interpolation/timetrack/index";
-import { createTexture, getColorRampModed } from "../../util/webglobjectbuilders";
-import { opacityCheck, constraintFloat } from "../../util/check/typecheck";
-
-class PointHeatmapPlugin {
-
-    constructor(id, { opacity = 1.0, pointSize = 5.0, onInterpolationComplete = () => { } } = {}) {
-        this.id = id;
-        this.globe = null;
-        this.gl = null;
-        this.densityToLegendProgram = null;
-        this._time = null;
-
-        this._opacity = opacity;
-        this._pointSize = pointSize;
-        this._legendTexture = null;
-
-        this._throttleListener = null;
-        this._timeTracksAreSet = false;
-        this.timeTrackInterpolationWorker = createWorker();
-        this.timeTrackInterpolationWorker.onmessage = (e) => {
-            if (e.data.error) {
-                throw new Error(e.data.error);
-            }
-            if (e.data === true) {
-                onInterpolationComplete();
-            }
-            if (e.data instanceof Float32Array) {
-                this.flow.setData(e.data);
-                this._throttleListener = null;
-                onInterpolationComplete();
-            }
-        }
-    }
-
-    // globe interaction
-
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        this.flow = new PointHeatmapFlow(globe);
-        this.setGeometry();
-        this.resize();
-    }
-
-
-    setPointSize(pointSize) {
-        constraintFloat(pointSize, 1);
-        this._pointSize = pointSize;
-        this.globe.DrawRender();
-    }
-
-
-    /**
-     * @param {Array<string>} 
-     * @param {string} mode "interpolated" | "discrete"
-     */
-
-    setColorRamp(values, thresholds, mode = "interpolated") {
-        const gl = this.gl
-        if (this.gl === null) {
-            throw new Error('Plugin not initialized');
-        };
-        const rampData = getColorRampModed(values, thresholds, mode);
-        const texture = createTexture(gl, gl.LINEAR, rampData, 256, 1);
-        if (this._legendTexture) {
-            this.gl.deleteTexture(this._legendTexture);
-        }
-        this._legendTexture = texture;
-        this.globe.DrawRender();
-    }
-
-
-    setTime(time) {
-        // TODO: WORK ON THIS
-        this._time = time;
-        if (this.isReady() && this._throttleListener === null) {
-            if (this._isFreed) return;
-            this._throttleListener = setTimeout(() => {
-                this.timeTrackInterpolationWorker?.postMessage({ time: this._time });
-            }, 0);
-        }
-    }
-
-
-    setTimetracks(timeTracks) {
-        this._timeTracksAreSet = true;
-        this.timeTrackInterpolationWorker.postMessage({ timeTracks });
-        if (this._time !== null) {
-            this.setTime(this._time);
-        }
-        this.globe.DrawRender();
-    }
-
-
-    setOpacity(opacity) {
-        opacityCheck(opacity);
-        this._opacity = opacity;
-        this.globe.DrawRender();
-    }
-
-
-
-    setGeometry() {
-        const geometry = this.globe.api_GetCurrentGeometry();
-        this.timeTrackInterpolationWorker.postMessage({ geometry });
-        if (this._time !== null) {
-            this.setTime(this._time);
-        }
-    }
-
-
-    draw3D() {
-        if (this.isReady()) {
-            this.flow.draw(this._legendTexture, this._pointSize, this._opacity);
-        }
-    }
-
-
-    resize() {
-        this.flow.resize();
-        if (this._time !== null) {
-            this.setTime(this._time);
-        }
-    }
-
-
-    isReady() {
-        return (this.gl !== null && this._legendTexture !== null && this._timeTracksAreSet);
-    }
-
-    free() {
-        if (this._isFreed) return;
-        this.gl.deleteTexture(this._legendTexture);
-        this.flow.free();
-        this.flow = null;
-        this.gl = null;
-        this._isFreed = true;
-        this._legendTexture = null;
-        this.timeTrackInterpolationWorker.terminate();
-        this.timeTrackInterpolationWorker = null;
-    }
-}
-
-
-export { PointHeatmapPlugin };
-
+import { PointHeatmapFlow } from "./point-to-heat-map-flow";
+import { createWorker } from "../../util/interpolation/timetrack/index";
+import { createTexture, getColorRampModed } from "../../util/webglobjectbuilders";
+import { opacityCheck, constraintFloat } from "../../util/check/typecheck";
+class PointHeatmapPlugin {
+    constructor(id, { opacity = 1.0, pointSize = 5.0, onInterpolationComplete = () => { } } = {}) {
+        this.id = id;
+        this.globe = null;
+        this.gl = null;
+        this.densityToLegendProgram = null;
+        this._time = null;
+        this._opacity = opacity;
+        this._pointSize = pointSize;
+        this._legendTexture = null;
+        this._throttleListener = null;
+        this._timeTracksAreSet = false;
+        this.timeTrackInterpolationWorker = createWorker();
+        this.timeTrackInterpolationWorker.onmessage = (e) => {
+            if (e.data.error) {
+                throw new Error(e.data.error);
+            }
+            if (e.data === true) {
+                onInterpolationComplete();
+            }
+            if (e.data instanceof Float32Array) {
+                this.flow.setData(e.data);
+                this._throttleListener = null;
+                onInterpolationComplete();
+            }
+        };
+    }
+    // globe interaction
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.flow = new PointHeatmapFlow(globe);
+        this.setGeometry();
+        this.resize();
+    }
+    setPointSize(pointSize) {
+        constraintFloat(pointSize, 1);
+        this._pointSize = pointSize;
+        this.globe.DrawRender();
+    }
+    /**
+     * @param {Array<string>}
+     * @param {string} mode "interpolated" | "discrete"
+     */
+    setColorRamp(values, thresholds, mode = "interpolated") {
+        const gl = this.gl;
+        if (this.gl === null) {
+            throw new Error('Plugin not initialized');
+        }
+        ;
+        const rampData = getColorRampModed(values, thresholds, mode);
+        const texture = createTexture(gl, gl.LINEAR, rampData, 256, 1);
+        if (this._legendTexture) {
+            this.gl.deleteTexture(this._legendTexture);
+        }
+        this._legendTexture = texture;
+        this.globe.DrawRender();
+    }
+    setTime(time) {
+        // TODO: WORK ON THIS
+        this._time = time;
+        if (this.isReady() && this._throttleListener === null) {
+            if (this._isFreed)
+                return;
+            this._throttleListener = setTimeout(() => {
+                this.timeTrackInterpolationWorker?.postMessage({ time: this._time });
+            }, 0);
+        }
+    }
+    setTimetracks(timeTracks) {
+        this._timeTracksAreSet = true;
+        this.timeTrackInterpolationWorker.postMessage({ timeTracks });
+        if (this._time !== null) {
+            this.setTime(this._time);
+        }
+        this.globe.DrawRender();
+    }
+    setOpacity(opacity) {
+        opacityCheck(opacity);
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+    setGeometry() {
+        const geometry = this.globe.api_GetCurrentGeometry();
+        this.timeTrackInterpolationWorker.postMessage({ geometry });
+        if (this._time !== null) {
+            this.setTime(this._time);
+        }
+    }
+    draw3D() {
+        if (this.isReady()) {
+            this.flow.draw(this._legendTexture, this._pointSize, this._opacity);
+        }
+    }
+    resize() {
+        this.flow.resize();
+        if (this._time !== null) {
+            this.setTime(this._time);
+        }
+    }
+    isReady() {
+        return (this.gl !== null && this._legendTexture !== null && this._timeTracksAreSet);
+    }
+    free() {
+        if (this._isFreed)
+            return;
+        this.gl.deleteTexture(this._legendTexture);
+        this.flow.free();
+        this.flow = null;
+        this.gl = null;
+        this._isFreed = true;
+        this._legendTexture = null;
+        this.timeTrackInterpolationWorker.terminate();
+        this.timeTrackInterpolationWorker = null;
+    }
+}
+export { PointHeatmapPlugin };

package/tracks/point-heat-map/point-to-heat-map-flow.js

@@ -1,150 +1,121 @@
-import { densityToLegendProgramCache } from "../../programs/data2legend/density-to-legend";
-import { pointToDensityTextureCache } from "../../programs/data2legend/point-to-density-texture";
-// import { textureOnCanvasProgramCache } from "../../util/programs/draw-texture-on-canvas";
-import { defaultblendfunction } from "../../util/globe-default-gl-states";
-class PointHeatmapFlow {
-
-    constructor(globe) {
-        this.globe = null;
-        this.gl = null;
-        this.program = null;
-        this.densityToLegendProgram = null;
-        this.globe = globe;
-        this.gl = globe.gl;
-        this.pointToDensityProgram = pointToDensityTextureCache.get(globe);
-        this.densityToLegendProgram = densityToLegendProgramCache.get(globe);
-        // this.testTextureProgram = textureOnCanvasProgramCache.get(globe.gl);
-        this._lookInfo = globe.api_GetCurrentLookInfo();
-        const { gl } = this;
-
-        this.buffer = gl.createBuffer();
-        this.vao2D = this.pointToDensityProgram.createVAO(this.buffer, 2);
-        this.vao3D = this.pointToDensityProgram.createVAO(this.buffer, 3);
-
-        // framebuffer and texture
-        this.framebuffer = gl.createFramebuffer();
-        this.densityTexture = this._createDensityTexture();
-        this._bindTextureToFramebuffer();
-
-    }
-
-    _bindTextureToFramebuffer() {
-        const { gl, densityTexture, framebuffer } = this;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, densityTexture, 0);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    }
-
-
-    draw(legendTexture, pointSize, opacity = 1.0) {
-        const { gl, globe, framebuffer } = this;
-        if (this._drawDensityRequired || this._isVisionChanged()) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-            gl.clearColor(0, 0, 0, 0);
-            gl.viewport(
-                0, 0,
-                Math.floor(globe.api_ScrW()), Math.floor(globe.api_ScrH())
-            );
-            gl.clear(gl.COLOR_BUFFER_BIT);
-            this._drawDensity(pointSize);
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        }
-        defaultblendfunction(gl);
-        this._drawLegend(legendTexture, opacity);
-    }
-
-
-    resize() {
-        const { gl, densityTexture } = this;
-        gl.deleteTexture(densityTexture);
-        this.densityTexture = this._createDensityTexture();
-        this._bindTextureToFramebuffer();
-        this._drawDensityRequired = true;
-    }
-
-
-    // USER API
-
-    /**
-     * @param {Float32Array} data 
-     * @format [x, y, z, height] x,y,z is normalized 3d cartesian coordinates. Height in kilometers. Set 6378.137 for ground level.
-     */
-    setData(data) {
-        const { gl, buffer } = this;
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
-        // use program
-        this.dataLength = data.length;
-        this._drawDensityRequired = true;
-        this.globe.DrawRender();
-    }
-
-    // implicit Methods
-
-    _createDensityTexture() {
-        const { gl, globe } = this;
-        const width = Math.floor(globe.api_ScrW())
-        const height = Math.floor(globe.api_ScrH());
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        return texture;
-    }
-
-
-    _drawDensity(pointSize) {
-        const { gl, globe, pointToDensityProgram, vao2D, vao3D, dataLength } = this;
-        const is3D = globe.api_GetCurrentGeometry() === 0;
-        const vao = is3D ? vao3D : vao2D;
-        const length = dataLength / (is3D ? 3 : 2);
-        gl.blendEquation(gl.FUNC_ADD);
-        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.SRC_ALPHA, gl.ONE);
-        pointToDensityProgram.draw(vao, length, pointSize);
-
-        this._drawDensityRequired = false;
-    }
-
-
-    _drawLegend(legendTexture, opacity) {
-        const { densityToLegendProgram, densityTexture } = this;
-        densityToLegendProgram.draw(densityTexture, legendTexture, opacity);
-    }
-
-
-    _isVisionChanged() {
-        const currentLookInfo = this.globe.api_GetCurrentLookInfo();
-        const _lookInfo = this._lookInfo;
-        if (
-            currentLookInfo.CenterLong !== _lookInfo.CenterLong ||
-            currentLookInfo.CenterLat !== _lookInfo.CenterLat ||
-            currentLookInfo.Distance !== _lookInfo.Distance ||
-            currentLookInfo.Tilt !== _lookInfo.Tilt ||
-            currentLookInfo.NorthAng !== _lookInfo.NorthAng
-        ) {
-            this._lookInfo = currentLookInfo;
-            return true;
-        }
-        return false;
-    }
-
-
-    free() {
-        if (this._isFreed) return;
-        this._isFreed = true;
-        densityToLegendProgramCache.release(this.globe);
-        pointToDensityTextureCache.release(this.globe);
-        // textureOnCanvasProgramCache.release(this.gl);
-        this.gl.deleteTexture(this.densityTexture);
-        this.gl.deleteFramebuffer(this.framebuffer);
-        this.gl.deleteBuffer(this.buffer);
-        this.gl.deleteVertexArray(this.vao2D);
-        this.gl.deleteVertexArray(this.vao3D);
-    }
-}
-
-
-export { PointHeatmapFlow };
+import { densityToLegendProgramCache } from "../../programs/data2legend/density-to-legend";
+import { pointToDensityTextureCache } from "../../programs/data2legend/point-to-density-texture";
+// import { textureOnCanvasProgramCache } from "../../util/programs/draw-texture-on-canvas";
+import { defaultblendfunction } from "../../util/globe-default-gl-states";
+class PointHeatmapFlow {
+    constructor(globe) {
+        this.globe = null;
+        this.gl = null;
+        this.program = null;
+        this.densityToLegendProgram = null;
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.pointToDensityProgram = pointToDensityTextureCache.get(globe);
+        this.densityToLegendProgram = densityToLegendProgramCache.get(globe);
+        // this.testTextureProgram = textureOnCanvasProgramCache.get(globe.gl);
+        this._lookInfo = globe.api_GetCurrentLookInfo();
+        const { gl } = this;
+        this.buffer = gl.createBuffer();
+        this.vao2D = this.pointToDensityProgram.createVAO(this.buffer, 2);
+        this.vao3D = this.pointToDensityProgram.createVAO(this.buffer, 3);
+        // framebuffer and texture
+        this.framebuffer = gl.createFramebuffer();
+        this.densityTexture = this._createDensityTexture();
+        this._bindTextureToFramebuffer();
+    }
+    _bindTextureToFramebuffer() {
+        const { gl, densityTexture, framebuffer } = this;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, densityTexture, 0);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    }
+    draw(legendTexture, pointSize, opacity = 1.0) {
+        const { gl, globe, framebuffer } = this;
+        if (this._drawDensityRequired || this._isVisionChanged()) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+            gl.clearColor(0, 0, 0, 0);
+            gl.viewport(0, 0, Math.floor(globe.api_ScrW()), Math.floor(globe.api_ScrH()));
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            this._drawDensity(pointSize);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        }
+        defaultblendfunction(gl);
+        this._drawLegend(legendTexture, opacity);
+    }
+    resize() {
+        const { gl, densityTexture } = this;
+        gl.deleteTexture(densityTexture);
+        this.densityTexture = this._createDensityTexture();
+        this._bindTextureToFramebuffer();
+        this._drawDensityRequired = true;
+    }
+    // USER API
+    /**
+     * @param {Float32Array} data
+     * @format [x, y, z, height] x,y,z is normalized 3d cartesian coordinates. Height in kilometers. Set 6378.137 for ground level.
+     */
+    setData(data) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+        // use program
+        this.dataLength = data.length;
+        this._drawDensityRequired = true;
+        this.globe.DrawRender();
+    }
+    // implicit Methods
+    _createDensityTexture() {
+        const { gl, globe } = this;
+        const width = Math.floor(globe.api_ScrW());
+        const height = Math.floor(globe.api_ScrH());
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        return texture;
+    }
+    _drawDensity(pointSize) {
+        const { gl, globe, pointToDensityProgram, vao2D, vao3D, dataLength } = this;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        const vao = is3D ? vao3D : vao2D;
+        const length = dataLength / (is3D ? 3 : 2);
+        gl.blendEquation(gl.FUNC_ADD);
+        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.SRC_ALPHA, gl.ONE);
+        pointToDensityProgram.draw(vao, length, pointSize);
+        this._drawDensityRequired = false;
+    }
+    _drawLegend(legendTexture, opacity) {
+        const { densityToLegendProgram, densityTexture } = this;
+        densityToLegendProgram.draw(densityTexture, legendTexture, opacity);
+    }
+    _isVisionChanged() {
+        const currentLookInfo = this.globe.api_GetCurrentLookInfo();
+        const _lookInfo = this._lookInfo;
+        if (currentLookInfo.CenterLong !== _lookInfo.CenterLong ||
+            currentLookInfo.CenterLat !== _lookInfo.CenterLat ||
+            currentLookInfo.Distance !== _lookInfo.Distance ||
+            currentLookInfo.Tilt !== _lookInfo.Tilt ||
+            currentLookInfo.NorthAng !== _lookInfo.NorthAng) {
+            this._lookInfo = currentLookInfo;
+            return true;
+        }
+        return false;
+    }
+    free() {
+        if (this._isFreed)
+            return;
+        this._isFreed = true;
+        densityToLegendProgramCache.release(this.globe);
+        pointToDensityTextureCache.release(this.globe);
+        // textureOnCanvasProgramCache.release(this.gl);
+        this.gl.deleteTexture(this.densityTexture);
+        this.gl.deleteFramebuffer(this.framebuffer);
+        this.gl.deleteBuffer(this.buffer);
+        this.gl.deleteVertexArray(this.vao2D);
+        this.gl.deleteVertexArray(this.vao3D);
+    }
+}
+export { PointHeatmapFlow };

package/tracks/point-tracks/key-methods.js

@@ -1,3 +1,2 @@
-const pointKeyMeyhod = (trackId, pointID) => `${trackId}-${pointID}`;
-
-export { pointKeyMeyhod };
+const pointKeyMeyhod = (trackId, pointID) => `${trackId}-${pointID}`;
+export { pointKeyMeyhod };