@pirireis/webglobeplugins 1.1.23 → 1.2.0

package/altitude-locator/plugin.js

@@ -7,7 +7,7 @@ import { BufferOrchestrator, BufferManager } from "../util/account";
 import { PickerDisplayer } from '../util/picking/picker-displayer';
 import { wgs84ToCartesian3d, wgs84ToMercator } from '../Math/methods';
 import { constraintFloat, opacityCheck } from '../util/check/typecheck';
-import { createBufferAndReadInfo } from '../util/gl-util/buffer/attribute-loader';
+import { AttributeLoader } from '../util/gl-util/buffer/attribute-loader';
 import { CameraUniformBlockTotemCache } from '../programs/totems/camerauniformblock';
 /**
  * is used with depth we can create a line from surface to the point.
@@ -76,16 +76,16 @@ class PointGlowLineToEarthPlugin {
         _glowPointWrapper.program = ElementPointGlowProgramCache.get(globe);
         _lineProgramWrapper.program = LineOnGlobeCache.get(globe);
         this._pickerDisplayer = new PickerDisplayer(globe);
-        const obj = (key) => key === null ? null : createBufferAndReadInfo(this._bufferManagersMap.get(key).bufferManager.buffer);
-        _pickableWrapper.vao = _pickableWrapper.program.createVAO(createBufferAndReadInfo(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0), createBufferAndReadInfo(this._bufferManagersMap.get('pos2D').bufferManager.buffer), createBufferAndReadInfo(this._bufferManagersMap.get('rgba').bufferManager.buffer, 8 * 4, 0), createBufferAndReadInfo(this._bufferManagersMap.get('size').bufferManager.buffer));
-        _pickableWrapper.vaoLine = _pickableWrapper.program.createVAO(...['pos3D', 'pos2D', 'rgba', null].map(obj));
-        _pickableWrapper.vaoHoverPoint = _pickableWrapper.program.createVAO(createBufferAndReadInfo(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0), createBufferAndReadInfo(this._bufferManagersMap.get('pos2D').bufferManager.buffer), null, createBufferAndReadInfo(this._bufferManagersMap.get('size').bufferManager.buffer));
-        _pickableWrapper.vaoHoverLine = _pickableWrapper.program.createVAO(...['pos3D', 'pos2D', null, null].map(obj));
-        _glowPointWrapper.vao = _glowPointWrapper.program.createVAO(createBufferAndReadInfo(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0), createBufferAndReadInfo(this._bufferManagersMap.get('pos2D').bufferManager.buffer), null, createBufferAndReadInfo(this._bufferManagersMap.get('size').bufferManager.buffer));
-        // _lineProgramWrapper.vao = _lineProgramWrapper.program.createVAO(
+        const obj = (key) => key === null ? null : AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get(key).bufferManager.buffer);
+        _pickableWrapper.vao = _pickableWrapper.program.createAttributeLoader(AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0), AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('pos2D').bufferManager.buffer), AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('rgba').bufferManager.buffer, 8 * 4, 0), AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('size').bufferManager.buffer));
+        _pickableWrapper.vaoLine = _pickableWrapper.program.createAttributeLoader(...['pos3D', 'pos2D', 'rgba', null].map(obj));
+        _pickableWrapper.vaoHoverPoint = _pickableWrapper.program.createAttributeLoader(AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0), AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('pos2D').bufferManager.buffer), null, AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('size').bufferManager.buffer));
+        _pickableWrapper.vaoHoverLine = _pickableWrapper.program.createAttributeLoader(...['pos3D', 'pos2D', null, null].map(obj));
+        _glowPointWrapper.vao = _glowPointWrapper.program.createAttributeLoader(AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0), AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('pos2D').bufferManager.buffer), null, AttributeLoader.createBufferAndReadInfo(this._bufferManagersMap.get('size').bufferManager.buffer));
+        // _lineProgramWrapper.vao = _lineProgramWrapper.program.createAttributeLoader(
         //     ...[null, 'pos3D', null, 'reverse3D', null, null, "rgba"].map(obj)
         // );
-        // _pickableWrapper.vaoRev = _pickableWrapper.program.createVAO(
+        // _pickableWrapper.vaoRev = _pickableWrapper.program.createAttributeLoader(
         //     ...['reverse3D', 'pos2D', 'rgba', 'size'].map(obj)
         // );
         _pickableWrapper.ubo = _pickableWrapper.program.createUBO();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "1.1.23",
+    "version": "1.2.0",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT",

package/programs/line-on-globe/linestrip/linestrip.js

@@ -2,7 +2,7 @@ import { createProgram } from "../../../util/webglobjectbuilders";
 import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../../totems/index";
 import { cartesian3DToGLPosition, mercatorXYToGLPosition, } from "../../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../../programcache";
-import { attributeLoader } from "../../../util/gl-util/buffer/attribute-loader";
+import { AttributeLoader } from "../../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../../util/gl-util/uniform-block/manager";
 import { drawArrays } from "../../../util/gl-util/draw-options/methods";
 const ESCAPE_VALUE = -1;
@@ -100,17 +100,14 @@ export class LineProgram {
         this._ubosPublished.push(ubo);
         return ubo;
     }
-    createVAO(position3D, position2D, color) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        attributeLoader(gl, position3D, 0, 3);
-        attributeLoader(gl, position2D, 1, 2);
-        attributeLoader(gl, color, 2, 4, { escapeValues: [ESCAPE_VALUE, ESCAPE_VALUE, ESCAPE_VALUE, ESCAPE_VALUE] });
-        gl.bindVertexArray(null);
-        return vao;
+    createAttributeLoader(position3D, position2D, color) {
+        return new AttributeLoader(this.gl, [
+            { bufferAndReadInfo: position3D, index: 0, size: 3, options: { escapeValues: [NaN, NaN, NaN] } },
+            { bufferAndReadInfo: position2D, index: 1, size: 2, options: { escapeValues: [NaN, NaN] } },
+            { bufferAndReadInfo: color, index: 2, size: 4, options: { escapeValues: [ESCAPE_VALUE, ESCAPE_VALUE, ESCAPE_VALUE, ESCAPE_VALUE] } },
+        ]);
     }
-    draw(vao, drawOptions, opacity = 1, flexibleUBO = null) {
+    draw(attributeLoader, drawOptions, opacity = 1, flexibleUBO = null) {
         const { gl, program, cameraBlockTotem } = this;
         gl.useProgram(program);
         if (opacity !== this._opacity.value) {
@@ -120,10 +117,10 @@ export class LineProgram {
         const ubo = flexibleUBO || this._defaultFlexibleUBO;
         cameraBlockTotem.bind(uniformBindingPoints.camera);
         ubo.bind();
-        gl.bindVertexArray(vao);
+        attributeLoader.bind();
         // drawArrays(gl, gl.POINTS, drawOptions);
         drawArrays(gl, gl.LINE_STRIP, drawOptions);
-        gl.bindVertexArray(null);
+        attributeLoader.unbind();
         ubo.unbind();
         cameraBlockTotem.unbind(uniformBindingPoints.camera);
     }

package/programs/line-on-globe/naive-accurate-flexible.js

@@ -2,7 +2,7 @@ import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totem
 import { slerp, POLE, R_3D, mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
 import { createProgram } from "../../util/webglobjectbuilders";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
+import { AttributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
 import { drawInstanced } from "../../util/gl-util/draw-options/methods";
 const GLOBE_MIDPOINT_COUNT = 30;
@@ -93,7 +93,6 @@ void main() {
 }
 `;
 class Logic {
-    vaosPublished = [];
     isFreed = false;
     globe;
     gl;
@@ -135,11 +134,11 @@ class Logic {
      * @param opacity - Opacity value (0-1)
      * @param flexibleUBO - Optional flexible uniform buffer object
      */
-    draw(vao, drawOptions, opacity, flexibleUBO = null) {
+    draw(attributeLoader, drawOptions, opacity, flexibleUBO = null) {
         const { gl, program, globe, cameraBlockTotem, _defaultFlexibleUBO } = this;
         gl.useProgram(program);
         cameraBlockTotem.bind(uniformBindingPoints.camera);
-        gl.bindVertexArray(vao);
+        attributeLoader.bind();
         if (opacity !== this._lastOpacity) {
             gl.uniform1f(this._opacityLocation, opacity);
             this._lastOpacity = opacity;
@@ -149,7 +148,7 @@ class Logic {
         ubo.bind();
         drawInstanced(gl, gl.LINE_STRIP, drawOptions, vertexCount);
         ubo.unbind();
-        gl.bindVertexArray(null);
+        attributeLoader.unbind();
         cameraBlockTotem.unbind(uniformBindingPoints.camera);
     }
     createUBO(bufferReadType = "STATIC_DRAW") {
@@ -162,32 +161,23 @@ class Logic {
         ]));
         return ubo;
     }
-    createVAO(startPotision2DBufferObj, startPotision3DBufferObj, endPosition2DBufferObj, endPosition3DBufferObj, dashRatioBufferObj, dashOpacityBufferObj, colorBufferObj) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
-        if (!vao) {
-            throw new Error("Failed to create vertex array object");
-        }
-        gl.bindVertexArray(vao);
+    createAttributeLoader(startPotision2DBufferObj, startPotision3DBufferObj, endPosition2DBufferObj, endPosition3DBufferObj, dashRatioBufferObj, dashOpacityBufferObj, colorBufferObj) {
         const divisor = 1;
-        attributeLoader(gl, startPotision2DBufferObj, 0, 2, { divisor });
-        attributeLoader(gl, startPotision3DBufferObj, 1, 3, { divisor });
-        attributeLoader(gl, endPosition2DBufferObj, 2, 2, { divisor });
-        attributeLoader(gl, endPosition3DBufferObj, 3, 3, { divisor });
-        attributeLoader(gl, dashRatioBufferObj, 4, 1, { divisor, escapeValues: [escapeValue] });
-        attributeLoader(gl, dashOpacityBufferObj, 5, 1, { divisor, escapeValues: [escapeValue] });
-        attributeLoader(gl, colorBufferObj, 6, 4, { divisor, escapeValues: [escapeValue, escapeValue, escapeValue, escapeValue] });
-        gl.bindVertexArray(null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        this.vaosPublished.push(vao);
-        return vao;
+        return new AttributeLoader(this.gl, [
+            { bufferAndReadInfo: startPotision2DBufferObj, index: 0, size: 2, options: { divisor } },
+            { bufferAndReadInfo: startPotision3DBufferObj, index: 1, size: 3, options: { divisor } },
+            { bufferAndReadInfo: endPosition2DBufferObj, index: 2, size: 2, options: { divisor } },
+            { bufferAndReadInfo: endPosition3DBufferObj, index: 3, size: 3, options: { divisor } },
+            { bufferAndReadInfo: dashRatioBufferObj, index: 4, size: 1, options: { divisor, escapeValues: [escapeValue] } },
+            { bufferAndReadInfo: dashOpacityBufferObj, index: 5, size: 1, options: { divisor, escapeValues: [escapeValue] } },
+            { bufferAndReadInfo: colorBufferObj, index: 6, size: 4, options: { divisor, escapeValues: [escapeValue, escapeValue, escapeValue, escapeValue] } }
+        ]);
     }
     free() {
         if (this.isFreed)
             return;
         CameraUniformBlockTotemCache.release(this.globe);
         this.gl.deleteProgram(this.program);
-        this.vaosPublished.forEach((vao) => this.gl.deleteVertexArray(vao));
         this._ubosPublished.forEach((ubo) => ubo.free());
         this.isFreed = true;
     }

package/programs/picking/pickable-polygon-renderer.js

@@ -3,7 +3,7 @@ import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totem
 import { mercatorXYToGLPosition, cartesian3DToGLPosition, R_3D, R } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { drawArrays, DrawRangeIndexParams } from "../../util/gl-util/draw-options/methods";
-import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
+import { AttributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
 const uniformBindingPoints = {
     camera: 0,
@@ -139,17 +139,13 @@ class PointOnGlobeProgram {
         const ubo = uniformBlockManager.createUBO(this.gl);
         return ubo;
     }
-    createVAO(pos3DBufferObj, pos2DBufferObj, rgbaBufferObj, sizeBufferObj) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        attributeLoader(gl, pos3DBufferObj, 0, 3);
-        attributeLoader(gl, pos2DBufferObj, 1, 2);
-        attributeLoader(gl, rgbaBufferObj, 2, 4, { escapeValues: [-1, -1, -1, -1] });
-        attributeLoader(gl, sizeBufferObj, 3, 1, { escapeValues: [-1] });
-        gl.bindVertexArray(null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        return vao;
+    createAttributeLoader(pos3DBufferObj, pos2DBufferObj, rgbaBufferObj, sizeBufferObj) {
+        return new AttributeLoader(this.gl, [
+            { bufferAndReadInfo: pos3DBufferObj, index: 0, size: 3 },
+            { bufferAndReadInfo: pos2DBufferObj, index: 1, size: 2 },
+            { bufferAndReadInfo: rgbaBufferObj, index: 2, size: 4, options: { escapeValues: [-1, -1, -1, -1] } },
+            { bufferAndReadInfo: sizeBufferObj, index: 3, size: 1, options: { escapeValues: [-1] } }
+        ]);
     }
     /**
      *
@@ -181,4 +177,4 @@ const PickableRendererProgramCache = Object.freeze({
     get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, PointOnGlobeProgram),
     release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, PointOnGlobeProgram)
 });
-export { PickableRendererProgramCache };
+// export { PickableRendererProgramCache };

package/programs/picking/pickable-renderer.js

@@ -3,7 +3,7 @@ import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totem
 import { mercatorXYToGLPosition, cartesian3DToGLPosition, R_3D, R } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { drawArrays } from "../../util/gl-util/draw-options/methods"; //DrawRangeIndexParams 
-import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
+import { AttributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
 const uniformBindingPoints = {
     camera: 0,
@@ -139,34 +139,30 @@ class PointOnGlobeProgram {
         const ubo = uniformBlockManager.createUBO(this.gl);
         return ubo;
     }
-    createVAO(pos3DBufferObj, pos2DBufferObj, rgbaBufferObj, sizeBufferObj) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        attributeLoader(gl, pos3DBufferObj, 0, 3);
-        attributeLoader(gl, pos2DBufferObj, 1, 2);
-        attributeLoader(gl, rgbaBufferObj, 2, 4, { escapeValues: [-1, -1, -1, -1] });
-        attributeLoader(gl, sizeBufferObj, 3, 1, { escapeValues: [-1] });
-        gl.bindVertexArray(null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        return vao;
+    createAttributeLoader(pos3DBufferObj, pos2DBufferObj, rgbaBufferObj, sizeBufferObj) {
+        return new AttributeLoader(this.gl, [
+            { bufferAndReadInfo: pos3DBufferObj, index: 0, size: 3 },
+            { bufferAndReadInfo: pos2DBufferObj, index: 1, size: 2 },
+            { bufferAndReadInfo: rgbaBufferObj, index: 2, size: 4, options: { escapeValues: [-1, -1, -1, -1] } },
+            { bufferAndReadInfo: sizeBufferObj, index: 3, size: 1, options: { escapeValues: [-1] } }
+        ]);
     }
     /**
      *
      * @param {vertexArrayObject} vao
      * @param {DrawRangeIndexParams} drawOptions
      */
-    draw(vao, drawOptions, ubo = null) {
+    draw(attibuteLoader, drawOptions, ubo = null) {
         const { gl, program } = this;
         gl.useProgram(program);
-        gl.bindVertexArray(vao);
+        attibuteLoader.bind();
         this.cameraBlockTotem.bind(uniformBindingPoints.camera);
         ubo = ubo || this._defaultUBO;
         ubo.bind();
         drawArrays(gl, gl.POINTS, drawOptions);
         ubo.unbind();
         this.cameraBlockTotem.unbind(uniformBindingPoints.camera);
-        gl.bindVertexArray(null);
+        attibuteLoader.unbind();
     }
     free() {
         if (this._isFreed)

package/programs/point-on-globe/element-globe-surface-glow.js

@@ -9,7 +9,7 @@ import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totem
 import { PI, cartesian3DToGLPosition, circleLimpFromLongLatRadCenterCartesian3D_accurate } from "../../util/shaderfunctions/geometrytransformations";
 import { createProgram } from "../../util/webglobjectbuilders";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
+import { AttributeLoader, attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { drawInstanced } from "../../util/gl-util/draw-options/methods";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
 const uboBlockManager = new UniformBlockManager("FlexibleBlock", [
@@ -67,7 +67,6 @@ class Logic {
     constructor(globe) {
         this.globe = globe;
         this.gl = globe.gl;
-        this._vaoCache = [];
         this.program = createProgram(this.gl, vs, fs);
         const { gl, program } = this;
         const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
@@ -95,22 +94,18 @@ class Logic {
         uboBlockManager.assignBindingPoint(this.gl, this.program);
         this._defaultUBO = uboBlockManager.createUBO(this.gl);
     }
-    createVAO(pos3DObj, radiusObj, colorObj) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
+    createAttributeLoader(pos3DObj, radiusObj, colorObj) {
         const divisor = 1;
-        gl.bindVertexArray(vao);
-        attributeLoader(gl, pos3DObj, 0, 3, { divisor });
-        attributeLoader(gl, radiusObj, 1, 1, { divisor, escapeValues: [-1] });
-        attributeLoader(gl, colorObj, 2, 4, { divisor, escapeValues: [-1, -1, -1, -1] });
-        gl.bindVertexArray(null);
-        this._vaoCache.push(vao);
-        return vao;
+        return new AttributeLoader(this.gl, [
+            { bufferAndReadInfo: pos3DObj, index: 0, size: 3, options: { divisor } },
+            { bufferAndReadInfo: radiusObj, index: 1, size: 1, options: { divisor, escapeValues: [-1] } },
+            { bufferAndReadInfo: colorObj, index: 2, size: 4, options: { divisor, escapeValues: [-1, -1, -1, -1] } }
+        ]);
     }
-    draw(vao, drawOptions, opacity = 1.0, ubo = null) {
+    draw(attibuteLoader, drawOptions, opacity = 1.0, ubo = null) {
         const { gl, program } = this;
         gl.useProgram(program);
-        gl.bindVertexArray(vao);
+        attibuteLoader.bind();
         if (opacity !== this._uniforms.opacity) {
             gl.uniform1f(this._uniforms.opacity_loc, opacity);
             this._uniforms.opacity = opacity;
@@ -119,15 +114,13 @@ class Logic {
         ubo.bind();
         drawInstanced(gl, gl.TRIANGLE_FAN, drawOptions);
         ubo.unbind();
-        gl.bindVertexArray(null);
+        attibuteLoader.unbind();
     }
     free() {
         if (this._isFreed)
             return;
         CameraUniformBlockTotemCache.release(this.globe);
         this.gl.deleteProgram(this.program);
-        for (const vao of this._vaoCache)
-            this.gl.deleteVertexArray(vao);
         this._isFreed = true;
     }
 }

package/programs/point-on-globe/element-point-glow.js

@@ -2,7 +2,7 @@ import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
+import { AttributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { drawArrays } from "../../util/gl-util/draw-options/methods";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
 import { singularity } from "../../shaders/fragment-toy/singularity";
@@ -105,32 +105,28 @@ class Logic {
         uniformBlockManager.assignBindingPoint(this.gl, this.program);
         this._defaultUBO = uniformBlockManager.createUBO(this.gl);
     }
-    createVAO(pos3DBuffer, pos2DBuffer, colorBuffer, sizeBuffer) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        attributeLoader(gl, pos3DBuffer, 0, 3);
-        attributeLoader(gl, pos2DBuffer, 1, 2);
-        attributeLoader(gl, colorBuffer, 2, 4, { escapeValues: [-1, -1, -1, -1] });
-        attributeLoader(gl, sizeBuffer, 3, 1, { escapeValues: [-1] });
-        gl.bindVertexArray(null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        return vao;
+    createAttributeLoader(pos3DBuffer, pos2DBuffer, colorBuffer, sizeBuffer) {
+        return new AttributeLoader(this.gl, [
+            { bufferAndReadInfo: pos3DBuffer, index: 0, size: 3 },
+            { bufferAndReadInfo: pos2DBuffer, index: 1, size: 2 },
+            { bufferAndReadInfo: colorBuffer, index: 2, size: 4, options: { escapeValues: [-1, -1, -1, -1] } },
+            { bufferAndReadInfo: sizeBuffer, index: 3, size: 1, options: { escapeValues: [-1] } }
+        ]);
     }
     createUBO() {
         const ubo = uniformBlockManager.createUBO(this.gl);
         return ubo;
     }
-    draw(vao, drawOptions, ubo = null) {
+    draw(attributeLoader, drawOptions, ubo = null) {
         const { gl, program, cameraBlockTotem } = this;
         gl.useProgram(program);
-        gl.bindVertexArray(vao);
+        attributeLoader.bind();
         cameraBlockTotem.bind(cameraBlockBindingPoint);
         ubo = ubo || this._defaultUBO;
         ubo.bind();
         drawArrays(gl, gl.POINTS, drawOptions);
         ubo.unbind();
-        gl.bindVertexArray(null);
+        attributeLoader.unbind();
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
         this.globe.DrawRender();
     }

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

@@ -4,7 +4,7 @@ import { DemTextureManagerCache, DEM_TEXTURE_BLOCK_STRING } from "../totems/atta
 import { cartesian3DToGLPosition, mercatorXYToGLPosition, POLE_BY_PI } from "../../util/shaderfunctions/geometrytransformations";
 import { relativeBBoxPositionRadian } from "../../util/shaderfunctions/geometrytransformations";
 import { drawArrays } from "../../util/gl-util/draw-options/methods";
-import { attributeLoader, resetAttributeDefault, setDefaultAttributeValues } from "../../util/gl-util/buffer/attribute-loader";
+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 ESCAPE_VALUE = 0.123456;
@@ -84,7 +84,7 @@ void main() {
                 break;
             }
         }
-        vec3 position = a_position * (elevation + altitude);
+        vec3 position = a_position * (elevation + altitude * elevation_scale);
         gl_Position = cartesian3DToGLPosition(position);
     } else {
         vec2 mercatorXY = a_xy * POLE_BY_PI;
@@ -171,21 +171,23 @@ export class TextureDemTriangles {
         this.demTextureManager = DemTextureManagerCache.get(this.globe);
         this.demTextureManager.assignBindingPoint(this.program, uniformBindingPoints.dem);
     }
-    createVAO(pos3dBufferInfo, longLatBufferInfo, indexBufferInfo, variativeColorBuffer) {
-        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);
-        attributeLoader(this.gl, indexBufferInfo, this.locations.attributes.a_index, 1, {
-            dataType: "uint16",
-            escapeValues: [IndexAttributeEscapeValue],
-        });
-        attributeLoader(this.gl, variativeColorBuffer, this.locations.attributes.a_color, 4, {
-            dataType: "uint8",
-            escapeValues: [0, 0, 0, 255]
-        });
-        this.gl.bindVertexArray(null);
-        return vao;
+    createAttributeLoader(pos3dBufferInfo, longLatBufferInfo, indexBufferInfo, variativeColorBuffer) {
+        return new AttributeLoader(this.gl, [
+            { bufferAndReadInfo: pos3dBufferInfo, index: this.locations.attributes.a_position, size: 3, options: {} },
+            { bufferAndReadInfo: longLatBufferInfo, index: this.locations.attributes.a_xy, size: 2, options: {} },
+            {
+                bufferAndReadInfo: indexBufferInfo, index: this.locations.attributes.a_index, size: 1, options: {
+                    dataType: "uint16",
+                    escapeValues: [IndexAttributeEscapeValue],
+                }
+            },
+            {
+                bufferAndReadInfo: variativeColorBuffer, index: this.locations.attributes.a_color, size: 4, options: {
+                    dataType: "uint8",
+                    escapeValues: [0, 0, 0, 255]
+                }
+            },
+        ]);
     }
     createUBO(bufferReadType = "STATIC_DRAW") {
         const ubo = styleBlockManager.createUBO(this.gl, bufferReadType);
@@ -200,12 +202,12 @@ export class TextureDemTriangles {
         DemTextureManagerCache.release(this.globe);
         CameraUniformBlockTotemCache.release(this.globe);
     }
-    draw(vao, drawOptions, ubo) {
+    draw(attributeLoader, drawOptions, ubo) {
         const gl = this.gl;
         gl.useProgram(this.program);
         this.cameraUniformBlock.bind(uniformBindingPoints.camera);
         this.demTextureManager.bindData(0, uniformBindingPoints.dem);
-        gl.bindVertexArray(vao);
+        attributeLoader.bind();
         ubo.bind();
         // This program has two fragment outputs (location 0: color, location 1: index).
         // When rendering to the default framebuffer (no picking FBO bound), only location 0
@@ -226,24 +228,12 @@ export class TextureDemTriangles {
         //     gl.drawBuffers([gl.BACK]);
         // }
         this.demTextureManager.unbindData(0, uniformBindingPoints.dem);
-        gl.bindVertexArray(null);
+        attributeLoader.unbind();
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
         gl.useProgram(null);
         ubo.unbind();
         this.cameraUniformBlock.unbind(uniformBindingPoints.camera);
     }
-    setDefaultDefaultAttributeValues() {
-        const gl = this.gl;
-        setDefaultAttributeValues(gl, this.locations.attributes.a_index, 1, [IndexAttributeEscapeValue], "uint16");
-        setDefaultAttributeValues(gl, this.locations.attributes.a_color, 4, [0, 0, 0, 255], "uint8");
-    }
-    resetDefaultAttributeValues() {
-        const gl = this.gl;
-        gl.disableVertexAttribArray(this.locations.attributes.a_index);
-        resetAttributeDefault(gl, this.locations.attributes.a_index);
-        gl.disableVertexAttribArray(this.locations.attributes.a_color);
-        resetAttributeDefault(gl, this.locations.attributes.a_color);
-    }
     _getUniformBlockOffset(name) {
         // hardcoded offsets based on std140 layout rules
         const offsets = {

package/programs/rings/partial-ring/piece-of-pie.js

@@ -1,7 +1,7 @@
 import { createProgram } from "../../../util/webglobjectbuilders";
 import { CameraUniformBlockTotem, CameraUniformBlockString } from "../../totems/index";
 import { noRegisterGlobeProgramCache, globeProgramCache } from "../../programcache";
-import { attributeLoader } from "../../../util/gl-util/buffer/attribute-loader";
+import { AttributeLoader } from "../../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../../util/gl-util/uniform-block/manager";
 import { POLE, PI, longLatRadToMercator, mercatorXYToGLPosition, longLatRadToCartesian3D, circleLimpFromLongLatRadCenterCartesian3D_accurate, circleLimpFromLongLatRadCenterMercatorCompass_accurate, 
 //circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
@@ -131,7 +131,6 @@ export class Logic {
     gl;
     _lastMode;
     _lastEdgeCount;
-    _lastAlphaMultiplier;
     program;
     _edgeCountLocation;
     _draw_modeLocation;
@@ -144,7 +143,6 @@ export class Logic {
         this.gl = globe.gl;
         this._lastMode = 0;
         this._lastEdgeCount = 64;
-        this._lastAlphaMultiplier = 1.0;
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
         const { gl, program } = this;
         // set attributes locations 
@@ -174,7 +172,7 @@ export class Logic {
         this._defaultFlexibleUBO = flexibleBlockManager.createUBO(gl);
         gl.useProgram(currentProgram);
     }
-    draw(length, vao, edgeCount, drawMode, ubo = null) {
+    draw(length, attributeLoader, edgeCount, drawMode, ubo = null) {
         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this;
         gl.useProgram(program);
         if (drawModeMap[drawMode] !== this._lastMode) {
@@ -193,10 +191,10 @@ export class Logic {
         }
         const overdraw = drawModeMap[drawMode];
         cameraBlockTotem.bind(cameraBlockBindingPoint);
-        gl.bindVertexArray(vao);
+        attributeLoader.bind();
         gl.drawArraysInstanced(gl[drawMode], 0, edgeCount + overdraw, length);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
-        gl.bindVertexArray(null);
+        attributeLoader.unbind();
         if (ubo) {
             ubo.unbind();
         }
@@ -219,22 +217,18 @@ export class Logic {
     in float radius; // in meter
     in float filling_mode; // 0.0: constant, 1.0: fading, 2.0: hide
      */
-    createVAO(center2dObj, center3dObj, startAngle2DObj, tailAngle2DObj, startAngle3DObj, tailAngle3DObj, colorObj, radiusObj, colorModeObj) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        attributeLoader(gl, center2dObj, 0, 2, { divisor: 1 });
-        attributeLoader(gl, center3dObj, 1, 3, { divisor: 1 });
-        attributeLoader(gl, startAngle2DObj, 2, 1, { divisor: 1 });
-        attributeLoader(gl, tailAngle2DObj, 3, 1, { divisor: 1 });
-        attributeLoader(gl, startAngle3DObj, 4, 1, { divisor: 1 });
-        attributeLoader(gl, tailAngle3DObj, 5, 1, { divisor: 1 });
-        attributeLoader(gl, colorObj, 6, 4, { divisor: 1, escapeValues: [-1.0, -1.0, -1.0, -1.0] });
-        attributeLoader(gl, radiusObj, 7, 1, { divisor: 1, escapeValues: [-1.0] });
-        attributeLoader(gl, colorModeObj, 8, 1, { divisor: 1, escapeValues: [-1.0] });
-        gl.bindVertexArray(null);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        return vao;
+    createAttributeLoader(center2dObj, center3dObj, startAngle2DObj, tailAngle2DObj, startAngle3DObj, tailAngle3DObj, colorObj, radiusObj, colorModeObj) {
+        return new AttributeLoader(this.gl, [
+            { bufferAndReadInfo: center2dObj, index: 0, size: 2, options: { divisor: 1 } },
+            { bufferAndReadInfo: center3dObj, index: 1, size: 3, options: { divisor: 1 } },
+            { bufferAndReadInfo: startAngle2DObj, index: 2, size: 1, options: { divisor: 1 } },
+            { bufferAndReadInfo: tailAngle2DObj, index: 3, size: 1, options: { divisor: 1 } },
+            { bufferAndReadInfo: startAngle3DObj, index: 4, size: 1, options: { divisor: 1 } },
+            { bufferAndReadInfo: tailAngle3DObj, index: 5, size: 1, options: { divisor: 1 } },
+            { bufferAndReadInfo: colorObj, index: 6, size: 4, options: { divisor: 1, escapeValues: [-1.0, -1.0, -1.0, -1.0] } },
+            { bufferAndReadInfo: radiusObj, index: 7, size: 1, options: { divisor: 1, escapeValues: [-1.0] } },
+            { bufferAndReadInfo: colorModeObj, index: 8, size: 1, options: { divisor: 1, escapeValues: [-1.0] } }
+        ]);
     }
     createUBO() {
         const { gl } = this;

package/programs/totems/attachments/dem-textures-manager.js

@@ -8,6 +8,7 @@ layout(std140) uniform DemTextureUniformBlock {
     vec4 u_textureDataCoverRatio[6]; // 96 bytes
     vec2 u_textureResolution; // 8 bytes
     int u_breakLoopIndex; // 4 bytes
+    float elevation_scale;
 };  
 uniform sampler2DArray u_demTexture;
 `;
@@ -17,8 +18,9 @@ const MAXLAYERS = 6;
 // 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.
+// Elevation scale: 4 bytes (offset 204)
+// Total used: 208 bytes.
+// std140 blocks no need for padding -> 208 bytes.
 // 208 bytes / 4 bytes per float = 52 floats.
 const uniformBlockData = new Float32Array(52);
 function drawnedTilesHash(drawnTiles) {
@@ -162,6 +164,7 @@ export class DemTextureManager {
         uniformBlockData[49] = this.textureHeight;
         // Set break loop index (offset 200 bytes -> index 50)
         uniformBlockData[50] = this.mergedData.length;
+        uniformBlockData[51] = this._globe.api_GetZScale();
         // Unbind texture after updating
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
         gl.bindBuffer(gl.UNIFORM_BUFFER, this.uniformBuffer);

package/semiplugins/lightweight/line-plugin.js

@@ -8,7 +8,7 @@ export class LinePlugin {
     globe = null;
     gl = null;
     program = null;
-    vao = null;
+    attributeLoader = null;
     _options;
     _uboHandler = null;
     bufferOrchestrator;
@@ -36,21 +36,24 @@ export class LinePlugin {
         this._uboHandler = this.program.createUBO();
         this.setDefaultColor(this._options.defaultColor);
         this._fillManagerMap();
-        this.vao = this.program.createVAO(...this._createSelectBufferNames().map((key) => {
-            if (key === null) {
-                return null;
-            }
-            const bufferManagerComp = this.bufferManagersMap.get(key);
-            if (bufferManagerComp === undefined) {
-                throw new Error(`Buffer key ${key} does not exist in bufferManagersMap`);
-            }
-            const { bufferManager } = bufferManagerComp;
-            return {
-                stride: 0,
-                offset: 0,
-                buffer: bufferManager.buffer
-            };
-        }));
+        if (this.program.createAttributeLoader) {
+            const data = this._createSelectBufferNames().map((key) => {
+                if (key === null) {
+                    return null;
+                }
+                const bufferManagerComp = this.bufferManagersMap.get(key);
+                if (bufferManagerComp === undefined) {
+                    throw new Error(`Buffer key ${key} does not exist in bufferManagersMap`);
+                }
+                const { bufferManager } = bufferManagerComp;
+                return {
+                    stride: 0,
+                    offset: 0,
+                    buffer: bufferManager.buffer
+                };
+            });
+            this.attributeLoader = this.program.createAttributeLoader(...data);
+        }
     }
     // PLUGIN INTERFACE METHODS
     increaseSpace(amount) {
@@ -122,10 +125,10 @@ export class LinePlugin {
             console.warn("Plugin has been freed, cannot draw.");
         }
         ;
-        if (!this.globe || !this.gl || !this.program || !this.vao) {
+        if (!this.globe || !this.gl || !this.program || !this.attributeLoader) {
             throw new Error("Globe, GL context or program is not initialized.");
         }
-        const { bufferOrchestrator, _options, _uboHandler, vao } = this;
+        const { bufferOrchestrator, _options, _uboHandler, attributeLoader } = this;
         if (!bufferOrchestrator || !bufferOrchestrator || !_uboHandler) {
             throw new Error("Buffer orchestrator is not initialized.");
         }
@@ -140,18 +143,18 @@ export class LinePlugin {
         const currentGeometry = this.globe.api_GetCurrentGeometry();
         if (currentGeometry === 0 && globeViewOn) {
             // @ts-ignore
-            this.program.draw(vao, drawOptions, opacity, _uboHandler);
+            this.program.draw(attributeLoader, drawOptions, opacity, _uboHandler);
         }
         else if (currentGeometry === 1 && flatViewOn) {
             // @ts-ignore
-            this.program.draw(vao, drawOptions, opacity, _uboHandler);
+            this.program.draw(attributeLoader, drawOptions, opacity, _uboHandler);
         }
         this.gl.enable(this.gl.DEPTH_TEST); // Re-enable depth test after drawing
     }
     free() {
         if (this._freed)
             return;
-        // TODO: FILL
+        this.attributeLoader.free();
         this.bufferManagersMap.forEach((manager) => {
             manager.bufferManager.free();
         });

package/semiplugins/lightweight/piece-of-pie-plugin.js

@@ -11,7 +11,7 @@ export class PieceOfPiePlugin {
     globe = null;
     gl = null;
     program = null;
-    vao = null;
+    attributeLoader = null;
     bufferManagersMap = null;
     bufferOrchestrator = new BufferOrchestrator({ capacity: INITIAL_CAPACITY });
     drawMode = "BOTH";
@@ -144,7 +144,7 @@ export class PieceOfPiePlugin {
         this.gl = gl;
         this.program = PieceOfPieProgramCache.get(globe);
         this._createBufferManagersMap();
-        this.vao = this.program.createVAO(
+        this.attributeLoader = this.program.createAttributeLoader(
         //@ts-ignore
         ...['centerCoords2d',
             'centerCoords3d',
@@ -170,18 +170,18 @@ export class PieceOfPiePlugin {
         this._uboHandler.updateSingle("u_opacity", new Float32Array([this._pluginOptions.opacity ?? 1.0])); // Default opacity is 1.0
     }
     draw3D() {
-        if (!this.gl || !this.program || !this.vao || !this.globe) {
+        if (!this.gl || !this.program || !this.attributeLoader || !this.globe) {
             console.warn("PieChartPlugin is not initialized properly Or unregistered from globe.");
             return;
         }
         const length = this.bufferOrchestrator.length;
         this.gl.disable(this.gl.DEPTH_TEST);
         if (this.drawMode === "BOTH") {
-            this.program?.draw(length, this.vao, EDGE_COUNT, "LINE_STRIP", this._uboHandler);
-            this.program?.draw(length, this.vao, EDGE_COUNT, "TRIANGLE_FAN", this._uboHandler);
+            this.program?.draw(length, this.attributeLoader, EDGE_COUNT, "LINE_STRIP", this._uboHandler);
+            this.program?.draw(length, this.attributeLoader, EDGE_COUNT, "TRIANGLE_FAN", this._uboHandler);
         }
         else {
-            this.program?.draw(length, this.vao, EDGE_COUNT, this.drawMode, this._uboHandler);
+            this.program?.draw(length, this.attributeLoader, EDGE_COUNT, this.drawMode, this._uboHandler);
         }
         this.gl.enable(this.gl.DEPTH_TEST);
     }
@@ -191,7 +191,7 @@ export class PieceOfPiePlugin {
             return;
         }
         PieceOfPieProgramCache.release(this.globe);
-        this.gl?.deleteVertexArray(this.vao);
+        this.attributeLoader?.free();
         this._isFreed = true;
         this.globe = null;
         this.gl = null;

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

@@ -1,6 +1,6 @@
 // import { ArcOnTerrainPluginOptions } from "./type";
 import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip/linestrip";
-import { createBufferAndReadInfo } from "../../util/gl-util/buffer/attribute-loader";
+import { AttributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
 import { globe3Dcoordinates, globe2Dcoordinates, RADIAN } from "../../Math/methods";
 import { generateArcPoints, evenlySpacedArcPoints } from "../../Math/arc-cdf-points";
@@ -25,11 +25,11 @@ function createArc(start, end) {
 export class ArcOnTerrainPlugin {
     id;
     program = null;
-    bufferManagersMap = null;
+    bufferManagersMap = new Map();
     bufferOrchestrator = new BufferOrchestrator({ capacity: INITAL_CAPACITY });
     _opacity = 1;
     _arcUBOHandler = null;
-    _vao = null;
+    _attributeLoader = null;
     globe = null;
     gl = null;
     _arcMap;
@@ -226,11 +226,11 @@ export class ArcOnTerrainPlugin {
             this.__buildDynamicArcs();
         });
         this.program = LineStripProgramCache.get(globe);
+        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+        this._fillbufferManagersMap();
         this._staticDynamicStrategy = new StaticDynamicStrategy(globe, DYNAMIC_STRATEGY_START_LOD, () => {
             this.__buildStaticArcs();
         }); // Initialize static-dynamic strategy with a transition level of 8
-        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
-        this._fillbufferManagersMap();
         this.bufferOrchestrator = new BufferOrchestrator();
         this._arcUBOHandler = this.program.createUBO();
         this._arcUBOHandler.update(new Map([
@@ -245,12 +245,9 @@ export class ArcOnTerrainPlugin {
         }
         const globe = this.globe;
         this._staticDynamicStrategy?.updateState();
-        // if (globe.api_IsScreenMoving()) {
-        // this._buildArcs(); // can be async
-        // }
         this._frameCounterTrigger?.trigger();
-        const { gl, program, bufferOrchestrator, _vao, _arcUBOHandler, } = this;
-        if (!gl || !program || !bufferOrchestrator || !_vao || !_arcUBOHandler) {
+        const { gl, program, bufferOrchestrator, _attributeLoader, _arcUBOHandler, } = this;
+        if (!gl || !program || !bufferOrchestrator || !_attributeLoader || !_arcUBOHandler) {
             console.warn("WebGL context, program, or buffer orchestrator is not initialized.");
             return;
         }
@@ -265,7 +262,7 @@ export class ArcOnTerrainPlugin {
             },
             indexes: null
         };
-        program.draw(_vao, drawOptions, this._opacity, _arcUBOHandler);
+        program.draw(_attributeLoader, drawOptions, this._opacity, _arcUBOHandler);
         gl.enable(gl.DEPTH_TEST);
     }
     _buildArcs(subSetIDs = null) {
@@ -280,7 +277,7 @@ export class ArcOnTerrainPlugin {
     __buildStaticArcs(subSetIDs = null) {
         const { globe, _arcMap, _cameraUniformBlock, bufferManagersMap, bufferOrchestrator } = this;
         if (!globe || !_cameraUniformBlock || !bufferManagersMap || !bufferOrchestrator) {
-            console.warn("Globe or camera uniform block is not initialized.");
+            console.warn(`Globe or camera uniform block is not initialized. ${globe} ${_cameraUniformBlock} ${bufferManagersMap} ${bufferOrchestrator}`);
             return;
         }
         const bufferKey = [this.globe.api_GetCurrentGeometry() === 0 ? "position3d" : "position2d"];
@@ -321,7 +318,7 @@ export class ArcOnTerrainPlugin {
     __buildDynamicArcs(subSetIDs = null) {
         const { globe, _arcMap, _cameraUniformBlock, bufferManagersMap } = this;
         if (!globe || !_cameraUniformBlock || !bufferManagersMap) {
-            console.warn("Globe or camera uniform block is not initialized.");
+            console.warn(`Globe or camera uniform block is not initialized. ${globe} ${_cameraUniformBlock} ${bufferManagersMap}`);
             return;
         }
         const bufferKey = [
@@ -392,7 +389,6 @@ export class ArcOnTerrainPlugin {
         }
         const g2D = globe2Dcoordinates(globe);
         const { flatViewOn, globeViewOn, variativeColorsOn } = this._options;
-        this.bufferManagersMap = new Map();
         if (globeViewOn) {
             this.bufferManagersMap.set("position3d", {
                 bufferManager: new BufferManager(gl, 3 * (this._options.vertexCount + 1), { bufferType: "STREAM_DRAW", initialCapacity: INITAL_CAPACITY }),
@@ -441,10 +437,10 @@ export class ArcOnTerrainPlugin {
             // @ts-ignore
             const bufferManager = this.bufferManagersMap.get(key).bufferManager;
             // @ts-ignore
-            return createBufferAndReadInfo(bufferManager.buffer);
+            return AttributeLoader.createBufferAndReadInfo(bufferManager.buffer);
         });
         // @ts-ignore
-        this._vao = this.program.createVAO(bufferObjects[0], // position3d
+        this._attributeLoader = this.program?.createAttributeLoader(bufferObjects[0], // position3d
         bufferObjects[1], // position2d
         bufferObjects[2] // color
         );
@@ -474,6 +470,7 @@ export class ArcOnTerrainPlugin {
         CameraUniformBlockTotemCache.release(this.globe);
         LineStripProgramCache.release(this.globe);
         this.gl = null;
+        this.program = null;
         this.globe = null;
         this._arcMap.clear();
         this._coordinaateBufferKeysForUpdate = [];

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

@@ -1,7 +1,7 @@
 import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip/linestrip";
 import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
 import { CameraUniformBlockTotemCache } from "../../programs/totems/camerauniformblock";
-import { createBufferAndReadInfo } from "../../util/gl-util/buffer/attribute-loader";
+import { AttributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import * as CircleMethods from "../../Math/circle";
 import * as CircleCDF from "../../Math/circle-cdf-points";
 import * as vec3 from "../../Math/vec3";
@@ -66,7 +66,7 @@ export class CircleOnTerrainPlugin {
     _freed = false;
     _circleUBOHandler = null;
     _opacity = 1;
-    _vao = null;
+    _attributeLoader = null;
     _dobuild = true; // This is used to trigger the build of circles when the camera position changes.
     _frameCounterTrigger = null;
     _staticDynamicStrategy = null;
@@ -76,7 +76,6 @@ export class CircleOnTerrainPlugin {
         defaultHeightFromGroundIn3D: 30.0,
         isMSL: false
     };
-    _textDataPreAdaptor = undefined;
     constructor(id, styleOptions = null) {
         this.id = id;
         if (styleOptions) {
@@ -125,8 +124,8 @@ export class CircleOnTerrainPlugin {
                 }
             });
         }
-        this._vao = this.lineProgram.createVAO(createBufferAndReadInfo(this.bufferManagersMap.get("position3d")?.bufferManager.buffer), createBufferAndReadInfo(this.bufferManagersMap.get("position2d")?.bufferManager.buffer), this._options.variativeColorsOn ?
-            createBufferAndReadInfo(this.bufferManagersMap.get("color")?.bufferManager.buffer) : null);
+        this._attributeLoader = this.lineProgram.createAttributeLoader(AttributeLoader.createBufferAndReadInfo(this.bufferManagersMap.get("position3d")?.bufferManager.buffer), AttributeLoader.createBufferAndReadInfo(this.bufferManagersMap.get("position2d")?.bufferManager.buffer), this._options.variativeColorsOn ?
+            AttributeLoader.createBufferAndReadInfo(this.bufferManagersMap.get("color")?.bufferManager.buffer) : null);
         this._circleUBOHandler = this.lineProgram.createUBO();
         this.setDefaultColor(this._options.defaultColor);
         this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
@@ -158,7 +157,7 @@ export class CircleOnTerrainPlugin {
         if (this._freed)
             return;
         if (!this.globe || !this.gl || !this.lineProgram || !this.bufferOrchestrator ||
-            !this.bufferManagersMap || !this._vao || !this._circleUBOHandler) {
+            !this.bufferManagersMap || !this._attributeLoader || !this._circleUBOHandler) {
             throw new Error("Plugin not initialized properly");
         }
         const keys = [];
@@ -217,7 +216,7 @@ export class CircleOnTerrainPlugin {
         if (this._freed)
             return;
         if (!this.globe || !this.gl || !this.lineProgram || !this.bufferOrchestrator ||
-            !this.bufferManagersMap || !this._vao || !this._circleUBOHandler) {
+            !this.bufferManagersMap || !this._attributeLoader || !this._circleUBOHandler) {
             throw new Error("Plugin not initialized properly");
         }
         this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
@@ -408,9 +407,9 @@ export class CircleOnTerrainPlugin {
     }
     // GLOBE API INTERFACE
     draw3D() {
-        const { _freed, globe, gl, lineProgram, bufferOrchestrator, bufferManagersMap, _vao, _circleUBOHandler } = this;
+        const { _freed, globe, gl, lineProgram, bufferOrchestrator, bufferManagersMap, _attributeLoader, _circleUBOHandler } = this;
         if (_freed || !globe || !gl || !lineProgram || !bufferOrchestrator ||
-            !bufferManagersMap || !_vao || !_circleUBOHandler) {
+            !bufferManagersMap || !_circleUBOHandler) {
             return;
         }
         // if (globe.api_IsScreenMoving())
@@ -423,7 +422,7 @@ export class CircleOnTerrainPlugin {
             },
         };
         gl.disable(gl.DEPTH_TEST);
-        lineProgram.draw(_vao, drawOptions, this._opacity, _circleUBOHandler);
+        lineProgram.draw(_attributeLoader, drawOptions, this._opacity, _circleUBOHandler);
         gl.enable(gl.DEPTH_TEST);
     }
     free() {

package/semiplugins/shape-on-terrain/padding-1-degree.js

@@ -29,7 +29,7 @@ export class Padding1DegreePlugin {
     _float32Array = null; // this is used to forward the data to the buffer manager
     _uboHandler = null; // this is used to forward the data to the shader program
     _bufferNames = ["position2d", "position3d"];
-    _vao = null; // this is used to store the VAO for the plugin
+    _attributeLoader = null; // this is used to store the VAO for the plugin
     _freed = false; // this is used to check if the plugin is freed or not
     _userOpacity = 1;
     _adaptiveOpacityMultiplier = 1;
@@ -347,7 +347,7 @@ export class Padding1DegreePlugin {
                 offset: 0
             };
         });
-        this._vao = this.lineProgram.createVAO(vaoInput[0], vaoInput[1], vaoInput[2]);
+        this._attributeLoader = this.lineProgram.createAttributeLoader(vaoInput[0], vaoInput[1], vaoInput[2]);
         this.bufferManagerMap = bufferManagerMap;
         this.bufferOrchestrator.resetWithCapacity(bufferManagerMap, initialCapacity);
         this._uboHandler = this.lineProgram.createUBO("STATIC_DRAW");
@@ -358,7 +358,7 @@ export class Padding1DegreePlugin {
             console.warn("Plugin is freed, cannot draw");
             return;
         }
-        if (this.globe === null || this.lineProgram === null || this._vao === null) {
+        if (this.globe === null || this.lineProgram === null || this._attributeLoader === null) {
             console.warn("Globe or LineProgram or VAO is not initialized, cannot draw");
             return;
         }
@@ -372,7 +372,7 @@ export class Padding1DegreePlugin {
             },
         };
         gl.disable(gl.DEPTH_TEST);
-        this.lineProgram.draw(this._vao, drawOptions, this._userOpacity * this._adaptiveOpacityMultiplier, this._uboHandler);
+        this.lineProgram.draw(this._attributeLoader, drawOptions, this._userOpacity * this._adaptiveOpacityMultiplier, this._uboHandler);
         gl.enable(gl.DEPTH_TEST);
     }
     free() {
@@ -390,9 +390,8 @@ export class Padding1DegreePlugin {
         this.lineProgram = null;
         this._uboHandler?.free();
         this._uboHandler = null;
-        this.globe.gl.deleteVertexArray(this._vao);
+        this._attributeLoader?.free();
         this.globe = null;
-        this._vao = null;
         this.bufferManagerMap.forEach((bufferManager) => {
             bufferManager.bufferManager.free();
         });

package/semiplugins/shape-on-terrain/terrain-polygon/data/index-polygon-map.js

@@ -12,12 +12,13 @@ export class IndexPolygonMap {
     }
     insertBulk(polygons) {
         for (const poly of polygons) {
-            if (this._polygonKeyMap.has(poly.key)) {
-                this.deleteBulk([poly.key]);
-            }
-            const index = this.newIndex();
+            // Upsert semantics:
+            // - if the key already exists, keep its index stable
+            // - otherwise allocate a new index
+            const existingIndex = this._polygonKeyMap.get(poly.key);
+            const index = existingIndex ?? this.newIndex();
             // @ts-ignore
-            poly.index = index; // Assign the new index to the polygon
+            poly.index = index; // Assign the (stable) index to the polygon
             this._indexPolygonMap.set(index, poly);
             this._polygonKeyMap.set(poly.key, index);
         }

package/semiplugins/shape-on-terrain/terrain-polygon/data/master-worker.js

@@ -14,7 +14,6 @@ let _batchInFlight = false;
 let _batchPending = 0;
 function initWorkers() {
     _maxWorkers = Math.max(1, ((navigator.hardwareConcurrency - 2) || 4) - 1);
-    console.log(`TerrainPolygon: initializing ${_maxWorkers} workers.`);
     for (let i = 0; i < _maxWorkers; i++)
         addWorker();
 }

package/semiplugins/shape-on-terrain/terrain-polygon/terrain-polygon.js

@@ -41,7 +41,7 @@ export class TerrainPolygonSemiPlugin {
     _pickIndexBuffer = null;
     _variativeColorBuffer = null;
     _mercatorXYBuffer = null;
-    _vao = null;
+    _attributeLoader = null;
     _uboHandler = null;
     _uboForRealEdgeArcs = null;
     _drawPointsRangeIndexParams = {
@@ -85,7 +85,6 @@ export class TerrainPolygonSemiPlugin {
                 ...(options.edgeStyle ?? {}),
             },
         };
-        console.log("TerrainPolygonSemiPlugin options:", this._options);
     }
     ;
     _effectiveOpacity(target) {
@@ -132,7 +131,7 @@ export class TerrainPolygonSemiPlugin {
         if (this._options.variativeColorsOn) {
             this._variativeColorBuffer = gl.createBuffer();
         }
-        this._vao = this._program.createVAO({
+        this._attributeLoader = this._program.createAttributeLoader({
             offset: 0,
             stride: 0,
             buffer: this._vec3Buffer
@@ -389,10 +388,9 @@ export class TerrainPolygonSemiPlugin {
         gl.disable(gl.DEPTH_TEST);
         gl.enable(gl.BLEND);
         defaultblendfunction(gl);
-        this._program.setDefaultDefaultAttributeValues();
         // drawPoints 
         if (this._options.showTesselationPoints) {
-            this._program.draw(this._vao, this._drawPointsRangeIndexParams, this._uboHandler);
+            this._program.draw(this._attributeLoader, this._drawPointsRangeIndexParams, this._uboHandler);
         }
         if (this._pickerDisplayer && !this._options.pickablePause) {
             this._pickerDisplayer.bindFBO();
@@ -400,7 +398,7 @@ export class TerrainPolygonSemiPlugin {
             // gl.enable(gl.DEPTH_TEST);
         }
         gl.frontFace(gl.CW);
-        this._program.draw(this._vao, this._drawRangeIndexParams, this._uboHandler);
+        this._program.draw(this._attributeLoader, this._drawRangeIndexParams, this._uboHandler);
         gl.frontFace(gl.CCW);
         if (this._pickerDisplayer && !this._options.pickablePause) {
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -411,10 +409,9 @@ export class TerrainPolygonSemiPlugin {
             gl.disable(gl.DEPTH_TEST);
             // gl.enable(gl.POLYGON_OFFSET_FILL);
             // gl.polygonOffset(-3.0, -3.0);
-            this._program.draw(this._vao, this._drawRealEdgeArcs, this._uboForRealEdgeArcs);
+            this._program.draw(this._attributeLoader, this._drawRealEdgeArcs, this._uboForRealEdgeArcs);
             // gl.disable(gl.POLYGON_OFFSET_FILL);
         }
-        this._program.resetDefaultAttributeValues();
         gl.enable(gl.DEPTH_TEST);
     }
     free() {

package/util/gl-util/buffer/attribute-loader.js

@@ -52,18 +52,6 @@ const attributeLoader = (gl, bufferAndReadInfo, index, size, { divisor = null, d
         gl.vertexAttribDivisor(index, divisor);
     }
 };
-/**
- *
- * @param {WebGLBuffer} buffer
- * @param {number} stride
- * @param {number} offset
- * @returns {BufferAndReadInfo}
- */
-const createBufferAndReadInfo = (buffer, stride = 0, offset = 0) => {
-    if (buffer == null)
-        return null;
-    return { buffer, stride, offset };
-};
 const setConstantAttribute = (gl, index, size, values, typeInfo) => {
     // Array should already be disabled by caller
     if (size < 1 || size > 4) {
@@ -96,7 +84,50 @@ const setConstantAttribute = (gl, index, size, values, typeInfo) => {
 function resetAttributeDefault(gl, index) {
     gl.vertexAttrib4f(index, 0, 0, 0, 1);
 }
-function setDefaultAttributeValues(gl, index, size, escapeValues, typeInfo) {
-    setConstantAttribute(gl, index, size, escapeValues, DATA_TYPE_MAP[typeInfo]);
+export class AttributeLoader {
+    gl;
+    meta;
+    vao;
+    stickyNotes = new Map();
+    constructor(gl, meta) {
+        this.gl = gl;
+        this.meta = meta;
+        this.vao = gl.createVertexArray();
+        gl.bindVertexArray(this.vao);
+        for (const { bufferAndReadInfo, index, size, options } of this.meta) {
+            if (bufferAndReadInfo != null && bufferAndReadInfo.buffer != null) {
+                attributeLoader(this.gl, bufferAndReadInfo, index, size, options);
+            }
+            else if (options.escapeValues) {
+                const dataType = options.dataType || "float";
+                const typeInfo = DATA_TYPE_MAP[dataType];
+                this.stickyNotes.set(index, { size, typeInfo, escapeValues: options.escapeValues });
+            }
+            else {
+                throw new Error("Either bufferAndReadInfo or escapeValues must be provided for AttributeLoader.");
+            }
+        }
+        gl.bindVertexArray(null);
+    }
+    bind() {
+        const { gl } = this;
+        gl.bindVertexArray(this.vao);
+        for (const [index, { size, typeInfo, escapeValues }] of this.stickyNotes) {
+            setConstantAttribute(gl, index, size, escapeValues, typeInfo);
+        }
+    }
+    unbind() {
+        this.gl.bindVertexArray(null);
+        for (const index of this.stickyNotes.keys()) {
+            resetAttributeDefault(this.gl, index);
+        }
+    }
+    free() {
+        this.gl.deleteVertexArray(this.vao);
+    }
+    static createBufferAndReadInfo(buffer, stride = 0, offset = 0) {
+        if (buffer == null)
+            return null;
+        return { buffer, stride, offset };
+    }
 }
-export { attributeLoader, createBufferAndReadInfo, resetAttributeDefault, setDefaultAttributeValues };