@pirireis/webglobeplugins 0.15.35 → 0.16.0

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

@@ -0,0 +1,210 @@
+import { UBOHandler } from "../../../types";
+
+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
+};
+
+
+export class UniformBlockManager {
+
+    /**
+     * 
+     * @param {UniformBlockName} blockName 
+     * @param {Array<UniformBlockMember} blockMembers 
+     * @param {string} prefix usage name of block in the shader 
+     */
+
+    blockName: string;
+    blockMembers: Array<UniformBlockMember>;
+    bindingPoint: number;
+    prefix: string;
+    offsetMap: Map<string, number>;
+    size: number;
+
+    constructor(blockName: string, blockMembers: Array<UniformBlockMember>, bindingPoint: number, prefix: string = "") {
+        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: WebGL2RenderingContext, bufferWriteType: string = "STATIC_DRAW"): UBOHandler {
+        const ubo = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        // @ts-ignore
+        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) as number;
+            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: (nameValueMap: NameValueMap) => this.updateUBO(gl, ubo, nameValueMap),
+            updateSingle: (key: string, value: Float32Array | Int32Array | ArrayBuffer | DataView) => this.updateUboSingle(gl, ubo, key, value),
+            bind: () => this.bind(gl, ubo),
+            unbind: () => this.unbind(gl),
+            free: () => gl.deleteBuffer(ubo),
+        };
+    }
+
+    updateUboSingle(gl: WebGL2RenderingContext, ubo: WebGLBuffer, key: string, value: Float32Array | Int32Array | ArrayBuffer | DataView) { // TEST THIS
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        const offset = this.offsetMap.get(key);
+        if (offset === undefined) {
+            throw new Error(`Uniform block member ${key} not found in offset map.`);
+        }
+        // @ts-ignore
+        const type = this.blockMembers.find(member => member.name === key).type;
+        let data: Float32Array | Int32Array | ArrayBuffer | DataView;
+        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 ${key}: ${typeof value}`);
+        }
+        gl.bufferSubData(gl.UNIFORM_BUFFER, offset, data);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+
+    }
+
+    updateUBO(gl: WebGL2RenderingContext, ubo: WebGLBuffer, nameValueMap: NameValueMap) {
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        for (const [name, value] of nameValueMap.entries()) {
+            const offset = this.offsetMap.get(name);
+            if (offset === undefined) {
+                throw new Error(`Uniform block member ${name} not found in offset map.`);
+            }
+            // @ts-ignore
+            const type = this.blockMembers.find(member => member.name === name).type;
+            let data: Float32Array | Int32Array | ArrayBuffer | DataView;
+            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: WebGL2RenderingContext, program: WebGLProgram) { // TODO: this can cause bugs on multiglobe
+        const blockIndex = gl.getUniformBlockIndex(program, this.blockName);
+        gl.uniformBlockBinding(program, blockIndex, this.bindingPoint);
+    }
+
+    // call this before drawing
+    bind(gl: WebGL2RenderingContext, ubo: WebGLBuffer) {
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, ubo);
+    }
+
+    // call this right after drawing
+    unbind(gl: WebGL2RenderingContext) {
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, null);
+    }
+
+
+    // implicit methods
+    __create_LayoutSTD140_OffsetMap(): Map<string, number> {
+        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() as number || 0;
+        const lastItemAlignment = typeAlignments[this.blockMembers[this.blockMembers.length - 1].type];
+        return lastOffset + lastItemAlignment;
+    }
+
+}

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/shader.js

@@ -1 +0,0 @@
-"use strict";

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

@@ -0,0 +1,20 @@
+/**
+ * @typedef {string} UniformBlockName
+ *
+ * @typedef {string} GLSLType | mat4, mat3, vec4, vec3, vec2, float, int, bool
+ * @typedef {{name: string, type: GLSLType, value: null|Float32Array}} UniformBlockMember
+ * 
+ */
+
+
+type UniformBlockName = string;
+type GLSLType = "mat4" | "mat3" | "vec4" | "vec3" | "vec2" | "float" | "int" | "bool";
+type UniformBlockMember = {
+    name: string;
+    type: GLSLType;
+    value: Float32Array | null;
+};
+
+
+type NameValueMap = Map<string, Array<number> | DataView | ArrayBuffer>;
+

package/util/heatwavedatamanager/datamanager.js

@@ -1,149 +1,168 @@
-/**
- * todo:
- * data must be processed before being set to the cache
- */
-export default class DataManager {
-    /**
-     *
-     * @param {Array<number>} timeEpocs | array of time epocs
-     * @param {Function} fetchMethod | fetchMethod(time) => Promise<data>
-     * @param {boolean} autoDownload | auto download data or not
-    */
-    constructor(timeEpocs, fetchMethod, { autoDownload = true } = {}) {
-        this._timeEpocs = timeEpocs.sort((a, b) => a - b);
-        this._datas = [];
-        this._datas.length = timeEpocs.length;
-        // in construction
-        this._dataPromises = [];
-        this._dataPromises.length = timeEpocs.length;
-        this._fetchMethod = fetchMethod;
-        this._callbackmethods = [];
-        this._callbackmethodOwners = [];
-        this._lastTime = -1;
-        this._lastIndex = -1;
-        this.autoDownload(autoDownload);
-    }
-    autoDownload(bool, time) {
-        if (!bool) {
-            this._autoDownload = false;
-            return;
-        }
-        let index = this._lastIndex === -1 ? 0 : this._lastIndex;
-        if (time !== undefined) {
-            if (time < this._timeEpocs[0] || time > this._timeEpocs[this._timeEpocs.length - 1]) {
-                this._autoDownload = bool;
-                return;
-            }
-            index = this._findIndex(time);
-        }
-        if (this._downloadStartIndex === index && this._autoDownload === bool)
-            return;
-        this._downloadStartIndex = index;
-        this._autoDownload = bool;
-        const recursion = (startId, currentDownloadId) => {
-            if (startId !== this._downloadStartIndex)
-                return;
-            if (currentDownloadId < this._timeEpocs.length && this._autoDownload) {
-                this._getData(currentDownloadId).then(() => {
-                    recursion(startId, currentDownloadId + 1);
-                });
-            }
-        };
-        recursion(index, index);
-        // save index as start index
-        //start recursive download
-        // use started id as a flag to stop the download
-    }
-    /**
-     * @param {number} time
-     * It looks like async function is not needed here. changes just overwrites the previous changes.
-     */
-    updateTime(time) {
-        if (time < this._timeEpocs[0] || time > this._timeEpocs[this._timeEpocs.length - 1]) {
-            this._dontRender();
-            return;
-        }
-        this._lastTime = time;
-        const index = this._findIndex(time);
-        const ratio = this._getRatio(time, index);
-        Promise.all([this._getData(index - 1), this._getData(index)]).then((datas) => {
-            if (this._lastTime === time) {
-                this._lastIndex = index;
-                this._ratio = ratio;
-                this._pushCallback(ratio, datas);
-            }
-        });
-    }
-    register(key, callback) {
-        if (this._callbackmethodOwners.indexOf(key) !== -1) {
-            console.warn("key already registered, old one is unregistered");
-            this.unregister(key);
-        }
-        this._callbackmethods.push(callback);
-        this._callbackmethodOwners.push(key);
-        if (this._lastIndex !== -1)
-            callback(this._ratio, this._datas[this._lastIndex - 1], this._datas[this._lastIndex]);
-    }
-    /**
-     * @param {*} key | id of the owner of the callback
-     */
-    unregister(key) {
-        let index = this._callbackmethodOwners.indexOf(key);
-        if (index !== -1) {
-            this._callbackmethods.splice(index, 1);
-            this._callbackmethodOwners.splice(index, 1);
-        }
-        if (this._callbackmethods.length === 0) {
-            this.free();
-        }
-    }
-    free() {
-        this._callbackmethods = [];
-        this._callbackmethodOwners = [];
-        this._autoDownload = false;
-    }
-    _findIndex(time) {
-        const { _timeEpocs } = this;
-        let index = this._lastIndex === -1 ? 1 : this._lastIndex;
-        if (this)
-            if (time < _timeEpocs[index - 1]) {
-                while (index > 1 && time < _timeEpocs[index - 1]) {
-                    index--;
-                }
-            }
-            else if (time > _timeEpocs[index]) {
-                while (index < _timeEpocs.length - 1 && time > _timeEpocs[index]) {
-                    index++;
-                }
-            }
-        return index;
-    }
-    _getRatio(time, index) {
-        return (time - this._timeEpocs[index - 1]) / (this._timeEpocs[index] - this._timeEpocs[index - 1]);
-    }
-    _pushCallback(ratio, datas) {
-        for (let i = 0; i < this._callbackmethods.length; i++) {
-            this._callbackmethods[i](ratio, ...datas);
-        }
-    }
-    async _getData(index) {
-        if (index < 0 || index >= this._timeEpocs.length) {
-            throw new Error("Index out of range");
-        }
-        if (!this._datas[index]) {
-            if (!this._dataPromises[index])
-                this._dataPromises[index] = this._fetchMethod(this._timeEpocs[index]).then((data) => {
-                    this._datas[index] = data;
-                }, (error) => {
-                    console.error("error", error);
-                }).finally(() => {
-                    this._dataPromises[index] = null;
-                });
-        }
-        await this._dataPromises[index];
-        return this._datas[index];
-    }
-    _dontRender() {
-        this._pushCallback(0, [null, null]);
-    }
-}
+/**
+ * todo: 
+ * data must be processed before being set to the cache
+ */
+
+export default class DataManager {
+    /**
+     * 
+     * @param {Array<number>} timeEpocs | array of time epocs
+     * @param {Function} fetchMethod | fetchMethod(time) => Promise<data> 
+     * @param {boolean} autoDownload | auto download data or not
+    */
+    constructor(timeEpocs, fetchMethod, { autoDownload = true } = {}) {
+
+        this._timeEpocs = timeEpocs.sort((a, b) => a - b);
+        this._datas = []; this._datas.length = timeEpocs.length;
+
+        // in construction
+        this._dataPromises = []; this._dataPromises.length = timeEpocs.length;
+
+        this._fetchMethod = fetchMethod;
+        this._callbackmethods = [];
+        this._callbackmethodOwners = [];
+        this._lastTime = -1;
+        this._lastIndex = -1;
+        this.autoDownload(autoDownload);
+    }
+
+
+    autoDownload(bool, time) {
+        if (!bool) {
+            this._autoDownload = false;
+            return;
+        }
+        let index = this._lastIndex === -1 ? 0 : this._lastIndex;
+        if (time !== undefined) {
+            if (time < this._timeEpocs[0] || time > this._timeEpocs[this._timeEpocs.length - 1]) {
+                this._autoDownload = bool;
+                return;
+            }
+            index = this._findIndex(time);
+        }
+
+        if (this._downloadStartIndex === index && this._autoDownload === bool) return;
+        this._downloadStartIndex = index;
+        this._autoDownload = bool;
+        const recursion = (startId, currentDownloadId) => {
+            if (startId !== this._downloadStartIndex) return;
+            if (currentDownloadId < this._timeEpocs.length && this._autoDownload) {
+                this._getData(currentDownloadId).then(() => {
+                    recursion(startId, currentDownloadId + 1);
+                });
+            }
+        }
+        recursion(index, index);
+        // save index as start index
+        //start recursive download
+
+        // use started id as a flag to stop the download
+    }
+
+
+
+    /**
+     * @param {number} time 
+     * It looks like async function is not needed here. changes just overwrites the previous changes.
+     */
+    updateTime(time) {
+        if (time < this._timeEpocs[0] || time > this._timeEpocs[this._timeEpocs.length - 1]) {
+            this._dontRender();
+            return;
+        }
+        this._lastTime = time;
+        const index = this._findIndex(time);
+        const ratio = this._getRatio(time, index);
+        Promise.all([this._getData(index - 1), this._getData(index)]).then((datas) => {
+            if (this._lastTime === time) {
+                this._lastIndex = index;
+                this._ratio = ratio;
+                this._pushCallback(ratio, datas);
+            }
+        });
+    }
+
+
+    register(key, callback) {
+        if (this._callbackmethodOwners.indexOf(key) !== -1) {
+            console.warn("key already registered, old one is unregistered");
+            this.unregister(key);
+        }
+        this._callbackmethods.push(callback);
+        this._callbackmethodOwners.push(key);
+        if (this._lastIndex !== -1) callback(this._ratio, this._datas[this._lastIndex - 1], this._datas[this._lastIndex]);
+    }
+
+
+    /**
+     * @param {*} key | id of the owner of the callback
+     */
+    unregister(key) {
+        let index = this._callbackmethodOwners.indexOf(key);
+        if (index !== -1) {
+            this._callbackmethods.splice(index, 1);
+            this._callbackmethodOwners.splice(index, 1);
+        }
+        if (this._callbackmethods.length === 0) {
+            this.free();
+        }
+    }
+
+
+    free() {
+        this._callbackmethods = [];
+        this._callbackmethodOwners = [];
+        this._autoDownload = false;
+    }
+
+    _findIndex(time) {
+        const { _timeEpocs } = this;
+        let index = this._lastIndex === -1 ? 1 : this._lastIndex;
+        if (this)
+            if (time < _timeEpocs[index - 1]) {
+                while (index > 1 && time < _timeEpocs[index - 1]) {
+                    index--;
+                }
+            } else if (time > _timeEpocs[index]) {
+                while (index < _timeEpocs.length - 1 && time > _timeEpocs[index]) {
+                    index++;
+                }
+            }
+        return index;
+    }
+
+
+    _getRatio(time, index) {
+        return (time - this._timeEpocs[index - 1]) / (this._timeEpocs[index] - this._timeEpocs[index - 1]);
+    }
+
+
+    _pushCallback(ratio, datas) {
+        for (let i = 0; i < this._callbackmethods.length; i++) {
+            this._callbackmethods[i](ratio, ...datas);
+        }
+    }
+
+
+    async _getData(index) {
+        if (index < 0 || index >= this._timeEpocs.length) {
+            throw new Error("Index out of range");
+        }
+        if (!this._datas[index]) {
+            if (!this._dataPromises[index]) this._dataPromises[index] = this._fetchMethod(this._timeEpocs[index]).then((data) => {
+                this._datas[index] = data;
+            }, (error) => {
+                console.error("error", error);
+            }).finally(() => {
+                this._dataPromises[index] = null;
+            });
+        }
+        await this._dataPromises[index];
+        return this._datas[index];
+    }
+
+    _dontRender() {
+        this._pushCallback(0, [null, null]);
+    }
+
+}

package/util/heatwavedatamanager/index.js

@@ -1,2 +1,2 @@
-import HeatWaveDataManager from "./datamanager";
-export { HeatWaveDataManager };
+import HeatWaveDataManager from "./datamanager";
+export { HeatWaveDataManager };

package/util/heatwavedatamanager/pointcoordsmeta.ts

@@ -0,0 +1,28 @@
+export default class PointCoordsMeta {
+
+    _bbox: [number, number, number, number];
+    _width: number;
+    _height: number;
+    _xRatio: number;
+    _yRatio: number;
+
+    constructor(bbox: [number, number, number, number], width: number, height: number) {
+        this._bbox = bbox;
+        this._width = width;
+        this._height = height;
+        this._xRatio = this._width / (this._bbox[2] - this._bbox[0]);
+        this._yRatio = this._height / (this._bbox[3] - this._bbox[1]);
+
+    }
+
+    getFlooredIndex(long: number, lat: number): number {
+        let x = (long - this._bbox[0]) * this._xRatio;
+        let y = (this._bbox[3] - lat) * this._yRatio;
+        x = x > 0 ? x - 1 : 0;
+        y = y > 0 ? y - 1 : 0;
+        const index = Math.floor(y) * this._width + Math.floor(x);
+        return index;
+    }
+}
+
+