@pirireis/webglobeplugins 0.17.0 → 1.0.2

package/semiplugins/shell/bbox-renderer/object.ts

@@ -0,0 +1,129 @@
+import { BBOXGlobeShellProgramCache } from './logic';
+import { BBOXGlobeShellProgram, ShellBlockManager } from './logic';
+import { Globe } from '../../../types';
+
+interface BBOXConfig {
+    minLon?: number;
+    maxLon?: number;
+    minLat?: number;
+    maxLat?: number;
+}
+
+interface WiggleConfig {
+    wiggleSpeed?: number | null;
+    wiggleInKM?: number | null;
+}
+
+interface BBOXGlobeShellOptions {
+    minLon?: number;
+    maxLon?: number;
+    minLat?: number;
+    maxLat?: number;
+    height?: number;
+    u_opacity?: number;
+    wiggleInKM?: number;
+    wiggleSpeed?: number;
+}
+
+export class BBOXGlobeShell {
+    public readonly gl: WebGL2RenderingContext;
+    public readonly globe: Globe;
+    public readonly program: BBOXGlobeShellProgram;
+    public readonly shellBlockManager: ShellBlockManager;
+    public readonly update: ShellBlockManager['update'];
+
+    private innerTime: number;
+    private texture!: WebGLTexture;
+    private bbox!: Required<BBOXConfig>;
+    private wiggleInKM: number;
+    private wiggleSpeed: number;
+
+    constructor(
+        gl: WebGL2RenderingContext,
+        globe: Globe,
+        {
+            minLon = -180,
+            maxLon = 180,
+            minLat = -90,
+            maxLat = 90,
+            height = 0,
+            u_opacity = 1,
+            wiggleInKM = 0,
+            wiggleSpeed = 0,
+        }: BBOXGlobeShellOptions = {}
+    ) {
+        this.gl = gl;
+        this.globe = globe;
+        this.program = BBOXGlobeShellProgramCache.get(globe);
+        this.shellBlockManager = this.program.getShellBlockBufferManager();
+        this.update = this.shellBlockManager.update.bind(this.shellBlockManager);
+        this.innerTime = 0;
+        this.wiggleInKM = wiggleInKM;
+        this.wiggleSpeed = wiggleSpeed;
+        this.setBBox({ minLon, maxLon, minLat, maxLat });
+        this.setOpacity(u_opacity);
+        this.setHeight(height);
+        this.setWiggle({ wiggleSpeed, wiggleInKM });
+    }
+
+    public setTexture(texture: WebGLTexture): void {
+        this.texture = texture;
+        this.globe.DrawRender();
+    }
+
+    public setHeight(height: number): void {
+        this.shellBlockManager.update({ height });
+        this.globe.DrawRender();
+    }
+
+    public setOpacity(opacity: number): void {
+        this.shellBlockManager.update({ opacity });
+        this.globe.DrawRender();
+    }
+
+    public setBBox({ minLon = -180, maxLon = 180, minLat = -90, maxLat = 90 }: BBOXConfig = {}): void {
+        this.bbox = { minLon, maxLon, minLat, maxLat };
+        // x
+        const horOffset = (minLon) * Math.PI / 180;
+        const horSize = (maxLon - minLon) * Math.PI / 180;
+        // y
+        const vertOffset = (90 - maxLat) * Math.PI / 180;
+        const vertSize = (maxLat - minLat) * Math.PI / 180;
+
+
+        this.shellBlockManager.update(
+            {
+                gridSizeRad: [horSize, vertSize],
+                gridOffsetRad: [horOffset, vertOffset]
+            });
+        this.globe.DrawRender();
+    }
+
+    public setWiggle({ wiggleSpeed = null, wiggleInKM = null }: WiggleConfig): void {
+        if (wiggleInKM !== null) this.wiggleInKM = wiggleInKM;
+        if (wiggleSpeed !== null) this.wiggleSpeed = wiggleSpeed;
+        this.shellBlockManager.update({ wiggleInKM });
+    }
+
+    /**
+     * @param csRenderPass - modelView, projection, translate, mapWH, scrWH, should be set before calling this function
+     */
+    public draw(csRenderPass?: any): void {
+        this.program.draw(
+            this.texture,
+            this.shellBlockManager,
+            false,
+            csRenderPass
+        );
+        if (this.wiggleInKM > 0 && this.wiggleSpeed > 0) {
+            this.innerTime += this.wiggleSpeed;
+            this.shellBlockManager.update({ innerTime: this.innerTime });
+            this.globe.DrawRender();
+        }
+    }
+
+    public free(): void {
+        BBOXGlobeShellProgramCache.release(this.globe);
+        this.shellBlockManager.free();
+    }
+}

package/semiplugins/type.ts

@@ -0,0 +1,8 @@
+import { Color } from "../types";
+
+export type PluginStyleOptions = {
+    variativeColorsOn?: boolean; // If true, the color will be variative based on the circle's radius.
+    defaultColor: Color;
+    defaultHeightFromGroundIn3D?: number; // Default height from ground in 3D mode.
+
+}

package/semiplugins/utility/{container-plugin.js → container-plugin.ts}

@@ -1,94 +1,126 @@
-import { CSRenderPassPluginKeys } from "../../constants";
-export class ContainerPlugin {
-    id;
-    container = new Map();
-    active = true;
-    globe = null;
-    /**
-     * Asagidaki degerleri false yapmak ufak performans kazanclari saglar.
-     * Örneğin containera atılan pluginlerin sadece normal passda cizim yapmasi isteniyorsa
-     * supportSelectedPass ve supportEditingPass false yapilabilir.
-     */
-    supportNormalPass = true;
-    supportSelectedPass = true;
-    supportEditingPass = true;
-    constructor(id, container) {
-        this.id = id;
-        this.container = container;
-    }
-    init(globe, gl) {
-        this.globe = globe;
-        this.container.forEach((plugin) => {
-            plugin.init(globe, gl);
-        });
-    }
-    setActive(active) {
-        this.active = active;
-        this.globe?.DrawRender();
-    }
-    draw3D(projectionMatrix, modelViewMatrix, transPosition, csRenderPass) {
-        if (!this.active)
-            return;
-        const passSupportKey = CSRenderPassPluginKeys[csRenderPass];
-        for (const plugin of this.container.values()) {
-            if (plugin[passSupportKey] === false) {
-                continue;
-            }
-            if (plugin.draw3D) {
-                plugin.draw3D(projectionMatrix, modelViewMatrix, transPosition, csRenderPass);
-            }
-        }
-    }
-    draw2D(csRenderPass) {
-        if (!this.active)
-            return;
-        const passSupportKey = CSRenderPassPluginKeys[csRenderPass];
-        for (const plugin of this.container.values()) {
-            if (plugin[passSupportKey] === false) {
-                continue;
-            }
-            if (plugin.draw2D) {
-                plugin.draw2D(csRenderPass);
-            }
-        }
-    }
-    free() {
-        for (const plugin of this.container.values()) {
-            plugin.free();
-        }
-        this.container.clear();
-    }
-    _forwardMouseEvent(eventName, x, y, event, csRenderPass) {
-        if (!this.active)
-            return false;
-        const passSupportKey = CSRenderPassPluginKeys[csRenderPass];
-        for (const plugin of this.container.values()) {
-            if (plugin[passSupportKey] === false) {
-                continue;
-            }
-            const handler = plugin[eventName];
-            if (handler) {
-                const result = handler.call(plugin, x, y, event, csRenderPass);
-                if (result === true) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    mouseClick(x, y, event, csRenderPass) {
-        return this._forwardMouseEvent('mouseClick', x, y, event, csRenderPass);
-    }
-    mouseDblClick(x, y, event, csRenderPass) {
-        return this._forwardMouseEvent('mouseDblClick', x, y, event, csRenderPass);
-    }
-    mouseDown(x, y, event, csRenderPass) {
-        return this._forwardMouseEvent('mouseDown', x, y, event, csRenderPass);
-    }
-    mouseMove(x, y, event, csRenderPass) {
-        return this._forwardMouseEvent('mouseMove', x, y, event, csRenderPass);
-    }
-    mouseUp(x, y, event, csRenderPass) {
-        return this._forwardMouseEvent('mouseUp', x, y, event, csRenderPass);
-    }
-}
+import { PluginInterface, CSRenderPass, Globe } from "../../types";
+import { CSRenderPassPluginKeys } from "../../constants";
+
+export class ContainerPlugin implements PluginInterface {
+    id: string;
+    container: Map<string, PluginInterface> = new Map();
+    active: boolean = true;
+    globe: Globe | null = null;
+
+    /**
+     * Asagidaki degerleri false yapmak ufak performans kazanclari saglar.
+     * Örneğin containera atılan pluginlerin sadece normal passda cizim yapmasi isteniyorsa
+     * supportSelectedPass ve supportEditingPass false yapilabilir.
+     */
+    supportNormalPass: boolean = true;
+    supportSelectedPass: boolean = true;
+    supportEditingPass: boolean = true;
+
+    constructor(id: string, container: Map<string, PluginInterface>) {
+        this.id = id;
+        this.container = container;
+    }
+
+
+    init(globe: Globe, gl: WebGL2RenderingContext): void {
+        this.globe = globe;
+        this.container.forEach((plugin) => {
+            plugin.init(globe, gl);
+        }
+        );
+    }
+
+    setActive(active: boolean): void {
+        this.active = active;
+        this.globe?.DrawRender();
+    }
+
+
+    draw3D(projectionMatrix: Float32Array, modelViewMatrix: Float32Array, transPosition: { x: number; y: number; z: number; }, csRenderPass: CSRenderPass): void {
+        if (!this.active) return;
+        const passSupportKey = CSRenderPassPluginKeys[csRenderPass];
+        for (const plugin of this.container.values()) {
+            if (plugin[passSupportKey] === false) {
+                continue;
+            }
+            if (plugin.draw3D) {
+                plugin.draw3D(projectionMatrix, modelViewMatrix, transPosition, csRenderPass);
+            }
+        }
+    }
+
+
+    draw2D(csRenderPass: CSRenderPass): void {
+        if (!this.active) return;
+        const passSupportKey = CSRenderPassPluginKeys[csRenderPass];
+        for (const plugin of this.container.values()) {
+            if (plugin[passSupportKey] === false) {
+                continue;
+            }
+            if (plugin.draw2D) {
+                plugin.draw2D(csRenderPass);
+            }
+        }
+    }
+
+
+    free(): void {
+        for (const plugin of this.container.values()) {
+            plugin.free();
+        }
+        this.container.clear()
+    }
+
+
+    private _forwardMouseEvent(
+        eventName: 'mouseClick' | 'mouseDblClick' | 'mouseDown' | 'mouseMove' | 'mouseUp',
+        x: number,
+        y: number,
+        event: MouseEvent,
+        csRenderPass: CSRenderPass
+    ): boolean {
+        if (!this.active) return false;
+
+        const passSupportKey = CSRenderPassPluginKeys[csRenderPass];
+
+        for (const plugin of this.container.values()) {
+            if (plugin[passSupportKey] === false) {
+                continue;
+            }
+
+            const handler = plugin[eventName];
+            if (handler) {
+                const result = handler.call(plugin, x, y, event, csRenderPass);
+                if (result === true) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+
+    mouseClick(x: number, y: number, event: MouseEvent, csRenderPass: CSRenderPass): boolean {
+        return this._forwardMouseEvent('mouseClick', x, y, event, csRenderPass);
+    }
+
+
+    mouseDblClick(x: number, y: number, event: MouseEvent, csRenderPass: CSRenderPass): boolean {
+        return this._forwardMouseEvent('mouseDblClick', x, y, event, csRenderPass);
+    }
+
+
+    mouseDown(x: number, y: number, event: MouseEvent, csRenderPass: CSRenderPass): boolean {
+        return this._forwardMouseEvent('mouseDown', x, y, event, csRenderPass);
+    }
+
+    mouseMove(x: number, y: number, event: MouseEvent, csRenderPass: CSRenderPass): boolean {
+        return this._forwardMouseEvent('mouseMove', x, y, event, csRenderPass);
+    }
+
+    mouseUp(x: number, y: number, event: MouseEvent, csRenderPass: CSRenderPass): boolean {
+        return this._forwardMouseEvent('mouseUp', x, y, event, csRenderPass);
+    }
+
+}
+

package/semiplugins/utility/{object-pass-container-plugin.js → object-pass-container-plugin.ts}

@@ -1,80 +1,101 @@
-/**
- * object-pass-plugin.ts
- * Manages object pass between instances of same plugin with different configurations
- */
-import { ContainerPlugin } from "./container-plugin";
-export class ObjectPassContainerPlugin extends ContainerPlugin {
-    keyMethod;
-    insertMethod;
-    removeMethod;
-    objectContainer;
-    constructor(id, container, keyMethod, insertMethod, removeMethod) {
-        super(id, container);
-        this.keyMethod = keyMethod;
-        this.insertMethod = insertMethod;
-        this.removeMethod = removeMethod;
-        this.objectContainer = new Map();
-    }
-    passObjects(keys, extraParameters, toPluginId) {
-        const toPlugin = this.container.get(toPluginId);
-        if (!toPlugin) {
-            throw new Error(`Plugin with id ${toPluginId} not found in plugin container`);
-        }
-        const itemsToPass = [];
-        for (const key of keys) {
-            const entry = this.objectContainer.get(key);
-            if (!entry) {
-                console.warn(`Object with key ${key} not found in object container`);
-                continue;
-            }
-            const [pluginId, item] = entry;
-            if (pluginId === toPluginId) {
-                console.warn(`Object with key ${key} is already in the target plugin ${toPluginId}`);
-                continue;
-            }
-            itemsToPass.push(item);
-            const fromPlugin = this.container.get(pluginId);
-            if (!fromPlugin) {
-                throw new Error(`Plugin with id ${pluginId} not found in plugin container`);
-            }
-            entry[0] = toPluginId; // update plugin id in the container
-            this.removeMethod(key, extraParameters, fromPlugin);
-        }
-        if (this.insertMethod) {
-            this.insertMethod(itemsToPass, extraParameters, toPlugin);
-        }
-    }
-    insertObjects(items, extraParameters, toPluginId) {
-        const toPlugin = this.container.get(toPluginId);
-        if (!toPlugin) {
-            throw new Error(`Plugin with id ${toPluginId} not found in plugin container`);
-        }
-        for (const item of items) {
-            const key = this.keyMethod(item);
-            this.objectContainer.set(key, [toPluginId, item]);
-        }
-        if (this.insertMethod) {
-            this.insertMethod(items, extraParameters, toPlugin);
-        }
-    }
-    removeObjects(keys, extraParameters) {
-        for (const key of keys) {
-            const entry = this.objectContainer.get(key);
-            if (!entry) {
-                console.warn(`Object with key ${key} not found in object container`);
-                continue;
-            }
-            const [pluginId, item] = entry;
-            const fromPlugin = this.container.get(pluginId);
-            if (!fromPlugin) {
-                throw new Error(`Plugin with id ${pluginId} not found in plugin container`);
-            }
-            this.removeMethod(key, extraParameters, fromPlugin);
-            this.objectContainer.delete(key);
-        }
-    }
-    passAllObjects(extraParameters, toPluginId) {
-        const keys = Array.from(this.objectContainer.keys());
-        this.passObjects(keys, extraParameters, toPluginId);
-    }
-}
+/**
+ * object-pass-plugin.ts
+ * Manages object pass between instances of same plugin with different configurations
+ */
+
+import { PluginInterface } from "../../types";
+import { ContainerPlugin } from "./container-plugin";
+
+
+
+export class ObjectPassContainerPlugin extends ContainerPlugin {
+    private keyMethod: (object: any) => string;
+    private insertMethod: (items: Array<any>, extraParameters: any, toPlugin: PluginInterface) => void;
+    private removeMethod: (key: string, extraParameters: any, fromPlugin: PluginInterface) => void;
+    private objectContainer: Map<string, [string, any]>
+    constructor(id: string,
+        container: Map<string, PluginInterface>,
+        keyMethod: (object: any) => string,
+        insertMethod: (items: Array<any>, extraParameters: any, toPlugin: PluginInterface) => void,
+        removeMethod: (key: string, extraParameters: any, fromPlugin: PluginInterface) => void,
+    ) {
+        super(id, container);
+        this.keyMethod = keyMethod;
+        this.insertMethod = insertMethod;
+        this.removeMethod = removeMethod;
+        this.objectContainer = new Map<string, [string, any]>();
+    }
+
+
+    passObjects(keys: string[], extraParameters: any, toPluginId: string,): void {
+
+        const toPlugin = this.container.get(toPluginId);
+        if (!toPlugin) {
+            throw new Error(`Plugin with id ${toPluginId} not found in plugin container`);
+        }
+
+        const itemsToPass: any[] = [];
+        for (const key of keys) {
+            const entry = this.objectContainer.get(key);
+            if (!entry) {
+                console.warn(`Object with key ${key} not found in object container`);
+                continue;
+            }
+            const [pluginId, item] = entry;
+            if (pluginId === toPluginId) {
+                console.warn(`Object with key ${key} is already in the target plugin ${toPluginId}`);
+                continue;
+            }
+            itemsToPass.push(item);
+            const fromPlugin = this.container.get(pluginId);
+            if (!fromPlugin) {
+                throw new Error(`Plugin with id ${pluginId} not found in plugin container`);
+            }
+            entry[0] = toPluginId; // update plugin id in the container
+            this.removeMethod(key, extraParameters, fromPlugin);
+        }
+
+        if (this.insertMethod) {
+            this.insertMethod(itemsToPass, extraParameters, toPlugin);
+        }
+    }
+
+
+    insertObjects(items: Array<any>, extraParameters: any, toPluginId: string): void {
+        const toPlugin = this.container.get(toPluginId);
+        if (!toPlugin) {
+            throw new Error(`Plugin with id ${toPluginId} not found in plugin container`);
+        }
+        for (const item of items) {
+            const key = this.keyMethod(item);
+            this.objectContainer.set(key, [toPluginId, item]);
+        }
+        if (this.insertMethod) {
+            this.insertMethod(items, extraParameters, toPlugin);
+        }
+    }
+
+
+    removeObjects(keys: string[], extraParameters: any): void {
+        for (const key of keys) {
+            const entry = this.objectContainer.get(key);
+            if (!entry) {
+                console.warn(`Object with key ${key} not found in object container`);
+                continue;
+            }
+            const [pluginId, item] = entry;
+            const fromPlugin = this.container.get(pluginId);
+            if (!fromPlugin) {
+                throw new Error(`Plugin with id ${pluginId} not found in plugin container`);
+            }
+            this.removeMethod(key, extraParameters, fromPlugin);
+            this.objectContainer.delete(key);
+        }
+    }
+
+
+    passAllObjects(extraParameters: any, toPluginId: string): void {
+        const keys = Array.from(this.objectContainer.keys());
+        this.passObjects(keys, extraParameters, toPluginId);
+    }
+}

package/shaders/fragment-toy/firework.js

@@ -52,4 +52,4 @@ float firework(vec2 point_coord, float phase) {
     float alpha = sum * 2.5;
     return clamp(alpha, 0.0, 1.0);
 }
-`;
+`

package/shaders/fragment-toy/singularity.js

@@ -1,3 +1,5 @@
+
+
 const singularity = `
 
 vec3 palette(float d){
@@ -52,5 +54,6 @@ vec4 singularity(vec2 pointCoord, float u_phase) {
     vec3 rd = normalize(uuv - ro);
 
     return rm(ro, rd);
-}`;
-export { singularity };
+}`;
+
+export { singularity };

package/terrain-plugin.mmd

@@ -0,0 +1,83 @@
+---
+config:
+  theme: redux-dark
+  look: classic
+  layout: elk
+id: 2d4fb98c-b970-4dea-8e25-51a30073b15d
+---
+flowchart TB
+ subgraph subGraph0["Input Source"]
+        Client["Client / App Code"]
+  end
+ subgraph subGraph1["WebGL Resources"]
+        VAO["VAO"]
+        UBO["UBO Handler"]
+  end
+ subgraph subGraph2["TerrainPolygonSemiPlugin (Main Thread)"]
+        Init["init"]
+        Insert["insertBulk(polygons)"]
+        Delete["deleteBulk(keys)"]
+        SetBuffers["setBuffers(WorkerOutput)"]
+        Draw["draw3D()"]
+        subGraph1
+  end
+ subgraph subGraph3["Async Processing"]
+        WC["WorkerContact"]
+        
+        subgraph WorkerContext ["Web Worker (worker.js)"]
+            OnMsg["onmessage"]
+            
+            subgraph CacheSystem ["Cache System (cache.ts)"]
+                C_Insert["insert/remove"]
+                C_Tri["_entry (Triangulation)"]
+                C_RBush["RBush Index"]
+                C_Search["search(bboxes)"]
+            end
+            
+            W_Loop["Loop Visible Triangles"]
+            W_Merge["Merge Buffers"]
+        end
+        
+        Core["Tessellation Core\n(partialTessellation)"]
+  end
+ subgraph subGraph4["GPU Memory (WebGL)"]
+        ElemBuf["Element Array Buffer\n(Indices)"]
+        Vec3Buf["Vec3 Buffer\n(Positions)"]
+        MercBuf["Mercator XY Buffer\n(LongLats)"]
+        Shader["TextureDemTriangles Program"]
+  end
+    Client -- "1. Instantiate" --> Init
+    Init -- Create --> WC & VAO & UBO
+    Init -- Get Program --> Shader
+    Client -- "2. Input Data" --> Insert
+    Insert -- Delegate --> WC
+    
+    %% Worker Flow
+    WC -- "postMessage({queue, bboxes})" --> OnMsg
+    
+    %% Cache Operations
+    OnMsg -- "Process Queue" --> C_Insert
+    C_Insert -- "Triangulate" --> C_Tri
+    C_Tri -- "Store" --> C_RBush
+    
+    %% Render Prep Flow
+    OnMsg -- "Update View" --> C_Search
+    C_Search -- "Query" --> C_RBush
+    C_RBush -- "Visible Triangles" --> W_Loop
+    
+    %% Tessellation Loop
+    W_Loop -- "Meta + Zoom" --> Core
+    Core -- "Geometry" --> W_Loop
+    W_Loop -- "Accumulate" --> W_Merge
+    
+    %% Return to Main
+    W_Merge -- "Transferables" --> WC
+    WC -- Callback --> SetBuffers
+    
+    SetBuffers -- Upload Data --> ElemBuf & Vec3Buf & MercBuf
+    SetBuffers -- Request Render --> Client
+    Client -- "3. Render Loop" --> Draw
+    Draw -- Bind --> VAO
+    Draw -- Update --> UBO
+    Draw -- Execute --> Shader
+    Shader -- Read --> ElemBuf & Vec3Buf & MercBuf