@pirireis/webglobeplugins 0.17.0 → 1.0.2

package/programs/totems/{canvas-webglobe-info.js → canvas-webglobe-info.ts}

@@ -1,4 +1,6 @@
-import { globeProgramCache } from "../programcache";
+import { globeProgramCache } from "../programcache";
+import { Globe } from "../../types"
+
 export const WebGlobeInfoUniformBlockString = `
 layout(std140) uniform WebGlobeInfo {
     vec2 canvas_resolution;
@@ -8,134 +10,147 @@ layout(std140) uniform WebGlobeInfo {
     float world_tilt;
     float earth_distance;
 }; 
-`;
-export default class CanvasWebGlobeInfo {
-    id;
-    description;
-    gl;
-    globe;
-    ubo;
-    traslateFloat32;
-    mapWHFloat32;
-    constructor() {
-        this.id = "CanvasWebGlobeInfo";
-        this.description =
-            `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` +
-                WebGlobeInfoUniformBlockString;
-        this.gl = null;
-        this.globe = null;
-        this.ubo = null;
-        this.traslateFloat32 = new Float32Array(3);
-        this.mapWHFloat32 = new Float32Array(2);
-    }
-    init(globe, gl) {
-        this.gl = gl;
-        this.globe = globe;
-        this.ubo = this._createUBO();
-        this.traslateFloat32 = new Float32Array(3);
-        this.mapWHFloat32 = new Float32Array(2);
-        this.setGeometry();
-        this.resize();
-    }
-    _createUBO() {
-        if (!this.gl)
-            return null;
-        const gl = this.gl;
-        const ubo = gl.createBuffer();
-        if (!ubo)
-            return null;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        gl.bufferData(gl.UNIFORM_BUFFER, 164, gl.STREAM_DRAW);
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-        return ubo;
-    }
-    resize() {
-        if (!this.gl || !this.globe || !this.ubo)
-            return;
-        const { gl, globe, ubo } = this;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        gl.bufferSubData(gl.UNIFORM_BUFFER, 152, new Float32Array([globe.api_ScrW(), globe.api_ScrH()]));
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-    setGeometry() {
-        if (!this.gl || !this.globe || !this.ubo)
-            return;
-        const { gl, globe, ubo } = this;
-        const is3D = globe.api_GetCurrentGeometry() === 0 ? 1 : 0;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        gl.bufferSubData(gl.UNIFORM_BUFFER, 140, new Float32Array([is3D]));
-    }
-    draw3D(projection, modelView, translate) {
-        if (!this.gl || !this.globe || !this.ubo)
-            return;
-        const { gl, traslateFloat32, ubo, mapWHFloat32, globe } = this;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        {
-            // view, projection, translate
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
-            traslateFloat32.set([translate.x, translate.y, translate.z], 0);
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
-        }
-        {
-            // zoom level
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 160, new Float32Array([globe.api_GetCurrentLODWithDecimal()]));
-        }
-        {
-            // mapWH
-            if (globe.api_GetCurrentGeometry() === 1) {
-                const { width, height } = globe.api_GetCurrentWorldWH();
-                mapWHFloat32.set([width, height]);
-                gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
-            }
-        }
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-    getUBO() {
-        return this.ubo;
-    }
-    bind(bindingPoint) {
-        if (!this.gl || !this.ubo)
-            return;
-        const { gl, ubo } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
-    }
-    unbind(bindingPoint) {
-        if (!this.gl)
-            return;
-        const { gl } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
-    }
-    free() {
-        if (!this.gl || !this.ubo)
-            return;
-        const { gl, ubo } = this;
-        gl.deleteBuffer(ubo);
-    }
-    readBuffer() {
-        if (!this.gl || !this.ubo)
-            return null;
-        const result = new Float32Array(41);
-        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, this.ubo);
-        this.gl.getBufferSubData(this.gl.UNIFORM_BUFFER, 0, result);
-        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, null);
-        return {
-            view: result.slice(0, 16),
-            projection: result.slice(16, 32),
-            translate: result.slice(32, 35),
-            is3D: result[35],
-            mapWH: result.slice(36, 38),
-            screenWH: result.slice(38, 40),
-            z_level: result[40],
-        };
-    }
-}
-export const CanvasWebGlobeInfoCache = Object.freeze({
-    get: (globe) => {
-        return globeProgramCache.getProgram(globe, CanvasWebGlobeInfo);
-    },
-    release: (globe) => {
-        return globeProgramCache.releaseProgram(globe, CanvasWebGlobeInfo);
-    },
-});
+`;
+
+
+export default class CanvasWebGlobeInfo {
+    id: string;
+    description: string;
+    gl: WebGL2RenderingContext | null;
+    globe: Globe | null;
+    ubo: WebGLBuffer | null;
+    traslateFloat32: Float32Array;
+    mapWHFloat32: Float32Array;
+
+    constructor() {
+        this.id = "CanvasWebGlobeInfo";
+        this.description =
+            `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` +
+            WebGlobeInfoUniformBlockString;
+        this.gl = null;
+        this.globe = null;
+        this.ubo = null;
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
+    }
+
+    init(globe: Globe, gl: WebGL2RenderingContext) {
+        this.gl = gl;
+        this.globe = globe;
+        this.ubo = this._createUBO();
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
+        this.setGeometry();
+        this.resize();
+    }
+
+    _createUBO(): WebGLBuffer | null {
+        if (!this.gl) return null;
+        const gl = this.gl;
+        const ubo = gl.createBuffer();
+        if (!ubo) return null;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferData(gl.UNIFORM_BUFFER, 164, gl.STREAM_DRAW);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return ubo;
+    }
+
+    resize() {
+        if (!this.gl || !this.globe || !this.ubo) return;
+        const { gl, globe, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(
+            gl.UNIFORM_BUFFER,
+            152,
+            new Float32Array([globe.api_ScrW(), globe.api_ScrH()])
+        );
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    setGeometry() {
+        if (!this.gl || !this.globe || !this.ubo) return;
+        const { gl, globe, ubo } = this;
+        const is3D = globe.api_GetCurrentGeometry() === 0 ? 1 : 0;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 140, new Float32Array([is3D]));
+    }
+
+    draw3D(projection: Float32Array, modelView: Float32Array, translate: { x: number; y: number; z: number }) {
+        if (!this.gl || !this.globe || !this.ubo) return;
+        const { gl, traslateFloat32, ubo, mapWHFloat32, globe } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        {
+            // view, projection, translate
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
+            traslateFloat32.set([translate.x, translate.y, translate.z], 0);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
+        }
+        {
+            // zoom level
+            gl.bufferSubData(
+                gl.UNIFORM_BUFFER,
+                160,
+                new Float32Array([globe.api_GetCurrentLODWithDecimal()])
+            );
+        }
+        {
+            // mapWH
+            if (globe.api_GetCurrentGeometry() === 1) {
+                const { width, height } = globe.api_GetCurrentWorldWH();
+                mapWHFloat32.set([width, height]);
+                gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
+            }
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    getUBO(): WebGLBuffer | null {
+        return this.ubo;
+    }
+
+    bind(bindingPoint: number) {
+        if (!this.gl || !this.ubo) return;
+        const { gl, ubo } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
+    }
+
+    unbind(bindingPoint: number) {
+        if (!this.gl) return;
+        const { gl } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
+    }
+
+    free() {
+        if (!this.gl || !this.ubo) return;
+        const { gl, ubo } = this;
+        gl.deleteBuffer(ubo);
+    }
+
+    readBuffer() {
+        if (!this.gl || !this.ubo) return null;
+        const result = new Float32Array(41);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, this.ubo);
+        this.gl.getBufferSubData(this.gl.UNIFORM_BUFFER, 0, result);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, null);
+        return {
+            view: result.slice(0, 16),
+            projection: result.slice(16, 32),
+            translate: result.slice(32, 35),
+            is3D: result[35],
+            mapWH: result.slice(36, 38),
+            screenWH: result.slice(38, 40),
+            z_level: result[40],
+        };
+    }
+}
+
+export const CanvasWebGlobeInfoCache = Object.freeze({
+    get: (globe: Globe) => {
+        return globeProgramCache.getProgram(globe, CanvasWebGlobeInfo);
+    },
+    release: (globe: Globe) => {
+        return globeProgramCache.releaseProgram(globe, CanvasWebGlobeInfo);
+    },
+});

package/programs/totems/dem-textures-manager.ts

@@ -0,0 +1,368 @@
+import { mergeMeshes, MergedTilesInfo } from "../../Math/tessellation/tile-merger"
+import { Globe, DrawnTileInfo } from "../../types";
+import { globeBBoxToXYBBOX } from "../../Math/methods";
+import { CameraTotemAttachmentInterface } from "./camera-totem-attactment-interface";
+import { noRegisterGlobeProgramCache } from "../programcache";
+import { CameraUniformBlockTotem, CameraUniformBlockTotemCache } from "./camerauniformblock";
+
+export const DEM_TEXTURE_BLOCK_STRING = `
+layout(std140) uniform DemTextureUniformBlock {
+    vec4 u_demTextureBBOX[6]; // 96 bytes
+    vec4 u_textureDataCoverRatio[6]; // 96 bytes
+    vec2 u_textureResolution; // 8 bytes
+    int u_breakLoopIndex; // 4 bytes
+};  
+uniform sampler2DArray u_demTexture;
+`;
+
+
+
+
+const MAXLAYERS = 6;
+// Size calculation:
+// BBOX: 6 * 16 bytes = 96
+// CoverRatio: 6 * 16 bytes = 96
+// Resolution: 8 bytes (offset 192)
+// BreakLoopIndex: 4 bytes (offset 200)
+// Total used: 204 bytes.
+// std140 blocks are typically padded to 16 bytes alignment -> 208 bytes.
+// 208 bytes / 4 bytes per float = 52 floats.
+const uniformBlockData = new Float32Array(52);
+
+
+function drawnedTilesHash(drawnTiles: DrawnTileInfo[]): number {
+    let hash = 0;
+    for (const tile of drawnTiles) {
+        // Combine tile coordinates into a unique value
+        const val = (tile.level << 20) | (tile.x << 10) | tile.y;
+        hash = ((hash << 5) - hash) + val;
+        hash = hash | 0; // Convert to 32-bit integer
+    }
+    return hash;
+}
+
+
+function resCalculation(sourceResolution: number, mergeCount: number): number {
+    return sourceResolution + (mergeCount - 1) * (sourceResolution - 1);
+}
+
+export class DemTextureManager implements CameraTotemAttachmentInterface {
+    private _globe: Globe;
+    private _mergeParameters = {
+        mergeCount: 20,
+        tileDimensionLength: 5,
+        processLimit: 6
+    }
+
+    private STOP: boolean = false;
+
+    private mergedData: MergedTilesInfo[] = [];
+    private uniformBuffer: WebGLBuffer | null = null;
+    private demTexture: WebGLTexture | null = null;
+    private textureWidth: number;
+    private textureHeight: number;
+    private cameraBlockTotem: CameraUniformBlockTotem = null as any;
+
+    private tilesHash: number = 0;
+    private registry: Set<{ setMergedTiles(tiles: MergedTilesInfo[]): void }> = new Set();
+
+
+    constructor(globe: Globe, { mergeCount = 20, tileDimensionLength = 5, processLimit = 6 }: { mergeCount?: number, tileDimensionLength?: number, processLimit?: number } = {}) {
+        this._globe = globe;
+        this._mergeParameters.mergeCount = mergeCount;
+        this._mergeParameters.tileDimensionLength = tileDimensionLength;
+        this._mergeParameters.processLimit = processLimit;
+
+
+
+        this.textureWidth = this.textureHeight = resCalculation(tileDimensionLength, mergeCount);
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(this._globe);
+        this.cameraBlockTotem.registerAttachment(this);
+
+        // Initialize uniform data buffer
+        this.initializeUniformBlock();
+        this.initializeTextureArray();
+    }
+
+    private initializeUniformBlock() {
+        const gl = this._globe.gl as WebGL2RenderingContext;
+        if (!gl) return;
+
+        // Create uniform buffer
+        this.uniformBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.uniformBuffer);
+        // Allocate buffer with correct size (52 floats * 4 bytes)
+        gl.bufferData(gl.UNIFORM_BUFFER, uniformBlockData.byteLength, gl.STREAM_COPY);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    private initializeTextureArray() {
+        const gl = this._globe.gl as WebGL2RenderingContext;
+        if (!gl) return;
+
+        // Create texture array
+        this.demTexture = gl.createTexture();
+
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.demTexture);
+        // Calculate correct size: tileDimensionLength + (mergeCount - 1) * (tileDimensionLength - 1)
+        // For tileDimensionLength=5, mergeCount=8: 5 + 7*4 = RESOLUTION
+        // gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.R32F, this.textureWidth, this.textureHeight, 6);
+
+        // // Allocate storage for texture array
+        gl.texImage3D(
+            gl.TEXTURE_2D_ARRAY,
+            0,                          // mip level
+            gl.R32F,                    // internal format (32-bit float for DEM data)
+            this.textureWidth,
+            this.textureHeight,
+            MAXLAYERS,            // number of layers
+            0,                          // border
+            gl.RED,                     // format
+            gl.FLOAT,                   // type
+            null                        // data (null to allocate)
+        );
+        const ext = gl.getExtension('OES_texture_float_linear');
+        if (!ext) {
+            throw new Error("OES_texture_float_linear extension is supported.");
+        }
+        // Set texture parameters
+        gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+    }
+
+
+    assignBindingPoint(program: WebGLProgram, bindingPoint: number): boolean {
+        const gl = this._globe.gl as WebGL2RenderingContext;
+        if (!gl || !this.uniformBuffer || !program) {
+            console.warn('Cannot bind uniform block: missing GL context, buffer, or program');
+            return false;
+        }
+
+        const uniformBlockIndex = gl.getUniformBlockIndex(program, 'DemTextureUniformBlock');
+        if (uniformBlockIndex === gl.INVALID_INDEX) {
+            // Uniform block might be optimized out - this is not necessarily an error
+            console.warn(`Uniform block 'DemTextureUniformBlock' not found in program (may be optimized out)`);
+            return false;
+        }
+
+        gl.uniformBlockBinding(program, uniformBlockIndex, bindingPoint);
+        return true;
+    }
+
+
+    register(obj: { setMergedTiles(tiles: MergedTilesInfo[]): void }) {
+        this.registry.add(obj);
+        obj.setMergedTiles(this.mergedData);
+    }
+
+    unregister(obj: { setMergedTiles(tiles: MergedTilesInfo[]): void }) {
+        this.registry.delete(obj);
+    }
+
+
+
+
+    update() {
+        if (this.STOP) return;
+        const gl = this._globe.gl as WebGL2RenderingContext;
+        const tilesMetaData = this._globe.api_GetVisibleTilesInfo() as DrawnTileInfo[];
+        const newHash = drawnedTilesHash(tilesMetaData);
+        if (this.tilesHash === newHash) {
+            return; // No change in drawn tiles, skip update
+        }
+        this.tilesHash = newHash;
+        this.mergedData = mergeMeshes(
+            tilesMetaData,
+            this._mergeParameters.mergeCount,
+            this._mergeParameters.tileDimensionLength,
+            this._mergeParameters.processLimit,
+            this._globe
+        );
+
+        // Bind texture before updating
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.demTexture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        // turn off premultiply alpha
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+
+        for (let i = 0; i < this.mergedData.length; i++) {
+            const { mesh, bbox, coverRatio } = this.mergedData[i];
+
+            gl.texSubImage3D(
+                gl.TEXTURE_2D_ARRAY,
+                0,                      // mip level
+                0,                      // xoffset
+                0,                      // yoffset
+                i,                      // zoffset (layer index)
+                this.textureWidth,
+                this.textureHeight,
+                1,                      // depth (1 layer)
+                gl.RED,
+                gl.FLOAT,
+                mesh
+            );
+
+            const bboxXY = globeBBoxToXYBBOX(bbox);
+            uniformBlockData[i * 4 + 0] = bboxXY.ll[0];
+            uniformBlockData[i * 4 + 1] = bboxXY.ll[1];
+            uniformBlockData[i * 4 + 2] = bboxXY.ur[0];
+            uniformBlockData[i * 4 + 3] = bboxXY.ur[1];
+
+            uniformBlockData[24 + i * 4 + 0] = coverRatio.x;
+            uniformBlockData[24 + i * 4 + 1] = coverRatio.y;
+        }
+
+        // Set resolution (offset 192 bytes -> index 48)
+        uniformBlockData[48] = this.textureWidth;
+        uniformBlockData[49] = this.textureHeight;
+
+        // Set break loop index (offset 200 bytes -> index 50)
+        uniformBlockData[50] = this.mergedData.length;
+
+        // Unbind texture after updating
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.uniformBuffer);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, uniformBlockData);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+
+        for (const obj of this.registry) {
+            obj.setMergedTiles(this.mergedData);
+        }
+    }
+
+
+
+    bindData(textureUnit: number, bindingPoint: number) {
+        const gl = this._globe.gl as WebGL2RenderingContext;
+        if (!gl) return;
+
+        // Bind uniform buffer
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, this.uniformBuffer);
+
+
+        // Bind texture array
+        gl.activeTexture(gl.TEXTURE0 + textureUnit);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.demTexture);
+
+
+    }
+
+
+    find(x: number, y: number, zoom: number): DrawnTileInfo | null {
+        for (const data of this._globe.api_GetVisibleTilesInfo() as DrawnTileInfo[]) {
+            if (data.x === x && data.y === y && data.level === zoom) {
+                return data;
+            }
+        }
+        return null;
+    }
+
+
+    showMergedDataInfo(zoomLevel: number) {
+
+
+        if (!this.mergedData[zoomLevel]) {
+            console.log(`No merged data at zoom level ${zoomLevel}`);
+            return;
+        }
+        const { textureHeight, textureWidth } = this;
+        const { mesh, bbox, coverRatio } = this.mergedData[zoomLevel];
+
+        const result = [];
+        const xLength = Math.ceil(mesh.length / textureHeight * coverRatio.x);
+        const yLength = Math.ceil(mesh.length / textureWidth * coverRatio.y);
+
+        for (let y = 0; y < yLength; y++) {
+            const row = [];
+            for (let x = 0; x < xLength; x++) {
+                const index = y * textureWidth + x;
+                const value = mesh[index];
+                row.push(value);
+            }
+            result.push(new Float32Array(row));
+        }
+
+        return { mesh: result, bbox: bbox, coverRatio: coverRatio };
+    }
+
+
+
+    unbindData(textureUnit: number, bindingPoint: number) {
+        const gl = this._globe.gl as WebGL2RenderingContext;
+        if (!gl) return;
+
+        // Unbind texture array
+        gl.activeTexture(gl.TEXTURE0 + textureUnit);
+
+        // Unbind
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+
+        // call this right after drawing
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
+    }
+
+
+
+
+
+    get(): MergedTilesInfo[] {
+        return this.mergedData;
+    }
+
+    getBBoxes(): { minX: number, minY: number, maxX: number, maxY: number, zoom: number }[] {
+        const ressult: { minX: number, minY: number, maxX: number, maxY: number, zoom: number }[] = new Array(this.mergedData.length);
+        for (let i = 0; i < this.mergedData.length; i++) {
+            const { bbox, zoom } = this.mergedData[i];
+            ressult[i] = {
+                minX: bbox.ll.x,
+                minY: bbox.ll.y,
+                maxX: bbox.ur.x,
+                maxY: bbox.ur.y,
+                zoom
+            };
+        }
+        return ressult;
+    }
+
+    free() {
+        const gl = this._globe.gl as WebGL2RenderingContext;
+        this.cameraBlockTotem.unregisterAttachment(this);
+        if (gl) {
+            if (this.uniformBuffer) {
+                gl.deleteBuffer(this.uniformBuffer);
+                this.uniformBuffer = null;
+            }
+            if (this.demTexture) {
+                gl.deleteTexture(this.demTexture);
+                this.demTexture = null;
+            }
+        }
+    }
+}
+
+
+export const DemTextureManagerCache = Object.freeze({
+    get: (globe: Globe) => {
+        const result = noRegisterGlobeProgramCache.getProgram(globe, DemTextureManager)
+        window.demManager = result;
+        return result;
+    },
+
+    release: (globe: Globe) => {
+        noRegisterGlobeProgramCache.releaseProgram(globe, DemTextureManager);
+    }
+
+});
+
+
+// declare demManager window global
+declare global {
+    interface Window {
+        demManager: DemTextureManager;
+    }
+}