@pirireis/webglobeplugins 0.2.0 → 0.3.0

package/Math/angle-calculation.js

@@ -0,0 +1,12 @@
+export function bearingRealAngle(long, lat, endLong, endLat) {
+    const rLong = Radians * long;
+    const rLat = Radians * lat;
+    const rEndLong = Radians * endLong;
+    const rEndLat = Radians * endLat;
+    const delta_long = rEndLong - rLong;
+    const x = Math.sin(delta_long) * Math.cos(rEndLat);
+    const y = Math.cos(rLat) * Math.sin(rEndLat) - Math.sin(rLat) * Math.cos(rEndLat) * Math.cos(delta_long);
+    let initialBearing = Math.atan2(x, y) / Radians;
+    initialBearing = (initialBearing + 360) % 360;
+    return initialBearing;
+}

package/bearing-line/index.js

@@ -0,0 +1,2 @@
+import BearingLinePlugin from "./plugin"
+export { BearingLinePlugin };

package/bearing-line/plugin.js

@@ -1,16 +1,44 @@
 import { programCache as ringProgramCache } from '../partialrings/program';
 import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
-
+import { CircleCache } from '../programs/line-on-globe/circle';
+import { BufferOrchestrator, BufferManager } from '../util/account';
+import { AngledLineProgramCache } from '../programs/line-on-globe/angled-line';
+import { ContextTextWriter } from '../write-text/context-text'
 export const RINGPARTIAL_DRAW_MODE = Object.freeze({
     LINE_STRIP: "LINE_STRIP",
     TRIANGLE_FAN: "TRIANGLE_FAN",
 });
 
+
+/**
+ * @typedef {Object}textContextInjection
+ * @property {string} id
+ * @property {function} coordsAdaptor
+ * @property {function} textAdaptor
+ * @property {ContextTextWriter} writer
+ * 
+ */
+
 export default class Plugin {
 
-    constructor(id, { opacity = 1 } = {}) {
+
+    constructor(id, { opacity = 1, textContextInjectionMap = new Map() } = {}) {
         this.id = id;
         this._opacity = opacity;
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+        this._textContextInjectionMap = textContextInjectionMap;
+    }
+
+
+    settextContextInjectionMap(textContextInjectionMap, data = null) {
+        this._textContextInjectionMap = textContextInjectionMap;
+        this._textContextInjectionMap.forEach(({ writer }) => writer.clear());
+        if (data) {
+            for (const item of data) {
+                this._insertTexts(item);
+            }
+        }
+
     }
 
     setOpacity(opacity) {
@@ -23,21 +51,103 @@ export default class Plugin {
         this.globe = globe;
         this.lineProgram = LineOnGlobeCache.get(globe);
         this.ringProgram = ringProgramCache.get(globe);
-        this.lineBufferManager = this.lineProgram.createBufferManager();
-        const { bufferManager, vao } = this.ringProgram.getBufferManagerAndVao();
-        this.ringBufferManager = bufferManager;
-        this.ringVao = vao;
+        this.angledLineProgram = AngledLineProgramCache.get(globe);
+        this.circleProgram = CircleCache.get(globe);
+        // this.angleTextContext = new ContextTextWriter(globe);
+        // this.distanceTextContext = new ContextTextWriter(globe);
+        {
+            // createBuffers
+            const bufferType = "DYNAMIC_DRAW";
+            const initialCapacity = this.bufferOrchestrator.capacity;
+            this.bufferManagersCompMap = new Map(
+                [
+                    ["centerCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.long, item.lat]),
+                    }],
+                    ["targetCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.endLong, item.endLat])
+                    }],
+                    ["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])
+                    }],
+                    ["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])
+                    }],
+                    ["circleDashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.circleDashRatio])
+                    }]
+                ]
+            );
+        }
+
+
+        const obj = function (bufferManagerComp) {
+            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
+        };
+
+        this.lineVao = this.lineProgram.createVAO(
+            ...['centerCoords', 'targetCoords', 'dashRatio', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        this.ringVao = this.ringProgram.createVAO(
+            ...['centerCoords', 'startAngle', 'tailAngle', 'rgba', 'radius', 'rgbaMode'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        {
+            const angledLineBuffers = ["centerCoords", "bearingAngle", "bigRadius", "rgba", "dashRatio"].map(key => obj(this.bufferManagersCompMap.get(key)));
+            // dashOpacity is same as rgba.a to eleminate effect of dashOpacity.
+            const colorBuffer = this.bufferManagersCompMap.get("rgba");
+            angledLineBuffers.push(
+                { 'buffer': colorBuffer.bufferManager.buffer, 'stride': 16, 'offset': 12 },
+            )
+            this.angledLineVao = this.angledLineProgram.createVAO(...angledLineBuffers);
+        }
+        // centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj
+        this.circleVao = this.circleProgram.createVAO(
+            ...["centerCoords", "startAngle", "bigRadius", "rgba", "circleDashRatio", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
     }
 
 
+
     draw3D() {
-        // vao, edgeCount, alphaMultiplier, drawMode,
-        this.lineProgram.draw(this.lineBufferManager.vao, this.lineBufferManager.length, this._opacity);
-        //bufferManager, vao, edgeCount, alphaMultiplier, drawMode
-        this.gl.disable(this.gl.DEPTH_TEST);
-        this.ringProgram.draw(this.ringBufferManager.length, this.ringVao, 32, this._opacity * 0.9, RINGPARTIAL_DRAW_MODE.TRIANGLE_FAN);
-        this.ringProgram.draw(this.ringBufferManager.length, this.ringVao, 32, this._opacity, RINGPARTIAL_DRAW_MODE.LINE_STRIP);
-        this.gl.enable(this.gl.DEPTH_TEST);
+        const { gl } = this;
+        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
+        gl.disable(gl.DEPTH_TEST);
+        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);
+        this.angledLineProgram.draw(this.angledLineVao, this.bufferOrchestrator.length, this._opacity * 0.8);
+        this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+        this._textContextInjectionMap.forEach((e) => { e.writer.draw(); });
+        gl.enable(gl.DEPTH_TEST);
     }
 
 
@@ -47,60 +157,32 @@ export default class Plugin {
      */
 
     insertBulk(items) {
+        const { globe, bufferOrchestrator, bufferManagersCompMap } = this;// angleTextContext, distanceTextContext,
+        const data = []
         for (let item of items) {
-            const { lat, long, endLat, endLong, radius = null, rgbaMode = null, bearingAngle = 0 } = item;
-            item.long = radian(long);
-            item.lat = radian(lat);
-            item.endLong = radian(endLong);
-            item.endLat = radian(endLat);
-            if (radius === null) {
-                item.radius = 100000;
-            }
-            if (rgbaMode === null) {
-                item.rgbaMode = 0;
-            }
-            const startAngle = calculateStartAngle(item.long, item.lat, item.endLong, item.endLat);
+            this._insertTexts(item);
+            data.push(this.__insertAdaptor(item));
 
-            item.startAngle = startAngle;
-            const shaderBearingAngle = radian(bearingAngle - 90);
-            item.tailAngle = shaderBearingAngle - startAngle;
-        }
-        this.lineBufferManager.insertBulk(items);
-        this.ringBufferManager.insertBulk(items);
-        this.globe.DrawRender();
-    }
 
-    /**
-     * 
-     * @param {Array<{key, long, lat, endLong, endLat, bearingAngle, rgba:[4numbers], colorMode}>} items // TIDI
-     */
-    updateBulk(items) { //TODO
-        this.lineBufferManager.updateBulk(items);
-        for (let item of items) {
-            const { long, lat, endLong, endLat } = item;
-            item.long = radian(long);
-            item.lat = radian(lat);
-            item.endLong = radian(endLong);
-            item.endLat = radian(endLat);
-            const startAngle = calculateStartAngle(item.long, item.lat, item.endLong, item.endLat);
-            item.startAngle = startAngle;
         }
-        this.ringBufferManager.updateBulk(items);
-        this.globe.DrawRender();
+        bufferOrchestrator.insertBulk(data, bufferManagersCompMap);
+        globe.DrawRender();
     }
 
 
+
+
     deleteBulk(keys) {
-        this.lineBufferManager.deleteBulk(keys);
-        this.ringBufferManager.deleteBulk(keys);
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap, ["radius", "centerCoords", "targetCoords", "rgba"]);
+
+        this._deleteTexts(keys);
         this.globe.DrawRender();
     }
 
 
     defrag() {
-        this.lineBufferManager.defrag();
-        this.ringBufferManager.defrag();
-        this.globe.DrawRender();
+        this.bufferOrchestrator.defrag(this.bufferManagersCompMap);
+        // this.globe.DrawRender();
     }
 
     /**
@@ -108,33 +190,119 @@ export default class Plugin {
      * @param {Array<{key, long, lat, endLong, endLat, bearing}>} items // TODO
      */
     updateCoordinatesBulk(items) { //TODO
+        const { globe, bufferOrchestrator, bufferManagersCompMap, angleTextContext, distanceTextContext } = this;
+        const data = []
         for (let item of items) {
-            const { long, lat, endLong, endLat, bearingAngle } = item;
-            item.long = radian(long);
-            item.lat = radian(lat);
-            item.endLong = radian(endLong);
-            item.endLat = radian(endLat);
-            const startAngle = calculateStartAngle(item.long, item.lat, item.endLong, item.endLat);
-            item.startAngle = startAngle;
-            item.tailAngle = radian(bearingAngle - 90) - startAngle;
+            this._insertTexts(item);
+            data.push(this.__updateCoordsAdaptor(item));
         }
-        this.ringBufferManager.updateCenterAndAngleBulk(items);
-        this.lineBufferManager.updateCoordinatesBulk(items);
-        this.globe.DrawRender();
+
+        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords", "targetCoords", "startAngle", "tailAngle", "bearingAngle", "bigRadius", "radius"]);
+        globe.DrawRender();
+    }
+
+
+    __insertAdaptor(item) {
+        const lat = radian(item.lat)
+        const long = radian(item.long)
+        const endLat = radian(item.endLat)
+        const endLong = radian(item.endLong)
+        const rgba = item.rgba !== undefined ? item.rgba : [0, 0, 0, 0];
+        const rgbaMode = item.rgbaMode !== undefined ? item.rgbaMode : 0;
+        const dashRatio = item.dashRatio !== undefined ? item.dashRatio : 1.0;
+        const dashOpacity = item.dashOpacity !== undefined ? item.dashOpacity : 0.9;
+        const circleDashRatio = item.circleDashAngle !== undefined ? (item.circleDashAngle / 360) : 1.0;
+        console.log("cicleDashRati", circleDashRatio);
+        const bigRadius = item.bigRadius !== undefined ? item.bigRadius : this.globe.Math.GetDist3D(item.long, item.lat, item.endLong, item.endLat);
+        const radius = item.radius !== undefined ? item.radius : bigRadius * 0.2;
+        const startAngle = calculateStartAngle(long, lat, endLong, endLat);
+        const bearingAngle = radian(item.bearingAngle - 90);
+        let tailAngle = bearingAngle - startAngle;
+        if (tailAngle > 0) {
+            tailAngle -= Math.PI * 2;
+        }
+        return {
+            key: item.key,
+            lat,
+            long,
+            endLat,
+            endLong,
+            bearingAngle,
+            radius,
+            bigRadius,
+            startAngle,
+            tailAngle,
+            rgba,
+            dashRatio,
+            dashOpacity,
+            circleDashRatio,
+            rgbaMode
+        };
+    }
+
+    __updateCoordsAdaptor(item) {
+        const lat = radian(item.lat)
+        const long = radian(item.long)
+        const endLat = radian(item.endLat)
+        const endLong = radian(item.endLong)
+
+        const bigRadius = item.bigRadius !== undefined ? item.bigRadius : this.globe.Math.GetDist3D(item.long, item.lat, item.endLong, item.endLat);
+        const radius = item.radius !== undefined ? item.radius : bigRadius * 0.2;
+        const startAngle = calculateStartAngle(long, lat, endLong, endLat);
+        const bearingAngle = radian(item.bearingAngle - 90);
+        let tailAngle = bearingAngle - startAngle;
+        if (tailAngle > 0) {
+            tailAngle -= Math.PI * 2;
+        }
+        return {
+            key: item.key,
+            lat,
+            long,
+            endLat,
+            endLong,
+            bearingAngle,
+            radius,
+            bigRadius,
+            startAngle,
+            tailAngle,
+        };
     }
 
+
     //TODO free
     free() {
         if (this.isFreed) return;
-        this.lineBufferManager.free();
-        this.ringBufferManager.free();
-        LineOnGlobeCache.free(this.globe);
-        ringProgramCache.free(this.globe);
+        this.bufferManagersCompMap.forEach(({ bufferManager, adaptor }) => {
+            bufferManager.free();
+        });
+        LineOnGlobeCache.release(this.globe);
+        ringProgramCache.release(this.globe);
+        CircleCache.release(this.globe);
+        AngledLineProgramCache.release(this.globe);
         this.isFreed = true;
     }
+
+
+
+    _insertTexts(item) {
+        this._textContextInjectionMap.forEach((v) => {
+            const { coordsAdaptor, textAdaptor, writer } = v
+            const { lat, long } = coordsAdaptor(item);
+            const text = textAdaptor(item);
+            writer.insertText(item.key, lat, long, text);
+        });
+    }
+
+    _deleteTexts(keys) {
+        this._textContextInjectionMap.forEach((e) => {
+            e.writer.deleteTextBulk(keys);
+        });
+    }
+
 }
 
 
+
 const radian = (degree) => degree * Math.PI / 180;
 
 const integralSec = (angle) => {

package/bearing-line/roadmap.md

@@ -1,3 +1,15 @@
-# Two proglems:
+# Two problems:
 lines are curved to to arrive perpendicular to the longitude lines
-patrial rings are not fit to the lines nor the bearing angle
+patrial rings are not fit to the lines nor the bearing angle
+
+
+
+# AngledLine 
+
+Does not render
+Check:
+[-] VAO
+[-] Attributes are loaded with data  
+    Assign constants to attributes. 
+[x] Uniforms are loaded // program was not used before setting opacity
+[x] Check geometry // Assigning a constant to the geometry made all edges of the line overlap and the line was not visible

package/package.json

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

package/partialrings/program.js

@@ -5,7 +5,7 @@ import {
     POLE,
     PI,
     longLatRadToMercator,
-    mercatorXYTo2DPoint,
+    mercatorXYToGLPosition,
     longLatRadToCartesian3D,
     circleLimpFromLongLatRadCenterCartesian3D,
     circleLimpFromLongLatRadCenterMercatorRealDistance,
@@ -28,15 +28,16 @@ const drawModeMap = Object.freeze({
 
 
 
-const vertexShaderSource = `#version 300 es` +
-    CameraUniformBlockString +
-    PI +
-    longLatRadToMercator +
-    mercatorXYTo2DPoint +
-    longLatRadToCartesian3D +
-    circleLimpFromLongLatRadCenterCartesian3D +
-    circleLimpFromLongLatRadCenterMercatorRealDistance +
-    cartesian3DToGLPosition + `
+const vertexShaderSource = `#version 300 es
+
+${CameraUniformBlockString} 
+${PI} 
+${longLatRadToMercator}
+${mercatorXYToGLPosition}
+${longLatRadToCartesian3D}
+${circleLimpFromLongLatRadCenterCartesian3D}
+${circleLimpFromLongLatRadCenterMercatorRealDistance}
+${cartesian3DToGLPosition}
 
 uniform float edge_count;
 uniform int draw_mode; // %2 => 0: LINE_STRIP, 1: TRIANGLE_FAN 
@@ -48,14 +49,17 @@ in float tail_angle; // the rotation of the partial circle
 in vec4 color;
 in float radius; // in meter
 in float color_mode; // 0.0: constant, 1.0: fading, 2.0: hide
-
+flat out int vid;
+out float v_phase;
 out vec2 v_pos;
 out vec4 v_color;
-
+flat out float v_angle;
 
 void main() {
+    vid = gl_VertexID;
     if (color_mode == 2.0 || radius == 0.0) { return; }
-
+    float color_mode_ = color_mode;
+    if ( draw_mode == 0 && color_mode == 1.0) {color_mode_ = 0.0;}
     float vertexID = float(gl_VertexID);
     float radius_ = radius;
     float alpha = plugin_alpha_multiplier;
@@ -66,13 +70,15 @@ void main() {
         }
         vertexID -= 1.0;
     }
-    float phase = ( vertexID  / edge_count);
-
-    if ( color_mode == 1.0 ) {
+    float phase = ( vertexID  / (edge_count - 1.0) );
+    v_angle = tail_angle;
+    
+    
+    if ( color_mode_ == 1.0 ) {
         if ( tail_angle < 0.0 ) {
                 v_color = vec4( color.rgb , color.a * ( 1.0 - phase ) * alpha );
             } else {
-                v_color = vec4( color.rgb , color.a * (phase ) * alpha );
+                v_color = vec4( color.rgb , color.a * phase * alpha );
         }
     } else {
         v_color = vec4( color.rgb , color.a * alpha );
@@ -80,7 +86,7 @@ void main() {
 
     float angle;
     if ( tail_angle > 0.0 ) { 
-        angle =  tail_angle * (-phase + 1.0 - 1.0 / edge_count) + start_angle;
+        angle =  tail_angle * (-phase + 1.0) + start_angle;
         } else {
         angle = tail_angle * phase + start_angle;
     }
@@ -94,22 +100,25 @@ void main() {
         
         vec2 pos = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
         v_pos = pos;
-        gl_Position = mercatorXYTo2DPoint(pos);
+        gl_Position = mercatorXYToGLPosition(pos);
     }
 
-
     gl_PointSize = 10.0;
 }`;
 
 
-const fragmentShaderSource = `#version 300 es` + POLE + `
+const fragmentShaderSource = `#version 300 es` + POLE + PI + `
 precision highp float;
-
+flat in int vid;
 in vec4 v_color;
 in vec2 v_pos;
+flat in float v_phase;
+in float v_angle;
 out vec4 outColor;
-
 void main() {
+    // if( vid % 2 == 0 ) { discard; }
+    // if ( mod(v_angle, PI / 36.0 ) < (PI / 72.0)) { discard; }
+    // if ( mod(v_angle * v_phase,  PI / 90.0 ) < (PI / 180.0)) { discard; }
     if ( v_pos.x < -POLE || v_pos.x > POLE || v_pos.y < -POLE || v_pos.y > POLE ) { discard; }
     outColor = v_color;
 }`;
@@ -163,7 +172,7 @@ export class Logic {
     draw(length, vao, edgeCount, alphaMultiplier, drawMode) {
         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this
 
-        gl.disable(gl.DEPTH_TEST);
+        // gl.disable(gl.DEPTH_TEST);
         gl.useProgram(program);
         if (drawMode !== this._lastMode) {
             gl.uniform1i(this._draw_modeLocation, drawModeMap[drawMode]);
@@ -183,7 +192,7 @@ export class Logic {
         gl.drawArraysInstanced(gl[drawMode], 0, edgeCount + overdraw, length);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
         gl.bindVertexArray(null);
-        gl.enable(gl.DEPTH_TEST);
+        // gl.enable(gl.DEPTH_TEST);
     }
 
 
@@ -236,6 +245,70 @@ export class Logic {
         }
     }
 
+    /**
+     * in vec2 center; // long, lat in radian
+in float start_angle; // the start of partial circle from bearing point
+in float tail_angle; // the rotation of the partial circle
+in vec4 color;
+in float radius; // in meter
+in float color_mode; // 0.0: constant, 1.0: fading, 2.0: hide
+     */
+
+    createVAO(centerObj, startAngleObj, tailAngleObj, colorObj, radiusObj, colorModeObj) {
+
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+
+        {
+            const { buffer, stride, offset } = centerObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(0, 1);
+        }
+
+        {
+            const { buffer, stride, offset } = startAngleObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(1, 1);
+        }
+        {
+            const { buffer, stride, offset } = tailAngleObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(2, 1);
+        }
+        {
+            const { buffer, stride, offset } = colorObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(3, 1);
+        }
+        {
+            const { buffer, stride, offset } = radiusObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(4);
+            gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(4, 1);
+        }
+        {
+            const { buffer, stride, offset } = colorModeObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(5);
+            gl.vertexAttribPointer(5, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(5, 1);
+        }
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return vao;
+    }
+
+
     getBufferManagerAndVao({ capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
         const { vao, buffer } = this.getVaoBuffer();
         return {