@pirireis/webglobeplugins 0.13.0-alpha → 0.14.0-alpha

package/semiplugins/lightweight/line-plugin.js

@@ -0,0 +1,195 @@
+import { LineOnGlobeCache } from "../../programs/line-on-globe/naive-accurate-flexible";
+import { BufferMapOrchestrator } from "../../util/account/create-buffermap-orchastration";
+import { sphereCoord } from "../../util/geometry/index";
+import { constraintFloat } from "../../util/check/typecheck";
+export class LinePlugin {
+    id;
+    globe = null;
+    gl = null;
+    program = null;
+    vao = null;
+    _options;
+    _uboHandler = null;
+    _bufferOrchestrator = null;
+    _freed = false;
+    constructor(id, { flatViewOn = true, globeViewOn = true, variativeColorsOn = false, defaultColor = [1, 1, 1, 1], dashedLineOpacityVariativeOn = false, dashedLineRatioVariativeOn = false, bufferType = "DYNAMIC_DRAW", opacity = 1.0 } = {}) {
+        this.id = id;
+        this._options = {
+            flatViewOn,
+            globeViewOn,
+            variativeColorsOn,
+            defaultColor,
+            dashedLineOpacityVariativeOn,
+            dashedLineRatioVariativeOn,
+            bufferType,
+            opacity
+        };
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.program = LineOnGlobeCache.get(globe);
+        this._uboHandler = this.program.createUBO();
+        this._bufferOrchestrator = new BufferMapOrchestrator(gl, this._createBufferDetailsMap(), 10 // initial capacity
+        );
+        this.vao = this.program.createVAO(...this._createSelectBufferNames().map((key) => {
+            if (key === null) {
+                return null;
+            }
+            const bufferManagerComp = this._bufferOrchestrator?.bufferManagersMap.get(key);
+            if (bufferManagerComp === undefined) {
+                throw new Error(`Buffer key ${key} does not exist in bufferManagersMap`);
+            }
+            const { bufferManager } = bufferManagerComp;
+            return {
+                stride: 0,
+                offset: 0,
+                buffer: bufferManager.buffer
+            };
+        }));
+    }
+    // PLUGIN INTERFACE METHODS
+    insertBulk(items) {
+        const { _bufferOrchestrator, globe } = this;
+        if (!_bufferOrchestrator || !globe) {
+            throw new Error("Buffer orchestrator or globe is not initialized.");
+        }
+        _bufferOrchestrator.insertBulk(items);
+        this.globe?.DrawRender();
+    }
+    deleteBulk(keys) {
+        const { _bufferOrchestrator, globe } = this;
+        if (!_bufferOrchestrator || !globe) {
+            throw new Error("Buffer orchestrator or globe is not initialized.");
+        }
+        _bufferOrchestrator.deleteBulk(keys);
+        this.globe?.DrawRender();
+    }
+    setPluginOpacity(opacity) {
+        constraintFloat(opacity, 0, 1);
+        this._options.opacity = opacity;
+        this.globe?.DrawRender();
+    }
+    setPluginDashedLineRatio(ratio) {
+        constraintFloat(ratio, 0, 1);
+        this._uboHandler?.updateSingle("dashed_line_ratio", new Float32Array([ratio]));
+        this.globe?.DrawRender();
+    }
+    setPluginDashLineOpacity(opacity) {
+        constraintFloat(opacity, 0, 1);
+        this._options.dashedLineOpacityVariativeOn = true;
+        this._options.defaultColor[3] = opacity; // Update the default color's alpha channel
+        this.globe?.DrawRender();
+    }
+    // GLOBE INTERACTION METHODS
+    draw3D() {
+        if (this._freed) {
+            console.warn("Plugin has been freed, cannot draw.");
+        }
+        ;
+        if (!this.globe || !this.gl || !this.program || !this.vao) {
+            throw new Error("Globe, GL context or program is not initialized.");
+        }
+        const { _bufferOrchestrator, _options, _uboHandler, vao } = this;
+        if (!_bufferOrchestrator || !_bufferOrchestrator || !_uboHandler) {
+            throw new Error("Buffer orchestrator is not initialized.");
+        }
+        const { bufferOrchestrator } = _bufferOrchestrator;
+        const { flatViewOn, globeViewOn, opacity } = _options;
+        const drawOptions = {
+            drawRange: {
+                first: 0,
+                count: bufferOrchestrator.length
+            }
+        };
+        this.gl.disable(this.gl.DEPTH_TEST); // Disable depth test for lines
+        const currentGeometry = this.globe.api_GetCurrentGeometry();
+        if (currentGeometry === 0 && globeViewOn) {
+            // @ts-ignore
+            this.program.draw(vao, drawOptions, opacity, _uboHandler);
+        }
+        else if (currentGeometry === 1 && flatViewOn) {
+            // @ts-ignore
+            this.program.draw(vao, drawOptions, opacity, _uboHandler);
+        }
+        this.gl.enable(this.gl.DEPTH_TEST); // Re-enable depth test after drawing
+    }
+    free() {
+        if (this._freed)
+            return;
+        // TODO: FILL
+        this._bufferOrchestrator?.free();
+        this._uboHandler?.free();
+        LineOnGlobeCache.release(this.globe);
+        this._freed = true;
+    }
+    // IMPLICIT INTERFACE METHODS
+    _createBufferDetailsMap() {
+        const globe = this.globe;
+        const { flatViewOn, globeViewOn, variativeColorsOn, dashedLineOpacityVariativeOn, dashedLineRatioVariativeOn, bufferType = "DYNAMIC_DRAW" } = this._options;
+        const m = new Map();
+        if (flatViewOn) {
+            m.set("start_position", {
+                itemSize: 2,
+                bufferType: bufferType, // TODO: Ask User? 
+                buffer: null,
+                adaptor: (item) => {
+                    const result = new Float32Array(globe.api_GetMercator2DPoint(item.start[0], item.start[1]));
+                    return result;
+                }
+            });
+            m.set("end_position", {
+                itemSize: 2,
+                bufferType: bufferType,
+                buffer: null,
+                adaptor: (item) => new Float32Array(globe.api_GetMercator2DPoint(item.end[0], item.end[1]))
+            });
+        }
+        if (globeViewOn) {
+            m.set("start_position_3d", {
+                itemSize: 3,
+                bufferType: bufferType,
+                adaptor: (item) => sphereCoord(item.start[0], item.start[1], globe, item.start_altitude || 0)
+            });
+            m.set("end_position_3d", {
+                itemSize: 3,
+                bufferType: bufferType,
+                adaptor: (item) => sphereCoord(item.end[0], item.end[1], globe, item.end_altitude || 0)
+            });
+        }
+        if (variativeColorsOn) {
+            m.set("color", {
+                itemSize: 4,
+                bufferType: bufferType,
+                adaptor: (item) => new Float32Array(item.color !== undefined ? item.color : [-1, -1, -1, -1])
+            });
+        }
+        if (dashedLineOpacityVariativeOn) {
+            m.set("dashed_line_opacity", {
+                itemSize: 1,
+                bufferType: bufferType,
+                adaptor: (item) => new Float32Array(item.dashed_line_opacity !== undefined ? [item.dashed_line_opacity] : [-1])
+            });
+        }
+        if (dashedLineRatioVariativeOn) {
+            m.set("dashed_line_ratio", {
+                itemSize: 1,
+                bufferType: bufferType,
+                adaptor: (item) => new Float32Array(item.dashed_line_ratio !== undefined ? [item.dashed_line_ratio] : [-1])
+            });
+        }
+        return m;
+    }
+    _createSelectBufferNames() {
+        const { flatViewOn, globeViewOn, variativeColorsOn, dashedLineOpacityVariativeOn, dashedLineRatioVariativeOn } = this._options;
+        return [
+            flatViewOn ? "start_position" : null,
+            globeViewOn ? "start_position_3d" : null,
+            flatViewOn ? "end_position" : null,
+            globeViewOn ? "end_position_3d" : null,
+            dashedLineOpacityVariativeOn ? "dashed_line_opacity" : null,
+            dashedLineRatioVariativeOn ? "dashed_line_ratio" : null,
+            variativeColorsOn ? "color" : null
+        ];
+    }
+}

package/semiplugins/lightweight/piece-of-pie-plugin.js

@@ -0,0 +1,175 @@
+import { PieceOfPieProgramCache } from "../../programs/rings/partial-ring/piece-of-pie";
+import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
+import { sphereCoord } from "../../util/geometry/index";
+import { opacityCheck } from "../../util/check/typecheck";
+const INITIAL_CAPACITY = 10; // Initial capacity for the buffer orchestrator
+const EDGE_COUNT = 100; // Number of edges for the pie chart
+const Radians = Math.PI / 180; // Conversion factor from degrees to radians
+export class PieceOfPiePlugin {
+    id;
+    _isFreed = false;
+    globe = null;
+    gl = null;
+    program = null;
+    vao = null;
+    bufferManagersMap = null;
+    bufferOrchestrator = new BufferOrchestrator({ capacity: INITIAL_CAPACITY });
+    drawMode = "BOTH";
+    opacity = 1;
+    _pluginOptions = {
+        bufferType: "STATIC_DRAW",
+        initialCapacity: INITIAL_CAPACITY,
+        defaultAltitude: 0, // Default altitude is ground level
+    };
+    constructor(id, options = {}) {
+        this.id = id;
+        options.bufferType && (this._pluginOptions.bufferType = options.bufferType);
+        options.initialCapacity && (this._pluginOptions.initialCapacity = options.initialCapacity);
+        options.defaultAltitude && (this._pluginOptions.defaultAltitude = options.defaultAltitude);
+    }
+    insertBulk(items) {
+        this.bufferOrchestrator.insertBulk(items, this.bufferManagersMap);
+        this.globe?.DrawRender();
+    }
+    deleteBulk(keys) {
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
+        this.globe?.DrawRender();
+    }
+    setPluginOpacity(opacity) {
+        opacityCheck(opacity);
+        this.opacity = opacity;
+        this.globe?.DrawRender();
+    }
+    setDrawMode(drawMode) {
+        if (drawMode !== "TRIANGLE_FAN" && drawMode !== "LINE_STRIP" && drawMode !== "BOTH") {
+            throw new Error("Invalid draw mode. Use 'TRIANGLE_FAN' or 'LINE_STRIP'.");
+        }
+        this.drawMode = drawMode;
+        this.globe?.DrawRender();
+    }
+    _createBufferManagersMap() {
+        const { gl, globe, _pluginOptions } = this;
+        const { bufferType, initialCapacity } = _pluginOptions;
+        if (!gl || !globe) {
+            throw new Error("Globe and WebGL context must be initialized before creating buffer management map.");
+        }
+        const bufferManagersMap = new Map([
+            ["centerCoords2d", {
+                    bufferManager: new BufferManager(this.gl, 2, { bufferType: bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array(globe.api_GetMercator2DPoint(item.center[0], item.center[1])),
+                }],
+            ["centerCoords3d", {
+                    bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    adaptor: (item) => sphereCoord(item.center[0], item.center[1], globe, (item.altitude ?? this._pluginOptions.defaultAltitude) / 1000)
+                }],
+            ["startAngle2d", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item) => {
+                        if (item.startAngle2D === undefined) {
+                            return new Float32Array([0]); // Default angle if not provided
+                        }
+                        return new Float32Array([(item.startAngle2D) * Radians]);
+                    }
+                }],
+            ["tailAngle2d", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item) => {
+                        if (item.coverAngle2D === undefined) {
+                            return new Float32Array([0]); // Default angle if not provided
+                        }
+                        return new Float32Array([item.coverAngle2D * Radians]);
+                    }
+                }],
+            ["startAngle3d", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item) => {
+                        if (item.startAngle3D === undefined) {
+                            return new Float32Array([0]); // Default angle if not provided
+                        }
+                        return new Float32Array([item.startAngle3D * Radians]);
+                    }
+                }],
+            ["tailAngle3d", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item) => {
+                        if (item.coverAngle3D === undefined) {
+                            return new Float32Array([0]); // Default angle if not provided
+                        }
+                        return new Float32Array([item.coverAngle3D * Radians]);
+                    }
+                }],
+            ["fillingMode", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array([item.fillingMode ?? 0])
+                }],
+            ["rgba", {
+                    bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                    adaptor: (item) => {
+                        if (!item.color || item.color.length === 0) {
+                            return new Float32Array([1, 1, 1, 1]); // Default color if none provided
+                        }
+                        return new Float32Array(item.color);
+                    }
+                }
+            ],
+            ["radius", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array([item.radius])
+                }],
+        ]);
+        this.bufferManagersMap = bufferManagersMap;
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.program = PieceOfPieProgramCache.get(globe);
+        this._createBufferManagersMap();
+        this.vao = this.program.createVAO(
+        //@ts-ignore
+        ...['centerCoords2d',
+            'centerCoords3d',
+            'startAngle2d',
+            'tailAngle2d',
+            'startAngle3d',
+            'tailAngle3d',
+            'rgba',
+            'radius',
+            'fillingMode'].map((name) => {
+            const buffer = this.bufferManagersMap?.get(name)?.bufferManager.buffer;
+            return {
+                buffer: buffer,
+                stride: 0,
+                offset: 0,
+            };
+        }));
+    }
+    draw3D() {
+        if (!this.gl || !this.program || !this.vao || !this.globe) {
+            console.warn("PieChartPlugin is not initialized properly.");
+            return;
+        }
+        const length = this.bufferOrchestrator.length;
+        console.log("Drawing PieChartPlugin with length:", length);
+        this.gl.disable(this.gl.DEPTH_TEST);
+        if (this.drawMode === "BOTH") {
+            this.program?.draw(length, this.vao, EDGE_COUNT, this.opacity, "LINE_STRIP");
+            this.program?.draw(length, this.vao, EDGE_COUNT, this.opacity, "TRIANGLE_FAN");
+        }
+        else {
+            this.program?.draw(length, this.vao, EDGE_COUNT, this.opacity, this.drawMode);
+        }
+        this.gl.enable(this.gl.DEPTH_TEST);
+    }
+    free() {
+        if (this._isFreed) {
+            console.warn("PieChartPlugin is already freed.");
+            return;
+        }
+        PieceOfPieProgramCache.release(this.globe);
+        this.gl?.deleteVertexArray(this.vao);
+        this._isFreed = true;
+        this.globe = null;
+        this.gl = null;
+        this.program = null;
+    }
+}