@pirireis/webglobeplugins 0.6.30-c → 0.6.32-a

package/bearing-line/plugin.js

@@ -18,36 +18,16 @@ const constraintFloat = (x, lowerBound, upperBound) => {
     if (lowerBound > x || x > upperBound) throw new Error(`input must be between ${lowerBound} - ${upperBound}`)
 }
 
-/**
- * partial ring angle should be different on globe and mercator.
- * 
- */
-
-
-/**
- * @typedef {Object}textContextInjection
- * @property {string} id
- * @property {function} coordsAdaptor
- * @property {function} textAdaptor
- * @property {ContextTextWriter3} writer
- * 
- */
-
-// TODO UPDATE TO ContextTextWriter3
-
 
 export default class Plugin {
     /**
-     * 
      * @param {*} id 
-     * @param {Map<[key, ContextTextWriter3]>} textContextInjectionMap
-     *
+     * @param {Map<[key, ContextTextWriter3]>} textWritersMap
      */
-
     constructor(id,
         {
             opacity = 1,
-            textContextInjectionMap = new Map(),
+            textWritersMap = new Map(),
             textDataPreAdaptor = null,
             drawVRM = true,
             drawBearingLine = true,
@@ -58,33 +38,33 @@ export default class Plugin {
         this.id = id;
         this._opacity = opacity;
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
-        this._checkTextContextWriterInjectionMap(textContextInjectionMap);
-        this._textContextInjectionMap = textContextInjectionMap;
-        this._textContextInjectionMap.forEach((writer) => writer.keyAdaptor = (item) => item.key);
+        this._checkTextContextWriterInjectionMap(textWritersMap);
+        this._textWritersMap = textWritersMap;
+        this._textWritersMap.forEach((writer) => writer.keyAdaptor = (item) => item.key);
         this.drawVRM = drawVRM;
         this.drawBearingLine = drawBearingLine;
         this.drawAngleRing = drawAngleRing;
-
         this._textDataPreAdaptor = textDataPreAdaptor;
-        this._memoryForText = new Map();
-
         this.drawText = drawText;
-
-        this.circleFlatEdgeCount = circleFlatEdgeCount + 2; //circleFlatEdgeCount;
+        this._memoryForText = new Map();
+        this.circleFlatEdgeCount = circleFlatEdgeCount + 2;
     }
 
+
     setDoDrawVRM(bool) {
         if (bool === this.drawVRM) return;
         this.drawVRM = bool;
         this.globe.DrawRender();
     }
 
+
     setDoDrawText(bool) {
         if (bool === this.drawText) return;
         this.drawText = bool;
         this.globe.DrawRender();
     }
 
+
     setDoDrawText(bool) {
         if (bool === this.drawText) return;
         this.drawText = bool;
@@ -92,8 +72,6 @@ export default class Plugin {
     }
 
 
-
-
     setDoDrawAngleRing(bool) {
         if (bool === this.drawAngleRing) return;
         this.drawAngleRing = bool;
@@ -101,202 +79,14 @@ export default class Plugin {
     }
 
 
-
-
-
     setOpacity(opacity) {
         constraintFloat(opacity, 0, 1);
         this._opacity = opacity;
-        this._textContextInjectionMap.forEach((writer) => writer.setOpacity(opacity));
+        this._textWritersMap.forEach((writer) => writer.setOpacity(opacity));
         this.globe.DrawRender();
     }
 
 
-
-
-    init(globe, gl) {
-        this.gl = gl;
-        this.globe = globe;
-        this.lineProgram = LineOnGlobeCache.get(globe);
-        this.ringProgram = pieceOfPieProgramCache.get(globe);
-        this.circleProgram = CircleCache.get(globe);
-        this.circle3DProgram = Circle3DCache.get(globe);
-        const circleFlatEdgeCount = this.circleFlatEdgeCount
-        {
-            // createBuffers
-            const bufferType = "DYNAMIC_DRAW";
-            const initialCapacity = this.bufferOrchestrator.capacity;
-            this.bufferManagersCompMap = new Map(
-                [
-
-                    ["centerCoords2d", {
-                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
-                    }],
-                    ["centerCoords2dflat", {
-                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount * 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => item.centerCoords2dflat,
-                    }],
-                    ["centerCoords3d", {
-                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.long, item.lat, 0, 0)),
-                    }],
-                    ["targetCoords2d", {
-                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.endLong, item.endLat))
-                    }],
-                    ["targetCoords3d", {
-                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.endLong, item.endLat, 0, 0))
-                    }],
-                    ["bearingTargetCoords2d", {
-                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.bearingLong, item.bearingLat))
-                    }],
-                    ["bearingTargetCoords3d", {
-                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.bearingLong, item.bearingLat, 0, 0))
-                    }],
-                    ["startAngle", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.startAngle])
-                    }],
-                    ["tailAngle", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.tailAngle])
-                    }],
-                    ["startAngle2d", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.startAngle2d])
-                    }],
-                    ["tailAngle2d", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.tailAngle2d])
-                    }],
-                    ["startAngle3d", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.startAngle3d])
-                    }],
-                    ["tailAngle3d", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.tailAngle3d])
-                    }],
-                    ["bearingDashRatio", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([0])
-                    }],
-                    ["rgba", {
-                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(item.rgba)
-                    }],
-                    ["radius", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.radius])
-                    }],
-                    ["rgbaMode", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.rgbaMode])
-                    }],
-                    ["dashRatio", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.dashRatio])
-                    }],
-                    ["bearingAngle", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.bearingAngle])
-                    }],
-                    ["bigRadius", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.bigRadius])
-                    }],
-                    ["dashOpacity", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.dashOpacity]),
-                    }],
-
-                    // normal circle
-                    ["circleDashAngle", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.circleDashAngle / 360]),
-                    }],
-                    // CIRCLE Mercator
-                    ["rgbaMercator", {
-                        'bufferManager': new BufferManager(gl, 4 * circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillWithListData(circleFlatEdgeCount, item.rgba),
-                    }],
-                    ["circleDashAngleMercator", {
-                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(circleFlatEdgeCount, item.circleDashAngle / 360),
-                    }],
-                    ["dashOpacityMercator", {
-                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(circleFlatEdgeCount, item.dashOpacity),
-                    }],
-
-                ]
-            );
-        }
-
-
-        const obj = function (bufferManagerComp, divisor = 1) {
-            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0, divisor }
-
-        };
-
-        this.lineVao = this.lineProgram.createVAO(
-            ...['centerCoords2d', 'centerCoords3d', 'targetCoords2d', 'targetCoords3d', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
-        this.ringVao = this.ringProgram.createVAO(
-            ...['centerCoords2d', 'centerCoords3d',
-                'startAngle2d',
-                'tailAngle2d',
-                'startAngle3d',
-                'tailAngle3d',
-                'rgba',
-                'radius',
-                'rgbaMode'].map(key => obj(this.bufferManagersCompMap.get(key))));
-        {
-            this.bearingLineVAO = this.lineProgram.createVAO(
-                ...['centerCoords2d', 'centerCoords3d', 'bearingTargetCoords2d', 'bearingTargetCoords3d', 'bearingDashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
-        }
-        // centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj
-        this.circleVao = this.circleProgram.createVAO(
-            ...["centerCoords2dflat", "rgbaMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key)))
-        );
-        this.circle3DVao = this.circle3DProgram.createVAO(
-            ...["centerCoords3d", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
-        );
-
-
-    }
-
-
-
-    draw3D() {
-        const { gl } = this;
-        gl.disable(gl.DEPTH_TEST);
-        const is3D = this.globe.api_GetCurrentGeometry() === 0;
-        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
-        if (this.drawAngleRing) {
-            this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity * 0.8, RINGPARTIAL_DRAW_MODE.TRIANGLE_FAN);
-            this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity, RINGPARTIAL_DRAW_MODE.LINE_STRIP);
-        }
-        if (this.drawBearingLine) {
-            this.lineProgram.draw(this.bearingLineVAO, this.bufferOrchestrator.length, this._opacity * 0.8);
-        }
-        if (this.drawVRM) {
-            if (is3D) {
-                this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
-            } else {
-                this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this.circleFlatEdgeCount, this._opacity);
-            }
-        }
-        if (this.drawText) {
-            this._textContextInjectionMap.forEach((writer) => writer.draw());
-        }
-        gl.enable(gl.DEPTH_TEST);
-    }
-
-
     /**
      * @typedef {{key, long, lat, endLong, endLat, bearingAngle, radius,  rgba:[4numbers], rgbaMode, bigRadius, dashRatio, dashOpacity, circleDashAngle}} item
      * @property {string} key   
@@ -313,9 +103,9 @@ export default class Plugin {
      * @property {number} dashOpacity 0-1
      * @property {number} circleDashAngle 0-360
      * @param {Array<item>} items 
-     * @param {Array<string>} textWriterIDs | textContextInjectionMap keys to be used for writing text.
+     * @param {Array<string>} textWriterIDs | textWritersMap keys to be used for writing text.
      */
-    insertBulk(items, textWriterIDs = []) {
+    insertBulk(items, { textWriterIDs = [] } = {}) {
         const { globe, bufferOrchestrator, bufferManagersCompMap } = this;// angleTextContext, distanceTextContext,
         const data = []
         for (let item of items) {
@@ -329,13 +119,14 @@ export default class Plugin {
 
 
     updateText(textWriterIDs) {
-        const textContextInjectionMap = textWriterGetOrThrow(this._textContextInjectionMap, textWriterIDs);
+        const textWritersMap = textWriterGetOrThrow(this._textWritersMap, textWriterIDs);
         this._memoryForText.forEach((item) => {
-            textContextInjectionMap.forEach((writer) => writer.insertText(item));
+            textWritersMap.forEach((writer) => writer.insertText(item));
         });
         this.globe.DrawRender();
     }
 
+
     deleteBulk(keys) {
         this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap);
         for (const key of keys) {
@@ -346,25 +137,25 @@ export default class Plugin {
     }
 
 
-    defrag() {
+    defrag() {// use with caution
         this.bufferOrchestrator.defrag(this.bufferManagersCompMap);
     }
 
 
     /**
      * @param {Array<{key, long, lat, endLong, endLat, bearingAngle}>} items
-     * @param {Array<string>} textWriterIDs | textContextInjectionMap keys to be used for writing text.
+     * @param {Array<string>} textWriterIDs | textWritersMap keys to be used for writing text.
      */
-    updateCoordinatesBulk(items, textWriterIDs = []) {
+    updateCoordinatesBulk(items, { textWriterIDs = [] } = {}) {
         const { globe, bufferOrchestrator, bufferManagersCompMap, } = this;
         const data = []
         for (let item of items) {
             data.push(this.__updateCoordsAdaptor(item));
         }
         this.__insertTexts(items, textWriterIDs);
-        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords2d", "centerCoords3d", "targetCoords2d", "targetCoords3d", "startAngle", "tailAngle",
+        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords2d", "centerCoords3d", "targetCoords2d", "targetCoords3d",
             "startAngle2d", "tailAngle2d", "startAngle3d", "tailAngle3d", "bearingTargetCoords2d", "bearingTargetCoords3d", "centerCoords2dflat",
-            "bearingAngle", "bigRadius", "radius"]);
+            "bigRadius", "radius"]);
         globe.DrawRender();
     }
 
@@ -375,9 +166,9 @@ export default class Plugin {
      * @param {string} propertyIDs 
      * @param {string} textWriterIDs 
      * Do NOT send empty data if property ID of this data is entered or NaN is loaded to the buffer, resulting in an unwanted behaviour.
-     * textWriterIDs = []
+     *{ textWriterIDs = []}
      */
-    updatePartial(items, propertyIDs = [], textWriterIDs = []) {
+    updatePartial(items, propertyIDs = [], { textWriterIDs = [] } = {}) {
         if (propertyIDs.length === 0) console.warn("updatePartial is called with no target propertyIDs");
         const fixedPropertyIDs = this.__fixPartialProperties(propertyIDs)
         const { bufferOrchestrator, bufferManagersCompMap } = this;
@@ -387,6 +178,7 @@ export default class Plugin {
         this.globe.DrawRender();
     }
 
+    // Private methods
 
     _checkTextContextWriterInjectionMap(textContextWriterInjectionMap) {
         if (!(textContextWriterInjectionMap instanceof Map)) throw new Error("textContextWriterInjectionMap is not an instance of Map");
@@ -397,16 +189,17 @@ export default class Plugin {
 
 
     __insertTexts(items, textWriterIDs) {
-        const textContextInjectionMap = textWriterGetOrThrow(this._textContextInjectionMap, textWriterIDs);
+        const textWritersMap = textWriterGetOrThrow(this._textWritersMap, textWriterIDs);
         for (const item of items) {
             const oldItem = this._memoryForText.get(item.key);
             let _item = oldItem !== undefined ? { ...oldItem, ...item } : item;
             if (this._textDataPreAdaptor !== null) _item = this._textDataPreAdaptor(_item);
             this._memoryForText.set(item.key, _item);
-            textContextInjectionMap.forEach((writer) => writer.insertText(_item));
+            textWritersMap.forEach((writer) => writer.insertText(_item));
         }
     }
 
+
     __insertAdaptor(item) {
         const rgba = item.rgba !== undefined ? item.rgba : [0, 0, 0, 0];
         const rgbaMode = item.rgbaMode !== undefined ? item.rgbaMode : 0;
@@ -482,7 +275,168 @@ export default class Plugin {
         return result;
     }
 
-    //TODO free
+    // Globe API
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.lineProgram = LineOnGlobeCache.get(globe);
+        this.ringProgram = pieceOfPieProgramCache.get(globe);
+        this.circleProgram = CircleCache.get(globe);
+        this.circle3DProgram = Circle3DCache.get(globe);
+        const circleFlatEdgeCount = this.circleFlatEdgeCount
+        {
+            // createBuffers
+            const bufferType = "DYNAMIC_DRAW";
+            const initialCapacity = this.bufferOrchestrator.capacity;
+            this.bufferManagersCompMap = new Map(
+                [
+                    ["centerCoords2d", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
+                    }],
+                    ["centerCoords2dflat", {
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount * 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => item.centerCoords2dflat,
+                    }],
+                    ["centerCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.long, item.lat, 0, 0)),
+                    }],
+                    ["targetCoords2d", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.endLong, item.endLat))
+                    }],
+                    ["targetCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.endLong, item.endLat, 0, 0))
+                    }],
+                    ["bearingTargetCoords2d", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.bearingLong, item.bearingLat))
+                    }],
+                    ["bearingTargetCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.bearingLong, item.bearingLat, 0, 0))
+                    }],
+                    ["startAngle2d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.startAngle2d])
+                    }],
+                    ["tailAngle2d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.tailAngle2d])
+                    }],
+                    ["startAngle3d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.startAngle3d])
+                    }],
+                    ["tailAngle3d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.tailAngle3d])
+                    }],
+                    ["bearingDashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([0])
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(item.rgba)
+                    }],
+                    ["radius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.radius])
+                    }],
+                    ["rgbaMode", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.rgbaMode])
+                    }],
+                    ["dashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.dashRatio])
+                    }],
+
+                    ["bigRadius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.bigRadius])
+                    }],
+                    ["dashOpacity", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.dashOpacity]),
+                    }],
+                    ["circleDashAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.circleDashAngle / 360]),
+                    }],
+                    // Mercator circle properties are duplicated for the sake of performance.
+                    ["rgbaMercator", {
+                        'bufferManager': new BufferManager(gl, 4 * circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillWithListData(circleFlatEdgeCount, item.rgba),
+                    }],
+                    ["circleDashAngleMercator", {
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(circleFlatEdgeCount, item.circleDashAngle / 360),
+                    }],
+                    ["dashOpacityMercator", {
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(circleFlatEdgeCount, item.dashOpacity),
+                    }],
+                ]
+            );
+        }
+        const obj = function (bufferManagerComp, divisor = 1) {
+            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0, divisor }
+        };
+        this.lineVao = this.lineProgram.createVAO(
+            ...['centerCoords2d', 'centerCoords3d', 'targetCoords2d', 'targetCoords3d', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        this.ringVao = this.ringProgram.createVAO(
+            ...['centerCoords2d', 'centerCoords3d',
+                'startAngle2d',
+                'tailAngle2d',
+                'startAngle3d',
+                'tailAngle3d',
+                'rgba',
+                'radius',
+                'rgbaMode'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        {
+            this.bearingLineVAO = this.lineProgram.createVAO(
+                ...['centerCoords2d', 'centerCoords3d', 'bearingTargetCoords2d', 'bearingTargetCoords3d', 'bearingDashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        }
+        this.circleVao = this.circleProgram.createVAO(
+            ...["centerCoords2dflat", "rgbaMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+        this.circle3DVao = this.circle3DProgram.createVAO(
+            ...["centerCoords3d", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+    }
+
+
+    draw3D() {
+        const { gl } = this;
+        gl.disable(gl.DEPTH_TEST);
+        const is3D = this.globe.api_GetCurrentGeometry() === 0;
+        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
+        if (this.drawAngleRing) {
+            this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity * 0.8, RINGPARTIAL_DRAW_MODE.TRIANGLE_FAN);
+            this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity, RINGPARTIAL_DRAW_MODE.LINE_STRIP);
+        }
+        if (this.drawBearingLine) {
+            this.lineProgram.draw(this.bearingLineVAO, this.bufferOrchestrator.length, this._opacity * 0.8);
+        }
+        if (this.drawVRM) {
+            if (is3D) {
+                this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
+            } else {
+                this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this.circleFlatEdgeCount, this._opacity);
+            }
+        }
+        if (this.drawText) {
+            this._textWritersMap.forEach((writer) => writer.draw());
+        }
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+
     free() {
         if (this.isFreed) return;
         this.bufferManagersCompMap.forEach(({ bufferManager, adaptor }) => {
@@ -502,16 +456,11 @@ export default class Plugin {
     }
 
 
-
-
     _deleteTexts(keys) {
-        this._textContextInjectionMap.forEach((writer) => {
+        this._textWritersMap.forEach((writer) => {
             writer.deleteTextBulk(keys);
         });
     }
-
-
-
 }