@pirireis/webglobeplugins 0.8.5 → 0.8.7

package/util/gl-util/uniform-block/manager.js

@@ -0,0 +1,176 @@
+import "./types";
+
+const typeSizes = {
+    'float': 4,
+    'vec2': 8,
+    'vec3': 16,  // vec3 takes up same space as vec4 due to alignment
+    'vec4': 16,
+    'mat2': 32,  // 2 vec4s (16 * 2)
+    'mat3': 48,  // 3 vec4s (16 * 3)
+    'mat4': 64,  // 4 vec4s (16 * 4)
+    'int': 4,
+    'ivec2': 8,
+    'ivec3': 16,
+    'ivec4': 16,
+    'bool': 4
+};
+
+const typeAlignments = {
+    'float': 4,
+    'vec2': 8,
+    'vec3': 16,
+    'vec4': 16,
+    'mat2': 16,  // aligns to vec4 boundary
+    'mat3': 16,  // aligns to vec4 boundary
+    'mat4': 16,  // aligns to vec4 boundary
+    'int': 4,
+    'ivec2': 8,
+    'ivec3': 16,
+    'ivec4': 16,
+    'bool': 4
+};
+
+
+const typeArrayConstructors = {
+    'float': Float32Array,
+    'vec2': Float32Array,
+    'vec3': Float32Array,
+    'vec4': Float32Array,
+    'mat2': Float32Array,
+    'mat3': Float32Array,
+    'mat4': Float32Array,
+    'int': Int32Array,
+    'ivec2': Int32Array,
+    'ivec3': Int32Array,
+    'ivec4': Int32Array,
+    'bool': Float32Array
+};
+
+
+class UniformBlockManager {
+
+    /**
+     * 
+     * @param {UniformBlockName} blockName 
+     * @param {Array<UniformBlockMember} blockMembers 
+     * @param {string} prefix usage name of block in the shader 
+     */
+    constructor(blockName, blockMembers, bindingPoint, prefix = "") {
+        this.blockName = blockName;
+        this.blockMembers = blockMembers;
+        this.bindingPoint = bindingPoint;
+        this.prefix = prefix;
+        this.offsetMap = this.__create_LayoutSTD140_OffsetMap();
+        this.size = this.__calculateSize();
+    }
+
+
+
+    glslCode() {
+        let code = `layout(std140) uniform ${this.blockName} {`;
+        for (const member of this.blockMembers) {
+            const { name, type } = member;
+            code += `${type} ${this.prefix}${name};`;
+        }
+        if (this.prefix) {
+            code += `} ${this.prefix};`;
+        } else {
+            code += `};`;
+        }
+        return code;
+    }
+
+
+    createUBO(gl, bufferWriteType = "STATIC_DRAW") {
+        const ubo = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferData(gl.UNIFORM_BUFFER, this.size, gl[bufferWriteType]);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
+
+        for (const member of this.blockMembers) {
+            const { name, type, value = null } = member;;
+            const offset = this.offsetMap.get(name);
+            const data = (value === null) ? new typeArrayConstructors[type](typeSizes[type] / 4).fill(NaN) : value;
+            gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+
+        return { // TODO typedef this, encapsulate this in a class or something, ask ai
+            ubo,
+            update: this.updateUBO.bind(this, gl, ubo),
+            bind: this.bind.bind(this, gl, ubo),
+            unbind: this.unbind.bind(this, gl),
+            free: () => gl.deleteBuffer(ubo)
+        };
+    }
+
+
+    updateUBO(gl, ubo, nameValueMap) {
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        for (const [name, value] of nameValueMap.entries()) {
+            const offset = this.offsetMap.get(name);
+            const type = this.blockMembers.find(member => member.name === name).type;
+            if (offset === undefined) {
+                throw new Error(`Uniform block member ${name} not found in offset map.`);
+            }
+            let data;
+            if (Array.isArray(value)) {
+                data = new typeArrayConstructors[type](value);
+            } else if (typeof value === 'number') {
+                data = new typeArrayConstructors[type]([value]);
+            } else if (value instanceof ArrayBuffer) {
+                data = new typeArrayConstructors[type](value);
+            } else if (ArrayBuffer.isView(value) && !(value instanceof DataView))
+                data = (typeof value === 'number') ? new typeArrayConstructors[type]([value]) : new typeArrayConstructors[type](value);
+            else {
+                throw new Error(`Unsupported value type for ${name}: ${typeof value}`);
+            }
+            gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    // call this after linking the program
+    assignBindingPoint(gl, program) {
+        const blockIndex = gl.getUniformBlockIndex(program, this.blockName);
+        gl.uniformBlockBinding(program, blockIndex, this.bindingPoint);
+    }
+
+    // call this before drawing
+    bind(gl, ubo) {
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, ubo);
+    }
+
+    // call this right after drawing
+    unbind(gl) {
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, null);
+    }
+
+
+    // implicit methods
+    __create_LayoutSTD140_OffsetMap() {
+        let offset = 0;
+        const offsetMap = new Map();
+        for (const member of this.blockMembers) {
+            const { name, type } = member;
+            const size = typeSizes[type];
+            const alignment = typeAlignments[type];
+            const padding = (alignment - (offset % alignment)) % alignment;
+            offset += padding;
+            offsetMap.set(name, offset);
+            offset += size;
+        }
+        return offsetMap;
+    }
+
+    // __create_LayoutSTD140_OffsetMap() should be called before this
+    __calculateSize() {
+        const lastOffset = Array.from(this.offsetMap.values()).pop();
+        const lastItemAlignment = typeAlignments[this.blockMembers[this.blockMembers.length - 1].type];
+        return lastOffset + lastItemAlignment;
+    }
+
+}
+
+
+export { UniformBlockManager };

package/util/gl-util/uniform-block/roadmap.md

@@ -0,0 +1,70 @@
+# UniformBlock Wrapper
+
+- Uniform shader string
+- bind/unbind
+- set/get uniform value generic
+
+## INPUT
+- uniform block name
+- Array<{type, name}> UniformBlockMembers
+
+
+## PROCESS
+
+- Calculate and save starting offset of each member
+- Create UBO
+- Bind UBO
+- Set uniform value
+
+### Calculate and save starting offset of each member
+
+layout(std140) is a convention. The calculation should be done according to this convention.
+
+
+type | size
+--- | --- 
+float | 4 
+vec2 | 8 
+vec3 | 12 
+vec4 | 16 
+mat2 | 16 
+mat3 | 48 
+mat4 | 64 
+
+A line is 16 bytes aligned. Alignment can be shared if previous member is equal or bigger then the next member and the sum of the sizes are smaller then 16 bytes.
+
+
+
+
+
+
+
+
+
+
+## setMethod
+
+    update({
+        color = null,
+        bboxOffsetRad = null,
+        bboxSizeRad = null,
+        resolution = null,
+        tailLengthRatio = null,
+        wingLengthRatio = null,
+        height = null,
+        opacity = null,
+        noDataValue = null,
+    } = {}) {
+        const { gl, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        if (color !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array(color));
+        if (opacity !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 12, new Float32Array([opacity]));
+        if (bboxOffsetRad !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 16, new Float32Array(bboxOffsetRad));
+        if (bboxSizeRad !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 24, new Float32Array(bboxSizeRad));
+        if (resolution !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 32, new Float32Array(resolution));
+        if (tailLengthRatio !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 40, new Float32Array([tailLengthRatio]));
+        if (wingLengthRatio !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 44, new Float32Array([wingLengthRatio]));
+        if (height !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 48, new Float32Array([height]));
+        if (noDataValue !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 52, new Float32Array([noDataValue]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }

package/util/gl-util/uniform-block/types.js

@@ -0,0 +1,7 @@
+/**
+ * @typedef {string} UniformBlockName
+ *
+ * @typedef {string} GLSLType | mat4, mat3, vec4, vec3, vec2, float, int, bool
+ * @typedef {{name: string, type: GLSLType, null|Float32Array: value}} UniformBlockMember
+ * 
+ */

package/util/jshelpers/equality.js

@@ -0,0 +1,17 @@
+function arraysEqual(a, b) {
+    if (a === b) return true;
+    if (a == null || b == null) return false;
+    if (a.length !== b.length) return false;
+
+    // If you don't care about the order of the elements inside
+    // the array, you should sort both arrays here.
+    // Please note that calling sort on an array will modify that array.
+    // you might want to clone your array first.
+
+    for (var i = 0; i < a.length; ++i) {
+        if (a[i] !== b[i]) return false;
+    }
+    return true;
+}
+
+export { arraysEqual };

package/util/picking/picker-displayer.js

@@ -31,7 +31,6 @@ class PickerDisplayer {
             width = this.globe.api_ScrW();
             height = this.globe.api_ScrH();
         }
-        console.log("resize picker displayer", width, height);
         const { gl, colorTexture, indexTexture } = this;
 
         gl.deleteTexture(colorTexture);
@@ -97,6 +96,7 @@ class PickerDisplayer {
     }
 
 
+
     pickBbox(left, top, right, bottom, callback) {
         const size = (right - left) * (bottom - top) * 4;
         this._pick(size, left, top, right - left, bottom - top, callback);

package/util/programs/shapesonglobe.js

@@ -1,4 +1,5 @@
 import { createProgram } from "../webglobjectbuilders";
+import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../../programs/totems/camerauniformblock";
 import { shaderfunctions } from "..";
 /** TODO:
  * 3d icin calistir
@@ -51,19 +52,14 @@ export class ShapesOnGlobeProgram {
     }
 
     _createProgramWrapper() {
-        const gl = this.gl;
+        const { gl, globe } = this;
         const vertexSource = `#version 300 es
             precision highp float;
+            ${CameraUniformBlockString}
 
             in vec2 a_position;
             in vec4 a_color;
 
-            uniform mat4 u_model_view_matrix;
-            uniform mat4 u_proj_matrix;
-            uniform vec3 u_transpos;
-
-            uniform vec2 u_mapWH;
-            uniform vec2 u_scrWH;
 
             uniform bool u_is3D;
             uniform float height; 
@@ -77,14 +73,13 @@ export class ShapesOnGlobeProgram {
 
 
             void main() {
-                // vec3 pos = u_bbox_matrix * vec3(a_position, height);
                 vec3 pos = vec3(a_position, height);
-                if(u_is3D){
+                if(is3D){
                     pos = pixelXYToCartesian3DPoint(pos);
-                    gl_Position = u_proj_matrix * u_model_view_matrix * vec4(pos - u_transpos, 1.0);
+                    gl_Position = projection * view * vec4(pos - translate, 1.0);
                 } else {
-                    vec2 xy = pixelXYToCartesian2DPoint(pos.xy, u_transpos.xy, u_mapWH, u_scrWH);
-                    gl_Position = u_proj_matrix * vec4(xy.x, xy.y, 0.0, 1.0);
+                    vec2 xy = pixelXYToCartesian2DPoint(pos.xy, translate.xy, mapWH, screenWH);
+                    gl_Position = projection * vec4(xy.x, xy.y, 0.0, 1.0);
                 }
                 gl_PointSize = u_point_size;
                 v_color = a_color;
@@ -121,17 +116,18 @@ export class ShapesOnGlobeProgram {
         gl.vertexAttribPointer(a_color, 4, gl.FLOAT, false, 6 * 4, 2 * 4);
         gl.bindVertexArray(null);
 
+        const cm = CameraUniformBlockTotemCache.get(globe);
+        const bindingPoint = 0;
+        const cmIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+        gl.uniformBlockBinding(program, cmIndex, bindingPoint);
+
         return {
             program: program,
             vao: vao,
-            u_model_view_matrix: gl.getUniformLocation(program, 'u_model_view_matrix'),
-            u_proj_matrix: gl.getUniformLocation(program, 'u_proj_matrix'),
-            u_transpos: gl.getUniformLocation(program, 'u_transpos'),
             u_point_size: gl.getUniformLocation(program, 'u_point_size'),
-            u_mapWH: gl.getUniformLocation(program, 'u_mapWH'),
-            u_scrWH: gl.getUniformLocation(program, 'u_scrWH'),
-            u_is3D: gl.getUniformLocation(program, 'u_is3D'),
             u_opacity: gl.getUniformLocation(program, 'u_opacity'),
+            bindCamera: () => cm.bind(bindingPoint),
+            unbindCamera: () => cm.unbind(bindingPoint)
         };
     }
 
@@ -149,6 +145,7 @@ export class ShapesOnGlobeProgram {
         gl.uniformMatrix4fv(_programWrapper.u_proj_matrix, false, uProjectionMatrix);
         gl.uniform3f(_programWrapper.u_transpos, uTranslate.x, uTranslate.y, uTranslate.z);
         gl.bindVertexArray(_programWrapper.vao);
+        _programWrapper.bindCamera();
         if (!_is3D) {
             const mapWH = this.globe.api_GetCurrentWorldWH();
             gl.uniform2f(_programWrapper.u_mapWH, mapWH.width, mapWH.height);
@@ -157,8 +154,9 @@ export class ShapesOnGlobeProgram {
 
         for (const drawRange of drawRanges) {
             gl.drawArrays(this._drawMode, drawRange[0], drawRange[1]);
-            gl.drawArrays(gl.POINTS, drawRange[0], 1);
+            // gl.drawArrays(gl.POINTS, drawRange[0], 1);
         }
+        _programWrapper.unbindCamera();
 
         gl.bindVertexArray(null);
         if (deepTest) {

package/util/shaderfunctions/geometrytransformations.js

@@ -192,26 +192,6 @@ vec2 circleLimpFromLongLatRadCenterMercatorCompass(vec2 center, float radius, fl
 } `;
 
 
-// Function to interpolate between two Cartesian points using spherical interpolation (slerp)
-export const slerp = `
-vec3 slerp(vec3 A, vec3 B, float t) {
-    float cosTheta = dot(A, B);
-    float theta = acos(clamp(cosTheta, -1.0, 1.0)); // Angle between the points
-
-    float sinTheta = sin(theta);
-
-    // Avoid division by zero // many points falls in to this category
-    if (sinTheta < 0.00001) {
-        return mix(A, B, t); // Linear interpolation as fallback
-    }
-
-    float factorA = sin((1.0 - t) * theta) / sinTheta;
-    float factorB = sin(t * theta) / sinTheta;
-
-    return factorA * A + factorB * B;
-}
-`;
-
 // Function to convert Cartesian coordinates back to spherical (latitude, longitude)
 export const cartesianToSpherical = `
 vec2 cartesianToSpherical(vec3 point) {
@@ -223,16 +203,6 @@ vec2 cartesianToSpherical(vec3 point) {
 
 // Main function to calculate an intermediate point
 
-export const interpolateGeographicPoint = slerp + cartesianToSpherical + longLatRadToCartesian3D + `
-vec3 interpolateGeographicPoint(vec2 start, vec2 end, float t) {
-    vec3 pointA = longLatRadToCartesian3D(start);
-    vec3 pointB = longLatRadToCartesian3D(end);
-    vec3 interpolatedPoint = slerp(pointA, pointB, t);
-    return interpolatedPoint;
-    // return cartesianToSpherical(interpolatedPoint);
-}
-`;
-
 
 
 export const angleBetweenTwoPointsRadian = `
@@ -253,35 +223,7 @@ float circleCircumferenceInterPolationOf2PointsRadian(vec2 center, vec2 target,
 }
 `
 
-const circumferencePoints = `
-vec2 circumferencePoints(vec2 center, vec2 target, vec2 target2, float phase) {
-    // Calculate vectors from center to target and target2
-    vec2 v1 = target - center;
-    vec2 v2 = target2 - center;
-
-    // Normalize the vectors to ensure they are on the unit circle
-    v1 = normalize(v1);
-    v2 = normalize(v2);
-
-    // Calculate the angle between the vectors
-    float angle1 = atan(v1.y, v1.x);
-    float angle2 = atan(v2.y, v2.x);
-
-    // Ensure the angles are continuous (handle wrap-around at 2π)
-    if (angle2 < angle1) {
-        angle2 += 2.0 * 3.14159265359; // Add 2π to angle2 if it is smaller
-    }
 
-    // Interpolate the angle based on the phase
-    float interpolatedAngle = mix(angle1, angle2, phase);
-
-    // Calculate the new point on the circle
-    vec2 result = vec2(cos(interpolatedAngle), sin(interpolatedAngle));
-
-    // Scale back to the original circle radius and shift to center
-    return center + length(target - center) * result;
-}
-`
 
 
 export const realDistanceOnSphereR1 = `
@@ -294,22 +236,44 @@ float realDistanceOnSphereR1(vec2 longLat1, vec2 longLat2) {
 }
 `;
 
-const pointsOnSphereBetween = `vec3 pointsOnSphereBetween(vec3 a, vec3 b, float ratio) {
+
+
+const pointsOnSphereBetween = `
+vec3 pointsOnSphereBetween(vec3 a, vec3 b, float ratio) {
     // Normalize the input points to ensure they are on the unit sphere
     a = normalize(a);
     b = normalize(b);
 
+    // Compute the dot product and clamp it to avoid numerical issues
+    float dotProduct = clamp(dot(a, b), -1.0, 1.0);
+
     // Compute the angle between the points
-    float theta = acos(dot(a, b));
+    float theta = acos(dotProduct);
+
+    // Handle the edge case where the points are nearly identical
+    if (theta < 0.0001) {
+        return normalize(mix(a, b, ratio)); // Linear interpolation as fallback
+    }
 
     // Compute the interpolated point using spherical linear interpolation (slerp)
-    vec3 result = (sin((1.0 - ratio) * theta) * a + sin(ratio * theta) * b) / sin(theta);
+    float sinTheta = sin(theta);
+    float factorA = sin((1.0 - ratio) * theta) / sinTheta;
+    float factorB = sin(ratio * theta) / sinTheta;
+
+    vec3 result = factorA * a + factorB * b;
 
     // Return the normalized result to ensure it lies on the sphere
     return normalize(result);
-}`
+}`;
 
 
+const slerp = `
+${pointsOnSphereBetween}
+vec3 slerp(vec3 A, vec3 B, float t) {
+    return pointsOnSphereBetween(A, B, t) * mix(length(A), length(B), t);
+}
+`
+
 const circleLimpFromLongLatRadCenterCartesian3D_accurate = R + `
 vec3 circleLimpFromLongLatRadCenterCartesian3D_accurate( vec3 geoW, float radius, float angle) {
     vec3 normal = normalize(geoW);
@@ -357,7 +321,7 @@ vec2 circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate(vec2 mercato
 }`;
 
 export {
-    pointsOnSphereBetween,
+    slerp,
     circleLimpFromLongLatRadCenterCartesian3D_accurate,
     circleLimpFromLongLatRadCenterMercatorCompass_accurate,
     circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate

package/bearing-line/roadmap.md

@@ -1,15 +0,0 @@
-# Two problems:
-lines are curved to to arrive perpendicular to the longitude lines
-patrial rings are not fit to the lines nor the bearing angle
-
-
-
-# AngledLine 
-
-Does not render
-Check:
-[-] VAO
-[-] Attributes are loaded with data  
-    Assign constants to attributes. 
-[x] Uniforms are loaded // program was not used before setting opacity
-[x] Check geometry // Assigning a constant to the geometry made all edges of the line overlap and the line was not visible

package/point-heat-map/plugin.js

@@ -1,132 +0,0 @@
-import { PointHeatmapFlow } from "./point-to-heat-map-flow";
-import { TimeTrackInterpolator } from "../util/interpolation/timetrack/timetrack-interpolator";
-import { createTexture, getColorRampModed } from "../util";
-// TODO: DEPRECATED
-class PointHeatmapPlugin {
-
-    constructor(id, { opacity = 1.0, pointSize = 5.0 } = {}) {
-        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.timeTrackInterpolator = new TimeTrackInterpolator();
-    }
-
-    // globe interaction
-
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        this.flow = new PointHeatmapFlow(globe);
-        this.setGeometry();
-        this.resize();
-    }
-
-
-    setPointSize(pointSize) {
-        if (typeof pointSize !== 'number' || pointSize <= 0) {
-            throw new Error('Invalid pointSize');
-        }
-        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) {
-        this._time = time;
-        const data = this.timeTrackInterpolator.interpolate(time);
-        if (data === null) {
-            return;
-        }
-        this.flow.setData(data);
-    }
-
-
-    setTimetracks(timeTracks) {
-        this.timeTrackInterpolator.setTimetracks(timeTracks);
-        if (this._time !== null) {
-            this.setTime(this._time);
-        }
-        this.globe.DrawRender();
-    }
-
-
-    setOpacity(opacity) {
-        if (typeof opacity !== 'number' || opacity < 0 || opacity > 1) {
-            throw new Error('Invalid opacity');
-        }
-        this._opacity = opacity;
-        this.globe.DrawRender();
-    }
-
-
-
-    setGeometry() {
-        const geometry = this.globe.api_GetCurrentGeometry();
-        this.timeTrackInterpolator.setGeometry(geometry);
-        if (this._time !== null) {
-            this.setTime(this._time);
-        }
-    }
-
-
-    draw3D() {
-        if (this.isReady()) {
-            this.flow.draw(this._legendTexture, this._pointSize, this._opacity);
-        }
-    }
-
-
-    resize() {
-        this.timeTrackInterpolator.setGeometry(this.globe.api_GetCurrentGeometry());
-        this.flow.resize();
-        if (this._time !== null) {
-            this.setTime(this._time);
-        }
-    }
-
-
-    isReady() {
-        return (this.gl !== null && this._legendTexture !== null);
-    }
-
-    free() {
-        if (this._isFreed) return;
-        this.gl.deleteTexture(this._legendTexture);
-        this.flow.free();
-        this.flow = null;
-        this.gl = null;
-        this._isFreed = true;
-        this.timeTrackInterpolator = null;
-        this._legendTexture = null;
-    }
-}
-
-
-export { PointHeatmapPlugin };