@pirireis/webglobeplugins 0.9.1 → 0.9.3

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

@@ -0,0 +1,228 @@
+import { createProgram } from "../../util/webglobjectbuilders";
+import "../interface";
+import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totems"
+
+import {
+    cartesian3DToGLPosition,
+    mercatorXYToGLPosition,
+} from "../../util/shaderfunctions/geometrytransformations.js";
+
+import { noRegisterGlobeProgramCache } from "../programcache";
+import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
+import "../../util/gl-util/buffer/attribute-loader";
+
+import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
+import "../../util/gl-util/uniform-block/types";
+
+import { drawArrays } from "../../util/gl-util/draw-options/methods.js";
+import "../../util/gl-util/draw-options/types";
+
+
+
+const ESCAPE_VALUE = -1;
+
+const uniformBindingPoints = {
+    camera: 0,
+    flexible: 1,
+}
+
+const one = new Float32Array([1]);
+const flexibleBlockManager = new UniformBlockManager(
+    'FlexibleAttributes',
+    [
+        { name: "u_color", type: "vec4", value: new Float32Array([0.12, 1, 0.1, 1]) },
+        { name: "u_dash_opacity", type: "float", value: one },
+        { name: "u_dash_length", type: "float", value: one },
+    ],
+    uniformBindingPoints.flexible,
+);
+
+
+
+
+const vertexShaderSource = `#version 300 es
+precision highp float;
+
+${CameraUniformBlockString}
+${cartesian3DToGLPosition}
+${mercatorXYToGLPosition}
+
+${flexibleBlockManager.glslCode()}
+
+in vec3 position3d;
+in vec2 position2d;
+in vec4 color; 
+in float dash_length;
+in float dash_opacity;
+
+out float v_dash_length;
+out float v_dash_opacity;
+out vec4 v_color;
+
+flat out vec3 v_flat_position;
+out vec3 v_position;
+
+void main() {
+
+    v_color = ( color.r == -1.0 ) ? u_color : color;
+    v_dash_length = ( dash_length == -1.0 ) ? u_dash_length : dash_length;
+    v_dash_opacity = ( dash_opacity == -1.0 ) ? u_dash_opacity : dash_opacity;
+
+    if ( is3D ) {
+        gl_Position = cartesian3DToGLPosition( position3d );
+        v_position = position3d;
+        v_flat_position = position3d;
+    } else {
+        gl_Position = mercatorXYToGLPosition( position2d );
+        v_position = vec3( position2d, 0.0 );
+        v_flat_position = vec3( position2d, 0.0 );
+    }
+    gl_PointSize = 4.0;
+}`;
+
+
+const fragmentShaderSource = `#version 300 es
+precision highp float;
+
+uniform float opacity;
+
+in vec4 v_color;
+in float v_dash_length;
+in float v_dash_opacity;
+
+flat in vec3 v_flat_position;
+in vec3 v_position;
+
+
+out vec4 outColor;
+
+void main() {
+    outColor = v_color;
+    return;
+    float dash_length = v_dash_length;
+    float dash_opacity = v_dash_opacity;
+
+    if ( dash_length == 0.0 ) {
+        outColor = vec4( v_color.rgb, v_color.a * v_dash_opacity );
+    } else {
+        float dist = distance( v_flat_position, v_position );
+        // float alpha = mod( dist , v_dash_length * 2.0 ) / v_dash_length < 1.0 ? 1.0 : v_dash_opacity;
+        outColor = vec4( v_color.rgb,  v_color.a * opacity );
+    }
+}`;
+
+console.log("LineStripProgram");
+console.log(vertexShaderSource);
+console.log(fragmentShaderSource);
+
+
+class Logic implements ProgramInterface {
+
+    _vaosPublished: object[] = [];
+    _ubosPublished: UBOHandler[] = [];
+    program: WebGLProgram;
+    gl: WebGL2RenderingContext;
+    globe: any;
+    cameraBlockTotem: any;
+    _defaultFlexibleUBO: UBOHandler;
+    _opacity: {
+        value: number,
+        location: WebGLUniformLocation | null
+    } = {
+            value: 1,
+            location: null
+        };
+
+    constructor(globe: any) {
+        console.log("LineStripProgram globe", globe);
+        this.gl = globe.gl;
+
+        this.globe = globe;
+        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
+        const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+        this.gl.useProgram(this.program);
+        this._opacity.location = this.gl.getUniformLocation(this.program, "opacity");
+        this.gl.uniform1f(this._opacity.location, this._opacity.value);
+
+
+        // bind attribute locations
+        this.gl.bindAttribLocation(this.program, 0, "position3d");
+        this.gl.bindAttribLocation(this.program, 1, "position2d");
+        this.gl.bindAttribLocation(this.program, 2, "color");
+        this.gl.bindAttribLocation(this.program, 3, "dash_length");
+        this.gl.bindAttribLocation(this.program, 4, "dash_opacity");
+
+
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+        this.cameraBlockTotem.assignBindingPoint(this.program, uniformBindingPoints.camera);
+
+        flexibleBlockManager.assignBindingPoint(this.gl, this.program);
+        this._defaultFlexibleUBO = flexibleBlockManager.createUBO(this.gl);
+
+        this.gl.useProgram(currentProgram);
+    }
+
+
+
+    createUBO(bufferReadType: "STATIC_DRAW" | "DYNAMIC_DRAW" | "STREAM_DRAW" = "STATIC_DRAW"): UBOHandler {
+        const ubo = flexibleBlockManager.createUBO(this.gl, bufferReadType);
+        this._ubosPublished.push(ubo);
+        return ubo;
+    }
+
+
+
+    createVAO(
+        position3D: BufferAndReadInfo, position2D: BufferAndReadInfo, color: BufferAndReadInfo, dashLength: BufferAndReadInfo, dashOpacity: BufferAndReadInfo,
+    ): WebGLVertexArrayObject {
+        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] });
+        attributeLoader(gl, dashLength, 3, 1, { escapeValues: [ESCAPE_VALUE] });
+        attributeLoader(gl, dashOpacity, 4, 1, { escapeValues: [ESCAPE_VALUE] });
+        gl.bindVertexArray(null);
+        return vao;
+    }
+
+
+
+    draw(vao: WebGLVertexArrayObject, drawOptions: DrawRangeIndexParams, opacity: number = 1, flexibleUBO: UBOHandler | null = null) {
+
+        const { gl, program, cameraBlockTotem } = this;
+
+        gl.useProgram(program);
+        if (opacity !== this._opacity.value) {
+            this._opacity.value = opacity;
+            this.gl.uniform1f(this._opacity.location, this._opacity.value);
+        }
+        const ubo = flexibleUBO || this._defaultFlexibleUBO;
+        cameraBlockTotem.bind(uniformBindingPoints.camera);
+        ubo.bind();
+        gl.bindVertexArray(vao);
+        drawArrays(gl, gl.POINTS, drawOptions);
+        drawArrays(gl, gl.LINE_STRIP, drawOptions);
+        gl.bindVertexArray(null);
+        ubo.unbind();
+        cameraBlockTotem.unbind(uniformBindingPoints.camera);
+    }
+
+
+
+    free() {
+        this._vaosPublished.forEach((vao: WebGLVertexArrayObject) => this.gl.deleteVertexArray(vao));
+        this._ubosPublished.forEach((ubo: UBOHandler) => ubo.free());
+        this.gl.deleteProgram(this.program);
+        this._defaultFlexibleUBO.free();
+        CameraUniformBlockTotemCache.release(this.globe);
+        this.gl.deleteProgram(this.program);
+
+    }
+}
+
+export const LineStripProgramCache = Object.freeze({
+    get: (globe: any): ProgramInterface => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    release: (globe: any) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic),
+});

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";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { attributeLoader } from "../../util/gl-util/buffer/integrate-buffer";
+import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
 
 import "../../util/gl-util/draw-options/types";

package/programs/line-on-globe/to-the-surface.js

@@ -3,7 +3,7 @@ import { createProgram } from './util'
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from '../totems';
 import { cartesian3DToGLPosition, R_3D } from '../../util/shaderfunctions/geometrytransformations';
 import { noRegisterGlobeProgramCache } from '../programcache';
-import { attributeLoader } from '../../util/gl-util/buffer/integrate-buffer';
+import { attributeLoader } from '../../util/gl-util/buffer/attribute-loader';
 import '../draw-options/types';
 import { drawInstanced } from '../draw-options/methods';
 

package/programs/picking/pickable-renderer.js

@@ -4,7 +4,7 @@ import { mercatorXYToGLPosition, cartesian3DToGLPosition, R_3D, R } from "../../
 import { noRegisterGlobeProgramCache } from "../programcache";
 import "../../util/gl-util/draw-options/types";
 import { drawArrays } from "../../util/gl-util/draw-options/methods";
-import { attributeLoader } from "../../util/gl-util/buffer/integrate-buffer";
+import { attributeLoader } from "../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
 
 

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

@@ -12,7 +12,7 @@ import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totem
 import { PI, mercatorXYToGLPosition, cartesian3DToGLPosition, circleLimpFromLongLatRadCenterCartesian3D_accurate } from "../../util/shaderfunctions/geometrytransformations";
 import { createProgram } from "../../util";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { attributeLoader } from "../../util/gl-util/buffer/integrate-buffer";
+import { 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";
 

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

@@ -2,7 +2,7 @@ import { createProgram } from "../../util";
 import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
 import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
-import { attributeLoader } from "../../util/gl-util/buffer/integrate-buffer";
+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";

package/programs/totems/camerauniformblock.js

@@ -1,5 +1,7 @@
 import { globeProgramCache } from "../programcache";
-
+// import { getFrustumPlanes } from "../../Math/frustum/from-projection-matrix";
+// import { getFrustum } from "../../Math/frustum/from-globeinfo"
+// import { Plane } from "../../Math/";
 
 export const CameraUniformBlockString = `
 layout(std140) uniform CameraUniformBlock {
@@ -30,6 +32,14 @@ export default class
         this.gl = null;
         this.globe = null;
         this.ubo = null;
+        // this._frustumPlanes = {
+        //     left: new Plane(),
+        //     right: new Plane(),
+        //     top: new Plane(),
+        //     bottom: new Plane(),
+        //     near: new Plane(),
+        //     far: new Plane()
+        // }
         this._isMovedParams = {
             lastLod: null,
             isMoved: false,
@@ -107,6 +117,8 @@ export default class
             ]));
         }
 
+        // this._frustumPlanes = getFrustumPlanes(projection, translate);
+
         gl.bindBuffer(gl.UNIFORM_BUFFER, null);
 
         {   // isMoved
@@ -114,6 +126,9 @@ export default class
             this._isMovedParams.isMoved = this._isMovedParams.lastLod !== currentLOD || globe.api_IsScreenMoving();
             this._isMovedParams.lastLod = currentLOD;
         }
+
+        // getFrustum(globe, 50, this._frustumPlanes);
+
     }
 
     assignBindingPoint(program, bindingPoint) {
@@ -127,6 +142,9 @@ export default class
         return this.ubo;
     }
 
+    getFrustumPlanes() {
+        return this._frustumPlanes;
+    }
 
     bind(bindingPoint) {
         const { gl, ubo } = this;
@@ -168,6 +186,11 @@ export default class
 }
 
 
+
+
+
+
+
 export const CameraUniformBlockTotemCache = Object.freeze({
     get: (globe) => { return globeProgramCache.getProgram(globe, CameraUniformBlockTotem) },
     release: (globe) => { return globeProgramCache.releaseProgram(globe, CameraUniformBlockTotem) }

package/programs/vectorfields/logics/drawrectangleparticles.js

@@ -118,7 +118,7 @@ export default class {
     }
 
     free() {
-        glProgramCache.releaseProgram(this.logic);
+        glProgramCache.releaseProgram(this.gl, Logic);
         this.logic = null;
         this.gl = null;
     }

package/shape-on-terrain/arc/naive/plugin.ts

@@ -0,0 +1,304 @@
+// import { LineStripProgramCache } from "../../../programs/line-on-globe/linestrip"
+// import "../../../programs/interface";
+
+// import { createBufferAndReadInfo } from '../../../util/gl-util/buffer/attribute-loader';
+// import { populateFloat32Array } from "../../../util/jshelpers/data-filler";
+// import { BufferManagement, BufferManager, BufferOrchestrator } from "../../../util/account/single-attribute-buffer-management/index";
+// import { globe3Dcoordinates, globe2Dcoordinates, RADIANS } from "../../../Math/methods";
+// import { Vector3D } from "../../../Math/vector3d";
+// import { Arc } from "../../../Math/arc";
+// import { Plane } from "../../../Math/plane";
+// import { arcFrustumPlanesIntersection } from "../../../Math/intersections/arc-frustum-planes";
+
+// import { CameraUniformBlockTotemCache, CameraUniformBlockTotem } from "../../../programs/totems/camerauniformblock";
+// import { FrustumPlanes } from "../../../Math/frustum/types";
+// const VERTEX_COUNT = 360;
+// const INITAL_CAPACITY = 10;
+// const _0vector = new Vector3D();
+// const _0arc = new Arc();
+
+// // window add properties
+// declare global {
+//     interface Window {
+//         startPoint: Vector3D;
+//         endPoint: Vector3D;
+//     }
+// }
+
+// let interval = 1;
+
+// const testVec = new Vector3D(0, 0, 1);
+// testVec.setFromLongLat(30 * RADIANS, 30 * RADIANS);
+// console.log("testVec", testVec.x, testVec.y, testVec.z);
+
+// testVec.setFromLongLat(50 * RADIANS, 50 * RADIANS);
+// console.log("testVec", testVec.x, testVec.y, testVec.z);
+
+
+// export class NaiveLineOnTerrainPlugin {
+//     public id: string;
+//     private program: ProgramInterface;
+//     private _bufferManagersCompMap: BufferManagement;
+//     private _bufferManagersCompMapTest: BufferManagement;
+//     private _bufferOrchestrator: BufferOrchestrator = new BufferOrchestrator({ capacity: INITAL_CAPACITY });
+//     private _testOrchestrator: BufferOrchestrator = new BufferOrchestrator({ capacity: INITAL_CAPACITY });
+//     private _opacity: number = 1;
+//     private _arcUBOHandler: UBOHandler;
+//     private _vao: WebGLVertexArrayObject;
+//     private _vaoAllTest: WebGLVertexArrayObject;
+//     private _ubohandlerAllTest: UBOHandler;
+//     private globe: any;
+//     private gl: WebGL2RenderingContext;
+//     private _arcMap: Map<string, Arc>;
+//     private _arcMapTest: Map<string, Arc>;
+//     private _screenPlane: Plane = new Plane();
+//     private _doBuild: boolean = false
+//     private _cameraUniformBlock: CameraUniformBlockTotem;
+//     public fieldOfView = 50 * RADIANS; // 50 degrees in radians
+
+//     constructor(id: string) {
+//         this.id = id;
+//         this._arcMap = new Map();
+//         this._arcMapTest = new Map();
+//     }
+
+
+
+//     insertArcFromLongLat(key: string, startPoint: { long: number, lat: number }, endPoint: { long: number, lat: number }) {
+//         if (this._arcMap.has(key)) {
+//             this._arcMap.delete(key);
+//         }
+//         const start = _0vector.setFromLongLat(startPoint.long * RADIANS, startPoint.lat * RADIANS).clone();
+//         const end = _0vector.setFromLongLat(endPoint.long * RADIANS, endPoint.lat * RADIANS).clone();
+
+
+
+//         window.startPoint = start;
+//         window.endPoint = end;
+//         const arc = new Arc(start, end);
+//         this._arcMap.set(key, arc);
+//         this._arcMapTest.set(key, arc.clone());
+//         const longLatArr = new Float32Array(2 * VERTEX_COUNT);
+//         const _3Dpoints = arc.populatePoints3D(VERTEX_COUNT);
+//         const longLat = {
+//             long: 1,
+//             lat: 1
+//         };
+//         for (let i = 0; i < _3Dpoints.length / 3; i++) {
+//             _0vector.set(_3Dpoints[i * 3], _3Dpoints[i * 3 + 1], _3Dpoints[i * 3 + 2]).toLongLat(longLat);
+//             longLatArr.set([longLat.long / RADIANS, longLat.lat / RADIANS], i * 2);
+//         }
+//         const result = [{
+//             key: key,
+//             longLatArr: longLatArr,
+//         }
+//         ]
+//         this._testOrchestrator.insertBulk(result, this._bufferManagersCompMapTest);
+
+//         this._doBuild = true;
+//     }
+
+
+
+//     init(globe: any, gl: WebGL2RenderingContext) {
+//         this.globe = globe;
+//         this.gl = gl;
+//         this.program = LineStripProgramCache.get(globe);
+
+//         const g3D = globe3Dcoordinates(globe, 30);
+//         const g2D = globe2Dcoordinates(globe);
+//         this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+//         this._bufferManagersCompMap = new Map(
+//             [
+//                 ["position3d", {
+//                     bufferManager: new BufferManager(gl, 3 * (VERTEX_COUNT + 1), { bufferType: "DYNAMIC_DRAW", initialCapacity: INITAL_CAPACITY }),
+//                     adaptor: (item: any) => {
+//                         const { longLatArr } = item;
+//                         const result = g3D(longLatArr, { paddingCount: 1 });
+//                         // console.log("result", result);
+//                         return result;
+//                     }
+//                 }],
+//                 ["position2d", {
+//                     bufferManager: new BufferManager(gl, 2 * (VERTEX_COUNT + 1), { bufferType: "DYNAMIC_DRAW", initialCapacity: INITAL_CAPACITY }),
+//                     adaptor: (item: any) => {
+//                         const { longLatArr } = item;
+//                         return g2D(longLatArr, { paddingCount: 1 });
+//                     }
+//                 }
+//                 ],
+//             ]
+//         );
+
+//         this._bufferManagersCompMapTest = new Map([
+//             ["positionTest3d", {
+//                 bufferManager: new BufferManager(gl, 3 * (VERTEX_COUNT + 1), { bufferType: "DYNAMIC_DRAW", initialCapacity: INITAL_CAPACITY }),
+//                 adaptor: (item: any) => {
+//                     const { longLatArr } = item;
+//                     const result = g3D(longLatArr, { paddingCount: 1 });
+//                     return result;
+//                 }
+//             }],
+//             ["positionTest2d", {
+//                 bufferManager: new BufferManager(gl, 2 * (VERTEX_COUNT + 1), { bufferType: "DYNAMIC_DRAW", initialCapacity: INITAL_CAPACITY }),
+//                 adaptor: (item: any) => {
+//                     const { longLatArr } = item;
+//                     return g2D(longLatArr, { paddingCount: 1 });
+//                 }
+//             }
+//             ]
+//         ]
+//         );
+
+//         this._bufferOrchestrator = new BufferOrchestrator(gl, this._bufferManagersCompMap);
+
+//         this._arcUBOHandler = this.program.createUBO();
+//         this._arcUBOHandler.update(new Map([
+//             ["u_color", new Float32Array([1, 0, 0, 1])],
+//         ]));
+//         this._ubohandlerAllTest = this.program.createUBO();
+//         this._ubohandlerAllTest.update(new Map([
+//             ["u_color", new Float32Array([0, 0, 1, 1])],
+//         ]));
+
+//         this._vao = this.program.createVAO(
+//             createBufferAndReadInfo(this._bufferManagersCompMap.get("position3d").bufferManager.buffer),
+//             createBufferAndReadInfo(this._bufferManagersCompMap.get("position2d").bufferManager.buffer),
+//             null,
+//             null,
+//             null,
+//         );
+//         this._vaoAllTest = this.program.createVAO(
+//             createBufferAndReadInfo(this._bufferManagersCompMapTest.get("positionTest3d").bufferManager.buffer),
+//             createBufferAndReadInfo(this._bufferManagersCompMapTest.get("positionTest2d").bufferManager.buffer),
+//             null,
+//             null,
+//             null,
+//         );
+//     }
+
+//     setFieldOfView(fieldOfView: number) {
+//         this.fieldOfView = fieldOfView * RADIANS; // convert degrees to radians
+//         this.globe.DrawRender();
+//     }
+
+
+
+//     _buildArcs() {
+//         // updatePlane
+//         const { globe, _arcMap } = this;
+
+//         const planes = this._cameraUniformBlock.getFrustumPlanes() as FrustumPlanes;
+// //
+
+//         const cameraPostition = new Vector3D();
+//         cameraPostition.copy(globe.Fp as Vector3D).normalize();
+//         // calculateHorizonPlane(globe, _screenPlane, this.fieldOfView);
+
+//         const result = [];
+//         const longLat = {
+//             long: 1,
+//             lat: 1
+//         }
+
+//         let counter = 0;
+//         for (const [key, arc] of _arcMap) {
+//             // const isArc = arc.intersectionMedium(_screenPlane, _0arc) as Arc;
+//             _0arc.copy(arc);
+
+//             const isArc = arcFrustumPlanesIntersection(_0arc, planes, _0arc);
+
+//             if (!isArc) {
+//                 continue;
+//             }
+//             counter++;
+//             const longLatArr = new Float32Array(2 * VERTEX_COUNT);
+//             // const _3Dpoints = _0arc.populatePoints3DInRespectToCamera(cameraPostition, VERTEX_COUNT);
+//             const _3Dpoints = _0arc.populatePoints3D(VERTEX_COUNT);
+
+//             for (let i = 0; i < _3Dpoints.length / 3; i++) {
+//                 _0vector.set(_3Dpoints[i * 3], _3Dpoints[i * 3 + 1], _3Dpoints[i * 3 + 2]).toLongLat(longLat);
+//                 longLatArr.set([longLat.long / RADIANS, longLat.lat / RADIANS], i * 2);
+//             }
+
+//             result.push({
+//                 key: key,
+//                 longLatArr: longLatArr,
+//             });
+
+//             // if (!arc.imaginaryPlane.equals(_0arc.imaginaryPlane) || !arc.imaginaryPlane.equalsReverseOriantation(_0arc.imaginaryPlane)) {
+//             //     // console.log("Arc with key", key, "has imaginary plane equal to the original arc's imaginary plane.");
+//             //     throw new Error("The arc segment is not on the parent arc")
+//             // }
+//         }
+//         interval += 1;
+//         if (interval === 100) {
+//             interval = 1;
+//             console.log("Arc count on screen:", counter);
+//         }
+//         // update buffer
+//         this._bufferOrchestrator.resetWithCapacity(this._bufferManagersCompMap, result.length);
+
+//         this._bufferOrchestrator.insertBulk(result, this._bufferManagersCompMap);
+
+//         this._doBuild = false;
+//         this._checkIfCorrupted(); // check if any arc is corrupted
+
+//     }
+
+
+//     draw3D() {
+//         // Drawing logic here
+//         this._buildArcs() // can be async
+//         const { gl, program, _bufferOrchestrator } = this;
+
+//         gl.disable(gl.DEPTH_TEST);
+
+
+
+//         const drawOptionTest = {
+//             drawRange: {
+//                 first: 0,
+//                 count: this._testOrchestrator.length * (VERTEX_COUNT + 1)
+//             },
+//             indexes: null
+//         }
+
+//         program.draw(
+//             this._vaoAllTest,
+//             drawOptionTest,
+//             this._opacity,
+//             this._ubohandlerAllTest
+//         );
+
+
+//         const drawOptions = {
+//             drawRange: {
+//                 first: 0,
+//                 count: _bufferOrchestrator.length * (VERTEX_COUNT + 1)
+//             },
+//             indexes: null
+//         }
+
+//         program.draw(
+//             this._vao,
+//             drawOptions,
+//             this._opacity,
+//             this._arcUBOHandler
+//         );
+
+
+//         gl.enable(gl.DEPTH_TEST);
+//     }
+
+//     _checkIfCorrupted() {
+//         for (const [key, arc] of this._arcMap) {
+//             if (!arc.p0.equals(arc.p1)) {
+//                 continue; // valid arc
+//             }
+//             console.warn(`Arc with key ${key} is corrupted: p0 and p1 are the same point.`);
+//             // this._arcMap.delete(key);
+//             // this._arcMapTest.delete(key);
+//         }
+//     }
+// }