@pirireis/webglobeplugins 0.15.35 → 0.16.0

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

@@ -0,0 +1,207 @@
+import { createProgram } from "../../util/webglobjectbuilders";
+import { CameraUniformBlockTotemCache, CameraUniformBlockString, CameraUniformBlockTotem } from "../totems/camerauniformblock";
+import { mercatorXYToGLPosition, cartesian3DToGLPosition, R_3D, R } from "../../util/shaderfunctions/geometrytransformations";
+import { noRegisterGlobeProgramCache } from "../programcache";
+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 { Globe, BufferAndReadInfo, LongLat, DrawRangeIndexParams } from "../../types";
+
+
+
+const uniformBindingPoints = {
+    camera: 0,
+};
+
+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_longLat;
+uniform sampler2DArray u_demTexture; // <-- changed from array to single
+uniform vec4 u_demTextureBBOX[6];
+
+
+
+// TODO: light directioni 
+// out vec3 v_position;
+// out vec3 v_normal;
+// out vec2 v_textureCoord;
+
+out vec4 v_color;
+
+bool isPointInBBox(vec2 point, vec4 bbox) {
+    return point.x >= bbox.x && point.x <= bbox.z && point.y >= bbox.y && point.y <= bbox.w;
+}
+
+void main() {
+
+    float elevation = ${WORLD_RADIUS_3D}; // default elevation at sea level
+    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 / 1000.0); // color from blue to red based on altitude
+            // elevation += 1000.0 * float(i); // temporary for testing
+            break;
+     }
+    }
+    
+
+    vec3 position = a_position * elevation;
+    gl_Position = cartesian3DToGLPosition(position);
+    gl_PointSize = 1.0; // for POINTS rendering
+}
+`;
+
+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; // use the varying color from the vertex shader
+}
+`;
+
+
+export class TextureDemTriangles {
+    globe: Globe
+    gl: WebGL2RenderingContext;
+    program: WebGLProgram;
+    // Later an injection will handle demTextures and demTextureBBOX
+    texture: WebGLTexture;
+    // demTextures: WebGLTexture[] = [];
+    // demTextureBBOX: Float32Array = new Float32Array(6 * 4); // 6 bounding boxes
+
+
+    cameraUniformBlock: CameraUniformBlockTotem;
+
+
+    locations = {
+        attributes: {
+            a_position: -1,
+            a_longLat: -1,
+        },
+        uniforms: {
+            u_demTexture: -1 as unknown as WebGLUniformLocation,
+            u_demTextureBBOX: -1 as unknown as WebGLUniformLocation,
+        }
+    }        
+
+    constructor(globe: 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_longLat = this.gl.getAttribLocation(this.program, 'a_longLat');
+        // 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')!;
+
+
+        // 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);
+        // set texture parameters
+        const ext = this.gl.getExtension('OES_texture_float_linear');
+        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: BufferAndReadInfo, longLatBufferInfo: BufferAndReadInfo) {
+        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);
+        this.gl.bindVertexArray(null);
+        return vao;
+    }
+
+    setDemTextures(demTexturesData: number[][] | Array<Float32Array>, demTextureBBOX: Array<{northWest: LongLat, southEast: LongLat}>) {
+        // 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 === 5 * 5) { // <-- FIXED
+                gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, i, 5, 5, 1, gl.RED, gl.FLOAT,
+                     new Float32Array(data)); 
+            }
+        }
+
+
+
+        // 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];
+        }
+
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(this.program);
+        gl.uniform4fv(this.locations.uniforms.u_demTextureBBOX, bboxVec4Array);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+        gl.useProgram(currentProgram);
+    }
+
+
+
+    draw(vao: WebGLVertexArrayObject, drawOptions: DrawRangeIndexParams, ubo = null) {
+        const gl = this.gl;
+        console.log('Drawing TextureDemTriangles drawOptions:', drawOptions);
+        gl.useProgram(this.program);
+        this.cameraUniformBlock.bind(uniformBindingPoints.camera);
+
+
+        // TURN OFF flip y for texture
+        
+
+        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);
+        
+
+        drawArrays(gl, gl.POINTS, drawOptions);
+
+        gl.bindVertexArray(null);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+        gl.useProgram(null);
+        this.cameraUniformBlock.unbind(uniformBindingPoints.camera);
+    }
+}
+
+

package/programs/programcache.ts

@@ -0,0 +1,131 @@
+/**
+ * @module programcache
+ * @description This module provides a cache for programs. It is used to avoid creating the same program multiple times.
+ * 
+ * # globeProgramCache 
+ * Creates and registers programs to the globe. To the 1st object in the draw order.
+ * The programs are generally sets sets a global uniform block.
+ * 
+ * # glProgramCache
+ * Creates and manages programs that are not related to the globe but to the WebGL context.
+ * The programs created by are lightweight absraction of program logic with `constructer(gl)`.
+ * These programs are generally wrapped by another class with more functionality. 
+ */
+
+const globeProgramCache = (function () {
+
+    const cache = new Map();
+
+    function getProgram(globe: any, ProgramClass: any) {
+        if (!cache.has(globe)) { cache.set(globe, new Map()) };
+        if (!cache.get(globe).has(ProgramClass)) {
+            cache.get(globe).set(ProgramClass, {
+                program: new ProgramClass(),
+                count: 1
+            })
+            const firstObject = globe.DrawOrder.GetObj(0)
+            globe.api_RegisterPlugin(cache.get(globe).get(ProgramClass).program, firstObject);
+        } else {
+            cache.get(globe).get(ProgramClass).count++;
+        }
+        return cache.get(globe).get(ProgramClass).program;
+    };
+
+    function releaseProgram(globe: any, ProgramClass: any) {
+        if (cache.has(globe) && cache.get(globe).has(ProgramClass)) {
+            if (cache.get(globe).get(ProgramClass).count === 0) {
+                throw new Error("The program counter is already 0, cannot release program");
+            }
+            cache.get(globe).get(ProgramClass).count--;
+            if (cache.get(globe).get(ProgramClass).count === 0) {
+                globe.api_UnRegisterPlugin(cache.get(globe).get(ProgramClass).program.id); // it calls program.free()
+                cache.get(globe).delete(ProgramClass);
+            }
+        }
+    };
+
+    return Object.freeze({
+        getProgram,
+        releaseProgram
+    });
+
+})();
+
+
+const glProgramCache = (function () {
+
+    const cache = new Map();
+
+    function getProgram(gl: WebGL2RenderingContext | WebGLRenderingContext, ProgramClass: any) {
+        if (!cache.has(gl)) { cache.set(gl, new Map()) };
+        if (!cache.get(gl).has(ProgramClass)) {
+            cache.get(gl).set(ProgramClass, {
+                program: new ProgramClass(gl),
+                count: 1
+            })
+        } else {
+            cache.get(gl).get(ProgramClass).count++;
+        }
+        return cache.get(gl).get(ProgramClass).program;
+    };
+
+    function releaseProgram(gl: WebGL2RenderingContext | WebGLRenderingContext, ProgramClass: any) {
+        if (cache.has(gl) && cache.get(gl).has(ProgramClass)) {
+            if (cache.get(gl).get(ProgramClass).count === 0) {
+                throw new Error("The program counter is already 0, cannot release program");
+            }
+            cache.get(gl).get(ProgramClass).count--;
+            if (cache.get(gl).get(ProgramClass).count === 0) {
+                cache.get(gl).get(ProgramClass).program.free();
+                cache.get(gl).delete(ProgramClass);
+            }
+        }
+    };
+
+    return Object.freeze({
+        getProgram,
+        releaseProgram
+    });
+
+})();
+
+
+const noRegisterGlobeProgramCache = (function () {
+
+    const cache = new Map();
+
+    function getProgram(globe: any, ProgramClass: any) {
+        if (!cache.has(globe)) { cache.set(globe, new Map()) };
+        if (!cache.get(globe).has(ProgramClass)) {
+            cache.get(globe).set(ProgramClass, {
+                program: new ProgramClass(globe),
+                count: 1
+            })
+        } else {
+            cache.get(globe).get(ProgramClass).count++;
+        }
+        return cache.get(globe).get(ProgramClass).program;
+    };
+
+    function releaseProgram(globe: any, ProgramClass: any) {
+        if (cache.has(globe) && cache.get(globe).has(ProgramClass)) {
+            if (cache.get(globe).get(ProgramClass).count === 0) {
+                throw new Error("The program counter is already 0, cannot release program");
+            }
+            cache.get(globe).get(ProgramClass).count--;
+            if (cache.get(globe).get(ProgramClass).count === 0) {
+                cache.get(globe).get(ProgramClass).program.free();
+                cache.get(globe).delete(ProgramClass);
+            }
+        }
+    }
+
+
+    return Object.freeze({
+        getProgram,
+        releaseProgram
+    });
+
+})();
+
+export { globeProgramCache, glProgramCache, noRegisterGlobeProgramCache };

package/programs/rings/distancering/circleflatprogram.js

@@ -1,116 +1,138 @@
-"use strict";
-// TODO: Delete this file if it is not needed anymore.
-// import { createProgram, shaderfunctions } from "../../../util";
-// import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
-// import { noRegisterGlobeProgramCache, globeProgramCache } from "../../programcache";
-// const CIRCLE_EDGE_COUNT = 360;
-// const vertexShader = `#version 300 es ` +
-//     shaderfunctions.PI +
-//     shaderfunctions.R +
-//     shaderfunctions.POLE +
-//     CameraUniformBlockString +
-//     shaderfunctions.mercatorXYToGLPosition +
-//     shaderfunctions.longLatRadToMercator +
-//     shaderfunctions.longLatRadToCartesian3D +
-//     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
-//     shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
-//     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
-// uniform int compass;
-// uniform float circle_edge_count;
-// uniform float opacity;
-// in vec2 center;
-// in float radius;
-// in vec4 color;
-// in float flag;
-// out vec4 v_color;
-// out vec2 v_limp;
-// void main() {
-//     if( flag == 1.0 || radius == 0.0) return; // flag 1.0 is hide
-//     v_color = vec4(color.rgb, color.a * opacity);
-//     if ( gl_VertexID == 270 ) v_color.rgb += 0.2;
-//     float angle = 3.1415926535897932384626433832795 * 2.0 * (float(gl_VertexID) /  circle_edge_count);
-//     if ( is3D ){
-//             gl_Position = projection * view * vec4(
-//             circleLimpFromLongLatRadCenterCartesian3D( center, radius, angle) - translate, 1.0);
-//         v_limp = vec2(0.0, 0.0);
-//         return;
-//     }
-//     vec2 limp;
-//     if ( compass == 1 ){
-//         limp = circleLimpFromLongLatRadCenterMercatorCompass(center, radius, angle);
-//     } else {
-//         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius, angle);
-//     }   
-//     v_limp = limp;
-//     gl_Position = mercatorXYToGLPosition(limp);
-// }`;
-// const fragmentShader = `#version 300 es
-// precision highp float;` +
-//     shaderfunctions.POLE + `
-// in vec4 v_color;
-// in vec2 v_limp;
-// out vec4 outColor;
-// void main() {
-//     if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }
-//     outColor = v_color;
-// }`;
-// class Logic {
-//     constructor(globe) {
-//         this.globe = globe;
-//         this.gl = globe.gl;
-//         this.program = createProgram(this.gl, vertexShader, fragmentShader);
-//         { // bind positions so bufferManager can use them
-//             this.gl.bindAttribLocation(this.program, 0, "center");
-//             this.gl.bindAttribLocation(this.program, 1, "radius");
-//             this.gl.bindAttribLocation(this.program, 2, "color");
-//             this.gl.bindAttribLocation(this.program, 3, "flag");
-//         }
-//         this.cameraBlockBindingPoint = 0;
-//         this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
-//         const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
-//         this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
-//         this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
-//         this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
-//         this._circleEdgeCountLocation = this.gl.getUniformLocation(this.program, "circle_edge_count");
-//         this._circleEdgeCount = CIRCLE_EDGE_COUNT;
-//         this._compassmode = 1;
-//         this._opacity = 1.0;
-//         {
-//             const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
-//             this.gl.useProgram(this.program);
-//             this.gl.uniform1i(this._compassLocation, 1);
-//             this.gl.uniform1f(this._circleEdgeCountLocation, CIRCLE_EDGE_COUNT);
-//             this.gl.uniform1f(this._opacityLocation, 1.0);
-//             this.gl.useProgram(currentProgram);
-//         }
-//     }
-//     draw(attrBufferManager, compass, circleEdgeCount, opacity) {
-//         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this;
-//         gl.useProgram(program);
-//         cameraBlockTotem.bind(cameraBlockBindingPoint);
-//         attrBufferManager.bindCircleVAO();
-//         if (compass !== this._compassmode) {
-//             gl.uniform1i(this._compassLocation, compass);
-//             this._compassmode = compass;
-//         }
-//         if (opacity !== this._opacity) {
-//             gl.uniform1f(this._opacityLocation, opacity);
-//             this._opacity = opacity;
-//         }
-//         if (circleEdgeCount !== this._circleEdgeCount) {
-//             gl.uniform1f(this._circleEdgeCountLocation, circleEdgeCount);
-//             this._circleEdgeCount = circleEdgeCount;
-//         }
-//         gl.drawArraysInstanced(gl.LINE_LOOP, 0, circleEdgeCount, attrBufferManager.length);
-//         gl.bindVertexArray(null);
-//         cameraBlockTotem.unbind(cameraBlockBindingPoint);
-//     }
-//     free() {
-//         this.gl.deleteProgram(this.program);
-//         globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
-//     }
-// }
-// export const programCache = Object.freeze({
-//     getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
-//     releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
-// });
+// TODO: Delete this file if it is not needed anymore.
+
+// import { createProgram, shaderfunctions } from "../../../util";
+// import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
+// import { noRegisterGlobeProgramCache, globeProgramCache } from "../../programcache";
+
+// const CIRCLE_EDGE_COUNT = 360;
+
+// const vertexShader = `#version 300 es ` +
+//     shaderfunctions.PI +
+//     shaderfunctions.R +
+//     shaderfunctions.POLE +
+//     CameraUniformBlockString +
+//     shaderfunctions.mercatorXYToGLPosition +
+//     shaderfunctions.longLatRadToMercator +
+//     shaderfunctions.longLatRadToCartesian3D +
+//     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
+//     shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+//     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
+
+// uniform int compass;
+// uniform float circle_edge_count;
+
+// uniform float opacity;
+
+// in vec2 center;
+// in float radius;
+// in vec4 color;
+// in float flag;
+// out vec4 v_color;
+// out vec2 v_limp;
+
+// void main() {
+//     if( flag == 1.0 || radius == 0.0) return; // flag 1.0 is hide
+//     v_color = vec4(color.rgb, color.a * opacity);
+//     if ( gl_VertexID == 270 ) v_color.rgb += 0.2;
+//     float angle = 3.1415926535897932384626433832795 * 2.0 * (float(gl_VertexID) /  circle_edge_count);
+//     if ( is3D ){
+//             gl_Position = projection * view * vec4(
+//             circleLimpFromLongLatRadCenterCartesian3D( center, radius, angle) - translate, 1.0);
+//         v_limp = vec2(0.0, 0.0);
+//         return;
+//     }
+//     vec2 limp;
+//     if ( compass == 1 ){
+//         limp = circleLimpFromLongLatRadCenterMercatorCompass(center, radius, angle);
+//     } else {
+//         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius, angle);
+//     }   
+//     v_limp = limp;
+//     gl_Position = mercatorXYToGLPosition(limp);
+    
+// }`;
+
+// const fragmentShader = `#version 300 es
+// precision highp float;` +
+//     shaderfunctions.POLE + `
+
+// in vec4 v_color;
+// in vec2 v_limp;
+// out vec4 outColor;
+// void main() {
+//     if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }
+//     outColor = v_color;
+// }`;
+
+// class Logic {
+//     constructor(globe) {
+//         this.globe = globe;
+//         this.gl = globe.gl;
+//         this.program = createProgram(this.gl, vertexShader, fragmentShader);
+//         { // bind positions so bufferManager can use them
+//             this.gl.bindAttribLocation(this.program, 0, "center");
+//             this.gl.bindAttribLocation(this.program, 1, "radius");
+//             this.gl.bindAttribLocation(this.program, 2, "color");
+//             this.gl.bindAttribLocation(this.program, 3, "flag");
+//         }
+//         this.cameraBlockBindingPoint = 0;
+//         this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+//         const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+//         this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+
+//         this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+//         this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+//         this._circleEdgeCountLocation = this.gl.getUniformLocation(this.program, "circle_edge_count");
+//         this._circleEdgeCount = CIRCLE_EDGE_COUNT;
+//         this._compassmode = 1;
+//         this._opacity = 1.0;
+//         {
+//             const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+//             this.gl.useProgram(this.program);
+//             this.gl.uniform1i(this._compassLocation, 1);
+//             this.gl.uniform1f(this._circleEdgeCountLocation, CIRCLE_EDGE_COUNT);
+//             this.gl.uniform1f(this._opacityLocation, 1.0);
+
+//             this.gl.useProgram(currentProgram);
+//         }
+
+//     }
+
+
+//     draw(attrBufferManager, compass, circleEdgeCount, opacity) {
+//         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this;
+//         gl.useProgram(program);
+//         cameraBlockTotem.bind(cameraBlockBindingPoint);
+//         attrBufferManager.bindCircleVAO();
+
+//         if (compass !== this._compassmode) {
+//             gl.uniform1i(this._compassLocation, compass);
+//             this._compassmode = compass;
+//         }
+
+//         if (opacity !== this._opacity) {
+//             gl.uniform1f(this._opacityLocation, opacity);
+//             this._opacity = opacity;
+//         }
+
+//         if (circleEdgeCount !== this._circleEdgeCount) {
+//             gl.uniform1f(this._circleEdgeCountLocation, circleEdgeCount);
+//             this._circleEdgeCount = circleEdgeCount;
+//         }
+//         gl.drawArraysInstanced(gl.LINE_LOOP, 0, circleEdgeCount, attrBufferManager.length);
+//         gl.bindVertexArray(null);
+//         cameraBlockTotem.unbind(cameraBlockBindingPoint);
+//     }
+
+//     free() {
+//         this.gl.deleteProgram(this.program);
+//         globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+
+//     }
+// }
+
+
+// export const programCache = Object.freeze({
+//     getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+//     releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+// });