@pirireis/webglobeplugins 0.3.6 → 0.3.8

package/circle-lines/plugin.js

@@ -0,0 +1,331 @@
+/**
+ * import programs, buffer orchestrator
+ * 
+ * 
+ * import dext managers
+ * 
+ * Entities:
+ * AcircleLine
+ *  - circle
+ *  - line
+ * 
+ * Chain 
+  user data
+  [ {
+    chainKey: "Magrib",
+    nodes: new Map([
+        [ "Tanca", {long, lat, to:"Cebelitarik"}],
+        [ "Cebelitarik", {long, lat, to: null}]
+    ])
+  }]
+  implicitly add from keyword for simplicity;
+ * # Mouse interations
+*/
+
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
+import { CircleCache } from '../programs/line-on-globe/circle';
+import { BufferOrchestrator } from "../util/account";
+import { ChainListMap } from "./chain-list-map";
+import { keyMethod } from "./util";
+import { buffer } from 'three/tsl';
+
+// TODO: Add update buffer and update text mehods on add, delete, update methods
+
+
+/**
+ * Insert info to chain list map (nodes and properties)
+ * 
+ * ask chain list map for text data
+ * ask chain list map for buffer data
+ * 
+ */
+
+const radian = Math.PI / 180;
+
+export class CircleLineChainPlugin {
+
+    constructor(id, { textContextInjectionMap = new Map() } = {}) {
+        this.id = id;
+        this._textContextInjectionMap = textContextInjectionMap;
+        this._opacity = 1;
+        this._chainListMap = new ChainListMap();
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+        this._chainListMap
+    }
+
+    // init
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe
+        this._initOrchestrations()
+    }
+
+
+    _initOrchestrations() {
+        this.lineProgram = LineOnGlobeCache.get(globe);
+        this.circleProgram = CircleCache.get(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([radian * item.long, radian * item.lat]),
+                    }],
+                    ["targetCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([radian * item.targetLong, radian * item.targetLat])
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(item.rgba)
+                    }],
+                    ["bigRadius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.bigRadius])
+                    }],
+                    ["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])
+                    }],
+
+                    ["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])
+                    }]
+                ]
+            );
+            // (startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj)
+            this.lineVao = this.lineProgram.createVAO(
+                ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+            this.circleVao = this.circleProgram.createVAO(
+                ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+        }
+
+    }
+
+
+    // API
+
+    // -- update bulk family
+    /**
+     * 
+     * @param {Array<chain>} data 
+     * @typedef chain
+     * @property {string} chainKey
+     * @property {Array<node>} nodes
+     * 
+     * @typedef {Object} node
+     * @property {string} key
+     * @property {number} long
+     * @property {number} lat  
+     */
+    updateCoordinatesBulk(data, textWriterInjectionSubSetIDs = []) {
+        // update implicit data structure
+        // find keys to update.. (inserted data and the radius of "from")
+        // updateBuffers
+        // update text
+    }
+
+
+
+    // ---- insertBulk family
+    /**
+     * 
+     * @param {Array<chain>} data 
+     * @typedef chain
+     * @property {string} chainKey
+     * @property {[0-1,0-1,0-1,0-1]} rgba
+     * @property { 0-1 } dashOpacity 
+     * @property { 0-1 } dashRatio
+     * @property {0-360} circleDashAngle 
+     * @property {Array<node>} nodes
+     * 
+     * @typedef {Object} node
+     * @property {string} key
+     * @property {number} long
+     * @property {number} lat  
+     */
+    insertBulk(data) {
+        // first insert everything to implicit structure,
+        // then iterate over data again to update text
+        // let _reconstractChainBufferData method interact with data and bufferOrchestrator.
+        const chainKeysToConstruct = [];
+
+        for (const { chainKey, rgba, dashOpacity, dashRatio, circleDashAngle, nodes } of data) {
+            this._chainListMap.setChain(chainKey, nodes);
+            this._chainListMap.setChainInfo(chainKey, {
+                rgba, dashOpacity, dashRatio, circleDashAngle
+            });
+            chainKeysToConstruct.push(chainKey);
+        }
+        this._reconstructChains(chainKeysToConstruct);
+    }
+
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {*} key // node key
+     * @param {*} long 
+     * @param {*} lat 
+     * @param {*} theNodeKeyFront | node key of the next node, null places to the last
+     */
+    addNode(chainKey, key, long, lat, theNodeKeyFront = null) {
+        // TODO: if before object is null update the last two elements of the chain only. 
+        this._chainListMap.addNode({ lat, long, key }, chainKey, theNodeKeyFront);
+        this._reconstructChains([chainKey]);
+
+    }
+
+
+
+    updateNodeCoordinates(node, chainKey, textContextIDs) {
+        this._chainListMap.updateNode(node, chainKey);
+
+        {
+            const textContexts = textContextIDs.map(v => this._textContextInjectionMap.get(v));
+            this._chainListMap.textUpdate(chainKey, textContextIDs,)
+        }
+
+    }
+
+
+
+    setOpacity(opacity) {
+        this._opacity = opacity;
+    }
+
+
+
+    getChain(chainKey) {
+        this._chainListMap.getChain(chainKey);
+    }
+
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {*} nodeKeys 
+     */
+    deleteChain(chainKey) {
+        const keys = this._chainListMap.deleteChainAndReturnChainKeys(chainKey)
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap)
+    }
+
+
+    /**
+     * 
+     * @param {Map<keys, [nodeKeys]} keysAndNodes
+     */
+    deleteNodes(keysAndNodes) {
+        const bufferKeys = [];
+        const chainKeysToReconstuct = [];
+        keysAndNodes.forEach((nodeList, chainKey, m) => {
+            bufferKeys.push(...this._chainListMap.deleteChainAndReturnChainKeys(chainKey, nodeList));
+            chainKeysToReconstuct.push(chainKey);
+        })
+        this._reconstructChains(chainKeysToReconstuct);
+        this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
+    }
+
+
+    deleteNode(chainKey, nodeKey) {
+        this._chainListMap.deleteNode(chainKey, nodeKey);
+
+    }
+
+    // implicit
+
+    _updateTextOpacityAll(items) {
+        this._textContextInjectionMap.forEach((v) => {
+            const { writer } = v
+            for (const item of items) {
+                if (item.rgba) {
+                    writer.updateOpacityOfItem(item.key, item.rgba[3])
+                }
+            }
+        });
+    }
+
+
+    _insertTexts(item, textWriterInjectionSubSet) {
+        //TODO This method can be more performant if it works horizontally, tabular
+        textWriterInjectionSubSet.forEach((v) => {
+            const { coordsAdaptor, textAdaptor, writer } = v
+            const { lat, long } = coordsAdaptor(item);
+            const text = textAdaptor(item);
+            writer.insertText(item.key, lat, long, text);
+        });
+    }
+
+
+
+    _reconstructChains(chainKeys) {
+        const { globe } = globe;
+        //     this.lineVao = this.lineProgram.createVAO(
+        //         ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        //     this.circleVao = this.circleProgram.createVAO(
+        //         ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+        // }
+        const radiusM = radiusMethod(globe);
+        const callback = (v, i, array, probs) => {
+            return {
+                rgba: probs.rgba,
+                bigRadius: radiusM(v, i, array),
+                circleDashAngle: probs.circleDashAngle,
+                dashOpacity: probs.dashOpacity,
+                dashRatio: probs.dashRatio,
+                long: v.long,
+                lat: v.lat,
+                targetLong: array[i + 1].long,
+                targetLat: array[i + 1].lat,
+                key: keyMethod(probs.chainKey, v.key)
+            }
+        }
+        const bulkData = [];
+        chainKeys.forEach((k) => {
+            this._chainListMap.calculateBufferPropertiesChain(k, callback, bulkData);
+        })
+
+        this._insertBulk(bulkData);
+    }
+
+
+    _insertBulk(bulkData) {
+        this.bufferOrchestrator.insertBulk(bulkData, this.bufferManagersCompMap);
+    }
+
+
+    // GLOBE API
+    //TODO:
+    free() {
+        if (this.isFreed) return;
+        this.bufferManagersCompMap.forEach(({ bufferManager }) => {
+            bufferManager.free();
+        })
+        LineOnGlobeCache.release(this.globe);
+        CircleCache.release(this.globe);
+        this.isFreed = true;
+    }
+
+    draw3D() {
+        const { gl } = this;
+        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
+    }
+}
+
+
+
+const radiusMethod = (globe) => (v, i, array) => {
+    return globe.Math.GetDist2D(v.long, v.lat, array[i + 1].endLong, array[i + 1].endLat)
+} 

package/circle-lines/readme.md

@@ -0,0 +1,57 @@
+# Road Map
+
+## CircleLine
+Atomic unit is the circle-line constructed from a circle and a line with start and end point which indicates the radius.
+
+### Attributes
+Main attributes: StartPoint, EndPoint, Radius
+Other attributes: Color, opacity, dash opacity, dash ratio
+
+### API
+API is the manipulation of above attributes
+
+### Implementation
+
+Buffer Orchestrater is enough.
+
+## ChainOfCircleLines
+Composit unit is a chain of circle-lines. 
+
+### Attributes
+
+Main attributes: one to many relation of a chain and its circle-lines
+
+
+# API
+- startChain(chainID) //
+- addPointToChain(chainID) 
+- editPointOfChain(chainID, pointID) // 
+- divideChain(chainID, )
+
+
+
+# Concept Formation
+
+Circle-Line has ( startPoint, endPoint )
+
+Chain Has [...circle-line] -> [ c0, c1, c2 ...] -> c0.endPoint == c1.startPoint, c1.endPoint == c2.startPoint
+
+## Modes 
+ 
+ Focus Mod
+ - mouse icon hides and edge point icon is displayed
+ 
+ 
+ ## interaction points ( this can be a new module)
+      changes the mouse icon
+      plugin creates them. 
+      interaction points carryin carries information about how to interact with the plugin.
+  
+ - On Edges
+      Updates coordinates on right click and carry
+      deletes on right
+ - on mid point of a radius line (+)
+      Addes an edge to mid points. ( deletes the old one and inserts 2)
+ 
+ UserInterface
+ - drawNewMethod

package/circle-lines/util.js

@@ -0,0 +1 @@
+export const keyMethod = (chainKey, nodeKey) => `${chainKey}_${nodeKey}`;

package/package.json

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

package/partialrings/plugin.js

@@ -115,7 +115,6 @@ class BufferManager extends BufferOffsetManager {
      */
     insertBulk(items) {
         if (items.length === 0) return;
-        console.log(items)
         this.autoExtendBuffer(items.length);
         const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

package/partialrings/program.js

@@ -49,14 +49,14 @@ 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;
+// flat out int vid;
+// flat out float v_phase;
 out vec2 v_pos;
 out vec4 v_color;
-flat out float v_angle;
+// flat out float v_angle;
 
 void main() {
-    vid = gl_VertexID;
+    // 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;}
@@ -71,8 +71,7 @@ void main() {
         vertexID -= 1.0;
     }
     float phase = ( vertexID  / (edge_count - 1.0) );
-    v_angle = tail_angle;
-    
+    // v_angle = tail_angle;
     
     if ( color_mode_ == 1.0 ) {
         if ( tail_angle < 0.0 ) {
@@ -111,11 +110,11 @@ void main() {
 
 const fragmentShaderSource = `#version 300 es` + POLE + PI + `
 precision highp float;
-flat in int vid;
+// flat in int vid;
 in vec4 v_color;
 in vec2 v_pos;
-flat in float v_phase;
-in float v_angle;
+// flat in float v_phase;
+// in float v_angle;
 out vec4 outColor;
 void main() {
     // if( vid % 2 == 0 ) { discard; }
@@ -137,7 +136,6 @@ export class Logic {
         this._lastAlphaMultiplier = 1.0;
 
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
-
         const { gl, program } = this;
         {   // set attributes locations 
             gl.bindAttribLocation(program, 0, 'center');

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

@@ -36,7 +36,6 @@ ${circleLimpFromLongLatRadCenterMercatorRealDistance}
 uniform float edge_count;
 
 in vec2 center_position;
-in float start_angle;
 in float radius;
 in vec4 color;
 in float dash_ratio;
@@ -112,11 +111,10 @@ class Logic {
 
         {   // assign attribute locations
             gl.bindAttribLocation(program, 0, "center_position");
-            gl.bindAttribLocation(program, 1, "start_angle");
-            gl.bindAttribLocation(program, 2, "radius");
-            gl.bindAttribLocation(program, 3, "color");
-            gl.bindAttribLocation(program, 4, "dash_ratio");
-            gl.bindAttribLocation(program, 5, "dash_opacity");
+            gl.bindAttribLocation(program, 1, "radius");
+            gl.bindAttribLocation(program, 2, "color");
+            gl.bindAttribLocation(program, 3, "dash_ratio");
+            gl.bindAttribLocation(program, 4, "dash_opacity");
         }
 
         this.cameraBindingPoint = 0;
@@ -125,7 +123,7 @@ class Logic {
         gl.uniformBlockBinding(program, cameraBlockLocation, this.cameraBindingPoint);
     }
 
-    createVAO(centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj) {
+    createVAO(centerObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj) {
         const { gl } = this;
         const vao = gl.createVertexArray();
         const divisor = 1;
@@ -134,25 +132,21 @@ class Logic {
             const { buffer, stride = 0, offset = 0 } = centerObj;
             vaoAttributeLoader(gl, buffer, 0, 2, stride, offset, divisor);
         }
-        {
-            const { buffer, stride = 0, offset = 0 } = startAngleObj;
-            vaoAttributeLoader(gl, buffer, 1, 1, stride, offset, divisor);
-        }
         {
             const { buffer, stride = 0, offset = 0 } = radiusObj;
-            vaoAttributeLoader(gl, buffer, 2, 1, stride, offset, divisor);
+            vaoAttributeLoader(gl, buffer, 1, 1, stride, offset, divisor);
         }
         {
             const { buffer, stride = 0, offset = 0 } = colorObj;
-            vaoAttributeLoader(gl, buffer, 3, 4, stride, offset, divisor);
+            vaoAttributeLoader(gl, buffer, 2, 4, stride, offset, divisor);
         }
         {
             const { buffer, stride = 0, offset = 0 } = dashRatioObj;
-            vaoAttributeLoader(gl, buffer, 4, 1, stride, offset, divisor);
+            vaoAttributeLoader(gl, buffer, 3, 1, stride, offset, divisor);
         }
         {
             const { buffer, stride = 0, offset = 0 } = dashOpacityObj;
-            vaoAttributeLoader(gl, buffer, 5, 1, stride, offset, divisor);
+            vaoAttributeLoader(gl, buffer, 4, 1, stride, offset, divisor);
         }
         gl.bindVertexArray(null);
         gl.bindVertexArray(null);

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

@@ -21,10 +21,12 @@ in vec2 start_position;
 in vec2 end_position;
 in float dash_ratio;
 in vec4 color;
+in float dash_opacity;
 out vec4 v_color;
 out vec2 v_limp;
 out float interpolation;
 out float v_dash_ratio;
+out float v_dash_opacity;
 
 
 void main() {
@@ -50,6 +52,7 @@ void main() {
     // else {v_color = vec4(0.0, 0.0, 0.0, 0.0);}
     v_color = color;
     v_dash_ratio = dash_ratio;
+    v_dash_opacity = dash_opacity;
 }
 `;
 
@@ -62,13 +65,14 @@ out vec4 color;
 in float interpolation;
 in float v_dash_ratio;
 in vec2 v_limp;
+in float v_dash_opacity;
 void main() {
     if (v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE) { discard; }
     color = v_color;
     color.a *= opacity;
     if ( v_dash_ratio >= 1.0 ) { return; }
     if (interpolation > 0.95) { return; }
-    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5) { color.a /= 4.0; }
+    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5) { color.a *= v_dash_opacity; }
 
 }
 `;
@@ -88,6 +92,7 @@ class Logic {
             gl.bindAttribLocation(program, 1, "end_position");
             gl.bindAttribLocation(program, 2, "dash_ratio");
             gl.bindAttribLocation(program, 3, "color");
+            gl.bindAttribLocation(program, 4, "dash_opacity");
         }
 
         {
@@ -133,7 +138,7 @@ class Logic {
 
 
     //
-    createVAO(startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj) {
+    createVAO(startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, dashOpacityBufferObj, colorBufferObj) {
         const { gl } = this;
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
@@ -168,6 +173,15 @@ class Logic {
             gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
             gl.vertexAttribDivisor(3, 1);
         }
+
+        {
+            const { buffer, stride = 0, offset = 0 } = dashOpacityBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(4);
+            gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(4, 1);
+        }
+
         gl.bindVertexArray(null);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         return vao;

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -220,9 +220,9 @@ export class BufferManager extends BufferOffsetManager {
         }
         const requiredSpace = this.__requiredSpaceForBulk(data);
         const spaceLeft = this.spaceLeft;
-        console.log("space left:", spaceLeft, "required space:", requiredSpace);
+        // console.log("space left:", spaceLeft, "required space:", requiredSpace);
         if (requiredSpace > spaceLeft) {
-            console.log("new capacity:", this.capacity + requiredSpace - spaceLeft)
+            // console.log("new capacity:", this.capacity + requiredSpace - spaceLeft)
             this.extendBuffer(this.capacity + requiredSpace - spaceLeft);
         }
 

package/programs/rings/distancering/paddyflatprogram.js

@@ -114,16 +114,16 @@ class Logic {
         // draw instanced
         if (padCount !== this._padCount) {
             this._padCount = padCount;
-            console.log("padCount", padCount);
+            // console.log("padCount", padCount);
             gl.uniform1f(_padCountLocation, padCount);
         }
         if (compass !== this._compassMode) {
-            console.log("compass", compass);
+            // console.log("compass", compass);
             gl.uniform1i(_compassLocation, compass);
             this._compassMode = compass;
         }
         if (opacity !== this._opacity) {
-            console.log("opacity", opacity);
+            // console.log("opacity", opacity);
             this._opacity = opacity;
             gl.uniform1f(this._opacityLocation, opacity);
         }

package/rangerings/rangerings.js

@@ -87,7 +87,6 @@ export default class {
         const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager, _opacity } = this;
         if (this.bufferManager !== null && bufferManager.length > 0) {
             gl.disable(gl.DEPTH_TEST);
-            console.log("the opacity", _opacity);
             circleFlatProgram.draw(bufferManager, compass, circleEdgeCount, _opacity);
             if (this._onedegreepaddingOn) paddyFlatProgram.draw(bufferManager, 360, compass, _opacity);
             paddingFreeAngleProgram.draw(paddingBufferManager, compass, _opacity);

package/util/account/single-attribute-buffer-management/buffer-manager.js

@@ -67,12 +67,12 @@ export class BufferManager {
 
         const newArray = new Float32Array(newCapacity * itemSize);
         const bufferData = this._getBufferData(occupiedCapacity);
-        console.log("bufferData", bufferData);
+        // console.log("bufferData", bufferData);
         let newOffset = 0;
         for (const offset of offsetValues) {
             const itemOffset = offset * itemSize;
             newArray.set(bufferData.slice(itemOffset, itemOffset + itemSize), newOffset);
-            console.log("oldOffset", itemOffset, "newOffset", newOffset);
+            // console.log("oldOffset", itemOffset, "newOffset", newOffset);
             newOffset += itemSize;
         }
 
@@ -87,7 +87,7 @@ export class BufferManager {
         const { gl, buffer, bufferType } = this;
         const itemSize = this.itemSize;
         const bufferData = this._getBufferData(occupiedCapacity);
-        console.log("extending buffer from", occupiedCapacity, "to", newCapacity, 'item size', itemSize);
+        // console.log("extending buffer from", occupiedCapacity, "to", newCapacity, 'item size', itemSize);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, newCapacity * itemSize * 4, gl[bufferType]);
         gl.bufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
@@ -96,9 +96,9 @@ export class BufferManager {
 
     _getBufferData(occupiedCapacity) {
         const { gl, buffer } = this;
-        console.log(occupiedCapacity, this.itemSize)
+        // console.log(occupiedCapacity, this.itemSize)
         const size = occupiedCapacity * this.itemSize;
-        console.log("size", size);
+        // console.log("size", size);
         const bufferData = new Float32Array(size);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.getBufferSubData(gl.ARRAY_BUFFER, 0, bufferData);