@pirireis/webglobeplugins 0.11.1-alpha → 0.12.0-alpha

package/Math/circle-cdf-points.js

@@ -0,0 +1,249 @@
+import { RADIANS } from "./methods";
+function createTemplate(intervalCount, strength = 1.0) {
+    const out = new Array(intervalCount);
+    const TOTAL = 1;
+    let cummulative = 0;
+    if (strength <= 0) {
+        // If strength is 0, distribute evenly.
+        const step = TOTAL / (intervalCount - 1);
+        for (let i = 0; i < intervalCount; i++) {
+            out[i] = cummulative;
+            cummulative += step;
+        }
+        out[intervalCount - 1] = TOTAL; // Ensure the last value is exactly TOTAL
+        return out;
+    }
+    // If strength is greater than 0, bias towards the start.
+    const weights = new Array(intervalCount);
+    let currentStep = 1;
+    let totalWeight = 0;
+    // Calculate weights for each interval, decreasing for later intervals.
+    for (let i = 0; i < intervalCount; i++) {
+        // Using (i + 1) in the denominator gives earlier intervals the highest weight.
+        totalWeight += currentStep;
+        weights[i] = totalWeight;
+        currentStep += strength;
+    }
+    // Distribute the total angle based on the weights.
+    for (let i = 0; i < intervalCount; i++) {
+        // Round to the nearest whole number for this interval.
+        out[i] = (weights[i] / totalWeight) * TOTAL;
+    }
+    if (out[intervalCount - 1] !== TOTAL) {
+        out[intervalCount - 1] = TOTAL;
+    }
+    // console.log("createTemplate", "strength", strength, "intervalCount", intervalCount, "out", out);
+    return out;
+}
+function interpolation(a, b, t) {
+    return a + (b - a) * t;
+}
+/**
+ * Populates the `out` array with values from the `template` array,
+ * distributing the surplus length as interpolated values between the template samples.
+ *
+ * @param out The destination array to be filled. Its length must be >= template.length.
+ * @param template An ordered array of numbers to be placed in the `out` array.
+ * @param strength A parameter controlling the distribution bias of surplus samples.
+ * - strength = 0: Surplus samples are distributed evenly.
+ * - strength > 0: Surplus samples are biased towards the start of the template.
+ * - Higher values create a stronger bias.
+ */
+function increasePopulation(// TODO: THERE IS A BUG
+out, template, strength = 1.0) {
+    const sourceLength = template.length;
+    const destinationLength = out.length;
+    const outLengthAtStart = out.length;
+    // --- Handle Edge Cases ---
+    // If the template is empty, there is nothing to interpolate from.
+    if (sourceLength === 0) {
+        return;
+    }
+    // If the template has only one value, fill the output array with that value.
+    if (sourceLength === 1) {
+        out.fill(template[0]);
+        return;
+    }
+    // If the destination is not larger than the source, just copy the template values.
+    if (destinationLength <= sourceLength) {
+        for (let i = 0; i < destinationLength; i++) {
+            out[i] = template[i];
+        }
+        return;
+    }
+    // --- Main Logic ---
+    const surplus = destinationLength - sourceLength;
+    const numGaps = sourceLength - 1;
+    // This array will hold the number of extra samples to add in each gap.
+    const surplusPerGap = new Array(numGaps).fill(0);
+    if (surplus > 0) {
+        // --- Step 1: Determine the distribution of surplus items ---
+        // If strength is 0, distribute surplus items as evenly as possible.
+        if (strength <= 0) {
+            const baseToAdd = Math.floor(surplus / numGaps);
+            const remainder = surplus % numGaps;
+            for (let i = 0; i < numGaps; i++) {
+                // Distribute the remainder one by one to the first gaps.
+                surplusPerGap[i] = baseToAdd + (i < remainder ? 1 : 0);
+            }
+        }
+        else {
+            // Biased Distribution: more items in earlier gaps.
+            const weights = new Array(numGaps);
+            let totalWeight = 0;
+            // A. Calculate a weight for each gap. The weight decreases for later gaps.
+            // The `strength` parameter makes this decay steeper.
+            for (let i = 0; i < numGaps; i++) {
+                // Using (i + 1) in the denominator gives earlier gaps (i=0) the highest weight.
+                const weight = Math.pow(1 / (i + 1), strength);
+                weights[i] = weight;
+                totalWeight += weight;
+            }
+            // B. Distribute the surplus based on the calculated weights.
+            // This method ensures the total distributed count equals the surplus.
+            let distributedCount = 0;
+            for (let i = 0; i < numGaps - 1; i++) {
+                const idealCount = (weights[i] / totalWeight) * surplus;
+                // Round to the nearest whole number for this gap.
+                const countForThisGap = Math.ceil(idealCount);
+                surplusPerGap[i] = countForThisGap;
+                distributedCount += countForThisGap;
+            }
+            // Assign the remainder to the last gap to guarantee the sum is correct.
+            //surplusPerGap[numGaps - 1] = surplus - distributedCount; 
+            // add to first 
+            const leftover = surplus - distributedCount;
+            if (leftover > 0) {
+                surplusPerGap[0] += leftover; // Add any leftover to the first gap.
+            }
+            console.log("leftover", leftover, "distributedCount", distributedCount, "surplus", surplus);
+        }
+    }
+    // --- Step 2: Populate the `out` array ---
+    let outIndex = 0;
+    for (let i = 0; i < surplusPerGap.length; i++) {
+        if (typeof surplusPerGap[i] !== "number" || isNaN(surplusPerGap[i]) || !isFinite(surplusPerGap[i])) {
+            console.warn("increasePopulation: Invalid surplusPerGap value at index", i, ":", surplusPerGap[i]);
+        }
+    }
+    for (let i = 0; i < sourceLength; i++) {
+        // A. Add the original template item.
+        out[outIndex++] = template[i];
+        // B. If this is not the last template item, fill the gap after it.
+        if (i < numGaps) {
+            const numToAdd = surplusPerGap[i];
+            if (numToAdd <= 0)
+                continue;
+            const startVal = template[i];
+            const endVal = template[i + 1];
+            // C. Add the interpolated ("surplus") items for this gap.
+            // The total number of intervals in this gap is numToAdd + 1.
+            const totalIntervals = numToAdd + 1;
+            for (let j = 1; j <= numToAdd; j++) {
+                const t = j / totalIntervals; // The interpolation factor (0 < t < 1)
+                // Linear interpolation: out = start * (1 - t) + end * t
+                const interpolatedValue = startVal * (1 - t) + endVal * t;
+                out[outIndex++] = interpolatedValue;
+                if (outIndex >= out.length) {
+                    console.warn("increasePopulation: Output array overflow. Stopping early.");
+                    console.warn("processeed item ratio:", i, "/", sourceLength);
+                    let count = numToAdd - j;
+                    console.log("count", count);
+                    for (let _i = i; _i < sourceLength; _i++) {
+                        count += surplusPerGap[_i];
+                    }
+                    console.warn("increasePopulation: Not enough space to add", count, "more items.");
+                    return; // Prevent overflow if the output array is not large enough.
+                }
+            }
+        }
+    }
+    // --- Step 3: Ensure the output length is correct ---
+    if (outLengthAtStart !== out.length) {
+        console.warn("increasePopulation: Output length mismatch. Expected", outLengthAtStart, "but got", out.length);
+    }
+}
+function createCummulativeTemplate(numberOfPoints, strength, denseRatio = 0.5 // Ratio of points to be densely packed at the start.
+) {
+    // Handle edge cases for the number of points.
+    if (numberOfPoints <= 0) {
+        // If zero or a negative number of points is requested, return an empty array.
+        return new Float64Array([]);
+    }
+    // Create the array to hold the results. Float64Array is used for high-precision floating-point numbers.
+    const distribution = new Float64Array(numberOfPoints);
+    if (numberOfPoints === 1) {
+        // If only one point is requested, it represents the entire range [0, 1].
+        // We place it at the start (0.0).
+        distribution[0] = 0.0;
+        return distribution;
+    }
+    // The exponent determines the curve of the distribution.
+    // We add 1 to the strength so that a strength of 0 results in an exponent of 1 (linear).
+    // We use Math.max(0, strength) to ensure the strength is not negative.
+    // The last index is used to normalize the position to a 0-1 range.
+    const lastIndex = numberOfPoints - 1;
+    distribution[0] = 0.0; // The first point is always at 0.0.
+    let totalWeight = 0;
+    let i = 1;
+    const denseCount = numberOfPoints * denseRatio;
+    for (i; i < denseCount; i++) {
+        // Calculate the ratio of the current index to the last index.
+        // The ratio is adjusted to create a non-linear distribution.
+        totalWeight += 1;
+        distribution[i] = totalWeight; // Store the raw value in the distribution array.
+    }
+    for (i; i < numberOfPoints; i++) {
+        // Calculate the ratio of the current index to the last index.
+        const ratio = 1 + ((i - denseCount) / lastIndex) / (1 - denseRatio) * 2;
+        const step = Math.pow(ratio, strength);
+        totalWeight += step;
+        distribution[i] = totalWeight; // Store the raw value in the distribution array.
+        // Apply the power function to create a non-linear distribution.
+        // The result is normalized to the range [0, 1].
+    }
+    for (let i = 1; i < numberOfPoints; i++) {
+        // Normalize the values to ensure they sum up to 1.
+        distribution[i] = distribution[i] / totalWeight;
+    }
+    console.log("distribution", distribution, "strength", strength, "numberOfPoints", numberOfPoints);
+    return distribution;
+}
+function createCummulativeTemplateStash(levels, numberOfPoints, denseRatio = 0.5, strengthMultiplier = 2.4) {
+    const stash = [];
+    for (let i = 0; i < levels; i++) {
+        const template = createCummulativeTemplate(numberOfPoints, i * strengthMultiplier, denseRatio);
+        stash.push(template);
+    }
+    return stash;
+}
+function globeFindPointByPolar(out, globe, centerLong, centerLat, radius, ratios) {
+    for (let i = 0; i < ratios.length; i++) {
+        const point = globe.Math.FindPointByPolar(centerLong, centerLat, radius, ratios[i]);
+        out[i * 2] = point.long;
+        out[i * 2 + 1] = point.lat;
+    }
+}
+function globeFindPointByPolarHalfCircle(out, globe, centerLong, centerLat, radius, rotation, ratios) {
+    const rotCentigrade = rotation / RADIANS + 720;
+    for (let i = 0; i < ratios.length; i++) {
+        const point = globe.Math.FindPointByPolar(centerLong, centerLat, radius, (ratios[i] * 180 + rotCentigrade) % 360);
+        out[i * 2] = point.long;
+        out[i * 2 + 1] = point.lat;
+    }
+    // fill reflection
+    let offset = out.length;
+    for (let i = 0; i < ratios.length - 1; i++) {
+        const point = globe.Math.FindPointByPolar(centerLong, centerLat, radius, ((-ratios[i]) * 180 + rotCentigrade) % 360);
+        out[offset - 2] = point.long;
+        out[offset - 1] = point.lat;
+        offset -= 2;
+    }
+    console.log("1");
+}
+export { 
+// createTemplate,
+// increasePopulation,
+// interpolation,
+// createCummulativeTemplate,
+createCummulativeTemplateStash, globeFindPointByPolar, globeFindPointByPolarHalfCircle };

package/Math/circle.js

@@ -0,0 +1,39 @@
+import { RADIANS } from './methods';
+import { subtract, normalize, dot, fromLongLatToUnitVector, copy, multiplyScalar } from './vec3';
+const _0vec3 = [0, 0, 0];
+function closestAzimuthAngle(circleProperties, point) {
+    const distance = dot(circleProperties.normal, point);
+    copy(_0vec3, circleProperties.normal);
+    multiplyScalar(_0vec3, _0vec3, distance);
+    subtract(_0vec3, point, _0vec3);
+    normalize(_0vec3, _0vec3);
+    const N = circleProperties.northPointProjectedToOriginPlaneNormalized;
+    const _dot = dot(_0vec3, N);
+    let angle = Math.acos(_dot);
+    const z = _0vec3[0] * N[1] - _0vec3[1] * N[0];
+    return z < 0 ? -angle : angle;
+}
+function createCircleClosestAzimuthAngleProperties(circle) {
+    const normal = Array(3);
+    fromLongLatToUnitVector(normal, [circle.center[0] * RADIANS, circle.center[1] * RADIANS]);
+    const distance = normal[2]; //dot(normal, [0, 0, 1] as Vec3)
+    const N = [0, 0, 0];
+    if (Math.abs(distance) < 1e-6) {
+        N[0] = -1;
+        N[1] = 0;
+        N[2] = 0;
+    }
+    else {
+        copy(N, normal);
+        multiplyScalar(N, N, distance);
+        N[0] = -N[0];
+        N[1] = -N[1];
+        N[2] = 1 - N[2];
+    }
+    normalize(N, N);
+    return {
+        normal: normal,
+        northPointProjectedToOriginPlaneNormalized: N,
+    };
+}
+export { closestAzimuthAngle, createCircleClosestAzimuthAngleProperties };

package/Math/methods.js

@@ -84,14 +84,24 @@ export const globe3Dcoordinates = (globe, height = 0) => (longlats, { paddingCou
     }
     return result;
 };
-export const globe2Dcoordinates = (globe) => (longlats, { paddingCount = 0, paddingValue = NaN }) => {
+const manhattanDistance = (a, b) => {
+    return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);
+};
+export const globe2Dcoordinates = (globe, distanceFilterMeter = WORLD_RADIUS_MERCATOR) => (longlats, { paddingCount = 0, paddingValue = NaN }) => {
+    let _lastXY = [NaN, NaN];
     const len = longlats.length / 2;
     const result = new Float32Array(len * 2 + paddingCount * 2).fill(paddingValue);
     for (let i = 0; i < len; i++) {
         const long = longlats[i * 2];
         const lat = longlats[i * 2 + 1];
-        const xyz = globe.api_GetMercator2DPoint(long, lat);
-        result.set(xyz, i * 2);
+        const xy = globe.api_GetMercator2DPoint(long, lat);
+        if (manhattanDistance(_lastXY, xy) > distanceFilterMeter) {
+            result.set([paddingValue, paddingValue], i * 2);
+        }
+        else {
+            result.set(xy, i * 2);
+        }
+        _lastXY = xy;
     }
     return result;
 };

package/Math/vec3.js

@@ -80,7 +80,7 @@ function equals(a, b) {
         Math.abs(a[1] - b[1]) < EPSILON &&
         Math.abs(a[2] - b[2]) < EPSILON);
 }
-function toUnitVectorLongLat(out, a) {
+function fromUnitVectorToLongLat(out, a) {
     const len = length(a); // TODO Might drop length check 
     if (len === 0) {
         throw new Error('Cannot convert a zero vector to unit vector');
@@ -88,7 +88,7 @@ function toUnitVectorLongLat(out, a) {
     out[0] = Math.atan2(a[1], a[0]); // Longitude
     out[1] = Math.asin(a[2] / len); // Latitude
 }
-function fromUnitVectorLongLat(out, longLat) {
+function fromLongLatToUnitVector(out, longLat) {
     const longitude = longLat[0];
     const latitude = longLat[1];
     const cosLat = Math.cos(latitude);
@@ -119,4 +119,4 @@ function randomUnit(out) {
 function str(a) {
     return `Vec3(${a[0].toFixed(2)}, ${a[1].toFixed(2)}, ${a[2].toFixed(2)})`;
 }
-export { create, set, clone, copy, add, subtract, dot, cross, multiplyScalar, divideScalar, lengthSquared, length, normalize, distanceSquared, distance, equals, toUnitVectorLongLat, fromUnitVectorLongLat, applyQuaternion, randomUnit, str };
+export { create, set, clone, copy, add, subtract, dot, cross, multiplyScalar, divideScalar, lengthSquared, length, normalize, distanceSquared, distance, equals, fromUnitVectorToLongLat, fromLongLatToUnitVector, applyQuaternion, randomUnit, str };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "0.11.1-alpha",
+    "version": "0.12.0-alpha",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT",

package/programs/line-on-globe/linestrip.js

@@ -1,7 +1,6 @@
 import { createProgram } from "../../util/webglobjectbuilders";
-import "../interface";
 import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totems/index";
-import { cartesian3DToGLPosition, mercatorXYToGLPosition, } from "../../util/shaderfunctions/geometrytransformations.js";
+import { cartesian3DToGLPosition, mercatorXYToGLPosition, } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import "../../util/gl-util/buffer/attribute-loader";
@@ -57,7 +56,7 @@ void main() {
         v_position = vec3( position2d, 0.0 );
         v_flat_position = vec3( position2d, 0.0 );
     }
-    gl_PointSize = 4.0;
+    gl_PointSize = 6.0;
 }`;
 const fragmentShaderSource = `#version 300 es
 precision highp float;
@@ -88,7 +87,7 @@ void main() {
         outColor = vec4( v_color.rgb,  v_color.a * opacity );
     }
 }`;
-class Logic {
+export class LineProgram {
     _vaosPublished = [];
     _ubosPublished = [];
     program;
@@ -164,6 +163,6 @@ class Logic {
     }
 }
 export const LineStripProgramCache = Object.freeze({
-    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
-    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic),
+    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, LineProgram),
+    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, LineProgram),
 });

package/programs/totems/camerauniformblock.js

@@ -1,4 +1,6 @@
 import { globeProgramCache } from "../programcache";
+import { fromLongLatToUnitVector } from "../../Math/vec3";
+import { RADIANS } from "../../Math/methods";
 export const CameraUniformBlockString = `
 layout(std140) uniform CameraUniformBlock {
     mat4 view; // 64 bytes           0
@@ -15,6 +17,7 @@ layout(std140) uniform CameraUniformBlock {
 }; // 14 lines
 `;
 const Radian = Math.PI / 180.0;
+const _0vec3 = [0, 0, 0];
 export default class CameraUniformBlockTotem {
     id;
     description;
@@ -24,7 +27,7 @@ export default class CameraUniformBlockTotem {
     traslateFloat32;
     mapWHFloat32;
     _isMovedParams;
-    _normalizedCameraVector;
+    _normalizedCameraVector = [0, 0, 0]; // Normalized camera vector
     // _frustumPlanes: any; // Uncomment and type if used
     constructor() {
         this.id = "CameraUniformBlockTotem";
@@ -127,14 +130,31 @@ export default class CameraUniformBlockTotem {
                     globe.api_IsScreenMoving();
             this._isMovedParams.lastLod = currentLOD;
         }
-        // getFrustum(globe, 50, this._frustumPlanes);
-        this._normalizedCameraVector = (() => {
-            const { Fp } = globe;
+        this.__setCameraVectors();
+    }
+    __setCameraVectors() {
+        if (!this.globe) {
+            throw new Error("Globe is not initialized");
+        }
+        const globe = this.globe;
+        const currentGeom = globe.api_GetCurrentGeometry();
+        if (currentGeom === 0) {
+            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 cameraVector.map((val) => val / length);
-        })();
+            this._normalizedCameraVector[0] = cameraVector[0] / length;
+            this._normalizedCameraVector[1] = cameraVector[1] / length;
+            this._normalizedCameraVector[2] = cameraVector[2] / length;
+        }
+        else if (currentGeom === 1) {
+            const { CenterLong, CenterLat } = globe.api_GetCurrentLookInfo();
+            fromLongLatToUnitVector(_0vec3, [CenterLong * RADIANS, CenterLat * RADIANS]);
+            this._normalizedCameraVector[0] = _0vec3[0];
+            this._normalizedCameraVector[1] = _0vec3[1];
+            this._normalizedCameraVector[2] = _0vec3[2];
+        }
     }
+    // TODO: cut implicits to the bottom
     assignBindingPoint(program, bindingPoint) {
         const gl = this.gl;
         const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
@@ -163,12 +183,19 @@ export default class CameraUniformBlockTotem {
         return [globe.Fp.x, globe.Fp.y, globe.Fp.z];
     }
     getNormalizedCameraVector() {
-        return this._normalizedCameraVector;
+        return this._normalizedCameraVector || _0vec3;
     }
-    getCameraUpPosition() {
+    getCameraUpVector() {
         const globe = this.globe;
         return [globe.FUPos.x, globe.FUPos.y, globe.FUPos.z];
     }
+    getLookAtVector() {
+        const globe = this.globe;
+        const { CenterLong, CenterLat } = globe.api_GetCurrentLookInfo();
+        const result = [0, 0, 0];
+        fromLongLatToUnitVector(result, [CenterLong * RADIANS, CenterLat * RADIANS]);
+        return result;
+    }
     free() {
         const gl = this.gl;
         const ubo = this.ubo;

package/programs/totems/canvas-webglobe-info.js

@@ -1,21 +1,32 @@
 import { globeProgramCache } from "../programcache";
-export const WebglobeInfoUniformBlockString = `
-layout(std140) uniform WebglobeInfo {
-    vec2 canvas_resolution;
-    vec2 mouse_radian_long_lat;
-    vec2 mouse_pixel_xy;
-    float north_angle;
-    float world_tilt;
-    float earth_distance;
-}; 
+export const WebGlobeInfoUniformBlockString = `
+layout(std140) uniform WebGlobeInfo {
+    vec2 canvas_resolution;
+    vec2 mouse_radian_long_lat;
+    vec2 mouse_pixel_xy;
+    float north_angle;
+    float world_tilt;
+    float earth_distance;
+}; 
 `;
-export default class CameraUniformBlockTotem {
+export default class CanvasWebGlobeInfo {
+    id;
+    description;
+    gl;
+    globe;
+    ubo;
+    traslateFloat32;
+    mapWHFloat32;
     constructor() {
-        this.id = "CameraUniformBlockTotem";
-        this.description = `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` + CameraUniformBlockString;
+        this.id = "CanvasWebGlobeInfo";
+        this.description =
+            `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` +
+                WebGlobeInfoUniformBlockString;
         this.gl = null;
         this.globe = null;
         this.ubo = null;
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
     }
     init(globe, gl) {
         this.gl = gl;
@@ -27,8 +38,12 @@ export default class CameraUniformBlockTotem {
         this.resize();
     }
     _createUBO() {
-        const { gl } = this;
+        if (!this.gl)
+            return null;
+        const gl = this.gl;
         const ubo = gl.createBuffer();
+        if (!ubo)
+            return null;
         gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
         gl.bufferData(gl.UNIFORM_BUFFER, 164, gl.STREAM_DRAW);
         gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
@@ -36,21 +51,28 @@ export default class CameraUniformBlockTotem {
         return ubo;
     }
     resize() {
+        if (!this.gl || !this.globe || !this.ubo)
+            return;
         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() {
+        if (!this.gl || !this.globe || !this.ubo)
+            return;
         const { gl, globe, ubo } = this;
-        const is3D = globe.api_GetCurrentGeometry() === 0;
+        const is3D = globe.api_GetCurrentGeometry() === 0 ? 1 : 0;
         gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
         gl.bufferSubData(gl.UNIFORM_BUFFER, 140, new Float32Array([is3D]));
     }
     draw3D(projection, modelView, translate) {
+        if (!this.gl || !this.globe || !this.ubo)
+            return;
         const { gl, traslateFloat32, ubo, mapWHFloat32, globe } = this;
         gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        { // view, projection, translate
+        {
+            // view, projection, translate
             gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
             gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
             traslateFloat32.set([translate.x, translate.y, translate.z], 0);
@@ -60,7 +82,8 @@ export default class CameraUniformBlockTotem {
             // zoom level
             gl.bufferSubData(gl.UNIFORM_BUFFER, 160, new Float32Array([globe.api_GetCurrentLODWithDecimal()]));
         }
-        { // mapWH
+        {
+            // mapWH
             if (globe.api_GetCurrentGeometry() === 1) {
                 const { width, height } = globe.api_GetCurrentWorldWH();
                 mapWHFloat32.set([width, height]);
@@ -73,18 +96,26 @@ export default class CameraUniformBlockTotem {
         return this.ubo;
     }
     bind(bindingPoint) {
+        if (!this.gl || !this.ubo)
+            return;
         const { gl, ubo } = this;
         gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
     }
     unbind(bindingPoint) {
+        if (!this.gl)
+            return;
         const { gl } = this;
         gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
     }
     free() {
+        if (!this.gl || !this.ubo)
+            return;
         const { gl, ubo } = this;
         gl.deleteBuffer(ubo);
     }
     readBuffer() {
+        if (!this.gl || !this.ubo)
+            return null;
         const result = new Float32Array(41);
         this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, this.ubo);
         this.gl.getBufferSubData(this.gl.UNIFORM_BUFFER, 0, result);
@@ -96,11 +127,15 @@ export default class CameraUniformBlockTotem {
             is3D: result[35],
             mapWH: result.slice(36, 38),
             screenWH: result.slice(38, 40),
-            z_level: result[40]
+            z_level: result[40],
         };
     }
 }
-export const CameraUniformBlockTotemCache = Object.freeze({
-    get: (globe) => { return globeProgramCache.getProgram(globe, CameraUniformBlockTotem); },
-    release: (globe) => { return globeProgramCache.releaseProgram(globe, CameraUniformBlockTotem); }
+export const CanvasWebGlobeInfoCache = Object.freeze({
+    get: (globe) => {
+        return globeProgramCache.getProgram(globe, CanvasWebGlobeInfo);
+    },
+    release: (globe) => {
+        return globeProgramCache.releaseProgram(globe, CanvasWebGlobeInfo);
+    },
 });