@pirireis/webglobeplugins 0.17.0 → 1.0.2

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

@@ -1,121 +1,150 @@
-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/webglobe/gldefaultstates";
-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-heat-map/readme.md

@@ -0,0 +1,15 @@
+# Content
+
+point-heat-map/
+├── plugin.js              
+└── point-to-heat-flow.js
+
+## plugin.js
+
+Contains plugin plugin that calculates data on main thread.
+
+## point-to-heat-flow.js
+
+Contains a wrapper around point-to-density and density-to-color-ramp programs.
+
+The reason behind seperation of program flow and plugin is to explore web-worker version of interpolation and compare it with main thread version.

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

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