@pirireis/webglobeplugins 0.11.1-alpha → 0.13.0-alpha

package/shape-on-terrain/circle/plugin.js

@@ -0,0 +1,284 @@
+import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip/linestrip";
+import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
+import { CameraUniformBlockTotemCache } from "../../programs/totems/camerauniformblock";
+import { createBufferAndReadInfo } from '../../util/gl-util/buffer/attribute-loader';
+import * as CircleMethods from "../../Math/circle";
+import * as CircleCDF from "../../Math/circle-cdf-points";
+import * as vec3 from "../../Math/vec3";
+import { globe3Dcoordinates, globe2Dcoordinates } from "../../Math/methods";
+import { StaticDynamicStrategy, StaticDynamicState } from "../../util/build-strategy/static-dynamic";
+import { WORLD_RADIUS_3D, WORLD_RADIUS_MERCATOR } from "../../Math/constants";
+const CIRCLE_POINTS_COUNT_HALF = 65; // Half of the points plus one for the reflection
+const CIRCLE_POINTS_COUNT = CIRCLE_POINTS_COUNT_HALF * 2 - 1; // Number of points to approximate the circle
+const DENSE_PART_SAMPLE_RATIO = 0.80; // Ratio of the dense part of the circle
+const STRENGTH_FACTOR = 2; // Strength factor for the circle sampling
+// --- TUNABLE PARAMETERS ---
+const ATTRACTION_LEVELS = 7;
+// Radius below which the most even sampling (level 0) is always used.
+const MIN_RADIUS_KM = 5000;
+// The radius (km) at the center of the transition for the reference LOD.
+// DECREASE this to make mid-sized circles use uneven samples EARLIER.
+const MID_TRANSITION_RADIUS_KM = WORLD_RADIUS_MERCATOR * 0.85;
+const RADIUS_INFLUENCE = 0.55; // How much the radius influences the transition.
+// The reference LOD for the transition.
+const MID_TRANSITION_LOD = 10;
+// How much LOD shifts the curve. Higher means LOD has more influence.
+const LOD_INFLUENCE = 0.385;
+// Steepness of the transition. Higher value = more abrupt switch.
+// DECREASE this to make large circles transition to higher tiers SLOWER.
+const TRANSITION_STEEPNESS = 0.77;
+/**
+ * @param lod The current zoom level.
+ * @param radiusMeters The circle's radius in meters.
+ * @returns An integer level from 0 to ATTRACTION_LEVELS - 1.
+ */
+const defineStregthLevel = (lod, radiusMeters) => {
+    const radiusKm = radiusMeters;
+    // return ATTRACTION_LEVELS - 1;
+    // 1. Enforce a minimum radius for even sampling.
+    if (radiusKm < MIN_RADIUS_KM) {
+        return 0;
+    }
+    // 2. Combine radius and LOD into a single variable.
+    const log_r_mid = Math.log(MID_TRANSITION_RADIUS_KM);
+    const log_r = Math.log(radiusKm);
+    const combined_input = RADIUS_INFLUENCE * (log_r - log_r_mid) + LOD_INFLUENCE * (lod - MID_TRANSITION_LOD);
+    // 3. Apply the logistic (sigmoid) function to get a strength value [0, 1].
+    const strength_factor = 1.0 / (1.0 + Math.pow(2.4, -TRANSITION_STEEPNESS * combined_input));
+    // 4. Scale the result to the available attraction levels and clamp.
+    const level = Math.floor(strength_factor * ATTRACTION_LEVELS);
+    return Math.min(level, ATTRACTION_LEVELS - 1);
+};
+const AnglesStash = CircleCDF.createCummulativeTemplateStash(ATTRACTION_LEVELS, CIRCLE_POINTS_COUNT_HALF, DENSE_PART_SAMPLE_RATIO, STRENGTH_FACTOR);
+const _colorArray = new Float32Array(4); // Used to store the color for each circle
+export class CircleOnTerrainPlugin {
+    id;
+    globe = null;
+    gl = null;
+    lineProgram = null;
+    bufferManagerMap = new Map();
+    bufferOrchestrator = new BufferOrchestrator();
+    circleMap = new Map();
+    _cameraUniformBlock = null;
+    _isFree = false;
+    _circleUBOHandler = null;
+    _opacity = 1;
+    _vao = null;
+    _dobuild = true; // This is used to trigger the build of circles when the camera position changes.
+    _staticDynamicStrategy = null;
+    _styleOptions = {
+        variativeColorsOn: false,
+        defaultColor: [0.1, 0.1, 1, 1], // Default color in RGBA format
+        defaultHeightFromGroundIn3D: 30.0
+    };
+    constructor(id, styleOptions = {
+        variativeColorsOn: false, defaultColor: [0.1, 0.1, 1, 1]
+    }) {
+        this.id = id;
+        this._styleOptions = styleOptions;
+        this._styleOptions.defaultColor = new Float32Array(this._styleOptions.defaultColor);
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        // Initialize the program cache for line strip rendering.
+        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, 8);
+        this.lineProgram = LineStripProgramCache.get(globe);
+        // const g3D = globe3Dcoordinates(globe, 30);
+        const g2D = globe2Dcoordinates(globe);
+        // Initialize with a reasonable initial capacity to prevent buffer size issues
+        const initialCapacity = 100; // Start with capacity for 100 circles
+        this.bufferManagerMap.set("position3d", {
+            bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 3, { initialCapacity }), // plus 1 is for butting linestrips
+            adaptor: (item) => {
+                const { longLatArr, height = this._styleOptions.defaultHeightFromGroundIn3D } = item;
+                const result = globe3Dcoordinates(globe, height)(longLatArr, { paddingCount: 1, paddingValue: NaN });
+                return result;
+            }
+        });
+        this.bufferManagerMap.set("position2d", {
+            bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 2, { initialCapacity }),
+            adaptor: (item) => {
+                const { longLatArr } = item;
+                const result = g2D(longLatArr, { paddingCount: 1, paddingValue: NaN });
+                return result;
+            }
+        });
+        if (this._styleOptions.variativeColorsOn) {
+            this.bufferManagerMap.set("color", {
+                bufferManager: new BufferManager(gl, 4, { initialCapacity }),
+                adaptor: (item) => {
+                    const { radius } = item;
+                    // Calculate color based on radius
+                    if (item.color) {
+                        _colorArray.set(item.color);
+                        return _colorArray;
+                    }
+                    else {
+                        return this._styleOptions.defaultColor;
+                    }
+                }
+            });
+        }
+        this._vao = this.lineProgram.createVAO(createBufferAndReadInfo(this.bufferManagerMap.get("position3d")?.bufferManager.buffer), createBufferAndReadInfo(this.bufferManagerMap.get("position2d")?.bufferManager.buffer), this._styleOptions.variativeColorsOn ?
+            createBufferAndReadInfo(this.bufferManagerMap.get("color")?.bufferManager.buffer) : null);
+        this._circleUBOHandler = this.lineProgram.createUBO();
+        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+    }
+    insertCircle(key, longitude, latitude, radius, height = null) {
+        const circle = {
+            center: [longitude, latitude],
+            radius: radius
+        };
+        const circleForAzimuthCalc = CircleMethods.createCircleClosestAzimuthAngleProperties(circle);
+        this.circleMap.set(key, [circle, circleForAzimuthCalc, height]);
+        // @ts-ignore
+        if (this._staticDynamicStrategy.getState() !== StaticDynamicState.DYNAMIC) {
+            this.__buildStaticCircles([key]);
+        }
+        this.globe?.DrawRender();
+    }
+    deleteCircle(keys) {
+        for (const key of keys) {
+            if (this.circleMap.has(key)) {
+                this.circleMap.delete(key);
+                this.globe?.DrawRender();
+            }
+        }
+        this._dobuild = true;
+        this.globe?.DrawRender();
+    }
+    // IMPLICIT METHODS
+    _buildCircles() {
+        // @ts-ignore
+        this._staticDynamicStrategy?.updateState();
+        const state = this._staticDynamicStrategy?.getState();
+        if (state === StaticDynamicState.TO_STATIC)
+            console.log("state", state);
+        if (state === StaticDynamicState.TO_STATIC) {
+            this.__buildStaticCircles();
+        }
+        else if (state === StaticDynamicState.DYNAMIC) {
+            this.__buildCircles();
+        }
+    }
+    __buildCircles() {
+        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagerMap, circleMap } = this;
+        if (!globe || !gl || !_cameraUniformBlock || !lineProgram ||
+            !bufferOrchestrator || !bufferManagerMap || !circleMap)
+            throw new Error("Plugin not initialized properly");
+        // unoptimized.. resets all circles.
+        bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
+        // Prepare the data for the buffers
+        const data = [{
+                key: "",
+                longLatArr: [],
+                height: null
+            }];
+        const lookAtPosition = _cameraUniformBlock.getLookAtVector();
+        const cameraPosition = _cameraUniformBlock.getNormalizedCameraVector();
+        vec3.divideScalar(cameraPosition, cameraPosition, WORLD_RADIUS_3D);
+        vec3.add(cameraPosition, cameraPosition, lookAtPosition);
+        vec3.normalize(cameraPosition, cameraPosition);
+        const currentLOD = globe.api_GetCurrentLODWithDecimal();
+        const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
+        for (const [key, circle] of this.circleMap.entries()) {
+            const [{ radius, center }, circleForAzimuthCalc, height] = circle;
+            const closestAzimuthAngle = CircleMethods.closestAzimuthAngle(circleForAzimuthCalc, cameraPosition);
+            const stregthLevel = defineStregthLevel(currentLOD, radius);
+            // console.log('DrawStregthLevel', stregthLevel, currentLOD, radius);
+            if (stregthLevel < 0) {
+                console.warn(`CircleOnTerrainPlugin: Circle ${key} has too small radius for current LOD ${currentLOD}. Skipping., radius: ${radius}, stregthLevel: ${stregthLevel}`);
+                continue;
+            }
+            const templateAngles = AnglesStash[stregthLevel];
+            CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, closestAzimuthAngle, templateAngles);
+            data[0].key = key;
+            data[0].longLatArr = circlePointsLongLat;
+            data[0].height = height;
+            // Add to buffer orchestrator
+            this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
+        }
+    }
+    // this will be used to build static circles, which are not affected by camera position or LOD.
+    // LOD < 8 or something
+    __buildStaticCircles(subSetIDs = null) {
+        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagerMap, circleMap } = this;
+        if (!globe || !gl || !_cameraUniformBlock || !lineProgram ||
+            !bufferOrchestrator || !bufferManagerMap || !circleMap)
+            throw new Error("Plugin not initialized properly");
+        const data = [{
+                key: "",
+                longLatArr: [],
+                height: null
+            }];
+        // ensure buffer orchestrotrator have enough capacity
+        // all circles are build with even sampling, AttractionLevel = 0
+        const templateAngles = AnglesStash[0];
+        const zeroRotation = 0;
+        if (!subSetIDs || subSetIDs.length === 0) {
+            const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
+            bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
+            for (const [key, circle] of this.circleMap.entries()) {
+                const [{ radius, center }, _, height] = circle;
+                CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
+                data[0].key = key;
+                data[0].longLatArr = circlePointsLongLat;
+                data[0].height = height;
+                this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
+            }
+        }
+        else {
+            // This does check the size beforehand.
+            // subset is probably is used to insert a single item or,
+            // rebuild of existing items which passed from rbushTree or similar indexed search. 
+            // therefore, it is not necessary to check for new items and extend capacity 
+            for (let key of subSetIDs) {
+                if (!this.circleMap.has(key)) {
+                    console.warn(`CircleOnTerrainPlugin: Circle ${key} not found in circleMap.`);
+                    continue;
+                }
+                const [{ radius, center }, _, height] = this.circleMap.get(key);
+                const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
+                CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
+                data[0].key = key;
+                data[0].longLatArr = circlePointsLongLat;
+                data[0].height = height;
+                this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
+            }
+        }
+    }
+    // GLOBE API INTERFACE
+    draw3D() {
+        const { _isFree, globe, gl, lineProgram, bufferOrchestrator, bufferManagerMap, _vao, _circleUBOHandler } = this;
+        if (_isFree || !globe || !gl || !lineProgram || !bufferOrchestrator ||
+            !bufferManagerMap || !_vao || !_circleUBOHandler) {
+            return;
+        }
+        this._buildCircles();
+        const drawOptions = {
+            drawRange: {
+                first: 0,
+                count: bufferOrchestrator.length * (CIRCLE_POINTS_COUNT + 1), // plus 1 is for cutting linestrips
+            },
+        };
+        gl.disable(gl.DEPTH_TEST);
+        lineProgram.draw(_vao, drawOptions, this._opacity, _circleUBOHandler);
+        gl.enable(gl.DEPTH_TEST);
+    }
+    free() {
+        if (this._isFree)
+            return;
+        this._isFree = true;
+        if (this.lineProgram) {
+            LineStripProgramCache.release(this.lineProgram);
+            this.lineProgram = null;
+        }
+        this.circleMap.clear();
+        this.bufferManagerMap.forEach(({ bufferManager }) => {
+            bufferManager.free();
+        });
+        this.bufferManagerMap.clear();
+        CameraUniformBlockTotemCache.release(this.globe);
+    }
+}

package/shape-on-terrain/type.js

@@ -0,0 +1 @@
+export {};

package/util/account/index.js

@@ -1,3 +1,3 @@
-import BufferOffsetManager from './bufferoffsetmanager';
-export { BufferOffsetManager };
+// import BufferOffsetManager from './bufferoffsetmanager';
+// export { BufferOffsetManager };
 export * from './single-attribute-buffer-management/index';

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

@@ -22,13 +22,12 @@ export class BufferManager {
     itemSize;
     bufferType;
     isFreed = false;
-    constructor(gl, itemSize, { bufferType = "STATIC_DRAW", buffer = null, initialCapacity = null } = {}) {
+    constructor(gl, itemSize, { bufferType = "STATIC_DRAW", buffer = null, initialCapacity = 10 } = {}) {
         this.gl = gl;
         this.itemSize = itemSize;
         this.bufferType = bufferType;
         this.buffer = buffer === null ? gl.createBuffer() : buffer;
-        if (initialCapacity !== null)
-            this.resetWithCapacity(initialCapacity);
+        this.resetWithCapacity(initialCapacity);
     }
     resetWithCapacity(capacity) {
         const { gl, buffer, bufferType, itemSize } = this;

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

@@ -20,7 +20,7 @@ export class BufferOrchestrator {
         this._length = 0;
     }
     insertBulk(items, bufferManagersMap) {
-        this.autoExtendBuffers(items.length, bufferManagersMap);
+        this.ensureSpace(items.length, bufferManagersMap);
         const { offsetMap } = this;
         const offsets = [];
         for (const item of items) {
@@ -88,7 +88,7 @@ export class BufferOrchestrator {
         }
         return false;
     }
-    autoExtendBuffers(itemsLength, bufferManagersMap) {
+    ensureSpace(itemsLength, bufferManagersMap) {
         if (itemsLength <= this.emptySpace)
             return;
         const newCapacity = this.length + itemsLength;

package/util/build-strategy/general-strategy.js

@@ -0,0 +1,62 @@
+/**
+ * # Considerations ---
+ * - RABIT LOD change should trigger build immediately
+ * - CRUD operations should trigger build immediately
+ * - CameraAngle Change should trigger build immediately for Plugins employ DENSITY variation mechanism
+ *
+ */
+var State;
+(function (State) {
+    State["STATIC"] = "STATIC";
+    State["DYNAMIC"] = "DYNAMIC";
+    State["TRANSIENT"] = "TRANSIENT";
+})(State || (State = {}));
+class GeneralStrategy {
+    globe;
+    _state = State.DYNAMIC;
+    _transitionLevel = 8; // Default transition level
+    _lastLOD = 1000; // an extreme value to trigger initial build
+    _lastCameraPosition = [0, 0, 0]; // Initial camera position
+    _lastLookInfo = {
+        CenterLong: 0,
+        CenterLat: 0,
+        Distance: 0,
+        Tilt: 0,
+        NorthAng: 0
+    };
+    _currentLOD = 1000; // an extreme value to trigger initial build
+    _currentCameraPosition = [0, 0, 0]; // Initial camera position
+    _currentLookInfo = {
+        CenterLong: 0,
+        CenterLat: 0,
+        Distance: 0,
+        Tilt: 0,
+        NorthAng: 0
+    };
+    // private _staticBuildThreshold: number = 8; // Default static build threshold
+    // private _triggerStaticBuild: boolean = false;
+    // private _isMovedParams: boolean = false
+    // private _isCameraChangedParams: boolean = false
+    // private _elevationChangedParams: boolean = false
+    constructor(globe, transitionLevel = 8) {
+        // Initialization logic if needed
+        this.globe = globe;
+        this._transitionLevel = transitionLevel;
+    }
+    calculateState() {
+    }
+    getState() {
+        return this._state;
+    }
+    // Additional methods and properties can be added here as needed
+    // @ts-ignore
+    _isMoved() {
+    }
+    // @ts-ignore
+    _isCameraChanged() {
+    }
+    // @ts-ignore
+    _elevationChanged() {
+    }
+}
+export {};

package/util/build-strategy/static-dynamic.js

@@ -0,0 +1,31 @@
+export var StaticDynamicState;
+(function (StaticDynamicState) {
+    StaticDynamicState["STATIC"] = "STATIC";
+    StaticDynamicState["DYNAMIC"] = "DYNAMIC";
+    StaticDynamicState["TO_STATIC"] = "TO_STATIC"; // TODO: Change this not bidirectional, go to static
+})(StaticDynamicState || (StaticDynamicState = {}));
+export class StaticDynamicStrategy {
+    globe;
+    _staticDynamicState = StaticDynamicState.DYNAMIC;
+    _transitionLevel = 8; // Default transition level
+    _lastStaticDynamicState = StaticDynamicState.STATIC;
+    constructor(globe, transitionLevel = 8) {
+        this.globe = globe;
+        this._transitionLevel = transitionLevel;
+        this.updateState();
+    }
+    updateState() {
+        const currentLOD = this.globe.api_GetCurrentLODWithDecimal();
+        const state = currentLOD < this._transitionLevel ? StaticDynamicState.STATIC : StaticDynamicState.DYNAMIC;
+        if (this._lastStaticDynamicState === StaticDynamicState.DYNAMIC && state === StaticDynamicState.STATIC) {
+            this._staticDynamicState = StaticDynamicState.TO_STATIC;
+        }
+        else {
+            this._staticDynamicState = state;
+        }
+        this._lastStaticDynamicState = this._staticDynamicState;
+    }
+    getState() {
+        return this._staticDynamicState;
+    }
+}

package/util/gl-util/draw-options/types.js

@@ -1,4 +1,3 @@
-"use strict";
 /**
  * @typedef DrawRange
  * @type {Object}
@@ -13,3 +12,4 @@
  * @property {null|int} drawMode
  *
  */
+export {};

package/globe-types.js

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

package/programs/interface.js

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

package/programs/rings/distancering/shader.js

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

package/programs/totems/camerauniformblock1.js

@@ -1,171 +0,0 @@
-import { globeProgramCache } from "../programcache";
-// import { getFrustumPlanes } from "../../Math/frustum/from-projection-matrix";
-// import { getFrustum } from "../../Math/frustum/from-globeinfo"
-// import { Plane } from "../../Math/";
-export const CameraUniformBlockString = `
-layout(std140) uniform CameraUniformBlock {
-    mat4 view; // 64 bytes           0
-    mat4 projection; // 64 bytes     64
-    vec3 translate; // 12 bytes      128
-    bool is3D; // 4 bytes            140
-    vec2 mapWH; // 8 bytes           144
-    vec2 screenWH; //  8 bytes       152
-    float z_level; // 4 bytes        160 | 164
-    float world_distance; // 4 bytes 164
-    float world_tilt; // 4 bytes     168
-    float world_north_angle; // 4 bytes 172
-    vec2 world_center_radian; // 8 bytes    176 | 184
-}; // 14 lines
-`;
-const Radian = Math.PI / 180.0;
-export default class CameraUniformBlockTotem {
-    constructor() {
-        this.id = "CameraUniformBlockTotem";
-        this.description = `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` + CameraUniformBlockString;
-        this.gl = null;
-        this.globe = null;
-        this.ubo = null;
-        // this._frustumPlanes = {
-        //     left: new Plane(),
-        //     right: new Plane(),
-        //     top: new Plane(),
-        //     bottom: new Plane(),
-        //     near: new Plane(),
-        //     far: new Plane()
-        // }
-        this._isMovedParams = {
-            lastLod: null,
-            isMoved: false,
-        };
-    }
-    init(globe, gl) {
-        this.gl = gl;
-        this.globe = globe;
-        this.ubo = this._createUBO();
-        this.traslateFloat32 = new Float32Array(3);
-        this.mapWHFloat32 = new Float32Array(2);
-        this.setGeometry();
-        this.resize();
-    }
-    _createUBO() {
-        const { gl } = this;
-        const ubo = gl.createBuffer();
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        // 184 bytes in reality. Overflow on linux for some reason. So, 200 bytes.
-        gl.bufferData(gl.UNIFORM_BUFFER, 200, gl.STREAM_DRAW);
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-        return ubo;
-    }
-    resize() {
-        const { gl, globe, ubo } = this;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        gl.bufferSubData(gl.UNIFORM_BUFFER, 152, new Float32Array([globe.api_ScrW(), globe.api_ScrH()]));
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-    setGeometry() {
-        const { gl, globe, ubo } = this;
-        const is3D = globe.api_GetCurrentGeometry() === 0;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        gl.bufferSubData(gl.UNIFORM_BUFFER, 140, new Float32Array([is3D]));
-    }
-    draw3D(projection, modelView, translate) {
-        const { gl, traslateFloat32, ubo, mapWHFloat32, globe } = this;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        { // view, projection, translat
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
-            traslateFloat32.set([translate.x, translate.y, translate.z], 0);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
-        }
-        {
-            // zoom level
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 160, new Float32Array([globe.api_GetCurrentLODWithDecimal()]));
-        }
-        { // mapWH
-            if (globe.api_GetCurrentGeometry() === 1) {
-                const { width, height } = globe.api_GetCurrentWorldWH();
-                mapWHFloat32.set([width, height]);
-                gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
-            }
-        }
-        {
-            // float world_distance; // 4 bytes 164
-            // float world_tilt; // 4 bytes     168
-            // float world_north_angle; // 4 bytes 172
-            // vec2 world_center_radian; // 8 bytes    180
-            const { CenterLong, CenterLat, Distance, Tilt, NorthAng } = globe.api_GetCurrentLookInfo();
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 164, new Float32Array([
-                Distance, Radian * Tilt, Radian * NorthAng, Radian * CenterLong, Radian * CenterLat
-            ]));
-        }
-        // this._frustumPlanes = getFrustumPlanes(projection, translate);
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-        { // isMoved
-            const currentLOD = globe.api_GetCurrentLODWithDecimal();
-            this._isMovedParams.isMoved = this._isMovedParams.lastLod !== currentLOD || globe.api_IsScreenMoving();
-            this._isMovedParams.lastLod = currentLOD;
-        }
-        // getFrustum(globe, 50, this._frustumPlanes);
-        this._normalizedCameraVector = (() => {
-            const { Fp, FUPos } = globe;
-            const cameraVector = [Fp.x, Fp.y, Fp.z];
-            const length = Math.sqrt(cameraVector.reduce((sum, val) => sum + val * val, 0));
-            return normalizedCameraVector.map(val => val / length);
-        })();
-    }
-    assignBindingPoint(program, bindingPoint) {
-        const { gl } = this;
-        const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
-        gl.uniformBlockBinding(program, cameraBlockIndex, bindingPoint);
-    }
-    getUBO() {
-        return this.ubo;
-    }
-    getFrustumPlanes() {
-        return this._frustumPlanes;
-    }
-    bind(bindingPoint) {
-        const { gl, ubo } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
-    }
-    unbind(bindingPoint) {
-        const { gl } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
-    }
-    isMoved() {
-        return this._isMovedParams.isMoved;
-    }
-    getCameraVector() {
-        return [this.globe.Fp.x, this.globe.Fp.y, this.globe.Fp.z];
-    }
-    getNormalizedCameraVector() {
-        return this._normalizedCameraVector;
-    }
-    getCameraUpPosition() {
-        return [this.globe.FUPos.x, this.globe.FUPos.y, this.globe.FUPos.z];
-    }
-    free() {
-        const { gl, ubo } = this;
-        gl.deleteBuffer(ubo);
-    }
-    readBuffer() {
-        const result = new Float32Array(41);
-        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, this.ubo);
-        this.gl.getBufferSubData(this.gl.UNIFORM_BUFFER, 0, result);
-        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, null);
-        return {
-            view: result.slice(0, 16),
-            projection: result.slice(16, 32),
-            translate: result.slice(32, 35),
-            is3D: result[35],
-            mapWH: result.slice(36, 38),
-            screenWH: result.slice(38, 40),
-            z_level: result[40]
-        };
-    }
-}
-export const CameraUniformBlockTotemCache = Object.freeze({
-    get: (globe) => { return globeProgramCache.getProgram(globe, CameraUniformBlockTotem); },
-    release: (globe) => { return globeProgramCache.releaseProgram(globe, CameraUniformBlockTotem); }
-});