@pirireis/webglobeplugins 0.17.1 → 1.0.2

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

@@ -1,328 +0,0 @@
-import { TextureDemTriangles } from "./texture-dem-triangles";
-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++) {
-        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 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}: 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";
-            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;
-    _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();
-        this.textureDemTriangles.setDemTextures(demTextures, demTextureBBOX);
-        // 
-        // const baseZoom = 5;
-        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) {
-        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: 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 = antalya.indices.length + bigTriangle.indices.length;
-        bufferInfo.drawOptionsPoint.drawRange.first = 0;
-        bufferInfo.drawOptionsPoint.drawRange.count = (antalya.longLats.length + bigTriangle.longLats.length) / 2;
-    }
-    setShowDemPoints(show) {
-        this.showDemPoints = show;
-    }
-    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
-    };
-}

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

@@ -1,268 +0,0 @@
-import { createProgram } from "../../util/webglobjectbuilders";
-import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems/camerauniformblock";
-import { cartesian3DToGLPosition, } from "../../util/shaderfunctions/geometrytransformations";
-import { isPointInBBox } from "../../util/shaderfunctions/geometrytransformations";
-import { drawArrays } from "../../util/gl-util/draw-options/methods";
-import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
-import { WORLD_RADIUS_3D } from "../../Math/constants";
-import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
-const uniformBindingPoints = {
-    camera: 0,
-    style: 1,
-};
-const styleBlockManager = new UniformBlockManager('Style', [
-    { name: "u_color", type: "vec4", value: new Float32Array([0.0, 0.0, 0.0, 0.0]) },
-    { name: "u_pointSize", type: "float", value: new Float32Array([1.0]) },
-    { name: "u_opacity", type: "float", value: new Float32Array([1.0]) },
-], uniformBindingPoints.style);
-const vertexShaderSource = `#version 300 es
-#pragma vscode_glsllint_stage : vert
-
-precision highp float;
-precision highp sampler2DArray;
-
-${CameraUniformBlockString}
-
-${cartesian3DToGLPosition}
-in vec3 a_position;
-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 direction. 
-out vec4 v_color;
-
-
-${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_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 + altitude * 2.0);
-    gl_Position = cartesian3DToGLPosition(position);
-    gl_PointSize = 6.0; //u_pointSize;
-}
-`;
-const fragmentShaderSource = `#version 300 es
-#pragma vscode_glsllint_stage : frag
-
-precision highp float;
-in vec4 v_color;
-out vec4 outColor;
-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;
-    program;
-    // Later an injection will handle demTextures and demTextureBBOX
-    texture;
-    // demTextures: WebGLTexture[] = [];
-    // demTextureBBOX: Float32Array = new Float32Array(6 * 4); // 6 bounding boxes
-    cameraUniformBlock;
-    _publishedUBOs = [];
-    locations = {
-        attributes: {
-            a_position: -1,
-            a_xy: -1,
-        },
-        uniforms: {
-            u_demTexture: -1,
-            u_demTextureBBOX: -1,
-            u_textureDataCoverRatio: -1,
-            u_style: -1,
-            u_breakLoopIndex: -1,
-        }
-    };
-    constructor(globe) {
-        this.globe = globe;
-        this.gl = globe.gl;
-        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
-        this.cameraUniformBlock = CameraUniformBlockTotemCache.get(this.globe);
-        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_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);
-        // 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);
-        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
-        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
-        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
-        this.gl.texParameteri(this.gl.TEXTURE_2D_ARRAY, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
-        this.gl.bindTexture(this.gl.TEXTURE_2D_ARRAY, null);
-        this.texture = texture;
-    }
-    createVAO(pos3dBufferInfo, longLatBufferInfo) {
-        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_xy, 2);
-        this.gl.bindVertexArray(null);
-        return vao;
-    }
-    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);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-        // turn off premultiply alpha
-        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-        // 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 === 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.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") {
-        const ubo = styleBlockManager.createUBO(this.gl, bufferReadType);
-        this._publishedUBOs.push(ubo);
-        return ubo;
-    }
-    free() {
-        this.gl.deleteProgram(this.program);
-        this.gl.deleteTexture(this.texture);
-        this._publishedUBOs.forEach(ubo => ubo.free());
-        this._publishedUBOs = [];
-        CameraUniformBlockTotemCache.release(this.globe);
-    }
-    draw(vao, drawOptions, ubo) {
-        const gl = this.gl;
-        gl.useProgram(this.program);
-        this.cameraUniformBlock.bind(uniformBindingPoints.camera);
-        // TURN OFF flip y for texture
-        // gl.disable(gl.DEPTH_TEST);
-        // gl.depthMask(false);
-        // gl.depthRange(0.0, 0.01);  // Use near 1% of depth range
-        // Step 3: Optionally: Set depth func to ALWAYS (to ignore previous depth)
-        //    This ensures your new geometry passes depth test regardless of prior depth values
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.texture);
-        gl.uniform1i(this.locations.uniforms.u_demTexture, 0); // texture unit 0
-        // bind VAO and draw
-        gl.bindVertexArray(vao);
-        // bind UBO for style
-        ubo.bind();
-        drawOnTopBegin(gl);
-        drawArrays(gl, gl.POINTS, drawOptions);
-        drawOnTopEnd(gl);
-        gl.bindVertexArray(null);
-        gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
-        gl.useProgram(null);
-        ubo.unbind();
-        this.cameraUniformBlock.unbind(uniformBindingPoints.camera);
-    }
-    _getUniformBlockOffset(name) {
-        // hardcoded offsets based on std140 layout rules
-        const offsets = {
-            'u_color': 0,
-        };
-        const result = offsets[name];
-        if (result === undefined) {
-            throw new Error(`Unknown uniform block member: ${name}, names are: ${Object.keys(offsets).join(", ")}`);
-        }
-        return result;
-    }
-}
-function drawOnTopBegin(gl) {
-    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.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);
-    // You will need to experiment with these values!
-    // 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);
-}
-function drawOnTopEnd(gl) {
-    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);
-}