@pirireis/webglobeplugins 0.15.1-alpha → 0.15.2-3.alpha

package/semiplugins/shape-on-terrain/padding-1-degree.js

@@ -0,0 +1,538 @@
+//      One Degree Padding
+/**
+ * 2d coordinates are loaded ones
+ * 3d coordinates are calculated on the fly.
+ *
+ * 2d paddings are fixed size
+ * 3d paddings gets shortened as lod increases
+ *
+ * color buffer is shared and does not change on unless insert or delete
+ * changing color can be done by re inserting
+ *
+ *
+ *
+ */
+import { BufferManager } from '../../util/account/single-attribute-buffer-management/buffer-manager';
+import { BufferOrchestrator } from '../../util/account/single-attribute-buffer-management/buffer-orchestrator';
+import { LineStripProgramCache } from '../../programs/line-on-globe/linestrip/linestrip';
+import { opacityCheck, colorCheck } from '../../util/check/typecheck';
+import { FrameCounterTrigger } from '../../util/frame-counter-trigger';
+const initialCapacity = 2; // initial capacity for the buffer managers
+// const _float32Array = new Float32Array(360 * 3 * 2).fill(NaN);
+export class Padding1DegreePlugin {
+    id;
+    globe = null;
+    bufferOrchestrator;
+    bufferManagerMap;
+    lineProgram = null;
+    _innerPaddingRatio = 0.95; //
+    _float32Array = null; // this is used to forward the data to the buffer manager
+    _uboHandler = null; // this is used to forward the data to the shader program
+    _bufferNames = ["position2d", "position3d"];
+    _vao = null; // this is used to store the VAO for the plugin
+    _freed = false; // this is used to check if the plugin is freed or not
+    _userOpacity = 1;
+    _adaptiveOpacityMultiplier = 1;
+    _dataMap = new Map();
+    _options = {
+        bufferType: "STATIC_DRAW",
+        variativeColorsOn: false,
+        defaultColor: [1, 1, 1, 1], // white color
+        defaultHeightFromGroundIn3D: 0.1, // 10 cm from ground
+        adativePaddingSize: true, // if true, the padding size will be adaptive to the LOD
+        adaptiveOpacity: true, // if true, the opacity will be adaptive to the LOD
+        isMSL: false // if true, no elevation of terrain
+    };
+    _frameCounterTrigger = null;
+    constructor(id, options = null) {
+        this.id = id;
+        this.bufferManagerMap = new Map();
+        this.lineProgram = null;
+        this._options = options ? { ...this._options, ...options } : this._options;
+        this.bufferOrchestrator = new BufferOrchestrator();
+        if (this._options.variativeColorsOn) {
+            this._bufferNames.push("color");
+        }
+    }
+    increaseSpace(amount) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot increase space");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized.");
+            return;
+        }
+        if (typeof amount !== "number" || amount <= 0) {
+            console.warn("Invalid amount, must be a positive number");
+            return;
+        }
+        this.bufferOrchestrator.ensureSpace(amount, this.bufferManagerMap);
+    }
+    insertBulk(inputs) {
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot insert input");
+            return;
+        }
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot insert input");
+            return;
+        }
+        const wrapper = [null];
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        let newItemCount = 0;
+        for (let i = 0; i < inputs.length; i++) {
+            if (!this._dataMap.has(inputs[i].key)) {
+                newItemCount++;
+            }
+        }
+        this.bufferOrchestrator.ensureSpace(newItemCount, this.bufferManagerMap);
+        for (let i = 0; i < inputs.length; i++) {
+            const coords = preAdapter(this.globe, inputs[i], this._innerPaddingRatio, null);
+            const paddingInput = { ...inputs[i], ...coords };
+            this._dataMap.set(paddingInput.key, paddingInput);
+            wrapper[0] = paddingInput;
+            this.bufferOrchestrator.insertBulk(wrapper, this.bufferManagerMap, this._bufferNames);
+        }
+        this._float32Array = null;
+        this.globe?.DrawRender();
+    }
+    updateColorRatios(key, colorRatios, drawRender = true) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update color");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot update color");
+            return;
+        }
+        if (!this._options.variativeColorsOn) {
+            console.warn("VariativeColors are not enabled");
+            return;
+        }
+        if (!this._dataMap.has(key)) {
+            console.warn(`Key ${key} does not exist in the data map`);
+            return;
+        }
+        const paddingInput = this._dataMap.get(key);
+        if (!paddingInput) {
+            console.warn(`Padding input for key ${key} is not found`);
+            return;
+        }
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        paddingInput.colorsRatios = colorRatios;
+        this.bufferOrchestrator.updateBulk([paddingInput], this.bufferManagerMap, ["color"]);
+        this._float32Array = null;
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+    updateCoordinates(items) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update coordinates");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot update coordinates");
+            return;
+        }
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        const updateKeys = [];
+        for (const item of items) {
+            const paddingInput = this._dataMap.get(item.key);
+            if (!paddingInput) {
+                console.warn(`Padding input for key ${item.key} is not found`);
+                continue;
+            }
+            paddingInput.center = item.center;
+            paddingInput.radius = item.radius;
+            updateKeys.push(item.key);
+        }
+        this._buildPaddings("input", updateKeys);
+        this._float32Array = null;
+        this.globe.DrawRender();
+    }
+    deleteBulk(keys) {
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot delete data");
+            return;
+        }
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot delete data");
+            return;
+        }
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
+        this.globe?.DrawRender();
+    }
+    setPluginOpacity(opacity, drawRender = false) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot set opacity");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot set opacity");
+            return;
+        }
+        opacityCheck(opacity);
+        this._userOpacity = opacity;
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+    setDefaultColor(color) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot set default color");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot set default color");
+            return;
+        }
+        colorCheck(color);
+        this._options.defaultColor = color;
+        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
+        this.globe.DrawRender();
+    }
+    setElevationMode(mode) {
+        switch (mode) {
+            case "msl":
+                this._options.isMSL = true;
+                break;
+            case "agl":
+                this._options.isMSL = false;
+                break;
+            default:
+                throw new Error(`Unknown elevation mode: ${mode}`);
+        }
+        this._buildPaddings("elevation");
+        this.globe?.DrawRender();
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.lineProgram = LineStripProgramCache.get(globe);
+        this._frameCounterTrigger = new FrameCounterTrigger(globe, 10, 1000, (globeChanges) => {
+            if (this._freed)
+                return;
+            this.__build(globeChanges);
+            globe.DrawRender();
+        });
+        this.__updateLODRelatedParameters();
+        this.__updateAdaptiveOpacityMultiplier();
+        const bufferManagerMap = new Map([
+            ["position2d", {
+                    bufferManager: new BufferManager(globe.gl, 360 * 2 * 3, // plus 1 to cut
+                    { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                    adaptor: (paddingInput) => {
+                        if (this._float32Array === null) {
+                            throw new Error("Float32Array is not initialized");
+                        }
+                        else {
+                            this._float32Array.fill(NaN); // reset the float32Array
+                        }
+                        for (let i = 0; i < 360; i++) {
+                            const outerCoords = paddingInput.outerCoords[i];
+                            const innerCoords = paddingInput.innerCoords[i];
+                            if (outerCoords === null || innerCoords === null) {
+                                continue;
+                            }
+                            let coordsOuter = globe.api_GetMercator2DPoint(outerCoords[0], outerCoords[1]);
+                            // fill the second coordinate with 0
+                            this._float32Array[i * 6] = coordsOuter[0];
+                            this._float32Array[i * 6 + 1] = coordsOuter[1];
+                            let coordsInner = globe.api_GetMercator2DPoint(innerCoords[0], innerCoords[1]);
+                            // fill the second coordinate with 0
+                            this._float32Array[i * 6 + 2] = coordsInner[0];
+                            this._float32Array[i * 6 + 3] = coordsInner[1];
+                        }
+                        return this._float32Array.subarray(0, 360 * 2 * 3);
+                    }
+                }
+            ],
+            [
+                "position3d", {
+                    bufferManager: new BufferManager(globe.gl, 360 * 3 * 3, // plus 1 to cut
+                    { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                    adaptor: (paddingInput) => {
+                        if (this._float32Array === null) {
+                            throw new Error("Float32Array is not initialized");
+                        }
+                        else {
+                            this._float32Array.fill(NaN); // reset the float32Array
+                        }
+                        const _float32Array = this._float32Array;
+                        for (let i = 0; i < 360; i++) {
+                            const outerCoords = paddingInput.outerCoords[i];
+                            const innerCoords = paddingInput.innerCoords[i];
+                            if (outerCoords === null || innerCoords === null) {
+                                continue;
+                            }
+                            const height = paddingInput.heightFromGroundIn3D ?? this._options.defaultHeightFromGroundIn3D;
+                            let coords = globe.api_GetCartesian3DPoint(outerCoords[0], outerCoords[1], height, this._options.isMSL);
+                            // fill the second coordinate with 0
+                            _float32Array[i * 9] = coords[0];
+                            _float32Array[i * 9 + 1] = coords[1];
+                            _float32Array[i * 9 + 2] = coords[2];
+                            let coordsInner = globe.api_GetCartesian3DPoint(innerCoords[0], innerCoords[1], height, this._options.isMSL);
+                            // fill the second coordinate with 0
+                            _float32Array[i * 9 + 3] = coordsInner[0];
+                            _float32Array[i * 9 + 4] = coordsInner[1];
+                            _float32Array[i * 9 + 5] = coordsInner[2];
+                        }
+                        return _float32Array.subarray(0, 360 * 3 * 3);
+                    }
+                }
+            ],
+        ]);
+        if (this._options.variativeColorsOn) {
+            bufferManagerMap.set("color", {
+                bufferManager: new BufferManager(globe.gl, 360 * 4 * 3, // 4 for RGBA
+                { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                adaptor: (paddingInput) => {
+                    if (this._float32Array === null) {
+                        throw new Error("Float32Array is not initialized");
+                    }
+                    else {
+                        this._float32Array.fill(NaN); // reset the float32Array
+                    }
+                    if (!paddingInput.colorsRatios) {
+                        const color = this._options.defaultColor;
+                        const colorArray = new Float32Array(360 * 4 * 3);
+                        this._float32Array = colorArray; // store for forwarding
+                        for (let i = 0; i < 360; i++) {
+                            this._float32Array[i * 12] = color[0];
+                            this._float32Array[i * 12 + 1] = color[1];
+                            this._float32Array[i * 12 + 2] = color[2];
+                            this._float32Array[i * 12 + 3] = color[3];
+                            this._float32Array[i * 12 + 4] = color[0];
+                            this._float32Array[i * 12 + 5] = color[1];
+                            this._float32Array[i * 12 + 6] = color[2];
+                            this._float32Array[i * 12 + 7] = 0; //color[3] ;
+                        }
+                        return this._float32Array.subarray(0, 360 * 4 * 3);
+                    }
+                    else {
+                        const colorsRatios = paddingInput.colorsRatios;
+                        let i = 0;
+                        for (const colorRatio of colorsRatios) {
+                            const color = colorRatio.color;
+                            const ratio = colorRatio.ratio;
+                            for (let j = 0; j < ratio; j++) {
+                                this._float32Array[i * 12] = color[0];
+                                this._float32Array[i * 12 + 1] = color[1];
+                                this._float32Array[i * 12 + 2] = color[2];
+                                this._float32Array[i * 12 + 3] = color[3];
+                                this._float32Array[i * 12 + 4] = color[0];
+                                this._float32Array[i * 12 + 5] = color[1];
+                                this._float32Array[i * 12 + 6] = color[2];
+                                this._float32Array[i * 12 + 7] = 0.1; // color[3];
+                                i++;
+                            }
+                        }
+                        return this._float32Array.subarray(0, 360 * 4 * 3);
+                    }
+                }
+            });
+        }
+        const vaoInput = ["position3d", "position2d", "color"].map((name) => {
+            const bufferManager = bufferManagerMap.get(name);
+            if (!bufferManager) {
+                return null;
+            }
+            return {
+                buffer: bufferManager.bufferManager.buffer,
+                stride: 0,
+                offset: 0
+            };
+        });
+        this._vao = this.lineProgram.createVAO(vaoInput[0], vaoInput[1], vaoInput[2]);
+        this.bufferManagerMap = bufferManagerMap;
+        this.bufferOrchestrator.resetWithCapacity(bufferManagerMap, initialCapacity);
+        this._uboHandler = this.lineProgram.createUBO("STATIC_DRAW");
+        this._uboHandler.updateSingle("u_color", new Float32Array(this._options.defaultColor));
+    }
+    draw3D() {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot draw");
+            return;
+        }
+        if (this.globe === null || this.lineProgram === null || this._vao === null) {
+            console.warn("Globe or LineProgram or VAO is not initialized, cannot draw");
+            return;
+        }
+        this._frameCounterTrigger?.trigger();
+        // this.__build();
+        const gl = this.globe.gl;
+        const drawOptions = {
+            drawRange: {
+                first: 0,
+                count: this.bufferOrchestrator.length * (360 * 3), // plus 1 is for cutting linestrips
+            },
+        };
+        gl.disable(gl.DEPTH_TEST);
+        this.lineProgram.draw(this._vao, drawOptions, this._userOpacity * this._adaptiveOpacityMultiplier, this._uboHandler);
+        gl.enable(gl.DEPTH_TEST);
+    }
+    free() {
+        if (this._freed) {
+            console.warn("Plugin is already freed");
+            return;
+        }
+        if (!this.globe || !this.lineProgram) {
+            console.warn("Globe or LineProgram is not initialized, cannot free the plugin");
+            return;
+        }
+        this._freed = true;
+        this._frameCounterTrigger?.free();
+        LineStripProgramCache.release(this.lineProgram);
+        this.lineProgram = null;
+        this._uboHandler?.free();
+        this._uboHandler = null;
+        this.globe.gl.deleteVertexArray(this._vao);
+        this.globe = null;
+        this._vao = null;
+        this.bufferManagerMap.forEach((bufferManager) => {
+            bufferManager.bufferManager.free();
+        });
+        this._float32Array = null;
+    }
+    _buildPaddings(level, subSetIDs = null) {
+        if (level === "input") {
+            this.__inner(subSetIDs);
+            this.__elevation(subSetIDs);
+        }
+        else if (level === "innerCircle") {
+            // Build inner circle paddings
+            if (this._options.adativePaddingSize) {
+                this.__innerCircle(subSetIDs);
+            }
+            this.__elevation(subSetIDs);
+        }
+        else if (level === "elevation") {
+            // Build elevation paddings
+            this.__elevation(subSetIDs);
+        }
+    }
+    __inner(subSetIDs = null) {
+        // Implement inner circle padding logic
+        console.log("innerCircle Level Update");
+        const datas = this._dataMap;
+        let keys;
+        if (subSetIDs) {
+            keys = subSetIDs;
+        }
+        else {
+            keys = Array.from(datas.keys());
+        }
+        for (const key of keys) {
+            const value = datas.get(key);
+            if (!value)
+                continue;
+            // Implement inner circle padding logic using key and value
+            const { innerCoords, outerCoords } = preAdapter(this.globe, value, this._innerPaddingRatio, null);
+            value.outerCoords = outerCoords;
+            value.innerCoords = innerCoords;
+        }
+    }
+    __innerCircle(subSetIDs = null) {
+        // Implement inner circle padding logic
+        console.log("innerCircle Level Update");
+        const datas = this._dataMap;
+        let keys;
+        if (subSetIDs) {
+            keys = subSetIDs;
+        }
+        else {
+            keys = Array.from(datas.keys());
+        }
+        for (const key of keys) {
+            const value = datas.get(key);
+            if (!value)
+                continue;
+            // Implement inner circle padding logic using key and value
+            const { innerCoords } = preAdapter(this.globe, value, this._innerPaddingRatio, value.outerCoords);
+            value.innerCoords = innerCoords;
+        }
+    }
+    __elevation(subSetIDs = null) {
+        this.__updateAdaptiveOpacityMultiplier();
+        const bufferToUpdate = [this.globe?.api_GetCurrentGeometry() === 1 ? "position2d" : "position3d"];
+        const datas = this._dataMap;
+        const wrapper = [null];
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        let keys;
+        if (subSetIDs) {
+            keys = subSetIDs;
+        }
+        else {
+            keys = Array.from(datas.keys());
+        }
+        for (const key of keys) {
+            const value = datas.get(key);
+            if (!value)
+                continue;
+            wrapper[0] = value;
+            this.bufferOrchestrator.updateBulk(wrapper, this.bufferManagerMap, bufferToUpdate);
+        }
+        this._float32Array = null; // reset the float32Array
+    }
+    __build(globeChanges) {
+        if (globeChanges.lod) {
+            this.__updateLODRelatedParameters();
+            this._buildPaddings("innerCircle");
+        }
+        else if (globeChanges.look || globeChanges.geometry) {
+            this._buildPaddings("elevation");
+        }
+    }
+    __updateLODRelatedParameters() {
+        const lod = this.globe?.api_GetCurrentLODWithDecimal();
+        this._innerPaddingRatio = 1 - Math.pow(0.7, lod);
+    }
+    __updateAdaptiveOpacityMultiplier() {
+        if (this._options.adaptiveOpacity === true) {
+            const currentLod = this.globe?.api_GetCurrentLODWithDecimal();
+            this._adaptiveOpacityMultiplier = Math.max(1 - (2.9 / currentLod), 0.1);
+        }
+        else {
+            this._adaptiveOpacityMultiplier = 1; // TODO: set this once on adaptiveOpacity is Set to false
+        }
+    }
+}
+function preAdapter(globe, paddingInput, paddingRatio, outerCoords) {
+    const innerCoords = new Array(360);
+    if (outerCoords === null) {
+        outerCoords = new Array(360);
+        for (let i = 0; i < 360; i++) {
+            const { long, lat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
+            paddingInput.center[1], // center lat
+            paddingInput.radius, // outer radius
+            i);
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
+            paddingInput.center[1], // center lat
+            paddingInput.radius * paddingRatio, // inner radius
+            i);
+            const longDifference = Math.abs(long - endLong);
+            const latDifference = Math.abs(lat - endLat);
+            if (longDifference > 45) {
+                outerCoords[i] = null;
+                innerCoords[i] = null;
+                continue;
+            }
+            // Assign the calculated coordinates
+            outerCoords[i] = [long, lat];
+            innerCoords[i] = [endLong, endLat];
+        }
+    }
+    else {
+        // Handle case when outerCoords is provided
+        for (let i = 0; i < 360; i++) {
+            if (outerCoords[i] === null) {
+                innerCoords[i] = null;
+                continue;
+            }
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], paddingInput.center[1], paddingInput.radius * paddingRatio, i);
+            innerCoords[i] = [endLong, endLat];
+        }
+    }
+    return { outerCoords, innerCoords };
+}

package/util/account/single-attribute-buffer-management/buffer-manager.js

@@ -60,6 +60,16 @@ export class BufferManager {
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     }
+    insertBlock(items, offset, adapter, Constructor = Float32Array) {
+        const { gl, buffer, itemSize } = this;
+        const cpuBuffer = new Constructor(itemSize * items.length);
+        for (let i = 0; i < items.length; i++) {
+            cpuBuffer.set(adapter(items[i]), i * itemSize);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferSubData(gl.ARRAY_BUFFER, offset * itemSize * 4, cpuBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
     // TODO: this is broken
     defrag(offsetValues, occupiedCapacity, newCapacity) {
         const { gl, buffer, bufferType, itemSize } = this;