@pirireis/webglobeplugins 0.16.4 → 0.16.7

package/Math/tessellation/triangle-tessellation-meta.js

@@ -0,0 +1,370 @@
+/**
+ * @author Toprak Ozturk
+ */
+import { create as createArc, calculateZLimitPoint } from "../arc";
+import { createUnitVectorFromLongLat, equals, length, vec3ToLongLatRadians } from "../vec3";
+import { TILE_COUNTS } from "./zoom-catch";
+import { pointsOnArc } from "../juction/arc-plane";
+import { latToTileY, tileYtoLat } from "./methods";
+import { isOnTileEdge } from "./methods";
+import Delaunator from "delaunator";
+// 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
+const _plane = /*@__PURE__*/ { normal: [0, 0, 0], distance: 0 };
+const _resultPoints = /*@__PURE__*/ [[0, 0, 0], [0, 0, 0]];
+function createShellPoints(triangleMeta) {
+    const arcs = triangleMeta.arcs;
+    const points = [
+        arcs[0].p0LongLat,
+        arcs[1].p0LongLat,
+        arcs[2].p0LongLat
+    ];
+    for (let i = 0; i < 3; i++) {
+        if (arcs[i].exceededLimit) {
+            if (arcs[i].exceededLimit !== undefined) {
+                const longLat = vec3ToLongLatRadians(arcs[i].exceededLimit);
+                points.push(longLat);
+            }
+        }
+    }
+    const center = [
+        points.reduce((sum, p) => sum + p[0], 0) / points.length,
+        points.reduce((sum, p) => sum + p[1], 0) / points.length
+    ];
+    const shellPoints = [];
+    for (let i = 0; i < points.length; i++) {
+        const p = points[i];
+        const x = (p[0] - center[0]) / 10;
+        const y = (p[1] - center[1]) / 10;
+        shellPoints.push([p[0] + x, p[1] + y]);
+    }
+    return shellPoints;
+}
+function createBBox(p1, p2, limitVec) {
+    if (limitVec) {
+        const limitLongLat = vec3ToLongLatRadians(limitVec);
+        console.log('Limit point found at:', limitLongLat, 'for p1:', p1, 'p2:', p2);
+        return {
+            min: [Math.min(p1[0], p2[0], limitLongLat[0]), Math.min(p1[1], p2[1], limitLongLat[1])],
+            max: [Math.max(p1[0], p2[0], limitLongLat[0]), Math.max(p1[1], p2[1], limitLongLat[1])],
+        };
+    }
+    return {
+        min: [Math.min(p1[0], p2[0]), Math.min(p1[1], p2[1])],
+        max: [Math.max(p1[0], p2[0]), Math.max(p1[1], p2[1])],
+    };
+}
+export function createTriangleTessellationMeta(p1, p2, p3) {
+    const p1v3 = createUnitVectorFromLongLat(p1);
+    const p2v3 = createUnitVectorFromLongLat(p2);
+    const p3v3 = createUnitVectorFromLongLat(p3);
+    const arc1 = createArc(p1v3, p2v3);
+    const arc2 = createArc(p2v3, p3v3);
+    const arc3 = createArc(p3v3, p1v3);
+    const limitVec = [0, 0, 0];
+    if (calculateZLimitPoint(arc1, limitVec)) {
+        arc1.exceededLimit = [limitVec[0], limitVec[1], limitVec[2]];
+        const longlat_ = vec3ToLongLatRadians(arc1.exceededLimit);
+        console.log('Arc 1 exceeded limit at:', longlat_.map(v => (v * 180 / Math.PI).toFixed(2)), 'rad:', arc1.exceededLimit);
+    }
+    arc1.bbox = createBBox(p1, p2, arc1.exceededLimit);
+    arc1.p0LongLat = p1;
+    arc1.p1LongLat = p2;
+    if (calculateZLimitPoint(arc2, limitVec)) {
+        arc2.exceededLimit = [limitVec[0], limitVec[1], limitVec[2]];
+    }
+    arc2.bbox = createBBox(p2, p3, arc2.exceededLimit);
+    arc2.p0LongLat = p2;
+    arc2.p1LongLat = p3;
+    if (calculateZLimitPoint(arc3, limitVec)) {
+        arc3.exceededLimit = [limitVec[0], limitVec[1], limitVec[2]];
+    }
+    arc3.bbox = createBBox(p3, p1, arc3.exceededLimit);
+    arc3.p0LongLat = p3;
+    arc3.p1LongLat = p1;
+    const bbox = {
+        min: [
+            Math.min(arc1.bbox.min[0], arc2.bbox.min[0], arc3.bbox.min[0]),
+            Math.min(arc1.bbox.min[1], arc2.bbox.min[1], arc3.bbox.min[1])
+        ],
+        max: [
+            Math.max(arc1.bbox.max[0], arc2.bbox.max[0], arc3.bbox.max[0]),
+            Math.max(arc1.bbox.max[1], arc2.bbox.max[1], arc3.bbox.max[1])
+        ],
+    };
+    const meta = {
+        arcs: [arc1, arc2, arc3],
+        bbox
+    };
+    showMeta(meta);
+    meta.shellPoints = createShellPoints(meta);
+    return meta;
+}
+function showMeta(triangleMeta) {
+    for (let i = 0; i < 3; i++) {
+        const arc = triangleMeta.arcs[i];
+        console.log(`Arc ${i} from ${showLongLatRadian(arc.p0LongLat)} to ${showLongLatRadian(arc.p1LongLat)}, bbox: min(${showLongLatRadian(arc.bbox.min)}) max(${showLongLatRadian(arc.bbox.max)})`);
+        if (arc.exceededLimit) {
+            console.log(`Exceeded limit at ${showLongLatRadian(vec3ToLongLatRadians(arc.exceededLimit))}`);
+        }
+    }
+    console.log(`Triangle BBOX: min(${showLongLatRadian(triangleMeta.bbox.min)}) max(${showLongLatRadian(triangleMeta.bbox.max)})`);
+}
+/**
+ *
+ * @param triangleMeta
+ * @param zoom
+ * @param angle
+ * @param dimension false for longitude (meridian) true for latitude (parallel)
+ */
+function getPoints(triangleMeta, angle, dimension) {
+    // console.log("getPoints called with angle:", angle * 180 / Math.PI, "dimension:", dimension ? 'latitude' : 'longitude');
+    // find which arcs are cut by plane
+    const radians = angle;
+    if (dimension) {
+        _plane.normal[0] = 0;
+        _plane.normal[1] = 0;
+        _plane.normal[2] = 1;
+        _plane.distance = Math.sin(radians);
+    }
+    else {
+        _plane.normal[0] = Math.sin(radians);
+        _plane.normal[1] = -Math.cos(radians);
+        _plane.normal[2] = 0;
+        _plane.distance = 0;
+    }
+    let result = [];
+    // Add debugging
+    let resultsFromDistinctArcs = 0;
+    for (let i = 0; i < 3; i++) {
+        const arc = triangleMeta.arcs[i];
+        const coordIndex = dimension ? 1 : 0;
+        const minCoord = arc.bbox.min[coordIndex];
+        const maxCoord = arc.bbox.max[coordIndex];
+        if (minCoord > angle || maxCoord < angle) {
+            continue; // arc is out of range
+        }
+        const count = pointsOnArc(arc, _plane, _resultPoints);
+        if (count === 1) {
+            result.push([..._resultPoints[0]]);
+        }
+        else if (count === 2) {
+            // throw new Error('Unexpected 2 cut points on arc, should be max 1'); // TODO DELETE this line later
+            result.push([..._resultPoints[0]]);
+            result.push([..._resultPoints[1]]); // TODO: this is a fix for a bug, need to investigate later
+        }
+        resultsFromDistinctArcs += 1;
+    }
+    if (resultsFromDistinctArcs === 3) {
+        result = filterDuplicate(result);
+    }
+    if (result.length !== 2 && result.length !== 4) {
+        // TODO: THERE is a case where 4 points are found.
+        // this happens when two arcs has limit and share space in Z dimension
+        console.log("ERROR");
+        const text = 'Angle:' + angle + ' dimension:' + (dimension ? 'latitude' : 'longitude') + "\n" +
+            'Result points count:' + result.length + "\n" +
+            "bbox:" + triangleMeta.bbox.min[0] * 180 / Math.PI + ", " + triangleMeta.bbox.min[1] * 180 / Math.PI + ", " + triangleMeta.bbox.max[0] * 180 / Math.PI + ", " + triangleMeta.bbox.max[1] * 180 / Math.PI + "\n";
+        showMeta(triangleMeta);
+        for (let res of result) {
+            const ll = vec3ToLongLatRadians(res);
+            console.log("Point: " + ll[0] * 180 / Math.PI + ", " + ll[1] * 180 / Math.PI + "\n");
+        }
+        throw new Error(`Unexpected cut count for tile cut, got: ${result.length}, angle: ${angle * 180 / Math.PI}, dimension: ${dimension ? 'latitude' : 'longitude'} \n` + text);
+    }
+    // TODO: i want to see it delete later
+    if (result.length === 4) {
+        console.warn("Warning: 4 cut points found on triangle for angle:", angle * 180 / Math.PI, "dimension:", dimension ? 'latitude' : 'longitude', "points:", result);
+    }
+    result.sort((a, b) => {
+        if (dimension) {
+            return a[1] - b[1]; // sort by y for longitude cuts
+        }
+        else {
+            return a[0] - b[0]; // sort by x for latitude cuts
+        }
+    });
+    return result;
+}
+function getEdgePoints(triangleMeta) {
+    const points = [
+        triangleMeta.arcs[0].p0,
+        triangleMeta.arcs[1].p0,
+        triangleMeta.arcs[2].p0,
+    ];
+    for (let i = 0; i < 3; i++) {
+        if (triangleMeta.arcs[i].exceededLimit) {
+            points.push(triangleMeta.arcs[i].exceededLimit);
+        }
+    }
+    return points;
+}
+// TODO: EDGES NEED ! LEVEL MORE ZOOM LEVEL OF RESOLUTION as THEY CAN BE NEIGHBOURS OF HIGHER ZOOM LEVEL TILES....
+// simple strategy: get max zoom level of neighbour, add edge cuts based on that zoom level, do not fill inner points.
+// partialTessellation cure this problem automatically
+export function getAllPoints(triangleMeta, zoom, innerCuts = TILE_DEM_STEPCOUNT) {
+    // TODO: lonLengthRadian and latInnerStep might be change. Dynamic zoom level will show if needed
+    const points = [];
+    const longLatPoints = [];
+    // CALCULATE INFORMATION NEEDED FOR CUTTING
+    const tileCount = TILE_COUNTS[zoom];
+    const lonLengthRadian = 2 * Math.PI / tileCount / innerCuts; // inner step
+    const startMeridianRadian = triangleMeta.bbox.min[0];
+    const endMeridianRadian = triangleMeta.bbox.max[0];
+    const startParallelRadian = triangleMeta.bbox.min[1];
+    const endParallelRadian = triangleMeta.bbox.max[1];
+    // GET EDGE POINTS
+    const edgePoints = getEdgePoints(triangleMeta);
+    const shellPoints = triangleMeta.shellPoints;
+    for (let i = 0; i < edgePoints.length; i++) {
+        const longLat = vec3ToLongLatRadians(edgePoints[i]);
+        longLatPoints.push(...shellPoints[i]);
+        longLatPoints.push(...longLat);
+        points.push(0, 0, 0);
+        points.push(...edgePoints[i]);
+    }
+    // GET ALL PARRALLEL CUTS AND FILL MIDDLE POINTS
+    // how to calculate parallel tiles in range of bbox
+    const startTileY = latToTileY(startParallelRadian, zoom);
+    const endTileY = latToTileY(endParallelRadian, zoom);
+    const latInnerStep = 1 / innerCuts;
+    let currentY = startTileY - Math.abs(startTileY % latInnerStep);
+    if (currentY === startTileY)
+        currentY -= latInnerStep; // since start point is already added
+    let latCutCount = 0;
+    while (currentY > endTileY) {
+        const lat = tileYtoLat(currentY, zoom);
+        const concurances = getPoints(triangleMeta, lat, true);
+        for (let i = 0; i < concurances.length; i += 2) {
+            const p0 = concurances[i];
+            const p1 = concurances[i + 1];
+            points.push(...p0);
+            points.push(...p1);
+            const p0LongLat = vec3ToLongLatRadians(p0);
+            const p1LongLat = vec3ToLongLatRadians(p1);
+            longLatPoints.push(...p0LongLat);
+            longLatPoints.push(...p1LongLat);
+            fillBetweenInParallels(lat, p0LongLat, p1LongLat, lonLengthRadian, points, longLatPoints);
+            if (length(p0) < 0.99 || length(p1) < 0.99 || length(p0) > 1.01 || length(p1) > 1.01) {
+                console.warn("Warning: Cut point is not on unit sphere!", length(p0), length(p1));
+            }
+        }
+        currentY -= latInnerStep;
+        latCutCount++;
+    }
+    let currentLong = startMeridianRadian - startMeridianRadian % lonLengthRadian;
+    if (currentLong === startMeridianRadian)
+        currentLong += lonLengthRadian; // since start point is already added
+    while (currentLong < endMeridianRadian) {
+        const [p0, p1] = getPoints(triangleMeta, currentLong, false);
+        const p0LongLat = vec3ToLongLatRadians(p0);
+        const p1LongLat = vec3ToLongLatRadians(p1);
+        if (!isOnTileEdge(p0LongLat, zoom)) {
+            points.push(...p0);
+            longLatPoints.push(...p0LongLat);
+        }
+        if (!isOnTileEdge(p1LongLat, zoom)) {
+            points.push(...p1);
+            longLatPoints.push(...p1LongLat);
+        }
+        currentLong += lonLengthRadian;
+    }
+    const delaunator = new Delaunator(longLatPoints);
+    let indices = delaunator.triangles;
+    const edgeIndexes = shellPoints.map((e, index) => index * 2); // edge points are always first points in list
+    indices = filteroutEdgeConnections(indices, edgeIndexes);
+    rotateIndices(indices);
+    return { vec3s: new Float32Array(points), longLats: new Float32Array(longLatPoints), indices: indices };
+}
+function fillBetweenInParallels(lat, p1, p2, step, fillVec3Arr, longLatPoints) {
+    // return;
+    // const start = Math.min(p1[0], p2[0]);
+    // const end = Math.max(p1[0], p2[0]);
+    const start = p1[0];
+    const end = p2[0];
+    // console.log("start:", start * 180 / Math.PI, "end:", end * 180 / Math.PI, "lat:", lat * 180 / Math.PI);
+    let current = start - (start % step);
+    while (current < end) {
+        const item = [current, lat];
+        fillVec3Arr.push(...createUnitVectorFromLongLat(item));
+        longLatPoints.push(...item);
+        current += step;
+    }
+}
+function filterDuplicate(vec3s) {
+    const result = [];
+    let dublicate = false;
+    for (let i = 0; i < vec3s.length; i++) {
+        for (let j = 0; j < result.length; j++) {
+            if (equals(vec3s[i], result[j])) {
+                dublicate = true;
+                break;
+            }
+        }
+        if (!dublicate) {
+            result.push(vec3s[i]);
+        }
+    }
+    return result;
+}
+function showLongLatRadian(longLat) {
+    return `(${(longLat[0] * 180 / Math.PI).toFixed(2)}°, ${(longLat[1] * 180 / Math.PI).toFixed(2)}°)`;
+}
+function rotateIndices(indices) {
+    const len = indices.length / 3;
+    let hold;
+    for (let i = 0; i < len; i++) {
+        hold = indices[i * 3];
+        indices[i * 3] = indices[i * 3 + 1];
+        indices[i * 3 + 1] = hold;
+    }
+    return indices;
+}
+// This method for removing external edge connections. The connections are unnecessary and cause a veil descending to the center of sphere from the edges
+function filteroutEdgeConnections(indexes, filterOutIndexes) {
+    const length = indexes.length / 3;
+    const result = [];
+    for (let i = 0; i < length; i++) {
+        let pass = false;
+        for (let filterIndex of filterOutIndexes) {
+            if (indexes[i * 3] === filterIndex || indexes[i * 3 + 1] === filterIndex || indexes[i * 3 + 2] === filterIndex) {
+                pass = true;
+                break;
+            }
+        }
+        if (pass)
+            continue;
+        result.push(indexes[i * 3], indexes[i * 3 + 1], indexes[i * 3 + 2]);
+    }
+    return new Uint32Array(result);
+}
+/**
+ * @unlockedPerk cache
+ * final outpout can be saved on a hashmap since this triangles are static
+ */
+function shredTriangleTessellationMeta(triangleMeta, zoomLevel) {
+    /**
+     * What if tile is covered by the curve of the limit of a single arc.
+     */
+    const result = [];
+    // cut triangleMeta into smaller triangles based on zoom level...
+    return result;
+}
+/**
+ * @lockedPerk cache
+ *
+ * cache can be applied at tile triangle intersection level;
+ *
+ * @unlockedPerk smoothZoomTransition
+ *
+ * @puzzle triangle should be covered without duplicate points. A tile can be covered by a bigger one.
+ * @solution bbox cuts:
+ *  Ax    1 x  x is higher zoom level tile, A is a tile that covers it. 1 2 3 should be asked with A zoom level.
+ *  AA ->      Problem1: 1 2 3 x will have edge points duplicated
+ *        2 3  p1 sol1: edges can be taged, or added separately by and algorithm that only adds edge poitns.
+ *
+ * still all triangles should have some sort of cached tessellation to fast render on rapit earth rotation
+ */
+// function partialTessellation(triangleMeta: TriangleTessellationMeta, limits: BBox[], zoomLevel: number, innerCuts: number): { vec3s: Float32Array, longLats: Float32Array, indices: Uint32Array } {
+// }

package/Math/tessellation/triangle-tessellation.js

@@ -0,0 +1,10 @@
+/**
+ * @author Toprak Ozturk
+ *
+ */
+import { createTriangleTessellationMeta, getAllPoints } from "./triangle-tessellation-meta";
+export function test1(zoomLevel, p1, p2, p3) {
+    const triangleMeta = createTriangleTessellationMeta(p1, p2, p3);
+    const { vec3s, longLats, indices } = getAllPoints(triangleMeta, zoomLevel);
+    return { vec3s, longLats, indices };
+}

package/Math/tessellation/types.js

@@ -0,0 +1 @@
+"use strict";

package/Math/tessellation/zoom-catch.js

@@ -0,0 +1 @@
+export const TILE_COUNTS = Array.from({ length: 22 }, (_, i) => Math.pow(2, i));

package/Math/vec3.js

@@ -7,6 +7,11 @@ function set(out, x, y, z) {
     out[1] = y;
     out[2] = z;
 }
+function negate(item) {
+    item[0] = -item[0];
+    item[1] = -item[1];
+    item[2] = -item[2];
+}
 function clone(a) {
     return [a[0], a[1], a[2]];
 }
@@ -100,6 +105,14 @@ function fromLongLatToUnitVector(out, longLat) {
     out[1] = cosLat * Math.sin(longitude);
     out[2] = Math.sin(latitude);
 }
+function createUnitVectorFromLongLat(longLat) {
+    const cosLat = Math.cos(longLat[1]);
+    return [
+        cosLat * Math.cos(longLat[0]),
+        cosLat * Math.sin(longLat[0]),
+        Math.sin(longLat[1])
+    ];
+}
 function applyQuaternion(out, a, q) {
     const x = a[0], y = a[1], z = a[2];
     const qx = q[0], qy = q[1], qz = q[2], qw = q[3];
@@ -123,4 +136,16 @@ function randomUnit(out) {
 function str(a) {
     return `Vec3(${a[0].toFixed(2)}, ${a[1].toFixed(2)}, ${a[2].toFixed(2)})`;
 }
-export { create, set, clone, copy, add, subtract, dot, cross, multiplyScalar, divideScalar, lengthSquared, length, normalize, distanceSquared, distance, equals, fromUnitVectorToLongLat, fromLongLatToUnitVector, applyQuaternion, randomUnit, str };
+function vec3ToLongLatDegrees(v) {
+    return [
+        Math.atan2(v[1], v[0]) * 180 / Math.PI,
+        Math.asin(v[2]) * 180 / Math.PI
+    ];
+}
+function vec3ToLongLatRadians(v) {
+    return [
+        Math.atan2(v[1], v[0]),
+        Math.asin(v[2])
+    ];
+}
+export { create, set, clone, copy, add, subtract, negate, dot, cross, multiplyScalar, divideScalar, lengthSquared, length, normalize, distanceSquared, distance, equals, fromUnitVectorToLongLat, fromLongLatToUnitVector, applyQuaternion, randomUnit, str, createUnitVectorFromLongLat, vec3ToLongLatDegrees, vec3ToLongLatRadians };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "0.16.4",
+    "version": "0.16.7",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT",
@@ -9,6 +9,8 @@
     },
     "dependencies": {
         "@pirireis/webglobe": "^6.2.22",
+        "delaunator": "^5.0.1",
+        "earcut": "^3.0.2",
         "rbush": "^4.0.1"
     }
-}
+}

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

@@ -0,0 +1,178 @@
+import { TextureDemTriangles } from "./texture-dem-triangles";
+import { test1 } from "../../Math/tessellation/triangle-tessellation";
+/**
+ * Loads a plugin with test data for TextureDemTriangles
+ */
+const createTestBBOXES = () => {
+    const bboxes = [];
+    for (let i = 0; i < 6; i++) {
+        const north = Math.random() * Math.PI / 2 / 1.4; // random latitude
+        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 });
+    }
+    return bboxes;
+};
+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)})`);
+        if (demData.length > i) {
+            const dem = demData[i];
+            let demStr = "DEM: \n";
+            for (let j = 0; j < dem.length; j++) {
+                demStr += dem[j].toFixed(1) + " ";
+                if ((j + 1) % 5 === 0) {
+                    demStr += "\n";
+                }
+            }
+            console.log(demStr);
+        }
+    }
+}
+const createTestDemTextures = () => {
+    const textures = [];
+    for (let i = 0; i < 6; i++) {
+        const texture = [];
+        for (let j = 0; j < 5 * 5; j++) {
+            const value = 100 * Math.random(); // random elevation value
+            texture.push(value);
+        }
+        textures.push(texture);
+    }
+    return textures;
+};
+// TODO: NAME IT longlat degree or radian
+export function createBuffersAndFill(gl, vec3s, longLats, indices) {
+    const positionBuffer = gl.createBuffer();
+    const longLatBuffer = gl.createBuffer();
+    const indexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vec3s), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, longLatBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(longLats), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+    return {
+        buffers: {
+            positionBuffer,
+            longLatBuffer,
+            indexBuffer
+        }
+    };
+}
+export class TextureDemTrianglesTestPlugin {
+    globe = null;
+    textureDemTriangles = null;
+    vao = null;
+    drawOptions = null;
+    bufferInfo = null;
+    id;
+    uboTriangleStyle = null;
+    uboStringStyle = null;
+    showDemPoints = false;
+    constructor(id) {
+        this.id = id;
+    }
+    init(globe) {
+        this.globe = globe;
+        this.textureDemTriangles = new TextureDemTriangles(globe);
+        // set bboxes and dem textures
+        const demTextures = createTestDemTextures();
+        const demTextureBBOX = createTestBBOXES();
+        this.textureDemTriangles.setDemTextures(demTextures, demTextureBBOX);
+        // 
+        showTextureBBoxes(demTextureBBOX, demTextures);
+        this.uboTriangleStyle = this.textureDemTriangles.createUBO();
+        this.uboStringStyle = this.textureDemTriangles.createUBO();
+        this.uboTriangleStyle.updateSingle("u_color", new Float32Array([1.0, 0.0, 0.0, 0.0]));
+        this.uboStringStyle.updateSingle("u_color", new Float32Array([.3, .3, .0, 1.0]));
+        const elementBuffer = globe.gl.createBuffer();
+        const bufferInfo = {
+            pos3dBufferInfo: {
+                buffer: globe.gl.createBuffer(),
+                stride: 0,
+                offset: 0,
+            },
+            longLatBufferInfo: {
+                buffer: globe.gl.createBuffer(),
+                stride: 0,
+                offset: 0,
+            },
+            elementBufferInfo: {
+                buffer: elementBuffer,
+                stride: 0,
+                offset: 0,
+            },
+            drawOptions: {
+                drawRange: { count: 0, first: 0 },
+                drawMode: globe.gl.TRIANGLES,
+                elementBuffer: elementBuffer,
+                elementBufferIndexType: globe.gl.UNSIGNED_INT
+            },
+            drawOptionsPoint: {
+                drawRange: { count: 0, first: 0 },
+                drawMode: globe.gl.POINTS,
+            },
+        };
+        this.vao = this.textureDemTriangles.createVAO(bufferInfo.pos3dBufferInfo, bufferInfo.longLatBufferInfo);
+        this.bufferInfo = bufferInfo;
+        this.setZoom(5);
+    }
+    setUniform(key, value) {
+        if (this.uboTriangleStyle) {
+            this.uboTriangleStyle.updateSingle(key, value);
+        }
+        if (this.uboStringStyle) {
+            this.uboStringStyle.updateSingle(key, value);
+        }
+        this.globe?.DrawRender();
+    }
+    setZoom(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 bufferInfo = this.bufferInfo;
+        bufferInfo.drawOptions.drawRange.first = 0;
+        bufferInfo.drawOptions.drawRange.count = 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);
+    }
+    setShowDemPoints(show) {
+        this.showDemPoints = show;
+    }
+    draw3D() {
+        if (!this.globe || !this.textureDemTriangles || !this.vao || !this.bufferInfo)
+            return;
+        // @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);
+        }
+    }
+}