@pirireis/webglobeplugins 0.15.21-alpha → 0.15.24

package/Math/arc.js

@@ -143,8 +143,7 @@ function _populatePointsWithClosestPointInsideArc(out, arc, count, closestPoint)
  * @param {Vec3} cameraPosition - The position of the camera.
  * @param {number} quaternionReuseCount - The number of times to apply the same rotation before recalculating. Higher is faster but less accurate.
  */
-function _distanceSampling(out, count, inArc, cameraPosition = vec3create(0, 0, 0), // TODO
-quaternionReuseCount = 1) {
+function _distanceSampling(out, count, inArc, cameraPosition = vec3create(0, 0, 0), quaternionReuseCount = 1) {
     if (count === 0) {
         return;
     }

package/Math/circle-cdf-points.js

@@ -1,168 +1,4 @@
 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.
@@ -239,9 +75,4 @@ function globeFindPointByPolarHalfCircle(out, globe, centerLong, centerLat, radi
         offset -= 2;
     }
 }
-export { 
-// createTemplate,
-// increasePopulation,
-// interpolation,
-// createCummulativeTemplate,
-createCummulativeTemplateStash, globeFindPointByPolar, globeFindPointByPolarHalfCircle };
+export { createCummulativeTemplateStash, globeFindPointByPolar, globeFindPointByPolarHalfCircle };

package/Math/circle.js

@@ -29,30 +29,5 @@ function createCircleClosestAzimuthAngleProperties(circle) {
         normal: normal,
         northPointProjectedToOriginPlaneNormalized: N,
     };
-    // const distance = normal[2]; //dot(normal, [0, 0, 1] as Vec3)
-    // const N: Vec3 = [0, 0, 0];
-    // if (Math.abs(distance) < 1e-6) {
-    //     N[0] = -1;
-    //     N[1] = 0;
-    //     N[2] = 0;
-    // } else {
-    //     // TODO: add cases for 8 parts of the sphere
-    //     copy(N, normal);
-    //     multiplyScalar(N, N, distance);
-    //     if (N[2] >= 0) {
-    //         N[0] = -N[0];
-    //         N[1] = -N[1];
-    //         N[2] = 1 - N[2];
-    //     } else {
-    //         N[2] = -N[2];
-    //         N[0] = -N[0];
-    //         N[1] = -N[1];
-    //     }
-    // }
-    // normalize(N, N);
-    // return {
-    //     normal: normal,
-    //     northPointProjectedToOriginPlaneNormalized: N,
-    // }
 }
 export { closestAzimuthAngle, createCircleClosestAzimuthAngleProperties };

package/Math/vec3.js

@@ -85,7 +85,7 @@ function equals(a, b) {
         Math.abs(a[2] - b[2]) < EPSILON);
 }
 function fromUnitVectorToLongLat(out, a) {
-    const len = length(a); // TODO Might drop length check 
+    const len = length(a);
     if (len === 0) {
         throw new Error('Cannot convert a zero vector to unit vector');
     }

package/altitude-locator/plugin.js

@@ -335,7 +335,7 @@ class PointGlowLineToEarthPlugin {
         });
     }
     _doesChanged() {
-        return this._cameraBlockTotem.isMoved() || this._parametersChanged; // TODO: implement
+        return this.globe.api_IsScreenMoving();
     }
     _changed() {
         this._parametersChanged = true;

package/package.json

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

package/point-tracks/plugin.js

@@ -14,7 +14,7 @@ const _0vec3 = /* @__PURE__ */ [0, 0, 0];
  * @typedef {Array<Point>, rgba, trackID} Track
  */
 class PointTracksPlugin {
-    constructor(id, { pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0, objectStoreExtraParameters = ["long", "lat", "height"], initialCapacity = 10000000 } = {}) {
+    constructor(id, { pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0, objectStoreExtraParameters = ["long", "lat", "height"], initialCapacity = 1000 } = {}) {
         this.id = id;
         this._isFreed = false;
         this._pointProgram = null;
@@ -25,7 +25,7 @@ class PointTracksPlugin {
         this._selectedID = -1;
         this._selectedObj = null;
         this._tracksToPointsMap = new Map(); // one to many
-        this._opacity = opacity;
+        this._opacity = opacity ? opacity : 1.0;
         this.program = null;
         this._lastWH = { w: 0, h: 0 };
         this._focusParams = { on: false, length: 0, elementBuffer: null, trackIDs: [] };
@@ -34,11 +34,11 @@ class PointTracksPlugin {
             selectionPointFilling: selectionPointFilling ? selectionPointFilling : 4,
             hoveredPointSize: hoveredPointSize ? hoveredPointSize : 4
         };
-        this._objectStoreExtraParameters = objectStoreExtraParameters;
+        this._objectStoreExtraParameters = objectStoreExtraParameters ? objectStoreExtraParameters : [];
         this._objectStoreExtraParametersFiltered = objectStoreExtraParameters.filter(param => {
             return !["long", "lat", "height", "ID", "trackID"].includes(param);
         });
-        this._bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
+        this._bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity ? initialCapacity : 1000 });
     }
     init(globe, gl) {
         this.globe = globe;
@@ -144,7 +144,7 @@ class PointTracksPlugin {
      * @returns
      */
     insertBulk(tracks) {
-        this._fillTracksToPointsMap(tracks); // TODO error should be at the top
+        this._fillTracksToPointsMap(tracks);
         const flattenedPoints = tracks.map(trackToFlatPoints, this._objectStoreExtraParametersFiltered).flat();
         const currentLoad = this._bufferOrchestrator.length;
         if (currentLoad + flattenedPoints.length >= 2147483647) {
@@ -224,7 +224,6 @@ class PointTracksPlugin {
             return;
         this._isFreed = true;
         this._pickerDisplayer.free();
-        this._tracksToPointMap.clear();
         PointOnGlobeProgramCache.release(this.globe);
         this.gl.deleteBuffer(this._focusParams.elementBuffer);
         this._bufferManagersMap.forEach(({ bufferManager, adaptor }) => bufferManager.free());

package/programs/line-on-globe/lines-color-instanced-flat.js

@@ -8,7 +8,6 @@ import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
  * This program draws line between points provided from the first and second buffer.
  * draw method gl.drawArraysInstanced( gl.POINTS, 0,2, lineCount);
  * */
-// TODO: find better way to eleminate edge case distance(posA, posB) > 37000000.0
 const vertexShaderSource = `#version 300 es
 precision highp float;
 ${CameraUniformBlockString}

package/programs/point-on-globe/element-globe-surface-glow.js

@@ -100,7 +100,6 @@ class Logic {
         const vao = gl.createVertexArray();
         const divisor = 1;
         gl.bindVertexArray(vao);
-        // TODO constants to escape values
         attributeLoader(gl, pos3DObj, 0, 3, { divisor });
         attributeLoader(gl, radiusObj, 1, 1, { divisor, escapeValues: [-1] });
         attributeLoader(gl, colorObj, 2, 4, { divisor, escapeValues: [-1, -1, -1, -1] });

package/programs/totems/camerauniformblock.js

@@ -1,6 +1,7 @@
 import { globeProgramCache } from "../programcache";
 import { fromLongLatToUnitVector } from "../../Math/vec3";
 import { RADIANS } from "../../Math/methods";
+import { GlobeChangeObserver } from "./globe-changes";
 export const CameraUniformBlockString = `
 layout(std140) uniform CameraUniformBlock {
     mat4 view; // 64 bytes           0
@@ -29,6 +30,7 @@ export class CameraUniformBlockTotem {
     _isMovedParams;
     _normalizedCameraVector = [0, 0, 0]; // Normalized camera vector
     // _frustumPlanes: any; // Uncomment and type if used
+    _globeChangeObserver = null;
     constructor() {
         this.id = "CameraUniformBlockTotem";
         this.description =
@@ -51,6 +53,7 @@ export class CameraUniformBlockTotem {
         this.ubo = this._createUBO();
         this.traslateFloat32 = new Float32Array(3);
         this.mapWHFloat32 = new Float32Array(2);
+        this._globeChangeObserver = new GlobeChangeObserver(globe);
         this.setGeometry();
         this.resize();
     }
@@ -86,6 +89,7 @@ export class CameraUniformBlockTotem {
         const ubo = this.ubo;
         const mapWHFloat32 = this.mapWHFloat32;
         const globe = this.globe;
+        this._globeChangeObserver?.checkChanges();
         gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
         {
             // view, projection, translate
@@ -196,6 +200,9 @@ export class CameraUniformBlockTotem {
         fromLongLatToUnitVector(result, [CenterLong * RADIANS, CenterLat * RADIANS]);
         return result;
     }
+    getGlobeChanges() {
+        return this._globeChangeObserver?.getChanges();
+    }
     free() {
         const gl = this.gl;
         const ubo = this.ubo;

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

@@ -1,13 +1,13 @@
 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 CanvasWebGlobeInfo {
     id;

package/programs/totems/globe-changes.js

@@ -12,11 +12,12 @@ export class GlobeChangeObserver {
     };
     lastElevationCoefficient = NaN;
     changes = {
-        geometryChanged: false,
-        lookChanged: false,
-        lodChanged: false,
-        worldWHChanged: false,
-        elevationCoefficientChanged: false
+        geometry: false,
+        look: false,
+        lod: false,
+        lod2DWheel: false,
+        elevationScale: false,
+        screenMoved: false
     };
     constructor(globe) {
         this.globe = globe;
@@ -27,24 +28,30 @@ export class GlobeChangeObserver {
         this.lastElevationCoefficient = globe.api_GetZScale();
     }
     checkChanges() {
-        const currentGeometry = this.globe.api_GetCurrentGeometry();
-        const currentLook = this.globe.api_GetCurrentLookInfo();
-        const currentLOD = this.globe.api_GetCurrentLODWithDecimal();
-        const currentWorldWH = this.globe.api_GetCurrentWorldWH();
-        this.changes.geometryChanged = (this.lastGeometry !== currentGeometry);
-        this.changes.lookChanged = (this.lastLook.CenterLong !== currentLook.CenterLong ||
+        const globe = this.globe;
+        const currentGeometry = globe.api_GetCurrentGeometry();
+        const currentLook = globe.api_GetCurrentLookInfo();
+        const currentLOD = globe.api_GetCurrentLODWithDecimal();
+        const currentWorldWH = globe.api_GetCurrentWorldWH();
+        this.changes.geometry = (this.lastGeometry !== currentGeometry);
+        this.changes.look = (this.lastLook.CenterLong !== currentLook.CenterLong ||
             this.lastLook.CenterLat !== currentLook.CenterLat ||
             this.lastLook.Distance !== currentLook.Distance ||
             this.lastLook.Tilt !== currentLook.Tilt ||
-            this.lastLook.NorthAng !== currentLook.NorthAng);
-        this.changes.lodChanged = (this.lastLOD !== currentLOD);
-        this.changes.worldWHChanged = (this.lastWorldWH.width !== currentWorldWH.width ||
+            this.lastLook.NorthAng !== currentLook.NorthAng ||
+            this.lastWorldWH.width !== currentWorldWH.width ||
             this.lastWorldWH.height !== currentWorldWH.height);
+        this.changes.lod = (this.lastLOD !== currentLOD);
+        this.changes.lod2DWheel = (!globe.api_IsScreenMoving() && this.changes.lod);
         // Update last known states
         this.lastGeometry = currentGeometry;
         this.lastLook = currentLook;
         this.lastLOD = currentLOD;
         this.lastWorldWH = currentWorldWH;
+        this.changes.screenMoved = (this.changes.geometry ||
+            this.changes.look ||
+            this.changes.lod ||
+            this.changes.lod2DWheel);
     }
     getChanges() {
         return this.changes;

package/range-tools-on-terrain/bearing-line/plugin.js

@@ -216,7 +216,6 @@ export class BearingLinePlugin {
         this.drawOptions.drawAngleRing = drawAngleRing;
         this.globe.DrawRender();
     }
-    // TODO:
     updatePartial(items, { textWriterIDs } = {}) {
         if (this._freed) {
             throw new Error("Plugin has been freed, cannot update item.");
@@ -436,10 +435,8 @@ export class BearingLinePlugin {
             this.linePlugin.draw3D();
             this.linePluginBL.draw3D();
         }
-        if (this.drawOptions.drawAngleRing) {
-            for (const textWriter of this._textWritersMap.values()) {
-                textWriter.draw();
-            }
+        for (const textWriter of this._textWritersMap.values()) {
+            textWriter.draw();
         }
     }
     free() {

package/range-tools-on-terrain/circle-line-chain/chain-list-map.js

@@ -1,7 +1,3 @@
-/**
- * set and get node data
- * node indexes;
- */
 export class ChainListMap {
     _chainMap;
     _chainSideProperties;
@@ -98,7 +94,7 @@ export class ChainListMap {
             });
         }
         this._chainMap.delete(chainKey);
-        this._chainSideProperties.delete(chainKey); // TODO: this might be this way but adding this know can cause side effects
+        this._chainSideProperties.delete(chainKey);
         for (const key of keys)
             this._indexMap.delete(key);
         return keys;
@@ -177,10 +173,9 @@ export class ChainListMap {
             memoryProperties[key] = value;
         });
     }
-    // TODO: bad name clean up, need to check on frontend
-    getNodeProperties(chainKey) {
-        return this._chainSideProperties.get(chainKey);
-    }
+    // getNodeProperties(chainKey: string): ChainProperties | undefined {
+    //     return this._chainSideProperties.get(chainKey);
+    // }
     getChainProperties(chainKey) {
         return this._chainSideProperties.get(chainKey);
     }

package/range-tools-on-terrain/circle-line-chain/plugin.js

@@ -158,12 +158,14 @@ export class CircleLineChainPlugin {
         this.globe?.DrawRender();
     }
     setOpacities(opacities) {
-        // TODO: Check opacities
+        if (this._freed) {
+            console.warn("CircleLineChainPlugin is freed, cannot set opacities.");
+            return;
+        }
         this._opacities = {
             ...this._opacities,
             ...opacities
         };
-        // set Opacities of plugins
         this.globe?.DrawRender();
     }
     setElevationMode(mode) {

package/range-tools-on-terrain/range-ring/adapters.js

@@ -7,10 +7,10 @@
 //         altitude: rangeRing.altitude,
 //     };
 // }
-const keyAdapter = (centerID, rangeID) => {
+export const keyAdapter = (centerID, rangeID) => {
     return `${centerID}-${rangeID}`;
 };
-export const allKeysAdapter = (rangeRing) => {
+export const allCircleKeysAdapter = (rangeRing) => {
     const result = new Array(rangeRing.rings.length);
     for (let i = 0; i < rangeRing.rings.length; i++) {
         result[i] = keyAdapter(rangeRing.centerID, rangeRing.rings[i].ringID);
@@ -56,20 +56,36 @@ export const rangeRingToArcInputAdapter = (globe, rangeRingInput) => {
     }
     return result;
 };
+export function createColorRatios(color, stepAngle, colorFade = 0.4) {
+    const angleCount = Math.ceil(360 / stepAngle) * 2;
+    let angleLeft = 360;
+    const result = new Array(angleCount);
+    for (let i = 0; i < angleCount; i++) {
+        const currentAngle = Math.min(stepAngle, angleLeft);
+        angleLeft -= currentAngle;
+        result[i * 2] = {
+            color: [0, 0, 0, 0],
+            ratio: 1,
+        };
+        const colorRatio = {
+            // color: i % 2 === 0 ? color : [color[0] * colorFade, color[1] * colorFade, color[2] * colorFade, color[3]] as Color,
+            color: i % 2 === 0 ? color : [1 - color[0] * colorFade, 1 - color[1] * colorFade, 1 - color[2] * colorFade, color[3]],
+            ratio: currentAngle - 1
+        };
+        result[i * 2 + 1] = colorRatio;
+    }
+    return result;
+}
 export const padding1DegreeInputAdapter = (bearingLine) => {
-    const { long, lat, rgba, altitude = 0, rings } = bearingLine;
+    const { long, lat, rgba, altitude = 0, rings, stepAngle } = bearingLine;
     const result = new Array(rings.length);
     for (let i = 0; i < rings.length; i++) {
         const ring = rings[i];
         result[i] = {
             key: keyAdapter(bearingLine.centerID, ring.ringID),
             center: [long, lat],
-            outerRadius: ring.radius,
-            colorsRatios: [{
-                    color: rgba,
-                    ratio: 360,
-                }
-            ],
+            radius: ring.radius,
+            colorsRatios: createColorRatios(rgba, stepAngle, 0.5),
             heightFromGroundIn3D: altitude,
         };
     }