@pirireis/webglobeplugins 0.17.0 → 0.17.1

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

@@ -1,8 +1,80 @@
 import { TextureDemTriangles } from "./texture-dem-triangles";
-import { partialTest } 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,9 +82,10 @@ 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;
 };
@@ -20,7 +93,7 @@ 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";
@@ -70,6 +143,7 @@ export class TextureDemTrianglesTestPlugin {
     textureDemTriangles = null;
     vao = null;
     drawOptions = null;
+    _lastTilesUniqueIdentifier = "";
     bufferInfo = null;
     id;
     uboTriangleStyle = null;
@@ -139,15 +213,16 @@ export class TextureDemTrianglesTestPlugin {
         this.bboxZooms = demTextureBBOX.map((bbox, index) => {
             return {
                 bbox: {
-                    min: [bbox.northWest[0], bbox.southEast[1]], max: [bbox.southEast[0], bbox.northWest[1]]
+                    min: bbox.ll,
+                    max: bbox.ur,
                 }, zoom: index + zoomLevel + 1
             };
         });
-        // all world
+        // all world - FIX: Convert to radians
         this.bboxZooms.push({
             bbox: {
-                min: [-180, -90],
-                max: [180, 90]
+                min: [-180 * RADIAN, -90 * RADIAN], // ✓ Now radians
+                max: [180 * RADIAN, 90 * RADIAN] // ✓ Now radians
             },
             zoom: zoomLevel
         });
@@ -159,31 +234,17 @@ export class TextureDemTrianglesTestPlugin {
         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 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 { vec3s, longLats, indices } = partialTest(this.bboxZooms, p1, p2, p3);
+        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;
@@ -192,6 +253,7 @@ export class TextureDemTrianglesTestPlugin {
         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);
@@ -201,4 +263,66 @@ export class TextureDemTrianglesTestPlugin {
         }
         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
+    };
 }

package/programs/polygon-on-globe/texture-dem-triangles.js

@@ -25,19 +25,14 @@ ${CameraUniformBlockString}
 
 ${cartesian3DToGLPosition}
 in vec3 a_position;
-in vec2 a_longLat;
+in vec2 a_xy;
 uniform sampler2DArray u_demTexture; // <-- changed from array to single
 uniform vec4 u_demTextureBBOX[6];
-
+uniform vec2 u_textureDataCoverRatio[6];
+uniform int u_breakLoopIndex;
 
 ${styleBlockManager.glslCode()}
-
-
-// TODO: light directioni 
-// out vec3 v_position;
-// out vec3 v_normal;
-// out vec2 v_textureCoord;
-
+// Todo: light direction. 
 out vec4 v_color;
 
 
@@ -46,23 +41,35 @@ ${isPointInBBox}
 void main() {
 
     float elevation = ${WORLD_RADIUS_3D}; // default elevation at sea level
+    float altitude = 0.0;
     v_color = vec4(1.0, 1.0, 1.0, 1.0); // default color white
+
     for (int i = 0; i < 6; i++) {
-        if (isPointInBBox(a_longLat, u_demTextureBBOX[i])) {
-            vec2 uv = (a_longLat - u_demTextureBBOX[i].xy) / (u_demTextureBBOX[i].zw - u_demTextureBBOX[i].xy);
-            float altitude = texture(u_demTexture, vec3(uv, float(i))).r;
-            elevation += altitude;
-            v_color = mix(vec4(0.0, 0.0, 1.0, 1.0), vec4(1.0, 0.0, 0.0, 1.0), altitude / 100.0); // color from blue to red based on altitude
-            break;
-     }
+        if (isPointInBBox(a_xy, u_demTextureBBOX[i])) {
+            vec2 uv = (a_xy - u_demTextureBBOX[i].xy) / (u_demTextureBBOX[i].zw - u_demTextureBBOX[i].xy); 
+            // uv.y = 1.0 - uv.y; // flip y coordinate
+            // rescale and transform uv to fit in the texture data cover bbox
+            uv *= u_textureDataCoverRatio[i];
+            altitude = texture(u_demTexture, vec3(uv, float(i))).r;
+            if (altitude != 0.0) {
+                break;
+            }
+        }
     }
     if (u_color.a > 0.0) {
         v_color = u_color;
+    } else {
+        if ( altitude > 0.00001 ) {
+            v_color = mix(vec4(1.0, 1.0, 1.0, 1.0), vec4(1.0, 0.2, 0.2, 1.0), altitude / 2.0); // color from white to red based on altitude
+        } else {
+            // white 
+            v_color = vec4(1.0, 1.0, 1.0, 0.5);
+        }
     }
     v_color.a *= u_opacity; 
-    vec3 position = a_position * elevation;
+    vec3 position = a_position * (elevation + altitude * 2.0);
     gl_Position = cartesian3DToGLPosition(position);
-    gl_PointSize = 5.0; //u_pointSize;
+    gl_PointSize = 6.0; //u_pointSize;
 }
 `;
 const fragmentShaderSource = `#version 300 es
@@ -75,6 +82,10 @@ void main() {
     outColor = v_color;
 }
 `;
+function resCalculation(sourceResolution, mergeCount) {
+    return sourceResolution + (mergeCount - 1) * (sourceResolution - 1);
+}
+const RESOLUTION = resCalculation(5, 12); // 5 is tile dimension length, 12 is merge count
 export class TextureDemTriangles {
     globe;
     gl;
@@ -88,12 +99,14 @@ export class TextureDemTriangles {
     locations = {
         attributes: {
             a_position: -1,
-            a_longLat: -1,
+            a_xy: -1,
         },
         uniforms: {
             u_demTexture: -1,
             u_demTextureBBOX: -1,
+            u_textureDataCoverRatio: -1,
             u_style: -1,
+            u_breakLoopIndex: -1,
         }
     };
     constructor(globe) {
@@ -104,17 +117,20 @@ export class TextureDemTriangles {
         this.cameraUniformBlock.assignBindingPoint(this.program, uniformBindingPoints.camera);
         // get attribute locations
         this.locations.attributes.a_position = this.gl.getAttribLocation(this.program, 'a_position');
-        this.locations.attributes.a_longLat = this.gl.getAttribLocation(this.program, 'a_longLat');
+        this.locations.attributes.a_xy = this.gl.getAttribLocation(this.program, 'a_xy');
         // get uniform locations
         this.locations.uniforms.u_demTexture = this.gl.getUniformLocation(this.program, 'u_demTexture');
         this.locations.uniforms.u_demTextureBBOX = this.gl.getUniformLocation(this.program, 'u_demTextureBBOX');
+        this.locations.uniforms.u_textureDataCoverRatio = this.gl.getUniformLocation(this.program, 'u_textureDataCoverRatio');
+        this.locations.uniforms.u_breakLoopIndex = this.gl.getUniformLocation(this.program, 'u_breakLoopIndex');
         this.locations.uniforms.u_style = this.gl.getUniformBlockIndex(this.program, 'Style');
         this.gl.uniformBlockBinding(this.program, this.locations.uniforms.u_style, uniformBindingPoints.style);
         // create 3d texture
         const texture = this.gl.createTexture();
         this.gl.bindTexture(this.gl.TEXTURE_2D_ARRAY, texture);
-        // this.gl.texImage3D(this.gl.TEXTURE_2D_ARRAY, 0, this.gl.R32F, 25, 25, 6, 0, this.gl.RED, this.gl.FLOAT, null);
-        this.gl.texStorage3D(this.gl.TEXTURE_2D_ARRAY, 1, this.gl.R32F, 5, 5, 6);
+        // Calculate correct size: tileDimensionLength + (mergeCount - 1) * (tileDimensionLength - 1)
+        // For tileDimensionLength=5, mergeCount=8: 5 + 7*4 = RESOLUTION
+        this.gl.texStorage3D(this.gl.TEXTURE_2D_ARRAY, 1, this.gl.R32F, RESOLUTION, RESOLUTION, 6);
         // set texture parameters
         const ext = this.gl.getExtension('OES_texture_float_linear');
         console.log('OES_texture_float_linear extension:', ext);
@@ -129,11 +145,17 @@ export class TextureDemTriangles {
         const vao = this.gl.createVertexArray();
         this.gl.bindVertexArray(vao);
         attributeLoader(this.gl, pos3dBufferInfo, this.locations.attributes.a_position, 3);
-        attributeLoader(this.gl, longLatBufferInfo, this.locations.attributes.a_longLat, 2);
+        attributeLoader(this.gl, longLatBufferInfo, this.locations.attributes.a_xy, 2);
         this.gl.bindVertexArray(null);
         return vao;
     }
-    setDemTextures(demTexturesData, demTextureBBOX) {
+    setDemTextures(demTexturesData, demTextureBBOX, coverRatio) {
+        // Add validation for maximum layers
+        const maxLayers = this.gl.getParameter(this.gl.MAX_ARRAY_TEXTURE_LAYERS);
+        if (demTexturesData.length > Math.min(maxLayers, 6)) {
+            console.error(`Too many DEM textures: ${demTexturesData.length}, max supported: ${Math.min(maxLayers, 6)}`);
+            return;
+        }
         // bind textures to texture units
         const gl = this.gl;
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.texture);
@@ -143,23 +165,33 @@ export class TextureDemTriangles {
         // bind and upload each texture to the 3D texture array
         for (let i = 0; i < demTexturesData.length; i++) {
             const data = demTexturesData[i];
-            if (data.length === 5 * 5) { // <-- FIXED
-                gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, i, 5, 5, 1, gl.RED, gl.FLOAT, new Float32Array(data));
+            if (data.length === RESOLUTION * RESOLUTION) { // <-- FIXED
+                gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, i, RESOLUTION, RESOLUTION, 1, gl.RED, gl.FLOAT, new Float32Array(data));
+            }
+            else {
+                console.warn(`DEM texture ${i} has incorrect size: ${data.length}, expected: ${RESOLUTION * RESOLUTION}`);
             }
         }
         // set uniform for texture units
         const bboxVec4Array = new Float32Array(6 * 4);
         for (let i = 0; i < demTextureBBOX.length; i++) {
             const bbox = demTextureBBOX[i];
-            bboxVec4Array[i * 4 + 0] = bbox.northWest[0];
-            bboxVec4Array[i * 4 + 1] = bbox.southEast[1];
-            bboxVec4Array[i * 4 + 2] = bbox.southEast[0];
-            bboxVec4Array[i * 4 + 3] = bbox.northWest[1];
+            bboxVec4Array[i * 4 + 0] = bbox.ll[0];
+            bboxVec4Array[i * 4 + 1] = bbox.ll[1];
+            bboxVec4Array[i * 4 + 2] = bbox.ur[0];
+            bboxVec4Array[i * 4 + 3] = bbox.ur[1];
         }
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(this.program);
         gl.uniform4fv(this.locations.uniforms.u_demTextureBBOX, bboxVec4Array);
+        if (coverRatio) {
+            gl.uniform2fv(this.locations.uniforms.u_textureDataCoverRatio, new Float32Array(coverRatio.flatMap(ratio => [ratio.x, ratio.y])));
+        }
+        else {
+            gl.uniform2fv(this.locations.uniforms.u_textureDataCoverRatio, new Float32Array(12).fill(1.0));
+        }
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+        gl.uniform1i(this.locations.uniforms.u_breakLoopIndex, demTexturesData.length);
         gl.useProgram(currentProgram);
     }
     createUBO(bufferReadType = "STATIC_DRAW") {
@@ -213,10 +245,10 @@ export class TextureDemTriangles {
     }
 }
 function drawOnTopBegin(gl) {
-    // gl.disable(gl.DEPTH_TEST);
+    gl.disable(gl.DEPTH_TEST);
     // gl.enable(gl.POLYGON_OFFSET_FILL);
     // // Use an offset to "nudge" the depth value slightly closer or farther.
-    // // Common values are gl.polygonOffset(1.0, 1.0) or gl.polygonOffset(0.5, 0.5)
+    // // Common values are gl.polygonOffset(1.0, 1.0) or gl.polygonOffset(0.RESOLUTION, 0.RESOLUTION)
     // gl.polygonOffset(1.0, 1.0);
     // gl.depthRange(0.0, 0.0001);  // Use near 0.01% of depth range
     // gl.enable(gl.POLYGON_OFFSET_FILL);
@@ -224,13 +256,13 @@ function drawOnTopBegin(gl) {
     // A good starting point is -1.0, -1.0.
     // Negative values "pull" the fragments closer to the camera.
     // gl.polygonOffset(-1.0, -1.0);
-    gl.enable(gl.POLYGON_OFFSET_FILL);
-    gl.polygonOffset(-1.0, -2.0);
+    // gl.enable(gl.POLYGON_OFFSET_FILL);
+    // gl.polygonOffset(-1.0, -2.0);
 }
 function drawOnTopEnd(gl) {
-    // gl.enable(gl.DEPTH_TEST);
+    gl.enable(gl.DEPTH_TEST);
     // gl.disable(gl.POLYGON_OFFSET_FILL);
     // gl.disable(gl.POLYGON_OFFSET_FILL);
     // gl.depthRange(0.0, 1.0);  // Restore full depth range
-    gl.disable(gl.POLYGON_OFFSET_FILL);
+    // gl.disable(gl.POLYGON_OFFSET_FILL);
 }

package/programs/vectorfields/logics/drawrectangleparticles.js

@@ -63,10 +63,12 @@ void main(){
     outColor = vec4(base_color, 1.0);
 }`;
 class Logic {
+    gl;
+    program;
+    _vector_field_location;
     constructor(gl) {
         this.gl = gl;
-        [this.program,
-            this._vector_field_location] = this._createProgram();
+        [this.program, this._vector_field_location] = this._createProgram();
         // this.decoyBuffer = new DecoyBufferManager(gl);
     }
     _createProgram() {
@@ -75,13 +77,13 @@ class Logic {
         // ubo point
         // const ubo_location = gl.getUniformBlockIndex(program, 'UBO');
         // gl.uniformBlockBinding(program, ubo_location, UBO_BINDING_POINT);
-        SeaWaveUbo.assignBindingPoint(gl, program, 0);
+        SeaWaveUbo.assignBindingPoint(gl, program);
         return [program, gl.getUniformLocation(program, 'u_vector_field')];
     }
     /**
-     * @param {*} bufferManager | PingPongBufferManager
-     * @param {*} vectorTexture | RG32F texture R: x, G: y
-     * @param {*} uboManager | WaveParticalUboManager under ubo.js
+     * @param bufferManager | PingPongBufferManager
+     * @param vectorTexture | RG32F texture R: x, G: y
+     * @param uboManager | WaveParticalUboManager under ubo.js
      */
     draw(bufferManager, vectorTexture, uboManager) {
         const { gl, program } = this;

package/programs/vectorfields/logics/drawrectangleparticles1.js

@@ -0,0 +1,112 @@
+import { createProgram } from "../../../util/webglobjectbuilders";
+import { glProgramCache } from "../../programcache";
+import { SeaWaveUbo } from "./ubo-new";
+/**
+ * [+] ubo
+ */
+const vertexShaderSource = `#version 300 es
+precision highp float;
+` + SeaWaveUbo.glslCode() + `
+uniform sampler2D u_vector_field;
+in vec2 in_position;
+out vec3 base_color;
+
+
+vec2 read_value(const vec2 uv) {
+    vec2 value = texture(u_vector_field, uv).rg;
+    if ( value.x == escape_value || value.y == escape_value) {
+        return vec2(0.0);
+    }
+    return value;
+}
+    
+
+vec2 lookup_wind(const vec2 uv) { // gerek kalmayabilir. sampler linear methodu ayni isi yapiyor 
+    // return texture(u_vector_field, uv).rg; // lower-res hardware filtering
+    vec2 res = vec2(textureSize(u_vector_field, 0));
+    vec2 px = 1.0 / res;
+    vec2 vc = (floor(uv * res)) * px;
+    vec2 f = fract(uv * res);
+    vec2 tl = read_value(vc).rg;
+    vec2 tr = read_value(vc + vec2(px.x, 0)).rg;
+    vec2 bl = read_value(vc + vec2(0, px.y)).rg;
+    vec2 br = read_value(vc + px).rg;
+
+    return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
+}
+
+
+void main(){
+    vec2 direction_vector = lookup_wind(in_position);
+    if (direction_vector.r == 0.0 && direction_vector.g == 0.0) return;
+    
+
+    vec2 limp;
+    if ( 0 == gl_VertexID) { limp = -tail_wing_base_limp; }
+    else if ( 1 == gl_VertexID) { limp = vec2( tail_wing_base_limp.x, -tail_wing_base_limp.y); }
+    else if ( 2 == gl_VertexID) { limp = tail_wing_base_limp; }
+    else  { limp = vec2(-tail_wing_base_limp.x,  tail_wing_base_limp.y); } // if ( 3 == gl_VertexID)
+
+    limp = (limp  * mat2( 
+        direction_vector.x, -direction_vector.y,
+        direction_vector.y, direction_vector.x)) / draw_texture_size;
+
+    vec2 pos = in_position * 2.0 - 1.0;
+    gl_Position = vec4(pos + limp, 0.0, 1.0);
+    base_color = color;
+}`;
+const fragmentShaderSource = `#version 300 es
+precision highp float;
+out vec4 outColor;
+in vec3 base_color;
+void main(){
+    outColor = vec4(base_color, 1.0);
+}`;
+class Logic {
+    constructor(gl) {
+        this.gl = gl;
+        [this.program,
+            this._vector_field_location] = this._createProgram();
+        // this.decoyBuffer = new DecoyBufferManager(gl);
+    }
+    _createProgram() {
+        const gl = this.gl;
+        const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
+        // ubo point
+        // const ubo_location = gl.getUniformBlockIndex(program, 'UBO');
+        // gl.uniformBlockBinding(program, ubo_location, UBO_BINDING_POINT);
+        SeaWaveUbo.assignBindingPoint(gl, program, 0);
+        return [program, gl.getUniformLocation(program, 'u_vector_field')];
+    }
+    /**
+     * @param {*} bufferManager | PingPongBufferManager
+     * @param {*} vectorTexture | RG32F texture R: x, G: y
+     * @param {*} uboManager | WaveParticalUboManager under ubo.js
+     */
+    draw(bufferManager, vectorTexture, uboManager) {
+        const { gl, program } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(bufferManager.getSourceVao());
+        // gl.bindVertexArray(this.decoyBuffer.getSourceVao());
+        uboManager.bind();
+        gl.activeTexture(gl.TEXTURE0);
+        gl.uniform1i(this._vector_field_location, 0);
+        gl.bindTexture(gl.TEXTURE_2D, vectorTexture);
+        gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, 4, bufferManager.length);
+        gl.drawArraysInstanced(gl.POINTS, 0, 4, bufferManager.length);
+        gl.bindVertexArray(null);
+        uboManager.unbind();
+    }
+    free() {
+        this.gl.deleteProgram(this.program);
+        this.program = null;
+    }
+}
+export const drawRectangleParticlesProgramCache = Object.freeze({
+    getProgram: (gl) => {
+        return glProgramCache.getProgram(gl, Logic);
+    },
+    releaseProgram: (gl) => {
+        glProgramCache.releaseProgram(gl, Logic);
+    }
+});

package/semiplugins/shape-on-terrain/arc-plugin.js

@@ -137,6 +137,15 @@ export class ArcOnTerrainPlugin {
         this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
         this.globe.DrawRender();
     }
+    deleteAll() {
+        if (!this.bufferOrchestrator || !this.bufferManagersMap || !this.globe) {
+            console.warn("Buffer orchestrator or buffer manager map is not initialized.");
+            return;
+        }
+        this.bufferOrchestrator.resetWithCapacity(this.bufferManagersMap, this._arcMap.size);
+        this._arcMap.clear();
+        this.globe.DrawRender();
+    }
     updateColors(keyColorCouples, drawRender = true) {
         if (this._freed) {
             console.warn("Plugin is freed, cannot update color");

package/tracks/point-tracks/plugin.js

@@ -1,6 +1,7 @@
 import { BufferOrchestrator, BufferManager, ObjectStore } from "../../util/account/index";
 import { PickerDisplayer } from "../../util/picking/picker-displayer";
 import { PointOnGlobeProgramCache } from "../../programs/point-on-globe/square-pixel-point";
+import { defaultblendfunction } from "../../util/webglobe/gldefaultstates";
 import { wgs84ToCartesian3d, wgs84ToMercator } from "../../Math/methods";
 const _0vec3 = /* @__PURE__ */ [0, 0, 0];
 /**

package/util/picking/picker-displayer.js

@@ -60,8 +60,8 @@ class PickerDisplayer {
     }
     // call after drawing the scene with gl picker shader
     drawColorTexture() {
-        const { colorTexture } = this;
-        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+        const { gl, colorTexture } = this;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         this.displayer.draw(colorTexture);
     }
     pickXY(x, y, selectionPointFilling = 1, callback = () => { }) {

package/util/shaderfunctions/geometrytransformations.js

@@ -200,7 +200,7 @@ float realDistanceOnSphereR1(vec2 longLat1, vec2 longLat2) {
 `;
 export const isPointInBBox = `
 bool isPointInBBox(vec2 point, vec4 bbox) {
-    return point.x + ${EPSILON} >= bbox.x && point.x <= bbox.z + ${EPSILON} && point.y + ${EPSILON} >= bbox.y && point.y <= bbox.w + ${EPSILON};
+    return point.x >= bbox.x && point.x <= bbox.z && point.y >= bbox.y && point.y <= bbox.w;
 }
 `;
 const pointsOnSphereBetween = `