@pirireis/webglobeplugins 0.15.16-alpha → 0.15.18-alpha

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

@@ -1,190 +1,357 @@
-"use strict";
-// //      One Degree Padding
-// /**
-//  * 2d coordinates are loaded ones
-//  * 3d coordinates are calculated on the fly.
-//  *
-//  * 2d paddings are fixed size
-//  * 3d paddings gets shortened as lod increases
-//  *
-//  * color buffer is shared and does not change on unless insert or delete
-//  * changing color can be done by re inserting
-//  *
-//  *
-//  *
-//  */
-// import { Globe, LongLat, Meter, Color, BUFFER_TYPE, UBOHandler } from '../../types';
-// import { BufferManagersMap } from '../../util/account/single-attribute-buffer-management/types';
-// import { BufferManager } from '../../util/account/single-attribute-buffer-management/buffer-manager';
-// import { BufferOrchestrator } from '../../util/account/single-attribute-buffer-management/buffer-orchestrator';
-// import { LineStripProgramCache, LineProgram } from '../../programs/line-on-globe/linestrip/linestrip';
-// import { ProgramInterface } from '../../types';
-// import { SemiPluginInterface } from '../interface';
-// export type Padding1DegreeInput = {
-//     key: string;
-//     center: LongLat;
-//     outerRadius: Meter;
-//     heightFromGroundIn3D?: Meter; // optional, if not provided, defaultHeightFromGroundIn3D will be used
-//     color: Color;
-// };
-// export type Padding1DegreeOptions = {
-//     bufferType: BUFFER_TYPE;
-//     variativeColorsOn: boolean;
-//     defaultColor: Color;
-//     defaultHeightFromGroundIn3D: Meter;
-// }
-// const initialCapacity = 2; // initial capacity for the buffer managers
-// // const _float32Array = new Float32Array(360 * 3 * 2).fill(NaN);
-// export class Paddings1Degree implements ProgramInterface, SemiPluginInterface {
-//     id: string;
-//     private globe: Globe | null = null;
-//     private bufferOrchestrator: BufferOrchestrator;
-//     private bufferManagersMap: BufferManagersMap;
-//     private lineProgram: LineProgram | null = null;
-//     private _LODCoeffecientForPaddingScale: number = 1;
-//     private _PaddingSizeRatio = 0.1; // 0.1 means 10% of the padding size is used for 3d padding
-//     private _innerPaddingRatio = 0.9; //
-//     private _float32Array: Float32Array | null = null; // this is used to forward the data to the buffer manager
-//     private _uboHandler: UBOHandler | null = null; // this is used to forward the data to the shader program
-//     private _bufferNames: string[] = ["position2d", "position3d"];
-//     private _options: Padding1DegreeOptions = {
-//         bufferType: "STATIC_DRAW",
-//         variativeColorsOn: false,
-//         defaultColor: [1, 1, 1, 1], // white color
-//         defaultHeightFromGroundIn3D: 0.1, // 10 cm from ground
-//     };
-//     constructor(id: string, options: Padding1DegreeOptions | null = null) {
-//         this.id = id;
-//         this.bufferManagersMap = new Map();
-//         this.lineProgram = null;
-//         this._options = options ? { ...this._options, ...options } : this._options;
-//         this.bufferOrchestrator = new BufferOrchestrator()
-//         if (this._options.variativeColorsOn) {
-//             this._bufferNames.push("color");
-//         }
-//     }
-//     insertBulk(data: Padding1DegreeInput[]): void {
-//         if (this.globe === null) {
-//             throw new Error("Globe is not initialized");
-//         }
-//         // create floa32array
-//         this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
-//         this.bufferOrchestrator.insertBulk(data, this.bufferManagersMap, this._bufferNames);
-//         this.globe?.DrawRender();
-//     }
-//     init(globe: Globe): void {
-//         this.globe = globe;
-//         this.lineProgram = LineStripProgramCache.get(globe);
-//         const bufferManagersMap = new Map(
-//             [
-//                 ["position2d", {
-//                     bufferManager: new BufferManager(globe.gl as WebGL2RenderingContext,
-//                         360 * 2 * 3, // plus 1 to cut
-//                         { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
-//                     adaptor: (PaddingInput: Padding1DegreeInput) => {
-//                         if (this._float32Array === null) {
-//                             throw new Error("Float32Array is not initialized");
-//                         } else {
-//                             this._float32Array.fill(NaN); // reset the float32Array
-//                         }
-//                         for (let i = 0; i < 360; i++) {
-//                             let { long, lat } = globe.Math.FindPointByPolar(
-//                                 PaddingInput.center[0], // center long
-//                                 PaddingInput.center[1], // center lat
-//                                 PaddingInput.outerRadius, // outer radius
-//                                 i, // angle
-//                             );
-//                             let coords = globe.api_GetMercator2DPoint(long, lat);
-//                             // fill the second coordinate with 0
-//                             this._float32Array[i * 3] = coords[0];
-//                             this._float32Array[i * 3 + 1] = coords[1];
-//                             ({ long, lat } = globe.Math.FindPointByPolar(
-//                                 PaddingInput.center[0], // center long
-//                                 PaddingInput.center[1], // center lat
-//                                 PaddingInput.outerRadius * this._innerPaddingRatio, // inner radius
-//                                 i, // angle
-//                             ));
-//                             let innerCoords = globe.api_GetMercator2DPoint(long, lat);
-//                             // fill the second coordinate with 0
-//                             this._float32Array[i * 3 + 2] = innerCoords[0];
-//                             this._float32Array[i * 3 + 3] = innerCoords[1];
-//                         }
-//                         return this._float32Array.subarray(0, 360 * 2 * 3);
-//                     }
-//                 }
-//                 ],
-//                 [
-//                     "position3d", {
-//                         bufferManager: new BufferManager(globe.gl as WebGL2RenderingContext,
-//                             360 * 3 * 3, // plus 1 to cut
-//                             { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
-//                         adaptor: (PaddingInput: Padding1DegreeInput) => {
-//                             if (this._float32Array === null) {
-//                                 throw new Error("Float32Array is not initialized");
-//                             } else {
-//                                 this._float32Array.fill(NaN); // reset the float32Array
-//                             }
-//                             const _float32Array = this._float32Array;
-//                             for (let i = 0; i < 360; i++) {
-//                                 const height = PaddingInput.heightFromGroundIn3D ? PaddingInput.heightFromGroundIn3D : this._options.defaultHeightFromGroundIn3D;
-//                                 let { long, lat, } = globe.Math.FindPointByPolar(
-//                                     PaddingInput.center[0], // center long
-//                                     PaddingInput.center[1], // center lat
-//                                     PaddingInput.outerRadius, // outer radius
-//                                     i, // angle
-//                                 );
-//                                 let coords = globe.api_GetCartesian3DPoint(long, lat, height, 0);
-//                                 // fill the second coordinate with 0
-//                                 _float32Array[i * 4] = coords[0];
-//                                 _float32Array[i * 4 + 1] = coords[1];
-//                                 ({ long, lat } = globe.Math.FindPointByPolar(
-//                                     PaddingInput.center[0], // center long
-//                                     PaddingInput.center[1], // center lat
-//                                     PaddingInput.outerRadius * this._innerPaddingRatio, // inner radius
-//                                     i, // angle
-//                                 ));
-//                                 let innerCoords = globe.api_GetCartesian3DPoint(long, lat, height, 0);
-//                                 // fill the second coordinate with 0
-//                                 _float32Array[i * 4 + 2] = innerCoords[0];
-//                                 _float32Array[i * 4 + 3] = innerCoords[1];
-//                             }
-//                             return _float32Array.subarray(0, 360 * 3 * 3);
-//                         }
-//                     }
-//                 ],
-//             ]
-//         );
-//         if (this._options.variativeColorsOn) {
-//             bufferManagersMap.set(
-//                 "color", {
-//                 bufferManager: new BufferManager(globe.gl as WebGL2RenderingContext,
-//                     360 * 4 * 3, // 4 for RGBA
-//                     { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
-//                 adaptor: (PaddingInput: Padding1DegreeInput) => {
-//                     const color = PaddingInput.color || this._options.defaultColor;
-//                     const colorArray = new Float32Array(360 * 4 * 3);
-//                     this._float32Array = colorArray; // store for forwarding
-//                     for (let i = 0; i < 360; i++) {
-//                         this._float32Array[i * 4] = color[0];
-//                         this._float32Array[i * 4 + 1] = color[1];
-//                         this._float32Array[i * 4 + 2] = color[2];
-//                         this._float32Array[i * 4 + 3] = color[3];
-//                         this._float32Array[i * 4 + 4] = color[0];
-//                         this._float32Array[i * 4 + 5] = color[1];
-//                         this._float32Array[i * 4 + 6] = color[2];
-//                         this._float32Array[i * 4 + 7] = color[3];
-//                     }
-//                     return this._float32Array.subarray(0, 360 * 4 * 3);
-//                 }
-//             }
-//             );
-//         }
-//         this.bufferOrchestrator.resetWithCapacity(bufferManagersMap, initialCapacity);
-//         this._uboHandler = this.lineProgram.createUBO("STATIC_DRAW");
-//         this._uboHandler.updateSingle("u_color", new Float32Array(this._options.defaultColor));
-//     }
-//     // This method is called when the plugin is destroyed
-//     __updateLODCoefficientForPaddingScale(): void {
-//         // TODO: call this ones when lod changes or each frame // maybe only on 3d geometry
-//     }
-// }
+//      One Degree Padding
+/**
+ * 2d coordinates are loaded ones
+ * 3d coordinates are calculated on the fly.
+ *
+ * 2d paddings are fixed size
+ * 3d paddings gets shortened as lod increases
+ *
+ * color buffer is shared and does not change on unless insert or delete
+ * changing color can be done by re inserting
+ *
+ *
+ *
+ */
+import { BufferManager } from '../../util/account/single-attribute-buffer-management/buffer-manager';
+import { BufferOrchestrator } from '../../util/account/single-attribute-buffer-management/buffer-orchestrator';
+import { LineStripProgramCache } from '../../programs/line-on-globe/linestrip/linestrip';
+import { opacityCheck, colorCheck } from '../../util/check/typecheck';
+const initialCapacity = 2; // initial capacity for the buffer managers
+// const _float32Array = new Float32Array(360 * 3 * 2).fill(NaN);
+export class Padding1DegreePlugin {
+    id;
+    globe = null;
+    bufferOrchestrator;
+    bufferManagersMap;
+    lineProgram = null;
+    _opacityLODCoef = 1;
+    _pluginOpacity = 1; // this is used to set the opacity of the plugin
+    _innerPaddingRatio = 0.9; //
+    _float32Array = null; // this is used to forward the data to the buffer manager
+    _uboHandler = null; // this is used to forward the data to the shader program
+    _bufferNames = ["position2d", "position3d"];
+    _vao = null; // this is used to store the VAO for the plugin
+    _freed = false; // this is used to check if the plugin is freed or not
+    _lastCAM_LOD = { camInfo: -1, lod: -1 }; // this is used to store the last zoom and lod values
+    _dataMap = new Map();
+    _options = {
+        bufferType: "STATIC_DRAW",
+        variativeColorsOn: false,
+        defaultColor: [1, 1, 1, 1], // white color
+        defaultHeightFromGroundIn3D: 0.1, // 10 cm from ground
+        adativePaddingSize: true, // if true, the padding size will be adaptive to the LOD
+        adaptiveOpacity: true, // if true, the opacity will be adaptive to the LOD
+        isMSL: false // if true, no elevation of terrain
+    };
+    constructor(id, options = null) {
+        this.id = id;
+        this.bufferManagersMap = new Map();
+        this.lineProgram = null;
+        this._options = options ? { ...this._options, ...options } : this._options;
+        this.bufferOrchestrator = new BufferOrchestrator();
+        if (this._options.variativeColorsOn) {
+            this._bufferNames.push("color");
+        }
+    }
+    insertBulk(inputs) {
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot insert input");
+            return;
+        }
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot insert input");
+            return;
+        }
+        const wrapper = [null];
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        for (let i = 0; i < inputs.length; i++) {
+            const coords = preAdapter(this.globe, inputs[i], this._innerPaddingRatio, null);
+            const paddingInput = { ...inputs[i], ...coords };
+            this._dataMap.set(paddingInput.key, paddingInput);
+            wrapper[0] = paddingInput;
+            this.bufferOrchestrator.insertBulk(wrapper, this.bufferManagersMap, this._bufferNames);
+        }
+        this._float32Array = null;
+        this.globe?.DrawRender();
+    }
+    deleteBulk(keys) {
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot delete data");
+            return;
+        }
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot delete data");
+            return;
+        }
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
+        this.globe?.DrawRender();
+    }
+    setPluginOpacity(opacity) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot set opacity");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot set opacity");
+            return;
+        }
+        opacityCheck(opacity);
+        this._opacityLODCoef = opacity;
+        this._uboHandler?.updateSingle("u_opacity", new Float32Array([opacity]));
+        this.globe.DrawRender();
+    }
+    setDefaultColor(color) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot set default color");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot set default color");
+            return;
+        }
+        colorCheck(color);
+        this._options.defaultColor = color;
+        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
+        this.globe.DrawRender();
+    }
+    setElevationMode(mode) {
+        switch (mode) {
+            case "msl":
+                this._options.isMSL = true;
+                break;
+            case "agl":
+                this._options.isMSL = false;
+                break;
+            default:
+                throw new Error(`Unknown elevation mode: ${mode}`);
+        }
+        this._buildPaddings("elevation");
+        this.globe?.DrawRender();
+    }
+    init(globe) {
+        this.globe = globe;
+        this.lineProgram = LineStripProgramCache.get(globe);
+        const bufferManagersMap = new Map([
+            ["position2d", {
+                    bufferManager: new BufferManager(globe.gl, 360 * 2 * 3, // plus 1 to cut
+                    { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                    adaptor: (paddingInput) => {
+                        if (this._float32Array === null) {
+                            throw new Error("Float32Array is not initialized");
+                        }
+                        else {
+                            this._float32Array.fill(NaN); // reset the float32Array
+                        }
+                        for (let i = 0; i < 360; i++) {
+                            const startCoords = paddingInput.startCoords[i];
+                            const endCoords = paddingInput.endCoords[i];
+                            if (startCoords === null || endCoords === null) {
+                                continue;
+                            }
+                            let coords = globe.api_GetMercator2DPoint(startCoords[0], startCoords[1]);
+                            // fill the second coordinate with 0
+                            this._float32Array[i * 6] = coords[0];
+                            this._float32Array[i * 6 + 1] = coords[1];
+                            let innerCoords = globe.api_GetMercator2DPoint(endCoords[0], endCoords[1]);
+                            // fill the second coordinate with 0
+                            this._float32Array[i * 6 + 2] = innerCoords[0];
+                            this._float32Array[i * 6 + 3] = innerCoords[1];
+                        }
+                        return this._float32Array.subarray(0, 360 * 2 * 3);
+                    }
+                }
+            ],
+            [
+                "position3d", {
+                    bufferManager: new BufferManager(globe.gl, 360 * 3 * 3, // plus 1 to cut
+                    { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                    adaptor: (paddingInput) => {
+                        if (this._float32Array === null) {
+                            throw new Error("Float32Array is not initialized");
+                        }
+                        else {
+                            this._float32Array.fill(NaN); // reset the float32Array
+                        }
+                        const _float32Array = this._float32Array;
+                        for (let i = 0; i < 360; i++) {
+                            const startCoords = paddingInput.startCoords[i];
+                            const endCoords = paddingInput.endCoords[i];
+                            if (startCoords === null || endCoords === null) {
+                                continue;
+                            }
+                            const height = paddingInput.heightFromGroundIn3D ?? this._options.defaultHeightFromGroundIn3D;
+                            let coords = globe.api_GetCartesian3DPoint(startCoords[0], startCoords[1], height, this._options.isMSL);
+                            // fill the second coordinate with 0
+                            _float32Array[i * 9] = coords[0];
+                            _float32Array[i * 9 + 1] = coords[1];
+                            _float32Array[i * 9 + 2] = coords[2];
+                            let innerCoords = globe.api_GetCartesian3DPoint(endCoords[0], endCoords[1], height, this._options.isMSL);
+                            // fill the second coordinate with 0
+                            _float32Array[i * 9 + 3] = innerCoords[0];
+                            _float32Array[i * 9 + 4] = innerCoords[1];
+                            _float32Array[i * 9 + 5] = innerCoords[2];
+                        }
+                        return _float32Array.subarray(0, 360 * 3 * 3);
+                    }
+                }
+            ],
+        ]);
+        if (this._options.variativeColorsOn) {
+            bufferManagersMap.set("color", {
+                bufferManager: new BufferManager(globe.gl, 360 * 4 * 3, // 4 for RGBA
+                { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                adaptor: (paddingInput) => {
+                    if (this._float32Array === null) {
+                        throw new Error("Float32Array is not initialized");
+                    }
+                    else {
+                        this._float32Array.fill(NaN); // reset the float32Array
+                    }
+                    if (!paddingInput.colorsRatios) {
+                        const color = this._options.defaultColor;
+                        const colorArray = new Float32Array(360 * 4 * 3);
+                        this._float32Array = colorArray; // store for forwarding
+                        for (let i = 0; i < 360; i++) {
+                            this._float32Array[i * 12] = color[0];
+                            this._float32Array[i * 12 + 1] = color[1];
+                            this._float32Array[i * 12 + 2] = color[2];
+                            this._float32Array[i * 12 + 3] = color[3] * this._opacityLODCoef;
+                            this._float32Array[i * 12 + 4] = color[0];
+                            this._float32Array[i * 12 + 5] = color[1];
+                            this._float32Array[i * 12 + 6] = color[2];
+                            this._float32Array[i * 12 + 7] = 0; //color[3] * this._opacityLODCoef;
+                        }
+                        return this._float32Array.subarray(0, 360 * 4 * 3);
+                    }
+                    else {
+                        const colorsRatios = paddingInput.colorsRatios;
+                        let i = 0;
+                        for (const colorRatio of colorsRatios) {
+                            const color = colorRatio.color;
+                            const ratio = colorRatio.ratio;
+                            for (let j = 0; j < ratio; j++) {
+                                this._float32Array[i * 12] = color[0];
+                                this._float32Array[i * 12 + 1] = color[1];
+                                this._float32Array[i * 12 + 2] = color[2];
+                                this._float32Array[i * 12 + 3] = color[3] * this._opacityLODCoef;
+                                this._float32Array[i * 12 + 4] = color[0];
+                                this._float32Array[i * 12 + 5] = color[1];
+                                this._float32Array[i * 12 + 6] = color[2];
+                                this._float32Array[i * 12 + 7] = 0; // color[3] * this._opacityLODCoef;
+                                i++;
+                            }
+                        }
+                        return this._float32Array.subarray(0, 360 * 4 * 3);
+                    }
+                }
+            });
+        }
+        const vaoInput = ["position3d", "position2d", "color"].map((name) => {
+            const bufferManager = bufferManagersMap.get(name);
+            if (!bufferManager) {
+                return null;
+            }
+            return {
+                buffer: bufferManager.bufferManager.buffer,
+                stride: 0,
+                offset: 0
+            };
+        });
+        this._vao = this.lineProgram.createVAO(vaoInput[0], vaoInput[1], vaoInput[2]);
+        this.bufferManagersMap = bufferManagersMap;
+        this.bufferOrchestrator.resetWithCapacity(bufferManagersMap, initialCapacity);
+        this._uboHandler = this.lineProgram.createUBO("STATIC_DRAW");
+        this._uboHandler.updateSingle("u_color", new Float32Array(this._options.defaultColor));
+    }
+    draw3D() {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot draw");
+            return;
+        }
+        if (this.globe === null || this.lineProgram === null || this._vao === null) {
+            console.warn("Globe or LineProgram or VAO is not initialized, cannot draw");
+            return;
+        }
+        const gl = this.globe.gl;
+        const drawOptions = {
+            drawRange: {
+                first: 0,
+                count: this.bufferOrchestrator.length * (360 * 3), // plus 1 is for cutting linestrips
+            },
+        };
+        gl.disable(gl.DEPTH_TEST);
+        this.lineProgram.draw(this._vao, drawOptions, this._pluginOpacity, this._uboHandler);
+        gl.enable(gl.DEPTH_TEST);
+    }
+    free() {
+        if (this._freed) {
+            console.warn("Plugin is already freed");
+            return;
+        }
+        if (!this.globe || !this.lineProgram) {
+            console.warn("Globe or LineProgram is not initialized, cannot free the plugin");
+            return;
+        }
+        this._freed = true;
+        LineStripProgramCache.release(this.lineProgram);
+        this.lineProgram = null;
+        this._uboHandler?.free();
+        this._uboHandler = null;
+        this.globe.gl.deleteVertexArray(this._vao);
+        this.globe = null;
+        this._vao = null;
+        this.bufferManagersMap.forEach((bufferManager) => {
+            bufferManager.bufferManager.free();
+        });
+        this._float32Array = null;
+    }
+    __updateLODRelatedParameters() {
+        const lod = this.globe?.api_GetCurrentLODWithDecimal();
+        this._innerPaddingRatio = 1 - Math.pow(0.7, lod);
+    }
+    _buildPaddings(level) {
+    }
+    __onCamOrLodChange() {
+        //TODO: implement -> on lod change the _innerPaddingRatio and all positions should be recalculated.
+        // calculation
+        // if cam change, recalculate 3d positions
+    }
+}
+function preAdapter(globe, paddingInput, paddingRatio, startCoords) {
+    const endCoords = new Array(360);
+    if (startCoords === null) {
+        startCoords = new Array(360);
+        for (let i = 0; i < 360; i++) {
+            const { long, lat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
+            paddingInput.center[1], // center lat
+            paddingInput.outerRadius, // outer radius
+            i);
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
+            paddingInput.center[1], // center lat
+            paddingInput.outerRadius * paddingRatio, // inner radius
+            i);
+            const longDifference = Math.abs(long - endLong);
+            const latDifference = Math.abs(lat - endLat);
+            if (longDifference > 45) {
+                startCoords[i] = null;
+                endCoords[i] = null;
+                continue;
+            }
+            // Assign the calculated coordinates
+            startCoords[i] = [long, lat];
+            endCoords[i] = [endLong, endLat];
+        }
+    }
+    else {
+        // Handle case when startCoords is provided
+        for (let i = 0; i < 360; i++) {
+            if (startCoords[i] === null) {
+                endCoords[i] = null;
+                continue;
+            }
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], paddingInput.center[1], paddingInput.outerRadius * paddingRatio, i);
+            endCoords[i] = [endLong, endLat];
+        }
+    }
+    return { startCoords, endCoords };
+}

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

@@ -60,6 +60,18 @@ export class BufferManager {
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     }
+    insertConsecutiveBulk(items, offset, adapter, Constructor = Float32Array) {
+        const { gl, buffer, itemSize } = this;
+        const cpuBuffer = new Constructor(itemSize * items.length);
+        console.log('cpuBuffer', cpuBuffer);
+        console.log(typeof cpuBuffer);
+        for (let i = 0; i < items.length; i++) {
+            cpuBuffer.set(adapter(items[i]), i * itemSize);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferSubData(gl.ARRAY_BUFFER, offset * itemSize * 4, cpuBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
     // TODO: this is broken
     defrag(offsetValues, occupiedCapacity, newCapacity) {
         const { gl, buffer, bufferType, itemSize } = this;