@pirireis/webglobeplugins 0.17.0 → 1.0.2

package/vectorfield/wind/{imagetovectorfieldandmagnitude.js → imagetovectorfieldandmagnitude.ts}

@@ -1,56 +1,78 @@
-/**
- * @param {ImageData} imageData
- * image
- * uMax
- * vMax
- * height
- * width
- * @returns {Float32Array}
-*/
-export default function imageToMagnitude(imageData) {
-    const { image, uMax, vMax, uMin, vMin, height, width } = imageData;
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = width;
-    canvas.height = height;
-    ctx.drawImage(image, 0, 0, width, height);
-    const img = ctx.getImageData(0, 0, width, height);
-    const data = img.data;
-    const magnitudeArray = new Float32Array(height * width);
-    const uDiff = uMax - uMin;
-    const vDiff = vMax - vMin;
-    for (let i = 0; i < data.length; i += 4) {
-        const r = data[i];
-        const g = data[i + 1];
-        const u = uMin + (uDiff * r) / 255;
-        const v = vMin + (vDiff * g) / 255;
-        const magnitude = Math.sqrt(u * u + v * v);
-        const index = i / 4;
-        magnitudeArray[index] = magnitude;
-    }
-    return magnitudeArray;
-}
-export function imageToRadianAngle(imageData) {
-    const { image, uMax, vMax, uMin, vMin, height, width } = imageData;
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = width;
-    canvas.height = height;
-    ctx.drawImage(image, 0, 0, width, height);
-    const img = ctx.getImageData(0, 0, width, height);
-    const data = img.data;
-    const angleArray = new Float32Array(height * width);
-    const uDiff = uMax - uMin;
-    const vDiff = vMax - vMin;
-    for (let i = 0; i < data.length; i += 4) {
-        const r = data[i];
-        const g = data[i + 1];
-        const u = uMin + (uDiff * r) / 255;
-        const v = vMin + (vDiff * g) / 255;
-        // North-oriented angle: 0 = North, π/2 = East, π = South, 3π/2 = West
-        const angle = Math.atan2(u, v);
-        const index = i / 4;
-        angleArray[index] = angle < 0 ? (angle + 2 * Math.PI) : angle;
-    }
-    return angleArray;
-}
+interface ImageDataInput {
+    image: HTMLImageElement;
+    uMax: number;
+    vMax: number;
+    uMin: number;
+    vMin: number;
+    height: number;
+    width: number;
+}
+
+export default function imageToMagnitude(imageData: ImageDataInput): Float32Array {
+    const { image, uMax, vMax, uMin, vMin, height, width } = imageData;
+
+
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to get 2D context');
+    }
+    canvas.width = width;
+    canvas.height = height;
+    ctx.drawImage(image, 0, 0, width, height);
+    const img = ctx.getImageData(0, 0, width, height);
+    const data = img.data;
+
+    const magnitudeArray = new Float32Array(height * width);
+
+    const uDiff = uMax - uMin;
+    const vDiff = vMax - vMin;
+
+    for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const u = uMin + (uDiff * r) / 255;
+        const v = vMin + (vDiff * g) / 255;
+        const magnitude = Math.sqrt(u * u + v * v);
+        const index = i / 4;
+        magnitudeArray[index] = magnitude;
+    }
+
+    return magnitudeArray;
+}
+
+
+export function imageToRadianAngle(imageData: ImageDataInput): Float32Array {
+    const { image, uMax, vMax, uMin, vMin, height, width } = imageData;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to get 2D context');
+    }
+    canvas.width = width;
+    canvas.height = height;
+    ctx.drawImage(image, 0, 0, width, height);
+    const img = ctx.getImageData(0, 0, width, height);
+    const data = img.data;
+
+    const angleArray = new Float32Array(height * width);
+
+    const uDiff = uMax - uMin;
+    const vDiff = vMax - vMin;
+
+    for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const u = uMin + (uDiff * r) / 255;
+        const v = vMin + (vDiff * g) / 255;
+        // North-oriented angle: 0 = North, π/2 = East, π = South, 3π/2 = West
+        const angle = Math.atan2(u, v);
+        const index = i / 4;
+
+        angleArray[index] = angle < 0 ? (angle + 2 * Math.PI) : angle;
+    }
+
+    return angleArray;
+}

package/vectorfield/wind/index.js

@@ -1,5 +1,5 @@
-import WindPlugin from "./plugin";
-import createVectorFieldImage from "./vectorfieldimage";
-import imageToMagnitude, { imageToRadianAngle } from "./imagetovectorfieldandmagnitude";
-import { createImageFromBase64 } from "../../util/webglobjectbuilders";
-export { createVectorFieldImage, imageToMagnitude, WindPlugin, createImageFromBase64, imageToRadianAngle };
+import WindPlugin from "./plugin";
+import createVectorFieldImage from "./vectorfieldimage";
+import imageToMagnitude, { imageToRadianAngle } from "./imagetovectorfieldandmagnitude";
+import { createImageFromBase64 } from "../../util/webglobjectbuilders";
+export { createVectorFieldImage, imageToMagnitude, WindPlugin, createImageFromBase64, imageToRadianAngle };

package/vectorfield/wind/plugin-persistant copy.ts

@@ -0,0 +1,461 @@
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+
+// import { Globe } from "../../types";
+// import { imageToFields } from "./adapters/image-to-fields.js";
+// import ParticlePlugin from "../waveparticles/plugin";
+// import { createImageFromBase64 } from "../../util/webglobjectbuilders";
+// import { TexturePointSampler } from "../../heatwave/texture-point-sampler";
+// import imageToMagnitude, { imageToRadianAngle } from "./imagetovectorfieldandmagnitude.js";
+// import { WindData, LegendData } from "./adapters/types.js";
+
+// /**
+//  * Shader Dökümanı:
+//  * * Vektör alan haritasında kaçış değeri
+//  * texture2D(u_wind, pos).rg == vec2(0.0, 0.0) değerini kaçış için kullandım.
+//  * Deniz rüzgarları gibi haritalarda kara için rg değerleri 0.0 oluyor.
+//  * Gerçek bir partikülün rg == vec2(0.0, 0.0) değerinde olma olasılığı düşük.
+//  * Hem yatay ve hem dikey boyutta en düşük değere sahip olmalı. 
+//  *
+//  */
+
+
+// type LegendData = {
+//     thresholds: number[];
+//     values: string[];
+// };
+
+// type WindData = {
+//     image: HTMLImageElement;
+//     uMin: number;
+//     vMin: number;
+//     uMax: number;
+//     vMax: number;
+// };
+
+// /*
+//      * @param { Object } windData
+//     * @param { HTMLImageElement } windData.image - image element
+
+//         * @param { number } windData.uMin - minimum u value
+//             * @param { number } windData.vMin - minimum v value
+//                 * @param { number } windData.uMax - maximum u value
+//                     * @param { number } windData.vMax - maximum v value
+//                     * 
+//                     */
+
+
+
+
+
+// type WindDataMeta = {
+//     width: number;
+//     height: number;
+//     bbox: number[]; // [minLon, minLat, maxLon, maxLat]
+//     flipY?: boolean;
+// };
+
+// type WindPluginOptions = {
+//     fadeOpacity?: number;
+//     speedFactor?: number;
+//     dropRate?: number;
+//     dropRateBump?: number;
+//     baseOpacity?: number;
+//     pointSize?: number;
+//     minSpeedThreshold?: number;
+//     maxSpeedThreshold?: number;
+//     height?: number;
+//     legendData?: LegendData;
+// };
+
+// const defaultRampColors = [
+//     [0.0, '#5e4fa2'],
+//     [0.08, '#3288bd'],
+//     [0.2, '#66c2a5'],
+//     [0.3, '#abdda4'],
+//     [0.4, '#e6f598'],
+//     [0.5, '#fee08b'],
+//     [0.6, '#fdae61'],
+//     [0.7, '#f46d43'],
+//     [1.0, '#d53e4f']
+// ];
+
+
+
+
+// const windyLegendData = {
+//     "thresholds": [0, 3, 3, 5, 5, 7, 10, 10, 13, 15, 15, 17, 20, 20, 25, 25, 30],
+//     //  0 5 10 20 30 40 60
+//     // "thresholds": [0, 5, 5, 10, 10, 15, 15, 20, 20, 25, 25, 30, 30, 35, 40, 60],
+//     "values": [
+//         "#6271B8",
+//         "#6271B8",
+//         "#6271B8",
+//         "#6271B8",
+//         "#3D6EA3",
+//         "#4A94AA",
+//         "#4A9294",
+//         "#4D8E7C",
+//         "#4CA44C",
+//         "#67A436",
+//         "#A28740",
+//         "#A26D5C",
+//         "#8D3F5C",
+//         "#974B91",
+//         "#5F64A0",
+//         "#5B88A1",
+//         "#5B88A1"
+//     ]
+// };
+
+
+
+
+// export default class WindPlugin {
+
+//     public id: string;
+//     public globe!: Globe;
+//     private gl: WebGLRenderingContext | null = null;
+//     private particalPlugin!: ParticalPlugin
+//     private windMetadata: WindDataMeta;
+//     private legendData: LegendData;
+//     private options: WindPluginOptions;
+//     private windData: WindData | null;
+//     /**
+//      * @param {String} id   
+//      * @param {Object} windDataMeta
+//      * @param {number} windDataMeta.width - image width
+//      * @param {number} windDataMeta.height - image height
+//      * @param {Array} windDataMeta.bbox - bounding box [minLon, minLat, maxLon, maxLat]
+//      * @param {Object} options 
+//      * @param {number} options.fadeOpacity - how fast the particle trails fade on each frame | between 0 - 1 | default 0.746
+//      * @param {number} options.speedFactor - how fast the particles move | between 0 - 1 | default 0.6
+//      * @param {number} options.dropRate - how often the particles move to a random place | between 0 - 1 | default 0.007
+//      * @param {number} options.dropRateBump - drop rate increase relative to individual particle speed
+//      * @param {number} options.baseOpacity - opacity of drawn particle trails | between 0 - 1 | default 1.0
+//      * @param {number} options.pointSize - draw size of each particle | positive number | default 2.0
+//      * @param {number} options.minSpeedThreshold - minimum speed value | positive number | default 0.0
+//      * @param {number} options.maxSpeedThreshold - maximum speed value | positive number | default 1000.0
+//      * @param {number} options.height - height of the particles | number | default 0.0
+//      * @param {number} numParticles - number of particles | positive integer
+//      * @param {LegendData} options.legendData - legend data
+//      */
+//     constructor(id: string,
+//         windDataMeta: WindDataMeta,
+//         legendData: LegendData,
+//         options: WindPluginOptions = {}) {
+
+//         this.id = id;
+//         this.legendData = legendData;
+//         this.windDataMeta = windDataMeta;
+
+//         this.options = {
+//             ...{
+//                 fadeOpacity: 0.746,
+//                 speedFactor: 0.6,
+//                 dropRate: 0.007,
+//                 dropRateBump: 0.001,
+//                 baseOpacity: 1.0,
+//                 pointSize: 2.0,
+//                 minSpeed: 0.0,
+//                 maxSpeed: 1000.0,
+//                 height: 0.0,
+//                 numParticles: 40000,
+//                 legendData: windyLegendData
+//             }, ...options
+//         }
+//         this.windData = null;
+
+//     }
+
+//     // globe plugin init methodu
+//     init(globe: Globe, gl: WebGL2RenderingContext) {
+//         this.globe = globe;
+//         this.gl = gl;
+
+//         const particalPluginOptions = {
+//             fadeOpacity: this.options.fadeOpacity,
+//             speedFactor: this.options.speedFactor,
+//             dropRate: this.options.dropRate,
+//             dropRateBump: this.options.dropRateBump,
+//             baseOpacity: this.options.baseOpacity,
+//             pointSize: this.options.pointSize,
+//             minSpeed: this.options.minSpeedThreshold,
+//             maxSpeed: this.options.maxSpeedThreshold,
+//             dataHeight: this.options.height,
+//             numParticles: this.options.numParticles,
+//             dataHeight: this.options.height,
+//         } as ParticalPluginOptions;
+
+//         this.particalPlugin = new ParticalPlugin("wind-partical-plugin",
+//             particalPluginOptions);
+//         this.particalPlugin.init(globe, gl);
+
+//     }
+
+
+
+
+//     // Uniforms are loaded once, on initiation and when they are changed.
+
+//     set height(value) {
+//         this._height = value;
+//         this._loadHeight();
+//     }
+
+
+//     set minSpeed(value) {
+//         this._minSpeed = value;
+//         this._loadMinMaxSpeed();
+//     }
+
+
+//     set maxSpeed(value) {
+//         this._maxSpeed = value;
+//         this._loadMinMaxSpeed();
+//     }
+
+
+//     set fadeOpacity(value) {
+//         this._fadeOpacity = value;
+//         this._loadFadeOpacity();
+//     }
+
+
+//     set speedFactor(value) {
+//         this._speedFactor = value;
+//         this._loadSpeedFactor()
+//     }
+
+
+//     set dropRate(value) {
+//         this._dropRate = value;
+//         this._loadDropRate();
+//     }
+
+
+//     set dropRateBump(value) {
+//         this._dropRateBump = value;
+//         this._loadDropRateBump();
+//     }
+
+
+//     set baseOpacity(value) {
+//         this._baseOpacity = value;
+//         this._loadBaseOpacity();
+//     }
+
+
+//     set pointSize(value) {
+//         this._pointSize = value;
+//         this._loadPointSize();
+//     }
+
+
+
+
+//     // Color ramp methods. 
+//     // Color ramp is used to colorize the particles according to their speed.
+//     // Legend max value is used to normalize the speed values.
+
+//     setColorRamp(colors) {
+//         // lookup texture for colorizing the particles according to their speed
+//         if (this.gl == null) {
+//             return;
+//         }
+//         this.colorRampTexture = createTexture(this.gl, this.gl.LINEAR, getColorRamp(colors), 16, 16);
+//     }
+
+//     setColorRampDefault() {
+//         const { uMax, uMin, vMax, vMin } = this.windData;
+//         const maxSpeed = Math.sqrt(
+//             uMax * uMax + vMax * vMax
+//         )
+//         const minSpeed = Math.sqrt(
+//             uMin * uMin + vMin * vMin
+//         )
+//         // console.log("maxSpeed", maxSpeed, "minSpeed", minSpeed);
+//         this._rampMax = maxSpeed > minSpeed ? maxSpeed : minSpeed;
+//         this._loadRampMax();
+//         this.setColorRamp(defaultRampColors);
+
+//     }
+
+//     /**
+//      * 
+//      * @param {*} legendData 
+//      * @param {Array} legendData.thresholds - list of integers
+//      * @param {Array} legendData.values - list of colors in hex format like #ff0000 (alpha is not included)
+//      * 
+//      */
+//     setLegend(legendData) {
+//         const { gl } = this;
+//         if (gl === null) {
+//             throw new Error("wind plugin. setColorRampFromService is called before plugin is registered.");
+//         }
+//         const { thresholds, values } = legendData;
+//         if (thresholds.length === 0 || values.length === 0) {
+//             return;
+//         }
+//         thresholds.push(thresholds[thresholds.length - 1]);
+//         values.push(values[values.length - 1]);
+
+//         const maxVelocity = thresholds[thresholds.length - 1];
+
+//         const colors = [];
+//         for (let i = 0; i < thresholds.length; i++) {
+//             colors.push([
+//                 thresholds[i] / maxVelocity,
+//                 values[i]
+//             ]);
+//         }
+//         const colorRamp = getColorRamp(colors);
+//         this.colorRampTexture = createTexture(gl, gl.LINEAR, colorRamp, 16, 16);
+//         this._rampMax = maxVelocity;
+//         this._loadRampMax();
+//     }
+
+
+
+
+//     // particle coordinates are encoded into RGBA texture
+
+//     set numParticles(numParticles) {
+//         const gl = this.gl;
+//         // we create a square texture where each pixel will hold a particle position encoded as RGBA
+//         const particleRes = this.particleStateResolution = Math.ceil(Math.sqrt(numParticles));
+//         this._numParticles = particleRes * particleRes;
+
+//         const particleState = new Uint8Array(this._numParticles * 4);
+//         for (let i = 0; i < particleState.length; i++) {
+//             particleState[i] = Math.floor(Math.random() * 256); // randomize the initial particle positions
+//         }
+//         // textures to hold the particle state for the current and the next frame
+//         this.particleStateTexture0 = createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
+//         this.particleStateTexture1 = createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
+
+//         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+//         gl.useProgram(this.updateProgram.program);
+//         gl.uniform1f(this.updateProgram.u_wind_res, this.particleStateResolution);
+//         gl.useProgram(this.drawSphereProgram.program);
+//         gl.uniform1f(this.drawSphereProgram.u_particles_res, this.particleStateResolution);
+//         gl.useProgram(this.drawFlatProgram.program);
+//         gl.uniform1f(this.drawFlatProgram.u_particles_res, this.particleStateResolution);
+//         gl.useProgram(currentProgram);
+
+//         // console.log("numParticles", this._numParticles);
+//         const particleIndices = new Float32Array(this._numParticles);
+//         for (let i = 0; i < this._numParticles; i++) particleIndices[i] = i;
+//         this.particleIndexBuffer = createBuffer(gl, particleIndices);
+//     }
+
+
+//     get numParticles() {
+//         return this._numParticles;
+//     }
+
+//     // Vector field texture is used to calculate the particle movement.
+//     /**
+//      * @param {Object} windData 
+//      * @param {HTMLImageElement} windData.image - image element
+     
+//      * @param {number} windData.uMin - minimum u value
+//      * @param {number} windData.vMin - minimum v value
+//      * @param {number} windData.uMax - maximum u value
+//      * @param {number} windData.vMax - maximum v value
+//      */
+//     setWind(windData) {
+//         if (windData === null) {
+//             return;
+//         }
+//         const windDataMeta = this._windDataMeta;
+//         const gl = this.gl;
+//         this.windData = windData;
+//         this.windTexture = createTexture(gl, gl.LINEAR, windData.image);
+//         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+//         gl.useProgram(this.updateProgram.program);
+
+//         gl.uniform2f(this.updateProgram.u_wind_res, windDataMeta.width, windDataMeta.height);
+//         gl.uniform2f(this.updateProgram.u_wind_min, this.windData.uMin, this.windData.vMin);
+//         gl.uniform2f(this.updateProgram.u_wind_max, this.windData.uMax, this.windData.vMax);
+//         this.setGeometry();
+//         console.log("windData bbox", windData.bbox);
+//         const minXY = this._latLongToPixelXY(windDataMeta.bbox[1], windDataMeta.bbox[0]);
+//         const maxXY = this._latLongToPixelXY(windDataMeta.bbox[3], windDataMeta.bbox[2]);
+//         this._loadBoundingBoxData(minXY.x, minXY.y, maxXY.x, maxXY.y);
+
+//         gl.useProgram(currentProgram);
+
+
+//         this._setCoorcinatesDataCalculatorData();
+//         this.resize();
+//     }
+
+//     // Vector field texture is used to calculate the particle movement.
+//     /**
+//      * @param {Object} windData 
+//      * @param {BaseInt64} windData.image - image element
+//      * @param {number} windData.width - image width
+//      * @param {number} windData.height - image height
+//      * @param {number} windData.uMin - minimum u value
+//      * @param {number} windData.vMin - minimum v value
+//      * @param {number} windData.uMax - maximum u value
+//      * @param {number} windData.vMax - maximum v value
+//      * @param {Array} windData.bbox - bounding box [minLon, minLat, maxLon, maxLat]
+//      */
+//     setWindDataWithImageBase64(windData) {
+//         const image = createImageFromBase64(windData.image)
+//         image.onload = () => {
+//             windData.image = image;
+//             this.setWind(windData);
+//         }
+//     }
+
+//     /**
+//      * @param
+//      * @returns 
+//      */
+//     getTexturePointSampler(type: 'magnitude' | 'angle' = 'magnitude') {
+//         // if (type === `magnitude`) {
+//         //     if (!this.texturePointSampler) {
+//         //         this._createTexturePointSampler();
+//         //         this._setCoorcinatesDataCalculatorData();
+//         //     }
+//         //     return this.texturePointSampler;
+//         // } else if (type === `angle`) {
+//         //     if (!this.texturePointSamplerAngle) {
+//         //         this._createTexturePointSamplerAngle();
+//         //         this._setCoorcinatesDataCalculatorData();
+
+//         //     }
+//         //     return this.texturePointSamplerAngle;
+//         // } else {
+//         //     throw new Error(`WindPlugin.getTexturePointSampler: type must be either 'magnitude' or 'angle'.`);
+//         // }
+
+//     }
+
+
+
+//     // globe calls `draw3D` method on each frame
+//     draw3D() {
+
+//     }
+
+
+
+
+
+
+
+
+
+//     // globe calls this `free` on plugin object unregistration
+
+//     free() {
+
+
+//     }
+// }
+