@pirireis/webglobeplugins 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT",
@@ -13,6 +13,6 @@
         "rbush": "^4.0.1"
     },
     "peerDependencies": {
-        "@pirireis/webglobe": "^6.2.22"
+        "@pirireis/webglobe": "6.2.51^"
     }
 }

package/plugins/alarms/alarmFadeInFadeOutPlugin/AlarmTimeLineFadeInFadeOutPlugin.js

@@ -0,0 +1,399 @@
+/**
+ * Parametreler
+ * Toplam Animasyon suresi
+ * nokta konumu lat long
+ * nokta boyutu
+ * nokta rengi
+ * buyume kusulme olamlimi? Varsa fade in ile buyuyup, fade out ile kuculecek.
+ * fade in suresi
+ * fade out suresi
+ *   */
+/**
+ * TODO:
+ * AFAD verisini hizli yuklenmesi icin bir formata ceviren kod ekle
+ * CONTENT basligi altina veri cevirici ve webgl programini yaz
+ */
+/**
+ * @typedef {Number[]} Color [r, g, b]
+ */
+/**
+ * @typedef {Object} FadeAlarmPoint
+ * @property {number} long
+ * @property {number} lat
+ * @property {number} height
+ * @property {number} minSize
+ * @property {number} maxSize
+ * @property {Color} color
+ * @property {number} startTime
+ * @property {number} fadeInTime
+ * @property {number} fadeOutTime
+ * @property {number} minAlpha
+ * @property {number} maxAlpha
+ */
+const floatCount = 13;
+const TIME_STEP = 26;
+export default class AlarmTimeLineFadeInFadeOut {
+    constructor(id) {
+        this.id = id;
+        this.pause();
+        this.globe = null;
+        this.gl = null;
+        this._buildLOD = 6;
+        this._lastLOD = 0;
+        this._shaderProgram = null;
+        this._animationDeltaTime = 0;
+        this._animationFullTimeLength = 50000.0;
+        this._continue = false;
+        this._speedMultiplier = 1.0;
+        // time relevant 
+        this._tickTimerId = null;
+        // @type {FadeAlarmPoint[]}
+        this._dataArray = [];
+        this._translateFloat32Array = new Float32Array(3);
+        this._mixtureBuffer = null;
+        this._buildTimerId = null;
+        this._projectionFunction = null;
+    }
+    _vertexShaderSource = `
+        precision highp float;
+
+        attribute vec3 aVertexPosition;
+        attribute vec3 aVertexColor;
+        attribute float aMinSize;
+        attribute float aMaxSize;
+        attribute float aStartTime;
+        attribute float aFadeInTime;
+        attribute float aFadeOutTime;
+        attribute float aMinAlpha;
+        attribute float aMaxAlpha;
+
+        uniform bool u_is_flat;
+        uniform vec2 u_mapWH;
+        uniform vec2 u_scrWH;
+
+        varying vec3 vColor;
+        varying float vAlpha;
+
+        uniform float uDeltaTime;
+
+        uniform mat4 uModelViewMatrix;
+        uniform mat4 uProjectionMatrix;
+        uniform vec3 uTranslate;
+
+        void main(void) {
+            float time = uDeltaTime - aStartTime;
+
+            // exit case
+            if (time < 0.0 || (time > (aFadeInTime + aFadeOutTime)) ) {
+                gl_Position = vec4(-2.0, -2.0, 0.0, 1.0);
+                vColor = vec3(0.0, 0.0, 0.0);
+                vAlpha = 0.0;
+                return;
+            }
+            float ratio; 
+            // fade in case
+            if (time < aFadeInTime) {
+                ratio = time / aFadeInTime;
+            }
+            // fade out case
+            if (time > aFadeInTime) {
+                ratio = 1.0 - ((time - aFadeInTime) / aFadeOutTime);
+            }
+            if(u_is_flat==true){
+                float normalizedX = ( aVertexPosition.x - uTranslate.x) / u_mapWH.x;
+                float normalizedY = ( aVertexPosition.y - uTranslate.y) / u_mapWH.y;
+                gl_Position = uProjectionMatrix * vec4(normalizedX * u_scrWH.x, (1.0 - normalizedY) * u_scrWH.y, 0.0, 1.0);
+            }else{
+                gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition - uTranslate, 1.0);
+            } 
+            gl_PointSize = mix(aMinSize, aMaxSize, ratio);
+
+            vColor = aVertexColor;
+            vAlpha = mix(aMinAlpha, aMaxAlpha, ratio);
+        }
+    `;
+    _fragmentShaderSource = `
+        precision highp float;
+
+        varying vec3 vColor;
+        varying float vAlpha;
+
+        void main(void) {
+            // circle
+            vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+            float r = dot(cxy, cxy);
+            if (r > 1.0) discard; 
+            // square
+            // float t = abs(cxy.x) * abs(cxy.y);
+            // if (t > 0.1) discard;
+            if (vAlpha == 0.0) { discard;}
+            float alphaRatio = sqrt(1.0 - r) ;
+            gl_FragColor =  vec4(vColor, vAlpha  ) * alphaRatio;
+        }
+    `;
+    _createProgram() {
+        const { gl, _vertexShaderSource, _fragmentShaderSource } = this;
+        let vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vertexShader, _vertexShaderSource);
+        gl.compileShader(vertexShader);
+        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+            alert("An error occurred compiling the vertex shader: " + gl.getShaderInfoLog(vertexShader));
+            return null;
+        }
+        let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(fragmentShader, _fragmentShaderSource);
+        gl.compileShader(fragmentShader);
+        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+            alert("An error occurred compiling the fragment shader: " + gl.getShaderInfoLog(fragmentShader));
+            return null;
+        }
+        this._shaderProgram = gl.createProgram();
+        gl.attachShader(this._shaderProgram, vertexShader);
+        gl.attachShader(this._shaderProgram, fragmentShader);
+        gl.linkProgram(this._shaderProgram);
+        if (!gl.getProgramParameter(this._shaderProgram, gl.LINK_STATUS)) {
+            alert("Could not initialise shaders");
+            console.log(gl.getProgramInfoLog(this._shaderProgram));
+        }
+        gl.detachShader(this._shaderProgram, vertexShader);
+        gl.detachShader(this._shaderProgram, fragmentShader);
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+    }
+    _assignProgramLocations() {
+        const { gl, _shaderProgram } = this;
+        this._aVertexPosition = gl.getAttribLocation(_shaderProgram, "aVertexPosition");
+        this._aVertexColor = gl.getAttribLocation(_shaderProgram, "aVertexColor");
+        this._aMinSize = gl.getAttribLocation(_shaderProgram, "aMinSize");
+        this._aMaxSize = gl.getAttribLocation(_shaderProgram, "aMaxSize");
+        this._aStartTime = gl.getAttribLocation(_shaderProgram, "aStartTime");
+        this._aFadeInTime = gl.getAttribLocation(_shaderProgram, "aFadeInTime");
+        this._aFadeOutTime = gl.getAttribLocation(_shaderProgram, "aFadeOutTime");
+        this._aMinAlpha = gl.getAttribLocation(_shaderProgram, "aMinAlpha");
+        this._aMaxAlpha = gl.getAttribLocation(_shaderProgram, "aMaxAlpha");
+        this._uDeltaTime = gl.getUniformLocation(_shaderProgram, "uDeltaTime");
+        this._uModelViewMatrix = gl.getUniformLocation(_shaderProgram, "uModelViewMatrix");
+        this._uProjectionMatrix = gl.getUniformLocation(_shaderProgram, "uProjectionMatrix");
+        this._uTranslate = gl.getUniformLocation(_shaderProgram, "uTranslate");
+        this._uMapWH = gl.getUniformLocation(_shaderProgram, "u_mapWH");
+        this._uScrWH = gl.getUniformLocation(_shaderProgram, "u_scrWH");
+        this._uIsFlat = gl.getUniformLocation(_shaderProgram, "u_is_flat");
+    }
+    // registry takes place here
+    init(globe, gl) {
+        console.log("init AlarmFadeInFadeOut");
+        this.globe = globe;
+        this.gl = gl;
+        this._mixtureBuffer = gl.createBuffer();
+        this.setGeometry();
+        this._createProgram();
+        this._assignProgramLocations();
+        this._startTickTimer();
+        this._resizeHandler = this._resizeEventHandler.bind(this);
+        window.addEventListener('resize', this._resizeHandler, true);
+    }
+    _resizeEventHandler() {
+        this._loadUniforms();
+    }
+    addPoint(long, lat, height, minSize, maxSize, color, startTime, fadeInTime, fadeOutTime, minAlpha, maxAlpha) {
+        // add point to the array
+        this._dataArray.push({
+            long,
+            lat,
+            height,
+            minSize,
+            maxSize,
+            color,
+            startTime,
+            fadeInTime,
+            fadeOutTime,
+            minAlpha,
+            maxAlpha
+        });
+    }
+    setAnimationFullTimeLength(time) {
+        this._animationFullTimeLength = time;
+    }
+    updateBuffer() {
+        if (this._dataArray.length === 0)
+            return;
+        this._build();
+    }
+    clearPoints() {
+        this._dataArray = [];
+        this._build();
+    }
+    setCurrentTimeByPercentage(percentage) {
+        const passingTime = this._animationFullTimeLength * (percentage % 100) / 100;
+        this._animationDeltaTime = passingTime;
+    }
+    setSpeedMultiplier(multiplier) {
+        this._speedMultiplier = multiplier;
+    }
+    continue() {
+        if (this._animationFullTimeLength == null)
+            throw new Error("Animation full time length is not set");
+        this._continue = true;
+        if (this._tickTimerId == null) {
+            this._startTickTimer();
+        }
+        console.log("continue");
+    }
+    isContinuing() {
+        return this._continue;
+    }
+    pause() {
+        this._continue = false;
+        if (this._tickTimerId != null) {
+            clearInterval(this._tickTimerId);
+            this._tickTimerId = null;
+        }
+        console.log("pause");
+    }
+    _tick() {
+        this._animationDeltaTime = (this._animationDeltaTime + TIME_STEP * this._speedMultiplier) % this._animationFullTimeLength;
+    }
+    _startTickTimer() {
+        this._tickTimerId = setInterval(() => {
+            if (this._continue)
+                this._tick();
+        }, TIME_STEP);
+    }
+    getPercentage() {
+        return this._animationDeltaTime / this._animationFullTimeLength;
+    }
+    // globe calls this function
+    draw3D(projMatrix, modelMatrix, transPos) {
+        // if (this._continue) this._tick();
+        this._draw(projMatrix, modelMatrix, transPos);
+    }
+    _draw(projMatrix, modelMatrix, transPos) {
+        if (this._dataArray.length === 0)
+            return;
+        const { gl, globe } = this;
+        if (globe == null) {
+            console.log("globe is null");
+            return;
+        }
+        const lastDepth = gl.getParameter(gl.DEPTH_TEST);
+        gl.disable(gl.DEPTH_TEST);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        this._translateFloat32Array.set([transPos.x, transPos.y, transPos.z], 0);
+        gl.useProgram(this._shaderProgram);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._mixtureBuffer);
+        gl.enableVertexAttribArray(this._aVertexPosition); // devamli enable edilmesine gerek olmayabilir mi?
+        gl.vertexAttribPointer(this._aVertexPosition, 3, gl.FLOAT, false, floatCount * 4, 0);
+        gl.enableVertexAttribArray(this._aVertexColor);
+        gl.vertexAttribPointer(this._aVertexColor, 3, gl.FLOAT, false, floatCount * 4, 3 * 4);
+        gl.enableVertexAttribArray(this._aMinSize);
+        gl.vertexAttribPointer(this._aMinSize, 1, gl.FLOAT, false, floatCount * 4, 6 * 4);
+        gl.enableVertexAttribArray(this._aMaxSize);
+        gl.vertexAttribPointer(this._aMaxSize, 1, gl.FLOAT, false, floatCount * 4, 7 * 4);
+        gl.enableVertexAttribArray(this._aStartTime);
+        gl.vertexAttribPointer(this._aStartTime, 1, gl.FLOAT, false, floatCount * 4, 8 * 4);
+        gl.enableVertexAttribArray(this._aFadeInTime);
+        gl.vertexAttribPointer(this._aFadeInTime, 1, gl.FLOAT, false, floatCount * 4, 9 * 4);
+        gl.enableVertexAttribArray(this._aFadeOutTime);
+        gl.vertexAttribPointer(this._aFadeOutTime, 1, gl.FLOAT, false, floatCount * 4, 10 * 4);
+        gl.enableVertexAttribArray(this._aMinAlpha);
+        gl.vertexAttribPointer(this._aMinAlpha, 1, gl.FLOAT, false, floatCount * 4, 11 * 4);
+        gl.enableVertexAttribArray(this._aMaxAlpha);
+        gl.vertexAttribPointer(this._aMaxAlpha, 1, gl.FLOAT, false, floatCount * 4, 12 * 4);
+        gl.uniform1f(this._uDeltaTime, this._animationDeltaTime);
+        if (globe.api_GetCurrentGeometry() === globe.api_GeometryTypes().FLAT) {
+            const { width, height } = globe.api_GetCurrentWorldWH();
+            gl.uniform2f(this._uMapWH, width, height);
+        }
+        else {
+            gl.uniformMatrix4fv(this._uModelViewMatrix, false, modelMatrix);
+        }
+        gl.uniformMatrix4fv(this._uProjectionMatrix, false, projMatrix);
+        gl.uniform3fv(this._uTranslate, this._translateFloat32Array);
+        gl.drawArrays(gl.POINTS, 0, this._dataArray.length);
+        if (lastDepth) {
+            gl.enable(gl.DEPTH_TEST);
+        }
+        gl.disable(gl.BLEND);
+        globe.DrawRender();
+    }
+    _build() {
+        // build data and fill the buffer
+        const { gl, globe, _mixtureBuffer } = this;
+        if (globe == null || _mixtureBuffer == null) {
+            console.log("globe is null");
+            return;
+        }
+        const floatArray = new Float32Array(this._dataArray.length * floatCount);
+        for (let i = 0; i < this._dataArray.length; i += 1) {
+            const data = this._dataArray[i];
+            const { long, lat, height, minSize, maxSize, color, fadeInTime, fadeOutTime } = data;
+            const [x, y, z] = globe.api_Get3DPoint(long, lat, height, false);
+            const [r, g, b] = color;
+            const startTime = data.startTime;
+            const minAlpha = data.minAlpha;
+            const maxAlpha = data.maxAlpha;
+            floatArray.set([x, y, z, r, g, b, minSize, maxSize, startTime, fadeInTime, fadeOutTime, minAlpha, maxAlpha], i * floatCount);
+        }
+        console.log("floatArray", floatArray);
+        gl.bindBuffer(gl.ARRAY_BUFFER, _mixtureBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, floatArray, gl.STATIC_DRAW);
+        console.log("build");
+        if (this._buildTimerId == null) {
+            this._startBuildTimer();
+        }
+    }
+    _startBuildTimer() {
+        const { globe, _buildLOD } = this;
+        this._buildTimerId = setInterval(() => {
+            if (globe.api_GetCurrentGeometry() != globe.api_GeometryTypes().SPHERE)
+                return;
+            const LOD = globe.api_GetCurrentLOD();
+            if (!globe.api_IsScreenMoving() && LOD >= _buildLOD && LOD !== this._lastLOD) {
+                this._build();
+                this._lastLOD = LOD;
+            }
+        }, 1000);
+        console.log("startBuildTimer");
+    }
+    setGeometry() {
+        // arazi yuksekligine gore build tetikleyecek push mekanizmasi globeta yok
+        // timer start edilip durdurulacak
+        this._loadUniforms();
+        this.updateBuffer();
+        console.log("setGeometry");
+    }
+    _loadUniforms() {
+        const { gl, globe } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(this._shaderProgram);
+        const geometry = globe.api_GetCurrentGeometry();
+        if (geometry === globe.api_GeometryTypes().SPHERE) {
+            gl.uniform1f(this._uIsFlat, false);
+        }
+        else if (geometry === globe.api_GeometryTypes().FLAT) {
+            gl.uniform1f(this._uIsFlat, true);
+            gl.uniform2f(this._uScrWH, globe.api_ScrW(), globe.api_ScrH());
+        }
+        else {
+            alert("Geometry is not supported");
+        }
+        gl.useProgram(currentProgram);
+    }
+    free() {
+        console.log("free AlarmFadeInFadeOut");
+        const { gl } = this;
+        this.globe = null;
+        this.gl = null;
+        this.draw3D = null;
+        this._build = null;
+        clearInterval(this._buildTimerId);
+        clearInterval(this._tickTimerId);
+        gl.disableVertexAttribArray(this._aVertexPosition);
+        // gl.deleteBuffer(this._mixtureBuffer);
+        // gl.deleteProgram(this._shaderProgram);
+        this._shaderProgram = null;
+        this._mixtureBuffer = null;
+        window.removeEventListener('resize', this._resizeHandler, true);
+    }
+}

package/{Math → webglobeplugins/Math}/tessellation/triangle-tessellation.js

@@ -19,7 +19,7 @@ import { pointsOnArc } from "../juction/arc-plane";
 import { latToTileY, tileYtoLat } from "./methods";
 import Delaunator from "delaunator";
 import { radianToMercatorXY } from "../methods";
-const KEY_PRECISION = 9;
+export const uint32Escape = 4294967295;
 // TODO:get rid of embedded lists. always flat list
 const TILE_DEM_VERTEX_COUNT = 5; // 5x5 grid for DEM
 const TILE_DEM_STEPCOUNT = TILE_DEM_VERTEX_COUNT - 1; // 4 inner divisions in each dimension
@@ -42,7 +42,16 @@ function radianCheck(point) {
     return point[0] >= -Math.PI && point[0] <= Math.PI && point[1] >= -Math.PI
         && point[1] <= Math.PI / 2 && point[1] >= -Math.PI / 2;
 }
-export function createTriangleTessellationMeta(p1, p2, p3) {
+const _3RealEdges = new Uint32Array([uint32Escape, 0, 1, 2, 0]);
+const _2RealEdges_dismiss2 = new Uint32Array([uint32Escape, 0, 1, 2]);
+const _2RealEdges_dismiss1 = new Uint32Array([uint32Escape, 2, 0, 1]);
+const _2RealEdges_dismiss0 = new Uint32Array([uint32Escape, 1, 2, 0]);
+const _1realEdge_0 = new Uint32Array([uint32Escape, 0, 1]);
+const _1realEdge_1 = new Uint32Array([uint32Escape, 1, 2]);
+const _1realEdge_2 = new Uint32Array([uint32Escape, 2, 0]);
+const _noRealEdges = null;
+export function createTriangleTessellationMeta(p1, p2, p3, isRealp0p1 = false, isRealp1p2 = false, isRealp2p3 = false) {
+    // TODO: this might be a problem
     if (!radianCheck(p1) || !radianCheck(p2) || !radianCheck(p3)) {
         throw new Error('Points must be in radian range: ' +
             'p1:' + p1[0] + ',' + p1[1] +
@@ -55,6 +64,29 @@ export function createTriangleTessellationMeta(p1, p2, p3) {
     const arc1 = createArc(p1v3, p2v3);
     const arc2 = createArc(p2v3, p3v3);
     const arc3 = createArc(p3v3, p1v3);
+    arc1.realEdge = isRealp0p1;
+    arc2.realEdge = isRealp1p2;
+    arc3.realEdge = isRealp2p3;
+    const realEdgeArcIndices = (() => {
+        switch (true) {
+            case isRealp0p1 && isRealp1p2 && isRealp2p3:
+                return _3RealEdges;
+            case isRealp0p1 && isRealp1p2 && !isRealp2p3:
+                return _2RealEdges_dismiss2;
+            case isRealp1p2 && isRealp2p3 && !isRealp0p1:
+                return _2RealEdges_dismiss1;
+            case isRealp2p3 && isRealp0p1 && !isRealp1p2:
+                return _2RealEdges_dismiss0;
+            case isRealp0p1 && !isRealp1p2 && !isRealp2p3:
+                return _1realEdge_0;
+            case isRealp1p2 && !isRealp2p3 && !isRealp0p1:
+                return _1realEdge_1;
+            case isRealp2p3 && !isRealp0p1 && !isRealp1p2:
+                return _1realEdge_2;
+            default:
+                return _noRealEdges;
+        }
+    })();
     const limitVec = [0, 0, 0];
     if (calculateZLimitPoint(arc1, limitVec)) {
         arc1.exceededLimit = [limitVec[0], limitVec[1], limitVec[2]];
@@ -87,12 +119,15 @@ export function createTriangleTessellationMeta(p1, p2, p3) {
     const meta = {
         arcs: [arc1, arc2, arc3],
         bbox,
-        showThreshold: calculateShowThreshold(arc1, arc2, arc3)
+        showThreshold: calculateShowThreshold(arc1, arc2, arc3),
     };
+    // @ts-ignore
     meta.shortCut = partialTessellation(meta, [{
             bbox: meta.bbox,
             zoom: 0
         }], TILE_DEM_STEPCOUNT);
+    meta.shortCut.realEdgeArcIndices = realEdgeArcIndices;
+    // arcShortCut
     return meta;
 }
 function calculateShowThreshold(arc1, arc2, arc3) {
@@ -221,7 +256,13 @@ function filterEdgePointTriangles(indeces, edgePointIndices) {
     }
     return new Uint32Array(result);
 }
-export function partialTessellation(triangleMeta, limits, innerCuts) {
+// function createArcPointHarvestingMeta(): ArcPointHarvestingMeta {
+//     return {
+//         parallelCutIndices: [],
+//         meridianCutIndices: [],
+//     };  
+// }
+export function partialTessellation(triangleMeta, limits, innerCuts, calculateRealEdgeArc = false) {
     // TODO: pointMap can be local variable and cleaned after function call to avoid reinitialization overhead
     const pointMap = new Map(); // Key: "lon|lat", Value: index
     const allVec3s = [];
@@ -367,6 +408,7 @@ export function partialTessellation(triangleMeta, limits, innerCuts) {
             vec3s: new Float32Array(),
             longLats: new Float32Array(),
             indices: new Uint32Array(),
+            realEdgeArcIndices: null,
         };
     }
     const delaunator = new Delaunator(allLongLats);
@@ -378,9 +420,45 @@ export function partialTessellation(triangleMeta, limits, innerCuts) {
         allLongLats[i * 2] = xy[0];
         allLongLats[i * 2 + 1] = xy[1];
     }
+    const realEdgeArcIndices = calculateRealEdgeArc ? orderIndcecesAlongArc(triangleMeta, edgePointIndexSets, allLongLats) : null;
     return {
         vec3s: new Float32Array(allVec3s),
         longLats: new Float32Array(allLongLats),
         indices: indices,
+        realEdgeArcIndices,
     };
 }
+function orderIndcecesAlongArc(triangleMeta, edgePointIndexSets, allLongLats) {
+    let result = [];
+    let itemCounter = 0;
+    for (let i = 0; i < 3; i++) {
+        const arc = triangleMeta.arcs[i];
+        if (!arc.realEdge) {
+            continue;
+        }
+        // convert set to list
+        const indices = Array.from(edgePointIndexSets[i]);
+        if (indices.length == 0) {
+            continue;
+        }
+        const dimension = Math.abs(arc.normal[2]) < 0.0001 ? 0 : 1;
+        indices.sort((a, b) => {
+            return allLongLats[a * 2 + dimension] - allLongLats[b * 2 + dimension];
+        });
+        result.push(indices);
+        itemCounter += indices.length + 1;
+    }
+    if (result.length === 0) {
+        return null;
+    }
+    const finalResult = new Uint32Array(itemCounter);
+    let counter = 0;
+    for (let i = 0; i < result.length; i++) {
+        finalResult[counter++] = uint32Escape;
+        const indices = result[i];
+        for (let j = 0; j < indices.length; j++) {
+            finalResult[counter++] = indices[j];
+        }
+    }
+    return finalResult;
+}

package/{heatwave → webglobeplugins/heatwave}/isobar.js

@@ -1,3 +1,6 @@
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
 import { DrawFromPixelCoords, } from "../util/programs/draw-from-pixel-coords";
 import { latLongToPixelXY } from "../util/geometry/index";
 import ContourMipmap, { scaleParameters } from "../Math/contour/quadtreecontours";

package/{programs → webglobeplugins/programs}/polygon-on-globe/texture-dem-triangles.js

@@ -1,6 +1,6 @@
 import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems/camerauniformblock";
-import { DemTextureManagerCache, DEM_TEXTURE_BLOCK_STRING } from "../totems/dem-textures-manager";
+import { DemTextureManagerCache, DEM_TEXTURE_BLOCK_STRING } from "../totems/attachments/dem-textures-manager";
 import { cartesian3DToGLPosition, mercatorXYToGLPosition, POLE_BY_PI } from "../../util/shaderfunctions/geometrytransformations";
 import { relativeBBoxPositionRadian } from "../../util/shaderfunctions/geometrytransformations";
 import { drawArrays } from "../../util/gl-util/draw-options/methods";
@@ -22,6 +22,7 @@ const styleBlockManager = new UniformBlockManager('Style', [
     { name: "opacity", type: "float", value: new Float32Array([1.0]) },
     { name: "private_isPickedOn", type: "float", value: new Float32Array([0]) },
     { name: "private_pickedIndex", type: "float", value: new Float32Array([0]) },
+    { name: "dontUseColor", type: "float", value: new Float32Array([0]) },
 ], uniformBindingPoints.style);
 const vertexShaderSource = `#version 300 es
 #pragma vscode_glsllint_stage : vert
@@ -39,7 +40,7 @@ ${DEM_TEXTURE_BLOCK_STRING}
 in vec3 a_position;
 in vec2 a_xy;
 in float a_index;
-in vec4 a_color;
+in uvec4 a_color;
 
 ${styleBlockManager.glslCode()}
 
@@ -52,7 +53,16 @@ ${relativeBBoxPositionRadian}
 void main() {
     float elevation = ${WORLD_RADIUS_3D};
     float altitude = 0.0;
-    v_color = (a_color.a != -1.0) ? a_color : defaultColor;
+
+    vec4 decodedColor = vec4(
+        float(a_color.r) / 255.0,
+        float(a_color.g) / 255.0,
+        float(a_color.b) / 255.0,
+        float(a_color.a) / 254.0
+    );
+
+    // a_color.a == 255u is reserved as "no per-vertex color" sentinel.
+    v_color = (a_color.a == 255u || dontUseColor == 1.0) ? defaultColor : decodedColor;
 
     if (is3D == true) {
         for (int i = 0; i < 6; i++) {
@@ -171,7 +181,10 @@ export class TextureDemTriangles {
             normalized: false,
         });
         attributeLoader(this.gl, variativeColorBuffer, this.locations.attributes.a_color, 4, {
-            escapeValues: [IndexAttributeEscapeValue, IndexAttributeEscapeValue, IndexAttributeEscapeValue, IndexAttributeEscapeValue]
+            type: this.gl.UNSIGNED_BYTE,
+            integer: true,
+            integerUnsigned: true,
+            escapeValues: [0, 0, 0, 255]
         });
         this.gl.bindVertexArray(null);
         return vao;