@openglobus/og 0.14.10 → 0.15.0

package/src/og/entity/GeoObjectHandler.js

@@ -4,18 +4,19 @@
  * @module og/entity/ShapeHandler
  */
 import * as shaders from "../shaders/geoObject.js";
-import { concatArrays, makeArrayTyped, spliceArray } from "../utils/shared.js";
-
-const VERTEX_BUFFER = 0,
-    POSITION_BUFFER = 1,
-    RGBA_BUFFER = 2,
-    NORMALS_BUFFER = 3,
-    INDECIES_BUFFER = 4,
-    DIRECTION_BUFFER = 5,
-    PITCH_ROLL_BUFFER = 6,
-    SIZE_BUFFER = 7,
-    PICKINGCOLOR_BUFFER = 8,
-    VISIBLE_BUFFER = 9;
+import { concatArrays, loadImage, makeArrayTyped, spliceArray } from "../utils/shared.js";
+
+const VERTEX_BUFFER = 0;
+const POSITION_BUFFER = 1;
+const RGBA_BUFFER = 2;
+const NORMALS_BUFFER = 3;
+const INDEX_BUFFER = 4;
+const DIRECTION_BUFFER = 5;
+const PITCH_ROLL_BUFFER = 6;
+const SIZE_BUFFER = 7;
+const PICKINGCOLOR_BUFFER = 8;
+const VISIBLE_BUFFER = 9;
+const TEXCOORD_BUFFER = 10;
 
 const setParametersToArray = (arr = [], index = 0, length, itemSize, ...params) => {
     const currIndex = index * length;
@@ -25,149 +26,296 @@ const setParametersToArray = (arr = [], index = 0, length, itemSize, ...params)
     return arr;
 };
 
-class GeoObjectHandler {
-    constructor(entityCollection) {
-        /**
-         * Picking rendering option.
-         * @public
-         * @type {boolean}
-         */
-        this.pickingEnabled = true;
+const setParametersToArrayArr = (arr = [], index = 0, length, itemSize, paramsArr) => {
+    const currIndex = index * length;
+    for (let i = currIndex, len = currIndex + length; i < len; i++) {
+        arr[i] = paramsArr[i % itemSize];
+    }
+    return arr;
+};
 
-        this._entityCollection = entityCollection;
-        this._renderer = null;
-        this._planet = null;
+class InstanceData {
+    constructor(geoObjectHandler) {
 
-        this._geoObjects = [];
-        this._pitchRollArr = [[]];
-        this._sizeArr = [[]];
-        this._vertexArr = [[]];
-        this._positionHighArr = [[]];
-        this._positionLowArr = [[]];
-        this._directionArr = [[]];
-        this._rgbaArr = [[]];
-        this._normalsArr = [[]];
-        this._indicesArr = [[]];
-        this._pickingColorArr = [[]];
-        this._vehicleVisibleArr = [[]];
-
-        this._pitchRollBuffer = [];
-        this._sizeBuffer = [];
-        this._vertexBuffer = [];
-        this._positionHighBuffer = [];
-        this._positionLowBuffer = [];
-        this._directionBuffer = [];
-        this._rgbaBuffer = [];
-        this._normalsBuffer = [];
-        this._indicesBuffer = [];
-        this._pickingColorBuffer = [];
-        this._vehicleVisibleBuffer = [];
+        this.isFree = true;
+
+        this._geoObjectHandler = geoObjectHandler;
+
+        this.geoObjects = [];
+
+        this.numInstances = 0;
+
+        this._texture = null;
+        this._textureSrc = null;
+
+        this._pitchRollArr = [];
+        this._sizeArr = [];
+        this._vertexArr = [];
+        this._positionHighArr = [];
+        this._positionLowArr = [];
+        this._directionArr = [];
+        this._rgbaArr = [];
+        this._normalsArr = [];
+        this._indicesArr = [];
+        this._pickingColorArr = [];
+        this._visibleArr = [];
+        this._texCoordArr = [];
+
+        this._pitchRollBuffer = null;
+        this._sizeBuffer = null;
+        this._vertexBuffer = null;
+        this._positionHighBuffer = null;
+        this._positionLowBuffer = null;
+        this._directionBuffer = null;
+        this._rgbaBuffer = null;
+        this._normalsBuffer = null;
+        this._indicesBuffer = null;
+        this._pickingColorBuffer = null;
+        this._visibleBuffer = null;
+        this._texCoordBuffer = null;
 
-        this.__staticId = GeoObjectHandler._staticCounter++;
         this._buffersUpdateCallbacks = [];
         this._buffersUpdateCallbacks[PICKINGCOLOR_BUFFER] = this.createPickingColorBuffer;
         this._buffersUpdateCallbacks[POSITION_BUFFER] = this.createPositionBuffer;
         this._buffersUpdateCallbacks[DIRECTION_BUFFER] = this.createDirectionBuffer;
         this._buffersUpdateCallbacks[NORMALS_BUFFER] = this.createNormalsBuffer;
         this._buffersUpdateCallbacks[RGBA_BUFFER] = this.createRgbaBuffer;
-        this._buffersUpdateCallbacks[INDECIES_BUFFER] = this.createIndicesBuffer;
+        this._buffersUpdateCallbacks[INDEX_BUFFER] = this.createIndicesBuffer;
         this._buffersUpdateCallbacks[VERTEX_BUFFER] = this.createVertexBuffer;
         this._buffersUpdateCallbacks[SIZE_BUFFER] = this.createSizeBuffer;
         this._buffersUpdateCallbacks[PITCH_ROLL_BUFFER] = this.createPitchRollBuffer;
         this._buffersUpdateCallbacks[VISIBLE_BUFFER] = this.createVisibleBuffer;
+        this._buffersUpdateCallbacks[TEXCOORD_BUFFER] = this.createTexCoordBuffer;
 
         this._changedBuffers = new Array(this._buffersUpdateCallbacks.length);
+    }
 
-        this._instancedTags = new Map();
+    createTexture(image) {
+        if (this._geoObjectHandler && this._geoObjectHandler._planet) {
+            this._texture = this._geoObjectHandler._planet.renderer.handler.createTextureDefault(image);
+        }
     }
 
-    getObjectByIndex(index) {
-        return this._geoObjects[index];
+    clear() {
+
+        this.numInstances = 0;
+
+        this.geoObjects = [];
+
+        this._pitchRollArr = [];
+        this._sizeArr = [];
+        this._vertexArr = [];
+        this._positionHighArr = [];
+        this._positionLowArr = [];
+        this._directionArr = [];
+        this._rgbaArr = [];
+        this._normalsArr = [];
+        this._indicesArr = [];
+        this._pickingColorArr = [];
+        this._visibleArr = [];
+        this._texCoordArr = [];
+
+        let h = this._geoObjectHandler._planet.renderer.handler, gl = h.gl;
+
+        h.deleteTexture(this._texture);
+
+        this._texture = null;
+
+        gl.deleteBuffer(this._pitchRollBuffer);
+        gl.deleteBuffer(this._sizeBuffer);
+        gl.deleteBuffer(this._vertexBuffer);
+        gl.deleteBuffer(this._positionHighBuffer);
+        gl.deleteBuffer(this._positionLowBuffer);
+        gl.deleteBuffer(this._directionBuffer);
+        gl.deleteBuffer(this._rgbaBuffer);
+        gl.deleteBuffer(this._normalsBuffer);
+        gl.deleteBuffer(this._indicesBuffer);
+        gl.deleteBuffer(this._pickingColorBuffer);
+        gl.deleteBuffer(this._visibleBuffer);
+        gl.deleteBuffer(this._texCoordBuffer);
+
+        this._pitchRollBuffer = null;
+        this._sizeBuffer = null;
+        this._vertexBuffer = null;
+        this._positionHighBuffer = null;
+        this._positionLowBuffer = null;
+        this._directionBuffer = null;
+        this._rgbaBuffer = null;
+        this._normalsBuffer = null;
+        this._indicesBuffer = null;
+        this._pickingColorBuffer = null;
+        this._visibleBuffer = null;
+        this._texCoordBuffer = null;
+
+        this.isFree = false;
+        this._geoObjectHandler = null;
     }
 
-    //Create buffers
     createVertexBuffer() {
-        const h = this._renderer.handler;
-        for (let i = 0, len = this._vertexArr.length; i < len; i++) {
-            this._vertexBuffer && h.gl.deleteBuffer(this._vertexBuffer[i]);
-            this._vertexBuffer[i] = h.createArrayBuffer(new Float32Array(this._vertexArr[i]), 3, this._vertexArr[i].length / 3);
-        }
+        const h = this._geoObjectHandler._planet.renderer.handler;
+        h.gl.deleteBuffer(this._vertexBuffer);
+        this._vertexArr = makeArrayTyped(this._vertexArr);
+        this._vertexBuffer = h.createArrayBuffer(this._vertexArr, 3, this._vertexArr.length / 3);
     }
 
     createPitchRollBuffer() {
-        const h = this._renderer.handler;
-        for (let i = 0, len = this._pitchRollArr.length; i < len; i++) {
-            this._pitchRollBuffer && h.gl.deleteBuffer(this._pitchRollBuffer[i]);
-            this._pitchRollBuffer[i] = h.createArrayBuffer(new Float32Array(this._pitchRollArr[i]), 2, this._pitchRollArr[i].length / 2);
+        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._pitchRollArr.length / 2;
+
+        if (!this._pitchRollBuffer || this._pitchRollBuffer.numItems !== numItems) {
+            h.gl.deleteBuffer(this._pitchRollBuffer);
+            this._pitchRollBuffer = h.createStreamArrayBuffer(2, numItems);
         }
+
+        this._pitchRollArr = makeArrayTyped(this._pitchRollArr);
+
+        h.setStreamArrayBuffer(this._pitchRollBuffer, this._pitchRollArr);
     }
 
     createVisibleBuffer() {
-        const h = this._renderer.handler;
-        for (let i = 0, len = this._vehicleVisibleArr.length; i < len; i++) {
-            this._vehicleVisibleBuffer && h.gl.deleteBuffer(this._vehicleVisibleBuffer[i]);
-            this._vehicleVisibleBuffer[i] = h.createArrayBuffer(new Float32Array(this._vehicleVisibleArr[i]), 1, this._vehicleVisibleArr[i].length);
+        const h = this._geoObjectHandler._planet.renderer.handler, numItems = this._visibleArr.length;
+
+        if (!this._visibleBuffer || this._visibleBuffer.numItems !== numItems) {
+            h.gl.deleteBuffer(this._visibleBuffer);
+            this._visibleBuffer = h.createStreamArrayBuffer(1, numItems);
         }
+
+        this._visibleArr = makeArrayTyped(this._visibleArr);
+
+        h.setStreamArrayBuffer(this._visibleBuffer, this._visibleArr);
     }
 
     createSizeBuffer() {
-        const h = this._renderer.handler;
-        for (let i = 0, len = this._sizeArr.length; i < len; i++) {
-            this._sizeBuffer && h.gl.deleteBuffer(this._sizeBuffer[i]);
-            this._sizeBuffer[i] = h.createArrayBuffer(new Float32Array(this._sizeArr[i]), 1, this._sizeArr[i].length);
+        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._sizeArr.length;
+
+        if (!this._sizeBuffer || this._sizeBuffer.numItems !== numItems) {
+            h.gl.deleteBuffer(this._sizeBuffer);
+            this._sizeBuffer = h.createStreamArrayBuffer(1, numItems);
         }
+
+        this._sizeArr = makeArrayTyped(this._sizeArr);
+
+        h.setStreamArrayBuffer(this._sizeBuffer, this._sizeArr);
+    }
+
+    createTexCoordBuffer() {
+        const h = this._geoObjectHandler._planet.renderer.handler;
+        h.gl.deleteBuffer(this._texCoordBuffer);
+        this._texCoordArr = makeArrayTyped(this._texCoordArr);
+        this._texCoordBuffer = h.createArrayBuffer(this._texCoordArr, 2, this._texCoordArr.length / 2);
     }
 
     createPositionBuffer() {
-        let h = this._renderer.handler;
-        for (let i = 0, len = this._positionHighArr.length; i < len; i++) {
-            this._positionHighBuffer && h.gl.deleteBuffer(this._positionHighBuffer[i]);
-            this._positionHighBuffer[i] = h.createArrayBuffer(new Float32Array(this._positionHighArr[i]), 3, this._positionHighArr[i].length / 3);
-            this._positionLowBuffer && h.gl.deleteBuffer(this._positionLowBuffer[i]);
-            this._positionLowBuffer[i] = h.createArrayBuffer(new Float32Array(this._positionLowArr[i]), 3, this._positionLowArr[i].length / 3);
+        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._positionHighArr.length / 3;
+
+        if (!this._positionHighBuffer || this._positionHighBuffer.numItems !== numItems) {
+            h.gl.deleteBuffer(this._positionHighBuffer);
+            h.gl.deleteBuffer(this._positionLowBuffer);
+            this._positionHighBuffer = h.createStreamArrayBuffer(3, numItems);
+            this._positionLowBuffer = h.createStreamArrayBuffer(3, numItems);
         }
+
+        this._positionHighArr = makeArrayTyped(this._positionHighArr);
+        this._positionLowArr = makeArrayTyped(this._positionLowArr);
+
+        h.setStreamArrayBuffer(this._positionHighBuffer, this._positionHighArr);
+        h.setStreamArrayBuffer(this._positionLowBuffer, this._positionLowArr);
     }
 
     createRgbaBuffer() {
-        const h = this._renderer.handler;
-        for (let i = 0, len = this._rgbaArr.length; i < len; i++) {
-            this._rgbaBuffer && h.gl.deleteBuffer(this._rgbaBuffer[i]);
-            this._rgbaBuffer[i] = h.createArrayBuffer(new Float32Array(this._rgbaArr[i]), 4, this._rgbaArr[i].length / 4);
+        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._rgbaArr.length / 4;
+
+        if (!this._rgbaBuffer || this._rgbaBuffer.numItems !== numItems) {
+            h.gl.deleteBuffer(this._rgbaBuffer);
+            this._rgbaBuffer = h.createStreamArrayBuffer(4, numItems);
         }
+
+        this._rgbaArr = makeArrayTyped(this._rgbaArr);
+
+        h.setStreamArrayBuffer(this._rgbaBuffer, this._rgbaArr);
     }
 
     createDirectionBuffer() {
-        const h = this._renderer.handler;
-        for (let i = 0, len = this._directionArr.length; i < len; i++) {
-            this._directionBuffer && h.gl.deleteBuffer(this._directionBuffer[i]);
-            this._directionBuffer[i] = h.createArrayBuffer(new Float32Array(this._directionArr[i]), 3, this._directionArr[i].length / 3);
+        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._directionArr.length / 3;
+
+        if (!this._directionBuffer || this._directionBuffer.numItems !== numItems) {
+            h.gl.deleteBuffer(this._directionBuffer);
+            this._directionBuffer = h.createStreamArrayBuffer(3, numItems);
         }
+
+        this._directionArr = makeArrayTyped(this._directionArr);
+
+        h.setStreamArrayBuffer(this._directionBuffer, this._directionArr);
     }
 
     createNormalsBuffer() {
-        const h = this._renderer.handler;
-        for (let i = 0, len = this._normalsArr.length; i < len; i++) {
-            this._normalsBuffer && h.gl.deleteBuffer(this._normalsBuffer[i]);
-            this._normalsBuffer[i] = h.createArrayBuffer(new Float32Array(this._normalsArr[i]), 3, this._normalsArr[i].length / 3);
-        }
+        const h = this._geoObjectHandler._planet.renderer.handler;
+        h.gl.deleteBuffer(this._normalsBuffer);
+        this._normalsArr = makeArrayTyped(this._normalsArr);
+        this._normalsBuffer = h.createArrayBuffer(this._normalsArr, 3, this._normalsArr.length / 3);
     }
 
     createIndicesBuffer() {
-        const h = this._renderer.handler;
-        for (let i = 0, len = this._indicesArr.length; i < len; i++) {
-            this._indicesBuffer && h.gl.deleteBuffer(this._indicesBuffer[i]);
-            this._indicesBuffer[i] = h.createElementArrayBuffer(new Uint16Array(this._indicesArr[i]), 1, this._indicesArr[i].length);
-        }
+        const h = this._geoObjectHandler._planet.renderer.handler;
+        h.gl.deleteBuffer(this._indicesBuffer);
+        this._indicesArr = makeArrayTyped(this._indicesArr, Uint16Array);
+        this._indicesBuffer = h.createElementArrayBuffer(this._indicesArr, 1, this._indicesArr.length);
     }
 
     createPickingColorBuffer() {
-        const h = this._renderer.handler;
-        for (let i = 0, len = this._pickingColorArr.length; i < len; i++) {
-            this._pickingColorBuffer && h.gl.deleteBuffer(this._pickingColorBuffer[i]);
-            this._pickingColorBuffer[i] = h.createArrayBuffer(new Float32Array(this._pickingColorArr[i]), 3, this._pickingColorArr[i].length / 3);
+        const h = this._geoObjectHandler._planet.renderer.handler;
+        h.gl.deleteBuffer(this._pickingColorBuffer);
+        this._pickingColorArr = makeArrayTyped(this._pickingColorArr);
+        this._pickingColorBuffer = h.createArrayBuffer(this._pickingColorArr, 3, this._pickingColorArr.length / 3);
+    }
+
+    refresh() {
+        let i = this._changedBuffers.length;
+        while (i--) {
+            this._changedBuffers[i] = true;
         }
     }
 
+    update() {
+        if (this._geoObjectHandler._planet) {
+            let i = this._changedBuffers.length;
+            while (i--) {
+                if (this._changedBuffers[i]) {
+                    this._buffersUpdateCallbacks[i].call(this);
+                    this._changedBuffers[i] = false;
+                }
+            }
+            this.isFree = true;
+        }
+    }
+}
+
+class GeoObjectHandler {
+    constructor(entityCollection) {
+
+        this.__staticId = GeoObjectHandler._staticCounter++;
+
+        /**
+         * Picking rendering option.
+         * @public
+         * @type {boolean}
+         */
+        this.pickingEnabled = true;
+
+        this._entityCollection = entityCollection;
+
+        this._planet = null;
+
+        this._geoObjects = [];
+
+        this._instanceDataMap = new Map();
+        this._instanceDataMapValues = [];
+
+
+        this._dataTagUpdateQueue = [];
+    }
+
+    //Create buffers
+
     static get _staticCounter() {
         if (!this._counter && this._counter !== 0) {
             this._counter = 0;
@@ -180,115 +328,73 @@ class GeoObjectHandler {
     }
 
     initProgram() {
-        if (this._renderer.handler) {
-            if (!this._renderer.handler.programs.geo_object) {
-                this._renderer.handler.addProgram(shaders.geo_object());
+        if (this._planet && this._planet.renderer) {
+            if (!this._planet.renderer.handler.programs.geo_object) {
+                this._planet.renderer.handler.addProgram(shaders.geo_object());
             }
-            if (!this._renderer.handler.programs.geo_object_picking) {
-                this._renderer.handler.addProgram(shaders.geo_object_picking());
+            if (!this._planet.renderer.handler.programs.geo_object_picking) {
+                this._planet.renderer.handler.addProgram(shaders.geo_object_picking());
             }
         }
     }
 
     setRenderNode(renderNode) {
-        this._renderer = renderNode.renderer;
         this._planet = renderNode;
         this.initProgram();
-    }
 
-    setRenderer(planet) {
-        super.setRenderer(planet);
+        //
+        // in case of lazy initialization loading data here
+        for (let i = 0; i < this._instanceDataMapValues.length; i++) {
+            this._loadDataTagTexture(this._instanceDataMapValues[i]);
+        }
     }
 
     _addGeoObjectToArray(geoObject) {
-        let itemSize = 3;
+        const tag = geoObject.tag;
+
+        let tagData = this._instanceDataMap.get(tag);
+
+        if (!tagData) {
+            tagData = new InstanceData(this);
+            this._instanceDataMap.set(tag, tagData);
+            this._instanceDataMapValues = Array.from(this._instanceDataMap.values());
+
+            //
+            // Setting instanced data
+            tagData._vertexArr = geoObject.vertices
+            tagData._normalsArr = geoObject.normals;
+            tagData._indicesArr = geoObject.indices;
+            tagData._texCoordArr = geoObject.texCoords;
+            tagData._textureSrc = geoObject.object3d.src;
 
-        const tag = geoObject.tag,
-            alreadyAdded = this._instancedTags.has(tag);
-
-        if (!alreadyAdded) {
-            this._instancedTags.set(tag, {
-                iCounts: 1,
-                maxIndex: Math.max(...geoObject._indices),
-                index: this._instancedTags.size
-            });
-        } else {
-            const prevState = this._instancedTags.get(tag),
-                nextCount = prevState.iCounts + 1;
-            this._instancedTags.set(tag, {
-                ...prevState,
-                iCounts: nextCount
-            });
+            this._loadDataTagTexture(tagData);
         }
-        const tagData = this._instancedTags.get(tag),
-            ti = tagData.index;
 
-        /**
-         * mark object by index for recalc indices array
-         */
-        geoObject._tagIndex = tagData.iCounts - 1;
-
-            if (!this._vertexArr[ti] || this._vertexArr[ti].length !== geoObject._vertices.length) {
-
-                this._vertexArr[ti] = concatArrays(
-                    this._vertexArr[ti],
-                    setParametersToArray(
-                        [],
-                        0,
-                        geoObject._verticesCount * itemSize,
-                        geoObject._verticesCount * itemSize,
-                        ...geoObject._vertices
-                    )
-                );
-                this._normalsArr[ti] = concatArrays(
-                    this._normalsArr[ti],
-                    setParametersToArray(
-                        [],
-                        0,
-                        geoObject._verticesCount * itemSize,
-                        geoObject._verticesCount * itemSize,
-                        ...geoObject._normals
-                        // ...getTriangleNormals(geoObject._vertices, geoObject._indices)
-                    )
-                );
-            }
-        this._vehicleVisibleArr[ti] = concatArrays(
-            this._vehicleVisibleArr[ti],
-            setParametersToArray([], 0, 1, 1, geoObject._visibility ? 1 : 0)
-        );
-
-        let x = geoObject._positionHigh.x,
-            y = geoObject._positionHigh.y,
-            z = geoObject._positionHigh.z,
-            w;
-
-        this._positionHighArr[ti] = concatArrays(
-            this._positionHighArr[ti],
-            setParametersToArray([], 0, itemSize, itemSize, x, y, z)
-        );
+        geoObject._tagDataIndex = tagData.numInstances++;
+        geoObject._tagData = tagData;
+        tagData.geoObjects.push(geoObject);
+
+        let itemSize = 3;
+
+        tagData._visibleArr = concatArrays(tagData._visibleArr, setParametersToArray([], 0, 1, 1, geoObject._visibility ? 1 : 0));
+
+        let x = geoObject._positionHigh.x, y = geoObject._positionHigh.y, z = geoObject._positionHigh.z, w;
+        tagData._positionHighArr = concatArrays(tagData._positionHighArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z));
+
         x = geoObject._positionLow.x;
         y = geoObject._positionLow.y;
         z = geoObject._positionLow.z;
-        this._positionLowArr[ti] = concatArrays(
-            this._positionLowArr[ti],
-            setParametersToArray([], 0, itemSize, itemSize, x, y, z)
-        );
+        tagData._positionLowArr = concatArrays(tagData._positionLowArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z));
 
         x = geoObject._entity._pickingColor.x / 255;
         y = geoObject._entity._pickingColor.y / 255;
         z = geoObject._entity._pickingColor.z / 255;
-        this._pickingColorArr[ti] = concatArrays(
-            this._pickingColorArr[ti],
-            setParametersToArray([], 0, itemSize, itemSize, x, y, z)
-        );
+        tagData._pickingColorArr = concatArrays(tagData._pickingColorArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z));
 
         x = geoObject._direction.x;
         y = geoObject._direction.y;
         z = geoObject._direction.z;
-        this._directionArr[ti] = concatArrays(
-            this._directionArr[ti],
-            setParametersToArray([], 0, itemSize, itemSize, x, y, z)
-        );
+        tagData._directionArr = concatArrays(tagData._directionArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z));
 
         itemSize = 4;
 
@@ -296,41 +402,28 @@ class GeoObjectHandler {
         y = geoObject._color.y;
         z = geoObject._color.z;
         w = geoObject._color.w;
-        this._rgbaArr[ti] = concatArrays(
-            this._rgbaArr[ti],
-            setParametersToArray([], 0, itemSize, itemSize, x, y, z, w)
-        );
-
-        x = geoObject._pitch;
-        y = geoObject._roll;
+        tagData._rgbaArr = concatArrays(tagData._rgbaArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z, w));
 
         itemSize = 2;
 
-        this._pitchRollArr[ti] = concatArrays(
-            this._pitchRollArr[ti],
-            setParametersToArray([], 0, itemSize, itemSize, x, y)
-        );
+        x = geoObject._pitch;
+        y = geoObject._roll;
+        tagData._pitchRollArr = concatArrays(tagData._pitchRollArr, setParametersToArray([], 0, itemSize, itemSize, x, y));
 
         itemSize = 1;
 
-        this._sizeArr[ti] = concatArrays(
-            this._sizeArr[ti],
-            setParametersToArray([], 0, itemSize, itemSize, geoObject.scale)
-        );
-        this._addIndices(geoObject);
+        tagData._sizeArr = concatArrays(tagData._sizeArr, setParametersToArray([], 0, itemSize, itemSize, geoObject._scale));
     }
 
     _displayPASS() {
-        const r = this._renderer,
-            sh = r.handler.programs.geo_object,
-            p = sh._program,
-            u = p.uniforms,
-            a = p.attributes,
-            gl = r.handler.gl,
-            ec = this._entityCollection;
+        let r = this._planet.renderer, sh = r.handler.programs.geo_object, p = sh._program, u = p.uniforms,
+            a = p.attributes, gl = r.handler.gl, ec = this._entityCollection;
 
         sh.activate();
 
+        //
+        // Could be in VAO
+        //
         gl.enable(gl.CULL_FACE);
         gl.uniform3fv(u.uScaleByDistance, ec.scaleByDistance);
 
@@ -339,75 +432,59 @@ class GeoObjectHandler {
 
         gl.uniformMatrix4fv(u.projectionMatrix, false, r.activeCamera.getProjectionMatrix());
         gl.uniformMatrix4fv(u.viewMatrix, false, r.activeCamera.getViewMatrix());
-        gl.uniformMatrix3fv(u.normalMatrix, false, r.activeCamera._normalMatrix._m);
 
-        gl.uniform4fv(u.lightsPositions, this._planet._lightsTransformedPositions);
+        gl.uniform3fv(u.lightsPositions, this._planet._lightsPositions);
         gl.uniform3fv(u.lightsParamsv, this._planet._lightsParamsv);
         gl.uniform1fv(u.lightsParamsf, this._planet._lightsParamsf);
 
-        for (const tag of this._instancedTags) {
-            const tagData = tag[1],
-                ti = tagData.index;
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._normalsBuffer[ti]);
-            gl.vertexAttribPointer(a.aVertexNormal, this._normalsBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer[ti]);
-            gl.vertexAttribPointer(a.aVertexPosition, this._vertexBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._directionBuffer[ti]);
-            gl.vertexAttribPointer(a.aDirection, this._directionBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._sizeBuffer[ti]);
-            gl.vertexAttribPointer(a.aScale, this._sizeBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._pitchRollBuffer[ti]);
-            gl.vertexAttribPointer(a.aPitchRoll, this._pitchRollBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._rgbaBuffer[ti]);
-            gl.vertexAttribPointer(a.aColor, this._rgbaBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._vehicleVisibleBuffer[ti]);
-            gl.vertexAttribPointer(a.aDispose, this._vehicleVisibleBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._positionHighBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aPositionHigh,
-                this._positionHighBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._positionLowBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aPositionLow,
-                this._positionLowBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
-
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer[ti]);
-
-            if (tagData.iCounts) {
-                p.drawElementsInstanced(
-                    gl.TRIANGLES,
-                    this._indicesBuffer[ti].numItems / tagData.iCounts,
-                    gl.UNSIGNED_SHORT,
-                    0,
-                    tagData.iCounts
-                );
-            } else {
-                gl.drawElements(
-                    gl.TRIANGLES,
-                    this._indicesBuffer[ti].numItems,
-                    gl.UNSIGNED_SHORT,
-                    0
-                );
-            }
+        for (let i = 0; i < this._instanceDataMapValues.length; i++) {
+            let tagData = this._instanceDataMapValues[i];
+
+            //
+            //  Instance individual data
+            //
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._directionBuffer);
+            gl.vertexAttribPointer(a.aDirection, tagData._directionBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._sizeBuffer);
+            gl.vertexAttribPointer(a.aScale, tagData._sizeBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._pitchRollBuffer);
+            gl.vertexAttribPointer(a.aPitchRoll, tagData._pitchRollBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._rgbaBuffer);
+            gl.vertexAttribPointer(a.aColor, tagData._rgbaBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._visibleBuffer);
+            gl.vertexAttribPointer(a.aDispose, tagData._visibleBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+            gl.uniform1f(u.uUseTexture, tagData._texture ? 1 : 0);
+
+            //
+            // Instance common data(could be in VAO)
+            //
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionHighBuffer);
+            gl.vertexAttribPointer(a.aPositionHigh, tagData._positionHighBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionLowBuffer);
+            gl.vertexAttribPointer(a.aPositionLow, tagData._positionLowBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._normalsBuffer);
+            gl.vertexAttribPointer(a.aVertexNormal, tagData._normalsBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._vertexBuffer);
+            gl.vertexAttribPointer(a.aVertexPosition, tagData._vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, tagData._texture || r.handler.defaultTexture);
+            gl.uniform1i(u.uTexture, 0);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._texCoordBuffer);
+            gl.vertexAttribPointer(a.aTexCoord, tagData._texCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tagData._indicesBuffer);
+            p.drawElementsInstanced(gl.TRIANGLES, tagData._indicesBuffer.numItems, gl.UNSIGNED_SHORT, 0, tagData.numInstances);
         }
         gl.disable(gl.CULL_FACE);
     }
@@ -419,13 +496,8 @@ class GeoObjectHandler {
     }
 
     _pickingPASS() {
-        const r = this._renderer,
-            sh = r.handler.programs.geo_object_picking,
-            p = sh._program,
-            u = p.uniforms,
-            a = p.attributes,
-            gl = r.handler.gl,
-            ec = this._entityCollection;
+        let r = this._planet.renderer, sh = r.handler.programs.geo_object_picking, p = sh._program, u = p.uniforms,
+            a = p.attributes, gl = r.handler.gl, ec = this._entityCollection;
 
         sh.activate();
 
@@ -440,380 +512,139 @@ class GeoObjectHandler {
         gl.uniformMatrix4fv(u.projectionMatrix, false, r.activeCamera.getProjectionMatrix());
         gl.uniformMatrix4fv(u.viewMatrix, false, r.activeCamera.getViewMatrix());
 
-        for (const tag of this._instancedTags) {
-            const tagData = tag[1],
-                ti = tagData.index;
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aVertexPosition,
-                this._vertexBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._directionBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aDirection,
-                this._directionBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._sizeBuffer[ti]);
-            gl.vertexAttribPointer(a.aScale, this._sizeBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._pitchRollBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aPitchRoll,
-                this._pitchRollBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._pickingColorBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aPickingColor,
-                this._pickingColorBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._positionHighBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aPositionHigh,
-                this._positionHighBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._positionLowBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aPositionLow,
-                this._positionLowBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._vehicleVisibleBuffer[ti]);
-            gl.vertexAttribPointer(a.aDispose, this._vehicleVisibleBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer[ti]);
-
-            if (tagData.iCounts) {
-                p.drawElementsInstanced(
-                    gl.TRIANGLES,
-                    this._indicesBuffer[ti].numItems / tagData.iCounts,
-                    gl.UNSIGNED_SHORT,
-                    0,
-                    tagData.iCounts
-                );
-            } else {
-                gl.drawElements(
-                    gl.TRIANGLES,
-                    this._indicesBuffer[ti].numItems,
-                    gl.UNSIGNED_SHORT,
-                    0
-                );
-            }
-        }
-        gl.disable(gl.CULL_FACE);
-    }
+        for (let i = 0; i < this._instanceDataMapValues.length; i++) {
+            let tagData = this._instanceDataMapValues[i];
 
-    _recalculateIndices(startIndex) {
-        const allIndices = this._indicesArr,
-            goArr = this._geoObjects,
-            maxIndicesByTags = new Array(this._instancedTags.size).fill(0);
-
-        for (let gi = 0; gi < goArr.length; gi++) {
-            const go = goArr[gi],
-                ti = this.getTagIndexByObjectIndex(go._handlerIndex),
-                gIndices = go._indices;
-
-            for (let ii = 0; ii < gIndices.length; ii++) {
-                const gIndex = gIndices[ii];
-
-                const i = go._indicesCount * go._tagIndex + ii;
-                if (go._tagIndex > 0) {
-                    allIndices[ti][i] = gIndex + maxIndicesByTags[ti];
-                    if (allIndices[ti][i] > maxIndicesByTags[ti]) {
-                        maxIndicesByTags[ti] = allIndices[ti][i] + 1;
-                    }
-                } else {
-                    allIndices[ti][i] = gIndex;
-                    if (gIndex > maxIndicesByTags[ti]) {
-                        maxIndicesByTags[ti] = gIndex + 1;
-                    }
-                }
-            }
-        }
-    }
-
-    _addIndices(g) {
-        let i = g._handlerIndex;
-        const allIndices = this._indicesArr,
-            gArr = this._geoObjects,
-            iLen = g._indices.length,
-            tagData = this._instancedTags.get(g.tag),
-            maxIndex = tagData.maxIndex,
-            ti = tagData.index;
-
-        allIndices[ti] = concatArrays(allIndices[ti], g._indices);
-
-        while (gArr[i]) {
-            const g = gArr[i];
+            //
+            // Instance individual data
+            //
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._directionBuffer);
+            gl.vertexAttribPointer(a.aDirection, tagData._directionBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
-            if (g._tagIndex > 0) {
-                setParametersToArray(allIndices[ti], g._tagIndex, iLen, iLen, ...g._indices.reduce((acc, cur) => {
-                    acc.push(cur + ((maxIndex + 1) * g._tagIndex));
-                    return acc;
-                }, []));
-            }
-            i++;
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._sizeBuffer);
+            gl.vertexAttribPointer(a.aScale, tagData._sizeBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
-        }
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._pitchRollBuffer);
+            gl.vertexAttribPointer(a.aPitchRoll, tagData._pitchRollBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
-    }
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._pickingColorBuffer);
+            gl.vertexAttribPointer(a.aPickingColor, tagData._pickingColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
-    _removeIndices(geoObject) {
-        const allIndices = this._indicesArr,
-            gArr = this._geoObjects,
-            iLen = geoObject._indices.length,
-            tagData = this._instancedTags.get(geoObject.tag),
-            maxIndex = tagData.maxIndex,
-            ti = tagData.index,
-            count = tagData.iCounts;
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionHighBuffer);
+            gl.vertexAttribPointer(a.aPositionHigh, tagData._positionHighBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
-        let i = geoObject._handlerIndex;
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionLowBuffer);
+            gl.vertexAttribPointer(a.aPositionLow, tagData._positionLowBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
-        this._indicesArr[ti] = spliceArray(this._indicesArr[ti], geoObject._tagIndex * geoObject._indicesCount, geoObject._indicesCount);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._visibleBuffer);
+            gl.vertexAttribPointer(a.aDispose, tagData._visibleBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
-        while (gArr[i]) {
-            if (geoObject.tag === gArr[i].tag) {
-                if (count !== 0) {
-                    const startI = (gArr[i]._tagIndex - 1) * iLen;
-                    let stopI = startI + geoObject._indicesCount;
-                    while (stopI > startI) {
-                        this._indicesArr[ti][stopI - 1] = allIndices[ti][stopI - 1] - maxIndex - 1;
-                        stopI--;
-                    }
-                } else {
-                    allIndices[ti] = geoObject._indices;
-                }
-            }
-            i++;
+            //
+            // Instance common data(could be in VAO)
+            //
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._vertexBuffer);
+            gl.vertexAttribPointer(a.aVertexPosition, tagData._vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tagData._indicesBuffer);
+            p.drawElementsInstanced(gl.TRIANGLES, tagData._indicesBuffer.numItems, gl.UNSIGNED_SHORT, 0, tagData.numInstances);
         }
-
+        gl.disable(gl.CULL_FACE);
     }
 
-    setDirectionArr(index, direction) {
-        const itemSize = 3,
-            ob = this.getObjectByIndex(index),
-            ti = this.getTagIndexByObjectIndex(index);
-        let length = ob._verticesCount * itemSize;
-
-        if (ob.instanced) {
-            length = itemSize;
+    async _loadDataTagTexture(tagData) {
+        if (this._planet && tagData._textureSrc) {
+            const image = await loadImage(tagData._textureSrc);
+            tagData.createTexture(image);
         }
-
-        setParametersToArray(this._directionArr[ti], ob._tagIndex, length, itemSize, direction.x, direction.y, direction.z);
-        this._changedBuffers[DIRECTION_BUFFER] = true;
     }
 
-    setVisibility(index, visibility) {
-        const ob = this.getObjectByIndex(index),
-            ti = this.getTagIndexByObjectIndex(index);
-
-        setParametersToArray(this._vehicleVisibleArr[ti], ob._tagIndex, 1, 1, visibility ? 1 : 0);
-
-        this._changedBuffers[VISIBLE_BUFFER] = true;
+    setDirectionArr(tagData, tagDataIndex, direction) {
+        setParametersToArray(tagData._directionArr, tagDataIndex, 3, 3, direction.x, direction.y, direction.z);
+        tagData._changedBuffers[DIRECTION_BUFFER] = true;
+        this._updateTag(tagData);
     }
 
-    setPositionArr(index, positionHigh, positionLow) {
-        const itemSize = 3,
-            ob = this.getObjectByIndex(index),
-            ti = this.getTagIndexByObjectIndex(index);
-        let length = ob._verticesCount * itemSize;
-
-        if (ob.instanced) {
-            length = itemSize;
-        }
-
-        setParametersToArray(this._positionHighArr[ti], ob._tagIndex, length, itemSize, positionHigh.x, positionHigh.y, positionHigh.z);
-
-        // Low
-        setParametersToArray(this._positionLowArr[ti], ob._tagIndex, length, itemSize, positionLow.x, positionLow.y, positionLow.z);
-
-        this._changedBuffers[POSITION_BUFFER] = true;
+    setVisibility(tagData, tagDataIndex, visibility) {
+        setParametersToArray(tagData._visibleArr, tagDataIndex, 1, 1, visibility ? 1 : 0);
+        tagData._changedBuffers[VISIBLE_BUFFER] = true;
+        this._updateTag(tagData);
     }
 
-    setRgbaArr(index, rgba) {
-        const itemSize = 4,
-            ob = this.getObjectByIndex(index),
-            ti = this.getTagIndexByObjectIndex(index);
-        let length = ob._verticesCount * itemSize;
-
-        if (ob.instanced) {
-            length = itemSize;
-        }
-
-        setParametersToArray(this._rgbaArr[ti], ob._tagIndex, length, itemSize, rgba.x, rgba.y, rgba.z, rgba.w);
-
-        this._changedBuffers[RGBA_BUFFER] = true;
+    setPositionArr(tagData, tagDataIndex, positionHigh, positionLow) {
+        setParametersToArray(tagData._positionHighArr, tagDataIndex, 3, 3, positionHigh.x, positionHigh.y, positionHigh.z);
+        setParametersToArray(tagData._positionLowArr, tagDataIndex, 3, 3, positionLow.x, positionLow.y, positionLow.z);
+        tagData._changedBuffers[POSITION_BUFFER] = true;
+        this._updateTag(tagData);
     }
 
-    getTagIndexByObjectIndex(index) {
-        return this._instancedTags.get(this.getObjectByIndex(index).tag).index;
+    setRgbaArr(tagData, tagDataIndex, rgba) {
+        setParametersToArray(tagData._rgbaArr, tagDataIndex, 4, 4, rgba.x, rgba.y, rgba.z, rgba.w);
+        tagData._changedBuffers[RGBA_BUFFER] = true;
+        this._updateTag(tagData);
     }
 
-    getTagDataByObjectIndex(index) {
-        return this._instancedTags.get(this.getObjectByIndex(index).tag);
+    setPickingColorArr(tagData, tagDataIndex, color) {
+        setParametersToArray(tagData._pickingColorArr, tagDataIndex, 3, 3, color.x / 255, color.y / 255, color.z / 255);
+        tagData._changedBuffers[PICKINGCOLOR_BUFFER] = true;
+        this._updateTag(tagData);
     }
 
-    setPickingColorArr(index, color) {
-        const itemSize = 3,
-            ti = this.getTagIndexByObjectIndex(index),
-            ob = this.getObjectByIndex(index),
-            x = color.x / 255,
-            y = color.y / 255,
-            z = color.z / 255;
-
-        let length = ob._verticesCount * itemSize;
+    // setTexCoordArr(tagData, tagDataIndex, tcoordArr) {
+    //     setParametersToArray(tagData._texCoordArr, tagDataIndex, 2, 2, ...tcoordArr);
+    //     tagData._changedBuffers[TEXCOORD_BUFFER] = true;
+    //     this._updateTag(tagData);
+    // }
 
-        if (ob.instanced) {
-            length = itemSize;
-        }
-
-        setParametersToArray(this._pickingColorArr[ti], ob._tagIndex, length, itemSize, x, y, z);
-        this._changedBuffers[PICKINGCOLOR_BUFFER] = true;
+    setPitchRollArr(tagData, tagDataIndex, pitch, roll) {
+        setParametersToArray(tagData._pitchRollArr, tagDataIndex, 2, 2, pitch, roll);
+        tagData._changedBuffers[PITCH_ROLL_BUFFER] = true;
+        this._updateTag(tagData);
     }
 
-    setPitchRollArr(index, pitch, roll) {
-        const itemSize = 2,
-            ti = this.getTagIndexByObjectIndex(index),
-            ob = this.getObjectByIndex(index);
-        let length = ob._verticesCount * itemSize;
-
-        if (ob.instanced) {
-            length = itemSize;
-        }
-
-        setParametersToArray(this._pitchRollArr[ti], ob._tagIndex, length, itemSize, pitch, roll);
-        this._changedBuffers[PITCH_ROLL_BUFFER] = true;
+    setScaleArr(tagData, tagDataIndex, scale) {
+        setParametersToArray(tagData._sizeArr, tagDataIndex, 1, 1, scale);
+        tagData._changedBuffers[SIZE_BUFFER] = true;
+        this._updateTag(tagData);
     }
 
-    setScaleArr(index, scale) {
-        const itemSize = 1,
-            ti = this.getTagIndexByObjectIndex(index),
-            ob = this.getObjectByIndex(index);
-        let length = ob._verticesCount * itemSize;
-
-        if (ob.instanced) {
-            length = itemSize;
+    _updateTag(dataTag) {
+        if (dataTag.isFree) {
+            dataTag.isFree = false;
+            this._dataTagUpdateQueue.push(dataTag);
         }
-
-        setParametersToArray(this._sizeArr[ti], ob._tagIndex, length, itemSize, scale);
-        this._changedBuffers[SIZE_BUFFER] = true;
     }
 
-    refresh() {
-        let i = this._changedBuffers.length;
-        while (i--) {
-            this._changedBuffers[i] = true;
+    update() {
+        for (let i = 0, len = this._dataTagUpdateQueue.length; i < len; i++) {
+            this._dataTagUpdateQueue[i].update();
         }
+        this._dataTagUpdateQueue = [];
     }
 
-    _removeGeoObjects() {
+    _removeAll() {
         let i = this._geoObjects.length;
         while (i--) {
-            const bi = this._geoObjects[i];
-            bi._handlerIndex = -1;
-            bi._handler = null;
+            const gi = this._geoObjects[i];
+
+            gi._tagDataIndex = -1;
+            gi._tagData = undefined;
+
+            gi._handlerIndex = -1;
+            gi._handler = undefined;
         }
         this._geoObjects.length = 0;
         this._geoObjects = [];
-    }
-
-    clear() {
-        this._sizeArr = null;
-        this._pitchRollArr = null;
-        this._vertexArr = null;
-        this._positionHighArr = null;
-        this._positionLowArr = null;
-        this._directionArr = null;
-        this._rgbaArr = null;
-        this._normalsArr = null;
-        this._indicesArr = null;
-        this._pickingColorArr = null;
-        this._vehicleVisibleArr = null;
 
-        this._pitchRollArr = [];
-        this._sizeArr = [];
-        this._vertexArr = [];
-        this._positionHighArr = [];
-        this._positionLowArr = [];
-        this._rgbaArr = [];
-        this._directionArr = [];
-        this._normalsArr = [];
-        this._indicesArr = [];
-        this._pickingColorArr = [];
-        this._vehicleVisibleArr = [];
-
-        this._removeGeoObjects();
-        this._deleteBuffers();
-        this.refresh();
-    }
-
-    _deleteBuffers() {
-        if (this._renderer) {
-            const gl = this._renderer.handler.gl;
-            gl.deleteBuffer(this._sizeBuffer);
-            gl.deleteBuffer(this._pitchRollBuffer);
-            gl.deleteBuffer(this._vertexBuffer);
-            gl.deleteBuffer(this._positionHighBuffer);
-            gl.deleteBuffer(this._positionLowBuffer);
-            gl.deleteBuffer(this._rgbaBuffer);
-            gl.deleteBuffer(this._indicesBuffer);
-            gl.deleteBuffer(this._normalsBuffer);
-            gl.deleteBuffer(this._directionBuffer);
-            gl.deleteBuffer(this._pickingColorBuffer);
+        for (let i = 0; this._instanceDataMapValues.length; i++) {
+            this._instanceDataMapValues[i].clear();
         }
 
-        this._pitchRollBuffer = null;
-        this._sizeBuffer = null;
-        this._vertexBuffer = null;
-        this._positionHighBuffer = null;
-        this._positionLowBuffer = null;
-        this._rgbaBuffer = null;
-        this._indicesBuffer = null;
-        this._normalsBuffer = null;
-        this._directionBuffer = null;
-        this._pickingColorBuffer = null;
+        this._instanceDataMap.clear();
+        this._instanceDataMapValues = [];
     }
 
-    update() {
-        if (this._renderer) {
-            let i = this._changedBuffers.length;
-            while (i--) {
-                if (this._changedBuffers[i]) {
-                    this._buffersUpdateCallbacks[i].call(this);
-                    this._changedBuffers[i] = false;
-                }
-            }
-        }
+    clear() {
+        this._removeAll();
     }
 
     draw() {
@@ -823,26 +654,17 @@ class GeoObjectHandler {
         }
     }
 
-    _reindexGeoObjects(startIndex, tag) {
-        const b = this._geoObjects;
-
-        for (let i = startIndex; i < b.length; i++) {
-            const go = b[i];
-
-            b[i]._handlerIndex = i;
-            if (tag === go.tag) {
-                --b[i]._tagIndex;
-            }
-        }
-    }
-
     add(geoObject) {
         if (geoObject._handlerIndex === -1) {
+
             geoObject._handler = this;
             geoObject._handlerIndex = this._geoObjects.length;
+
             this._geoObjects.push(geoObject);
             this._addGeoObjectToArray(geoObject);
-            this.refresh();
+
+            geoObject._tagData.refresh();
+            this._updateTag(geoObject._tagData);
         }
     }
 
@@ -852,51 +674,60 @@ class GeoObjectHandler {
         }
     }
 
+    _clearDataTagQueue() {
+        this._dataTagUpdateQueue = [];
+    }
+
+
     _removeGeoObject(geoObject) {
-        const gi = geoObject._handlerIndex,
-            tag = geoObject.tag,
-            ti = this.getTagIndexByObjectIndex(gi),
-            prevState = this._instancedTags.get(tag),
-            iCount = prevState.iCounts - 1;
-
-        this._instancedTags.set(tag, {
-            ...prevState,
-            iCounts: iCount
-        });
-
-        this._geoObjects.splice(gi, 1);
-
-        let i = geoObject._tagIndex * 4;
-        this._rgbaArr[ti] = spliceArray(this._rgbaArr[ti], i, 4);
-
-        i = geoObject._tagIndex * 3;
-        if (prevState.iCounts <= 1) {
-            this._vertexArr[ti] = spliceArray(this._vertexArr[ti], 0, geoObject._verticesCount * 3);
-            this._normalsArr[ti] = spliceArray(
-                this._normalsArr[ti],
-                0,
-                geoObject._verticesCount * 3
-            );
-        }
-        this._positionHighArr[ti] = spliceArray(this._positionHighArr[ti], i, 3);
-        this._positionLowArr[ti] = spliceArray(this._positionLowArr[ti], i, 3);
-        this._directionArr[ti] = spliceArray(this._directionArr[ti], i, 3);
-        this._pickingColorArr[ti] = spliceArray(this._pickingColorArr[ti], i, 3);
 
-        i = geoObject._tagIndex * 2;
-        this._pitchRollArr[ti] = spliceArray(this._pitchRollArr[ti], i, 2);
-        i = geoObject._tagIndex;
-        this._sizeArr[ti] = spliceArray(this._sizeArr[ti], i, 1);
-        this._vehicleVisibleArr[ti] = spliceArray(this._vehicleVisibleArr[ti], i, 1);
+        let tagData = geoObject._tagData;
+        let tag = geoObject.tag;
 
-        this._removeIndices(geoObject);
+        tagData.numInstances--;
 
-        this._reindexGeoObjects(gi, tag);
+        let isEmpty = false;
+        // dataTag becomes empty, remove it from the rendering
+        if (tagData.numInstances === 0) {
+            tagData.clear();
+            this._instanceDataMap.delete(tag);
+            this._instanceDataMapValues = [];
+            this._clearDataTagQueue();
+            isEmpty = true;
+        }
+
+        this._geoObjects.splice(geoObject._handlerIndex, 1);
+        for (let i = geoObject._handlerIndex, len = this._geoObjects.length; i < len; i++) {
+            let gi = this._geoObjects[i];
+            gi._handlerIndex = gi._handlerIndex - 1;
+        }
+
+        let tdi = geoObject._tagDataIndex;
+        tagData.geoObjects.splice(tdi, 1);
+        for (let i = geoObject._tagDataIndex, len = tagData.geoObjects.length; i < len; i++) {
+            let gi = tagData.geoObjects[i];
+            gi._tagDataIndex = gi._tagDataIndex - 1;
+        }
 
-        this.refresh();
+        tagData._rgbaArr = spliceArray(tagData._rgbaArr, tdi * 4, 4);
+        tagData._positionHighArr = spliceArray(tagData._positionHighArr, tdi * 3, 3);
+        tagData._positionLowArr = spliceArray(tagData._positionLowArr, tdi * 3, 3);
+        tagData._directionArr = spliceArray(tagData._directionArr, tdi * 3, 3);
+        tagData._pickingColorArr = spliceArray(tagData._pickingColorArr, tdi * 3, 3);
+        tagData._pitchRollArr = spliceArray(tagData._pitchRollArr, tdi * 2, 2);
+        tagData._sizeArr = spliceArray(tagData._sizeArr, tdi, 1);
+        tagData._visibleArr = spliceArray(tagData._visibleArr, tdi, 1);
 
         geoObject._handlerIndex = -1;
-        geoObject._handler = null;
+        geoObject._handler = undefined;
+
+        geoObject._tagDataIndex = -1;
+        geoObject._tagData = undefined;
+
+        if (!isEmpty) {
+            tagData.refresh();
+            this._updateTag(tagData);
+        }
     }
 }