@pirireis/webglobeplugins 0.0.1

package/util/shaderfunctions/geometrytransformations.js

@@ -0,0 +1,129 @@
+// Z in kolometers
+// 
+
+
+
+export const POLE = `
+#ifndef POLE
+#define POLE 20037508.34
+#endif
+`;
+
+export const R = `
+#ifndef R
+#define R 6378136.99911
+#endif
+`;
+
+export const PI = `
+#ifndef PI
+#define PI 3.1415926535897932384626433832795
+#endif
+`;
+
+export const POLE_BY_PI = `
+#ifndef POLE_BY_PI
+#define POLE_BY_PI 6378136.99911
+#endif
+`;
+
+export const R_3D = `
+#ifndef R_3D
+#define R_3D 6378.137
+#endif
+`;
+
+export const pixelXYToCartesian3DPoint = R_3D + PI + `
+vec3 pixelXYToCartesian3DPoint( vec3 position) {
+    float longRad = PI * (2.0 * position.x - 1.0);
+    float latRad = PI *  position.y;
+    float radius = R_3D + position.z;
+    float x = radius * sin(latRad) * cos(longRad);
+    float y = radius * sin(latRad) * sin(longRad);
+    float z = radius * cos(latRad);
+    return vec3(x, y, z);
+}
+`;
+
+export const pixelXYToCartesian2DPoint = PI + POLE + POLE_BY_PI + `
+vec2 pixelXYToCartesian2DPoint( vec2 position, vec2 translate, vec2 mapWH, vec2 screenWH) {
+    float x = (2.0 * position.x - 1.0) * POLE;
+    x = ((x - translate.x) / mapWH.x) * screenWH.x;    
+    float y = log( tan( ( 1.0 - position.y ) * PI / 2.0  ) ) * POLE_BY_PI;
+    y = (1.0 - (y - translate.y) / mapWH.y) * screenWH.y;
+    return  vec2(x, y);
+}
+`;
+
+
+export const mercatorXYTo2DPoint = `
+vec4 mercatorXYTo2DPoint( vec2 position) { // projection, translate, mapWH, screenWH comes from camera uniform block
+    float x = (( position.x - translate.x ) / mapWH.x) * screenWH.x;
+    float y = (1.0 - (position.y - translate.y) / mapWH.y) * screenWH.y;
+    return projection * vec4(x, y, 0.0, 1.0);
+} 
+`;
+
+
+
+
+// pi / pole = 2 / R
+
+
+
+export const longLatRadToMercator = R + PI + `
+vec2 longLatRadToMercator( vec2 longLatRad) {
+    float x = R * longLatRad.x;
+    float y = R * log( tan( PI / 4.0 + longLatRad.y / 2.0 ) );
+    return vec2(x, y);
+}
+`;
+
+
+export const longLatRadToCartesian3D = R_3D + `
+vec3 longLatRadToCartesian3D( vec2 longLat) {
+    float x = R_3D * cos(longLat.y) * cos(longLat.x);
+    float y = R_3D * cos(longLat.y) * sin(longLat.x);
+    float z = R_3D * sin(longLat.y);
+    return vec3(x, y, z);
+}
+`;
+
+
+
+export const circleLimpFromLongLatRadCenterCartesian3D = R + `
+vec3 circleLimpFromLongLatRadCenterCartesian3D( vec2 center, float radius, float angle) {
+    vec3 geoW = longLatRadToCartesian3D(center);
+    vec3 normal = normalize(geoW);
+    vec3 tangent1 = cross(normal, vec3(0.0, 0.0, 1.0));
+    if ( length(tangent1) < 0.1 ){ tangent1 = cross(normal, vec3(0.0, 1.0, 0.0)); }
+    tangent1 = normalize(tangent1);
+    // rotate tangent with given angle
+    tangent1 = cos(angle) * tangent1 + sin(angle) * cross(normal, tangent1);
+    return (geoW * cos(radius/R))+ tangent1 * radius / 1000.0;
+    }
+`;
+
+
+export const circleLimpFromLongLatRadCenterMercatorRealDistance = `
+vec2 circleLimpFromLongLatRadCenterMercatorRealDistance(vec2 center, float radius, float angle){
+    
+    float radius_radian =  radius / R;
+    float lat = center.y + radius_radian * sin(angle);
+    float scale = 1.0/abs( cos( lat ) );
+    vec2 center_ = longLatRadToMercator(center);
+
+    float x = center_.x +  scale * radius * cos(angle);
+    float y = center_.y +  scale * radius * sin(angle);
+    return vec2(x, y);
+}
+`;
+
+
+export const circleLimpFromLongLatRadCenterMercatorCompass = `
+vec2 circleLimpFromLongLatRadCenterMercatorCompass(vec2 center, float radius, float angle){
+    vec2 center_ = longLatRadToMercator(center);
+    float y = sin(angle) * radius + center_.y;
+    float x = cos(angle) * radius + center_.x;
+    return vec2(x, y);
+}`;

package/util/shaderfunctions/index.js

@@ -0,0 +1,2 @@
+export * from './geometrytransformations';
+export * from './nodata';

package/util/shaderfunctions/nodata.js

@@ -0,0 +1,10 @@
+const vertexIDtoTextureCoordinate = `
+vec2 vertexIDtoTextureCoordinate(float id, vec2 textureDimentions) {
+    float x = mod(id, textureDimentions.x);
+    float y = floor(id / textureDimentions.x);
+    return vec2( x / textureDimentions.x, y / textureDimentions.y);
+}
+`;
+
+
+export {vertexIDtoTextureCoordinate};

package/util/shaderfunctions/noisefunctions.js

@@ -0,0 +1,44 @@
+const permute34 = ```vec3 permute34(vec3 x) {
+    x = ((x * 34.0) + 1.0) * x;
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}```;
+
+const waveNoice = ```float waveNoice(vec2 v)
+{
+    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); 
+
+	  vec2 i = floor(v + dot(v, C.yy));
+	  vec2 x0 = v - i + dot(i, C.xx);
+
+	  vec2 i1;
+    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+
+	  vec4 x12 = x0.xyxy + C.xxzz;
+    x12.xy -= i1;
+
+    i = i - floor(i * (1.0 / 289.0)) * 289.0;
+
+	  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
+        + i.x + vec3(0.0, i1.x, 1.0));
+
+	  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
+    m = m * m;
+    m = m * m;
+
+	  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+	  vec3 h = abs(x) - 0.5;
+	  vec3 ox = floor(x + 0.5);
+	  vec3 a0 = x - ox;
+
+    m *= inversesqrt(a0 * a0 + h * h);
+
+	  vec3 g;
+    g.x = a0.x * x0.x + h.x * x0.y;
+    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+    return 130.0 * dot(m, g);
+}```;
+
+
+export default {
+    permute34, waveNoice
+}

package/util/webglobe/gldefaultstates.js

@@ -0,0 +1,4 @@
+
+export function defaultblendfunction(gl) {
+    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
+}

package/util/webglobe/index.js

@@ -0,0 +1,2 @@
+export * from './rasteroverlay';
+export * from './gldefaultstates';

package/util/webglobe/rasteroverlay.js

@@ -0,0 +1,96 @@
+/**
+ * Iceride bir canvas uretir ve degisiklikler bu kanvasta yapilir
+ */
+
+// this class loads texture to raster overlay
+class RasterOverlayLoader {
+    constructor(id, globe, { opacity = 1.0, minLon = -180, minLat = -90, maxLon = 180, maxLat = 90, beforeObject = null, canvas = null, callBack = null } = {}) {
+
+        this.canvas = canvas || document.createElement('canvas');
+        this.gl = this.canvas.getContext('webgl2');
+        this.globe = globe;
+        this.id = id;
+        this._opacity = opacity;
+        this.bbox = { ll: { x: minLon, y: minLat }, ur: { x: maxLon, y: maxLat } };
+
+        this._beforeObject = beforeObject;
+
+        this._isProcessing = false;
+        this._callBack = callBack;
+
+    }
+
+    getGL() {
+        return this.gl;
+    }
+
+    getCanvasURL() {
+        return this.canvas.toDataURL();
+    }
+
+    setBBox(minLon, minLat, maxLon, maxLat) {
+        this.bbox = { ll: { x: minLon, y: minLat }, ur: { x: maxLon, y: maxLat } };
+        this.draw();
+    }
+
+    setCanvasWidthHeight(width, height) {
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.gl.viewport(0, 0, width, height);
+    }
+
+
+    draw() {
+        if (!this._isProcessing) {
+            requestAnimationFrame(this._draw.bind(this));
+            this._isProcessing = true;
+        }
+    }
+
+
+    _draw() {
+        this.globe.api_DeleteImageOverlay(this.id);
+        const id = this.id;
+        const imgUrl = this.getCanvasURL()
+        const bbox = this.bbox
+        const opacity = this._opacity
+        const rotDeg = 0
+        const color = null
+        const beforeObject = this._beforeObject
+        const callback = this._callBack || function () { };
+        this.globe.api_AddImageOverlay(id, imgUrl, bbox, color, opacity, rotDeg, beforeObject, callback);
+        this._isProcessing = false;
+    }
+
+    setBeforeObject(beforeObject) {
+        this._beforeObject = beforeObject;
+        this.draw();
+    }
+
+    setCallback(callback) {
+        this._callBack = callback;
+    }
+
+    setOpacity(opacity) {
+        if (opacity < 0 || opacity > 1) { return; }
+        this._opacity = opacity;
+        this.globe.api_SetImageOverlayColor(this.id, null, opacity)
+    }
+
+
+    free() {
+        this.globe.api_DeleteImageOverlay(this.id);
+    }
+
+
+    on() {
+        this.draw();
+    }
+
+    off() {
+        this.globe.api_DeleteImageOverlay(this.id);
+    }
+
+}
+
+export { RasterOverlayLoader };

package/util/webglobjectbuilders.js

@@ -0,0 +1,256 @@
+
+export function createShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        throw new Error(gl.getShaderInfoLog(shader));
+    }
+
+    return shader;
+}
+
+export function createProgram(gl, vertexSource, fragmentSource) {
+    const program = gl.createProgram();
+
+    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
+    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+
+    gl.compileShader(vertexShader);
+    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+        console.error(gl.getShaderInfoLog(vertexShader));
+        return;
+    }
+
+    gl.compileShader(fragmentShader);
+    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+        console.error(gl.getShaderInfoLog(fragmentShader));
+        return;
+    }
+
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error(gl.getProgramInfoLog(program));
+        return;
+    }
+    return program;
+}
+
+export function createProgramWrapper(gl, vertexSource, fragmentSource) {
+    const program = gl.createProgram();
+
+    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
+    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.log(gl.getProgramInfoLog(program));
+        throw new Error(gl.getProgramInfoLog(program));
+    }
+
+    const wrapper = { program: program };
+
+    const numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+    for (let i = 0; i < numAttributes; i++) {
+        const attribute = gl.getActiveAttrib(program, i);
+        wrapper[attribute.name] = gl.getAttribLocation(program, attribute.name);
+    }
+    const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+    for (let i = 0; i < numUniforms; i++) {
+        const uniform = gl.getActiveUniform(program, i);
+        wrapper[uniform.name] = gl.getUniformLocation(program, uniform.name);
+    }
+
+    return wrapper;
+}
+
+export function createTexture(gl, filter, data, width, height) {
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    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);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+    if (data instanceof Uint8Array) {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    } else {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    }
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return texture;
+}
+
+export function bindTexture(gl, texture, unit) {
+    gl.activeTexture(gl.TEXTURE0 + unit);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+}
+
+export function createBuffer(gl, data) {
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    return buffer;
+}
+
+export function bindAttribute(gl, buffer, attribute, numComponents) {
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.enableVertexAttribArray(attribute);
+    gl.vertexAttribPointer(attribute, numComponents, gl.FLOAT, false, 0, 0);
+}
+
+export function bindFramebuffer(gl, framebuffer, texture) {
+    if (texture) {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+    } else {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    }
+}
+
+
+export function decodeBase64(data) {
+    const binary_string = atob(data);
+    const len = binary_string.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        bytes[i] = binary_string.charCodeAt(i);
+    }
+    return bytes;
+}
+
+
+export function createImageFromBase64(encodedData) {
+    const bytes = decodeBase64(encodedData);
+    const blob = new Blob([bytes.buffer], { type: "image/png" });
+    const urlCreator = window.URL || window.webkitURL;
+    const imageUrl = urlCreator.createObjectURL(blob);
+    const image = new Image();
+    image.src = imageUrl;
+    return image;
+}
+
+
+export function getColorRamp(colors) {
+    // console.log("getColorRamp", colors)
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    canvas.width = 256;
+    canvas.height = 1;
+
+    const gradient = ctx.createLinearGradient(0, 0, 256, 0);
+
+    for (const stop in colors) {
+        // console.log("stop", stop);
+        gradient.addColorStop(colors[stop][0], colors[stop][1]);
+        // Alttaki satir ile gradienti cevirip, shaderda ki `speed_t = 1.0 - speed_t`' kaldirdim.
+        // gradientin en dusuk olmasi gereken siyah - mavi aralikta, mor renk gozlemledim.
+        // gradient.addColorStop( 1.0 - colors[stop][0], colors[stop][1]);
+    }
+
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 256, 1);
+
+    return new Uint8Array(ctx.getImageData(0, 0, 256, 1).data);
+}
+
+
+export function getColorRampDiscrate(values, thresholds) {
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    canvas.width = 256;
+    canvas.height = 1;
+
+    const gap = 1.0 / 256;
+
+    const gradient = ctx.createLinearGradient(0, 0, 256, 0);
+
+    for (let i = 0; i < thresholds.length - 1; i++) {
+        gradient.addColorStop(thresholds[i], values[i]);
+        gradient.addColorStop(thresholds[i + 1] - gap
+            , values[i]);
+    }
+    gradient.addColorStop(thresholds[thresholds.length - 1], values[values.length - 1]);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 256, 1);
+
+    return new Uint8Array(ctx.getImageData(0, 0, 256, 1).data);
+}
+
+export function getColorRampInterpolated(values, thresholds) {
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    canvas.width = 256;
+    canvas.height = 1;
+
+
+    const gradient = ctx.createLinearGradient(0, 0, 256, 0);
+
+    // const gap = 1.0 / 256;
+    // gradient.addColorStop(thresholds[0], values[0]);
+    // gradient.addColorStop(thresholds[0] + gap, values[1]);
+
+
+    for (let i = 0; i < thresholds.length; i++) {
+        gradient.addColorStop(thresholds[i], values[i]);
+    }
+    // gradient.addColorStop(thresholds[thresholds.length - 1] - gap, values[values.length - 1]);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 256, 1);
+
+    return new Uint8Array(ctx.getImageData(0, 0, 256, 1).data);
+}
+
+/**
+ * values: n + 1 number of color hex values without alpha channel. Ex: ["#ff0000", "#00ff00", "#0000ff"]
+ * thresholds: n number of thresholds. Ex: [0, 10, 20]
+ * mode: [discrete, interpolated,]
+ */
+export function getColorRampModed(values, thresholds, mode = "interpolated") {
+
+    if (mode === "discrete") {
+        return getColorRampDiscrate(values, thresholds);
+    } else if (mode === "interpolated") {
+        return getColorRampInterpolated(values, thresholds);
+    } else {
+        throw new Error("mode is not valid");
+    }
+}
+export function defaultColorRamp() {
+    const defaultRampColors = [
+        [0.0, '#5e4fa2'],
+        [0.15, '#3288bd'],
+        [0.20, '#66c2a5'],
+        [0.25, '#66c2a5'],
+        [0.3, '#abdda4'],
+        [0.4, '#e6f598'],
+        [0.5, '#fee08b'],
+        [0.6, '#fdae61'],
+        [0.7, '#f46d43'],
+        [1.0, '#ff1e13']
+    ];
+    return getColorRamp(defaultRampColors);
+}
+
+export function reloadCurrentGLProgram() {
+    return function (target, key, descriptor) {
+        const originalMethod = descriptor.value;
+        descriptor.value = function () {
+            const gl = target.gl;
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            originalMethod.apply(this, arguments);
+            gl.useProgram(currentProgram);
+        }
+    }
+}

package/waveparticles/adaptor.js

@@ -0,0 +1,16 @@
+function centigradePlus90ToVectorArray(centigradeArray, noDataValue = -9999) {
+    const vectorArray = new Float32Array(centigradeArray.length * 2);
+    for (let i = 0; i < centigradeArray.length; i++) {
+        if (centigradeArray[i] === noDataValue) {
+            vectorArray.set([0, 0], i * 2);
+            continue;
+        }
+        const rad = (centigradeArray[i] + 90.0) * Math.PI / 180;
+        const x = Math.cos(rad);
+        const y = Math.sin(rad);
+        vectorArray.set([x, y], i * 2);
+    }
+    return vectorArray;
+}
+
+export { centigradePlus90ToVectorArray }

package/waveparticles/index.js

@@ -0,0 +1,4 @@
+import VectorFieldWaveParticle from "./plugin";
+import { centigradePlus90ToVectorArray } from "./adaptor";
+export default VectorFieldWaveParticle;
+export { centigradePlus90ToVectorArray };