@pirireis/webglobeplugins 0.16.7 → 0.17.1

package/programs/helpers/{fadeaway/logic.js → fadeaway.js}

@@ -1,4 +1,5 @@
-import { createProgram } from "../../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
+import { glProgramCache } from "../programcache";
 const vertexShaderSource = `#version 300 es
 precision highp float; 
 in vec2 a_position;
@@ -24,7 +25,7 @@ void main() {
     outColor = vec4(color.rgb, color.a * opacity);
 }
 `;
-export default class FadeAwayProgram {
+class FadeAwayProgram {
     constructor(gl) {
         this.gl = gl;
         this.program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
@@ -67,3 +68,11 @@ export default class FadeAwayProgram {
         gl.deleteBuffer(_buffer);
     }
 }
+export const FadeAwayProgramCache = Object.freeze({
+    get: (gl) => {
+        return glProgramCache.getProgram(gl, FadeAwayProgram);
+    },
+    release: (gl) => {
+        return glProgramCache.releaseProgram(gl, FadeAwayProgram);
+    }
+});

package/programs/index.js

@@ -1,9 +1,20 @@
-import { Float2LegendWithRatio } from "./float2legendwithratio";
-import { GlobeShellWiggle } from "./globeshell/wiggle";
-import { CameraUniformBlockTotem, CameraUniformBlockString } from "./totems/index";
-import ArrowField from "./arrowfield";
-import { glProgramCache, globeProgramCache, noRegisterGlobeProgramCache } from "./programcache";
-import * as vectorfield from "./vectorfields/index";
-import { FadeAway } from "./helpers";
-import * as rings from "./rings";
-export { Float2LegendWithRatio, GlobeShellWiggle, ArrowField, CameraUniformBlockTotem, CameraUniformBlockString, glProgramCache, globeProgramCache, noRegisterGlobeProgramCache, vectorfield, FadeAway, rings };
+"use strict";
+// import { Float2LegendWithRatio } from "./float2legendwithratio";
+// import { GlobeShellWiggle } from "./globeshell/wiggle";
+// import { CameraUniformBlockTotem, CameraUniformBlockString } from "./totems/index";
+// import ArrowField from "./arrowfield";
+// import { glProgramCache, globeProgramCache, noRegisterGlobeProgramCache } from "./programcache";
+// import { FadeAway } from "./helpers";
+// import * as rings from "./rings";
+// export {
+//     Float2LegendWithRatio,
+//     GlobeShellWiggle,
+//     ArrowField,
+//     CameraUniformBlockTotem,
+//     CameraUniformBlockString,
+//     glProgramCache,
+//     globeProgramCache,
+//     noRegisterGlobeProgramCache,
+//     FadeAway,
+//     rings
+// };

package/programs/line-on-globe/circle-accurate-3d.js

@@ -3,7 +3,7 @@ import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totem
 import { noRegisterGlobeProgramCache } from "../programcache";
 // import { vaoAttributeLoader } from "../../util/account/util";
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
-import { cartesian3DToGLPosition, circleLimpFromLongLatRadCenterCartesian3D_accurate, circleOnSphere, POLE, PI } from "../../util/shaderfunctions/geometrytransformations";
+import { cartesian3DToGLPosition, circleOnSphere, POLE, PI } from "../../util/shaderfunctions/geometrytransformations";
 /**
  * TODO:
  * 1. integrate geometry functions for radius angle and center
@@ -77,19 +77,17 @@ class Logic {
         this.program.uniforms = {
             opacity: gl.getUniformLocation(program, "opacity")
         };
-        { // initial uniform values
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1f(program.uniforms.opacity, 1.0);
-            gl.useProgram(currentProgram);
-        }
-        { // assign attribute locations
-            gl.bindAttribLocation(program, 0, "center_position3d");
-            gl.bindAttribLocation(program, 1, "target_position3d");
-            gl.bindAttribLocation(program, 2, "color");
-            gl.bindAttribLocation(program, 3, "dash_ratio");
-            gl.bindAttribLocation(program, 4, "dash_opacity");
-        }
+        // initial uniform values
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        gl.uniform1f(program.uniforms.opacity, 1.0);
+        gl.useProgram(currentProgram);
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, "center_position3d");
+        gl.bindAttribLocation(program, 1, "target_position3d");
+        gl.bindAttribLocation(program, 2, "color");
+        gl.bindAttribLocation(program, 3, "dash_ratio");
+        gl.bindAttribLocation(program, 4, "dash_opacity");
         this.cameraBindingPoint = 0;
         this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
         const cameraBlockLocation = gl.getUniformBlockIndex(program, "CameraUniformBlock");

package/programs/line-on-globe/circle-accurate-flat.js

@@ -3,7 +3,6 @@ import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totem
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { vaoAttributeLoader } from "../../util/account/util";
 import { mercatorXYToGLPosition, POLE } from "../../util/shaderfunctions/geometrytransformations";
-const Pole = 20037508.34;
 /**
 * Warning:
 * Insert the points from the second index and skip 1 point as you placed 361 points

package/programs/line-on-globe/degree-padding-around-circle-3d.js

@@ -84,21 +84,19 @@ class Logic {
             stepAngle: gl.getUniformLocation(program, "step_angle"),
             zAlphaMode: gl.getUniformLocation(program, "z_alpha_on")
         };
-        { // initial uniform values
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1f(program.uniforms.opacity, 1.0);
-            gl.uniform1f(program.uniforms.edgeCount, INITIAL_EDGE_COUNT * 2);
-            gl.uniform1f(program.uniforms.stepAngle, this._lastStepAngle * Math.PI / 360);
-            gl.uniform1i(program.uniforms.zAlphaMode, Z_ALPHA_MODE.ON);
-            gl.useProgram(currentProgram);
-        }
-        { // assign attribute locations
-            gl.bindAttribLocation(program, 0, "center_position3d");
-            gl.bindAttribLocation(program, 1, "big_radius");
-            gl.bindAttribLocation(program, 2, "small_radius");
-            gl.bindAttribLocation(program, 3, "color");
-        }
+        // initial uniform values
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        gl.uniform1f(program.uniforms.opacity, 1.0);
+        gl.uniform1f(program.uniforms.edgeCount, INITIAL_EDGE_COUNT * 2);
+        gl.uniform1f(program.uniforms.stepAngle, this._lastStepAngle * Math.PI / 360);
+        gl.uniform1i(program.uniforms.zAlphaMode, Z_ALPHA_MODE.ON);
+        gl.useProgram(currentProgram);
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, "center_position3d");
+        gl.bindAttribLocation(program, 1, "big_radius");
+        gl.bindAttribLocation(program, 2, "small_radius");
+        gl.bindAttribLocation(program, 3, "color");
         this.cameraBindingPoint = 0;
         this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
         const cameraBlockLocation = gl.getUniformBlockIndex(program, "CameraUniformBlock");

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

@@ -1,7 +1,7 @@
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, POLE } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { Z_ALPHA_MODE } from "./util";
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 /**
@@ -68,23 +68,20 @@ class Logic {
         const { gl, program } = this;
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(program);
-        { // assign attribute locations
-            gl.bindAttribLocation(program, 0, 'posA');
-            gl.bindAttribLocation(program, 1, 'posB');
-            gl.bindAttribLocation(program, 2, 'color');
-        }
-        { // uniform locations
-            this._opacityLocation = gl.getUniformLocation(program, 'opacity');
-            this._zAlphaOnLocation = gl.getUniformLocation(program, 'z_alpha_on');
-            gl.uniform1i(this._zAlphaOnLocation, this._lastZAlphaOn);
-            gl.uniform1f(this._opacityLocation, this._lastOpicity);
-        }
-        { // uniform block
-            this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
-            this._cameraBindingPoint = 0;
-            const cameraBlockBindingIndex = gl.getUniformBlockIndex(program, 'CameraUniformBlock');
-            gl.uniformBlockBinding(program, cameraBlockBindingIndex, this._cameraBindingPoint);
-        }
+        // assign attribute locations
+        gl.bindAttribLocation(program, 0, 'posA');
+        gl.bindAttribLocation(program, 1, 'posB');
+        gl.bindAttribLocation(program, 2, 'color');
+        // uniform locations
+        this._opacityLocation = gl.getUniformLocation(program, 'opacity');
+        this._zAlphaOnLocation = gl.getUniformLocation(program, 'z_alpha_on');
+        gl.uniform1i(this._zAlphaOnLocation, this._lastZAlphaOn);
+        gl.uniform1f(this._opacityLocation, this._lastOpicity);
+        // uniform block
+        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+        this._cameraBindingPoint = 0;
+        const cameraBlockBindingIndex = gl.getUniformBlockIndex(program, 'CameraUniformBlock');
+        gl.uniformBlockBinding(program, cameraBlockBindingIndex, this._cameraBindingPoint);
         gl.useProgram(currentProgram);
     }
     createVAO(posAObj, posBObj, colorObj) {

package/programs/line-on-globe/naive-accurate-flexible.js

@@ -144,7 +144,6 @@ class Logic {
             gl.uniform1f(this._opacityLocation, opacity);
             this._lastOpacity = opacity;
         }
-        // this._setFlexibleUniforms(flexibleOptions);
         const vertexCount = globe.api_GetCurrentGeometry() === 0 ? GLOBE_MIDPOINT_COUNT : 2;
         const ubo = flexibleUBO || _defaultFlexibleUBO;
         ubo.bind();

package/programs/picking/pickable-polygon-renderer.js

@@ -1,4 +1,4 @@
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition, R_3D, R } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";

package/programs/picking/pickable-renderer.js

@@ -1,8 +1,8 @@
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition, R_3D, R } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { drawArrays, DrawRangeIndexParams } from "../../util/gl-util/draw-options/methods";
+import { drawArrays } from "../../util/gl-util/draw-options/methods"; //DrawRangeIndexParams 
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
 const uniformBindingPoints = {

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

@@ -6,8 +6,8 @@
  *        *
  */
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
-import { PI, mercatorXYToGLPosition, cartesian3DToGLPosition, circleLimpFromLongLatRadCenterCartesian3D_accurate } from "../../util/shaderfunctions/geometrytransformations";
-import { createProgram } from "../../util";
+import { PI, cartesian3DToGLPosition, circleLimpFromLongLatRadCenterCartesian3D_accurate } from "../../util/shaderfunctions/geometrytransformations";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { drawInstanced } from "../../util/gl-util/draw-options/methods";

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

@@ -1,4 +1,4 @@
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";

package/programs/point-on-globe/square-pixel-point.js

@@ -1,4 +1,4 @@
-import { createProgram } from "../../util";
+import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";

package/programs/polygon-on-globe/texture-dem-triangle-test-plugin-triangle.js

@@ -1,8 +1,80 @@
 import { TextureDemTriangles } from "./texture-dem-triangles";
-import { test1 } from "../../Math/tessellation/triangle-tessellation";
+import { RADIAN, radianToMercatorXY } from "../../Math/methods";
+import { mergeMeshes } from "../../Math/tessellation/tile-merger";
+import { createTriangleTessellationMeta, getAllPoints, partialTessellation } from "../../Math/tessellation/triangle-tessellation-meta";
 /**
  * Loads a plugin with test data for TextureDemTriangles
  */
+function test1(zoomLevel, p1, p2, p3) {
+    const triangleMeta = createTriangleTessellationMeta(p1, p2, p3);
+    const { vec3s, longLats, indices } = getAllPoints(triangleMeta, zoomLevel);
+    return { vec3s, longLats, indices };
+}
+function partialTest(bboxZooms, p1, p2, p3) {
+    const triangleMeta = createTriangleTessellationMeta(p1, p2, p3);
+    return partialTessellation(triangleMeta, bboxZooms, 5);
+}
+function antalyaTestTriangle() {
+    const p1 = [30.5391 * RADIAN, 36.9083 * RADIAN];
+    const p2 = [32.9271 * RADIAN, 36.9083 * RADIAN];
+    const p3 = [31.7331 * RADIAN, 35.8145 * RADIAN];
+    const bboxZooms = [
+        // 12 zoom level
+        {
+            bbox: {
+                min: [30.5391 * RADIAN, 35.8145 * RADIAN],
+                max: [32.9271 * RADIAN, 36.9083 * RADIAN]
+            }, zoom: 15
+        },
+        // 11 zoom level
+        // {
+        //     bbox: {
+        //         min: [30.5391 * RADIAN, 35.8145 * RADIAN],
+        //         max: [32.9271 * RADIAN, 36.9083 * RADIAN]
+        //     }, zoom: 11
+        // },
+    ];
+    return partialTest(bboxZooms, p1, p2, p3);
+}
+function loadVec3sLongLatsIndices(gl, bufferInfo, data) {
+    // Calculate total sizes
+    let totalVec3s = 0;
+    let totalLongLats = 0;
+    let totalIndices = 0;
+    for (const item of data) {
+        totalVec3s += item.vec3s.length;
+        totalLongLats += item.longLats.length;
+        totalIndices += item.indices.length;
+    }
+    // Pre-allocate arrays
+    const vec3s = new Float32Array(totalVec3s);
+    const longLats = new Float32Array(totalLongLats);
+    const indices = new Uint32Array(totalIndices);
+    let vec3Offset = 0;
+    let longLatOffset = 0;
+    let indexOffset = 0;
+    let vertexOffset = 0;
+    for (const item of data) {
+        // Copy vec3s
+        vec3s.set(item.vec3s, vec3Offset);
+        vec3Offset += item.vec3s.length;
+        // Copy longLats
+        longLats.set(item.longLats, longLatOffset);
+        longLatOffset += item.longLats.length;
+        // Copy and adjust indices
+        for (let i = 0; i < item.indices.length; i++) {
+            indices[indexOffset + i] = item.indices[i] + vertexOffset;
+        }
+        indexOffset += item.indices.length;
+        vertexOffset += item.vec3s.length / 3; // Each vertex has 3 components
+    }
+    gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.pos3dBufferInfo.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vec3s, gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.longLatBufferInfo.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, longLats, gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferInfo.elementBufferInfo.buffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+}
 const createTestBBOXES = () => {
     const bboxes = [];
     for (let i = 0; i < 6; i++) {
@@ -10,16 +82,18 @@ const createTestBBOXES = () => {
         const west = Math.random() * -1 * Math.PI / 10; // random longitude
         const south = north - Math.PI / 30; // random latitude
         const east = west + Math.PI / 30; // random longitude
-        const nw = [west, north]; // random northWest
-        const se = [east, south]; // random southEast
-        bboxes.push({ northWest: nw, southEast: se });
+        const ll = [west, north]; // random northWest
+        const ur = [east, south]; // random southEast
+        //
+        bboxes.push({ ll, ur });
     }
     return bboxes;
 };
+const demTextureBBOX = createTestBBOXES();
 function showTextureBBoxes(bboxes, demData = []) {
     for (let i = 0; i < bboxes.length; i++) {
         const bbox = bboxes[i];
-        console.log(`Texture BBOX ${i}: NW(${(bbox.northWest[0] * 180 / Math.PI).toFixed(2)}, ${(bbox.northWest[1] * 180 / Math.PI).toFixed(2)}) SE(${(bbox.southEast[0] * 180 / Math.PI).toFixed(2)}, ${(bbox.southEast[1] * 180 / Math.PI).toFixed(2)})`);
+        console.log(`Texture BBOX ${i}: LL(${(bbox.ll[0] * 180 / Math.PI).toFixed(2)}, ${(bbox.ll[1] * 180 / Math.PI).toFixed(2)}) UR(${(bbox.ur[0] * 180 / Math.PI).toFixed(2)}, ${(bbox.ur[1] * 180 / Math.PI).toFixed(2)})`);
         if (demData.length > i) {
             const dem = demData[i];
             let demStr = "DEM: \n";
@@ -69,22 +143,26 @@ export class TextureDemTrianglesTestPlugin {
     textureDemTriangles = null;
     vao = null;
     drawOptions = null;
+    _lastTilesUniqueIdentifier = "";
     bufferInfo = null;
     id;
     uboTriangleStyle = null;
     uboStringStyle = null;
     showDemPoints = false;
+    bboxZooms = [];
     constructor(id) {
         this.id = id;
+        this.bboxZooms = [];
     }
     init(globe) {
         this.globe = globe;
         this.textureDemTriangles = new TextureDemTriangles(globe);
         // set bboxes and dem textures
         const demTextures = createTestDemTextures();
-        const demTextureBBOX = createTestBBOXES();
+        // const demTextureBBOX = createTestBBOXES();
         this.textureDemTriangles.setDemTextures(demTextures, demTextureBBOX);
         // 
+        // const baseZoom = 5;
         showTextureBBoxes(demTextureBBOX, demTextures);
         this.uboTriangleStyle = this.textureDemTriangles.createUBO();
         this.uboStringStyle = this.textureDemTriangles.createUBO();
@@ -132,35 +210,41 @@ export class TextureDemTrianglesTestPlugin {
         this.globe?.DrawRender();
     }
     setZoom(zoomLevel) {
+        this.bboxZooms = demTextureBBOX.map((bbox, index) => {
+            return {
+                bbox: {
+                    min: bbox.ll,
+                    max: bbox.ur,
+                }, zoom: index + zoomLevel + 1
+            };
+        });
+        // all world - FIX: Convert to radians
+        this.bboxZooms.push({
+            bbox: {
+                min: [-180 * RADIAN, -90 * RADIAN], // ✓ Now radians
+                max: [180 * RADIAN, 90 * RADIAN] // ✓ Now radians
+            },
+            zoom: zoomLevel
+        });
         if (!this.globe || !this.textureDemTriangles || !this.bufferInfo)
             return;
-        const p1 = [-20 * Math.PI / 180, 50 * Math.PI / 180];
-        const p2 = [20 * Math.PI / 180, 50 * Math.PI / 180];
-        const p3 = [0, -10 * Math.PI / 180];
-        // const p1_1: LongLatRadian = [-20 * Math.PI / 180, 30 * Math.PI / 180];
-        // const p2_2: LongLatRadian = [20 * Math.PI / 180, 20 * Math.PI / 180];
-        // const p3_3: LongLatRadian = [5, -20 * Math.PI / 180];
-        const { vec3s, longLats, indices } = test1(zoomLevel, p1, p2, p3);
-        // const {vec3s, longLats, indices} = test1(5, p1_1, p2_2, p3_3);
+        // const p1: LongLatRadian = [-20 * Math.PI / 180, 50 * Math.PI / 180];
+        // const p2: LongLatRadian = [20 * Math.PI / 180, 50 * Math.PI / 180];
+        // const p3: LongLatRadian = [0, -10 * Math.PI / 180];
+        const p1 = [-60 * Math.PI / 180, 60 * Math.PI / 180];
+        const p2 = [60 * Math.PI / 180, 60 * Math.PI / 180];
+        const p3 = [0, -60 * Math.PI / 180];
+        const bigTriangle = partialTest(this.bboxZooms, p1, p2, p3);
         const bufferInfo = this.bufferInfo;
+        const antalya = antalyaTestTriangle();
+        loadVec3sLongLatsIndices(this.globe.gl, bufferInfo, [
+            bigTriangle,
+            antalya
+        ]);
         bufferInfo.drawOptions.drawRange.first = 0;
-        bufferInfo.drawOptions.drawRange.count = indices.length;
+        bufferInfo.drawOptions.drawRange.count = antalya.indices.length + bigTriangle.indices.length;
         bufferInfo.drawOptionsPoint.drawRange.first = 0;
-        bufferInfo.drawOptionsPoint.drawRange.count = longLats.length / 2;
-        const gl = this.globe.gl;
-        // const longLatArray = createTestLongLatArray();
-        // const pos3dArray = createTestPos3dArray(longLatArray);
-        // @ts-ignore
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.pos3dBufferInfo.buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vec3s), gl.STATIC_DRAW);
-        // @ts-ignore
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.longLatBufferInfo.buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(longLats), gl.STATIC_DRAW);
-        // @ts-ignore
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferInfo.elementBufferInfo.buffer);
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);
-        this.globe.DrawRender();
-        console.log("DrawIInfo", this.bufferInfo);
+        bufferInfo.drawOptionsPoint.drawRange.count = (antalya.longLats.length + bigTriangle.longLats.length) / 2;
     }
     setShowDemPoints(show) {
         this.showDemPoints = show;
@@ -168,11 +252,77 @@ export class TextureDemTrianglesTestPlugin {
     draw3D() {
         if (!this.globe || !this.textureDemTriangles || !this.vao || !this.bufferInfo)
             return;
+        const gl = this.globe.gl;
+        this._prepareDem();
+        gl.frontFace(gl.CW);
         // @ts-ignore
         this.textureDemTriangles.draw(this.vao, this.bufferInfo.drawOptions, this.uboTriangleStyle);
         if (this.showDemPoints) {
             // @ts-ignore
             this.textureDemTriangles.draw(this.vao, this.bufferInfo.drawOptionsPoint, this.uboStringStyle);
         }
+        gl.frontFace(gl.CCW);
+    }
+    _prepareDem() {
+        if (!this.globe || !this.textureDemTriangles)
+            return;
+        const drawnTiles = this.globe.api_GetDrawedTilesInfo();
+        if (this._checkTileChange(drawnTiles))
+            return;
+        const mergedTiles = mergeMeshes(drawnTiles, 12, 5, 4);
+        // let I = 6;
+        for (const tile of mergedTiles) {
+            const bbox = globeBBoxToXYBBOX(tile.bbox);
+            // Validation: Check if values are in expected radian range
+            // if (Math.abs(bbox.northWest[0]) > Math.PI * 2 || Math.abs(bbox.northWest[1]) > Math.PI) {
+            //     console.error(`⚠️ BBOX out of radian range! Raw bbox:`, tile.bbox);
+            // }
+            if (bbox.ll[0] > bbox.ur[0]) {
+                console.warn(`⚠️ BBOX longitudes seem incorrect! ll longitude is greater than ur longitude. Raw bbox:`, bbox);
+            }
+            if (bbox.ll[1] > bbox.ur[1]) {
+                console.warn(`⚠️ BBOX latitudes seem incorrect! ll latitude is greater than ur latitude. Raw bbox:`, bbox);
+            }
+            // console.log(` BBox LL (${(bbox.ll[0]).toFixed(2)}°, ${(bbox.ll[1]).toFixed(2)}°) UR (${(bbox.ur[0]).toFixed(2)}°, ${(bbox.ur[1]).toFixed(2)}°), Cover: ${tile.coverRatio.x.toFixed(2)}x${tile.coverRatio.y.toFixed(2)}`);
+            // console.log(`${I} Cover: ${tile.coverRatio.x.toFixed(2)} ${tile.coverRatio.y.toFixed(2)}`);
+            // I--;
+        }
+        // console.log("...............................")
+        this.textureDemTriangles.setDemTextures(mergedTiles.map(t => Array.from(t.mesh)), mergedTiles.map(t => globeBBoxToXYBBOX(t.bbox)), mergedTiles.map(t => ({ x: t.coverRatio.x, y: t.coverRatio.y })));
+    }
+    _checkTileChange(drawnTiles) {
+        let maxLevel = 0;
+        let minLevel = Number.MAX_VALUE;
+        const tileMap = new Map();
+        for (const tile of drawnTiles) {
+            if (tile.level > maxLevel) {
+                maxLevel = tile.level;
+            }
+            if (tile.level < minLevel) {
+                minLevel = tile.level;
+            }
+            if (!tileMap.has(tile.level)) {
+                tileMap.set(tile.level, []);
+            }
+            tileMap.get(tile.level).push(tile);
+        }
+        let tilesUniqueId = "";
+        for (let level = minLevel; level <= maxLevel; level++) {
+            const tiles = tileMap.get(level);
+            if (!tiles)
+                continue;
+            tilesUniqueId += `L${level}_C${tiles.length}_`;
+        }
+        if (tilesUniqueId === this._lastTilesUniqueIdentifier)
+            return true;
+        this._lastTilesUniqueIdentifier = tilesUniqueId;
+        return false;
     }
 }
+function globeBBoxToXYBBOX(t) {
+    // this code scales Y to linear integration
+    return {
+        ll: radianToMercatorXY([t.ll.x * RADIAN, t.ll.y * RADIAN]), // west longitude, north latitude
+        ur: radianToMercatorXY([t.ur.x * RADIAN, t.ur.y * RADIAN]) // east longitude, south latitude
+    };
+}