@openglobus/og 0.20.3 → 0.21.0

package/lib/js/Globe.d.ts

@@ -130,7 +130,7 @@ declare class Globe {
      * @public
      */
     fadeOut(): void;
-    attachTo(target: HTMLElement | string): void;
+    attachTo(target: HTMLElement | string, isFirst?: boolean): void;
     detach(): void;
     destroy(): void;
 }

package/lib/js/Globe.js

@@ -239,7 +239,7 @@ class Globe {
     fadeOut() {
         this._canvas.style.opacity = "0";
     }
-    attachTo(target) {
+    attachTo(target, isFirst) {
         this.detach();
         let t;
         if (target instanceof HTMLElement) {
@@ -250,7 +250,12 @@ class Globe {
         }
         if (t) {
             this.$target = t;
-            t.appendChild(this.$inner);
+            if (isFirst && this.$target.firstChild) {
+                this.$target.insertBefore(this.$inner, this.$target.firstChild);
+            }
+            else {
+                t.appendChild(this.$inner);
+            }
         }
     }
     detach() {
@@ -258,6 +263,7 @@ class Globe {
             // Remember that when container is zero
             // sized(display none etc.) renderer frame will be stopped
             this.$target.removeChild(this.$inner);
+            this.$target = null;
         }
     }
     destroy() {

package/lib/js/Object3d.d.ts

@@ -60,5 +60,6 @@ declare class Object3d {
     static createCube(length?: number, height?: number, depth?: number, xOffset?: number, yOffset?: number, zOffset?: number): Object3d;
     static createArrow(back?: number, height?: number, front?: number): Object3d;
     static loadObj(src: string): Promise<Object3d[]>;
+    merge(other: Object3d): Object3d;
 }
 export { Object3d };

package/lib/js/Object3d.js

@@ -370,5 +370,23 @@ class Object3d {
             texCoords: textures
         }));
     }
+    merge(other) {
+        const mergedVertices = [...this._vertices, ...other.vertices];
+        const mergedNormals = [...this._normals, ...other.normals];
+        const mergedTexCoords = [...this._texCoords, ...other.texCoords];
+        const offset = this._vertices.length / 3;
+        const mergedIndices = [
+            ...this._indices,
+            ...other.indices.map(index => index + offset)
+        ];
+        return new Object3d({
+            name: `${this._name}_${other.name}`,
+            vertices: mergedVertices,
+            texCoords: mergedTexCoords,
+            indices: mergedIndices,
+            normals: mergedNormals,
+            color: this.color
+        });
+    }
 }
 export { Object3d };

package/lib/js/entity/EntityCollection.d.ts

@@ -21,6 +21,7 @@ interface IEntityCollectionParams {
     scaleByDistance?: NumberArray3;
     pickingScale?: number;
     opacity?: number;
+    useLighting?: boolean;
     entities?: Entity[];
 }
 /**
@@ -184,8 +185,11 @@ declare class EntityCollection {
      */
     _layer?: Vector;
     _quadNode?: EntityCollectionNode;
+    _useLighting: number;
     constructor(options?: IEntityCollectionParams);
     get id(): number;
+    get useLighting(): boolean;
+    set useLighting(f: boolean);
     isEqual(ec: EntityCollection): boolean;
     /**
      * Sets collection visibility.

package/lib/js/entity/EntityCollection.js

@@ -79,6 +79,7 @@ class EntityCollection {
         this._opacity = options.opacity == undefined ? 1.0 : options.opacity;
         this._fadingOpacity = this._opacity;
         this.events = this.rendererEvents = createEvents(ENTITYCOLLECTION_EVENTS, this);
+        this._useLighting = options.useLighting != undefined ? (options.useLighting ? 1.0 : 0.0) : 1.0;
         // initialize current entities
         if (options.entities) {
             this.addEntities(options.entities);
@@ -87,6 +88,12 @@ class EntityCollection {
     get id() {
         return this.__id;
     }
+    get useLighting() {
+        return Boolean(this._useLighting);
+    }
+    set useLighting(f) {
+        this._useLighting = Number(f);
+    }
     isEqual(ec) {
         return this.__id === ec.__id;
     }

package/lib/js/entity/GeoObject.d.ts

@@ -45,6 +45,9 @@ declare class GeoObject {
     protected _pitch: number;
     protected _yaw: number;
     protected _roll: number;
+    protected _pitchRad: number;
+    protected _yawRad: number;
+    protected _rollRad: number;
     protected _scale: Vec3;
     /**
      * RGBA color.
@@ -52,7 +55,8 @@ declare class GeoObject {
      * @type {Vec4}
      */
     _color: Vec4;
-    _direction: Vec3;
+    _qRot: Quat;
+    protected _direction: Vec3;
     _handler: GeoObjectHandler | null;
     _handlerIndex: number;
     _tagData: InstanceData | null;
@@ -68,7 +72,6 @@ declare class GeoObject {
     getPitch(): number;
     getYaw(): number;
     getRoll(): number;
-    getDirection(): Vec3;
     get object3d(): Object3d;
     get vertices(): number[];
     get normals(): number[];
@@ -147,6 +150,7 @@ declare class GeoObject {
      * @param {Vec3} color - Picking color.
      */
     setPickingColor3v(color: Vec3): void;
-    updateDirection(): void;
+    updateRotation(): void;
+    getDirection(): Vec3;
 }
 export { GeoObject };

package/lib/js/entity/GeoObject.js

@@ -1,6 +1,7 @@
 import * as utils from "../utils/shared";
 import { Quat, Vec3 } from "../math/index";
 import { Object3d } from "../Object3d";
+import { RADIANS } from "../math";
 /**
  * @class
  * @param {Object} options -  Geo object parameters:
@@ -22,9 +23,12 @@ class GeoObject {
         this._pitch = options.pitch || 0.0;
         this._yaw = options.yaw || 0.0;
         this._roll = options.roll || 0.0;
+        this._pitchRad = this._pitch * RADIANS;
+        this._yawRad = this._yaw * RADIANS;
+        this._rollRad = this._roll * RADIANS;
         this._scale = utils.createVector3(options.scale, new Vec3(1, 1, 1));
         this._color = utils.createColorRGBA(options.color);
-        this._direction = new Vec3(0, 1, 0);
+        this._qRot = Quat.IDENTITY;
         this._handler = null;
         this._handlerIndex = -1;
         this._tagData = null;
@@ -42,6 +46,7 @@ class GeoObject {
             this.setTextureSrc(options.textureSrc);
         }
         this._visibility = (options.visibility != undefined ? options.visibility : true);
+        this._direction = new Vec3();
         this._qNorthFrame = new Quat();
     }
     get tag() {
@@ -59,9 +64,6 @@ class GeoObject {
     getRoll() {
         return this._roll;
     }
-    getDirection() {
-        return this._direction;
-    }
     get object3d() {
         return this._object3d;
     }
@@ -144,7 +146,7 @@ class GeoObject {
         Vec3.doubleToTwoFloats(this._position, this._positionHigh, this._positionLow);
         this._handler &&
             this._handler.setPositionArr(this._tagData, this._tagDataIndex, this._positionHigh, this._positionLow);
-        this.updateDirection();
+        this.updateRotation();
     }
     /**
      * Sets geo object position.
@@ -157,11 +159,12 @@ class GeoObject {
         this._position.z = position.z;
         Vec3.doubleToTwoFloats(position, this._positionHigh, this._positionLow);
         this._handler && this._handler.setPositionArr(this._tagData, this._tagDataIndex, this._positionHigh, this._positionLow);
-        this.updateDirection();
+        this.updateRotation();
     }
     setYaw(yaw) {
         this._yaw = yaw;
-        this.updateDirection();
+        this._yawRad = yaw * RADIANS;
+        this.updateRotation();
     }
     setObject(object) {
         this._object3d = object;
@@ -184,16 +187,22 @@ class GeoObject {
      */
     setPitch(pitch) {
         this._pitch = pitch;
-        this._handler && this._handler.setPitchRollArr(this._tagData, this._tagDataIndex, pitch, this._roll);
+        this._pitchRad = pitch * RADIANS;
+        this.updateRotation();
     }
     setRoll(roll) {
         this._roll = roll;
-        this._handler && this._handler.setPitchRollArr(this._tagData, this._tagDataIndex, this._pitch, roll);
+        this._rollRad = roll * RADIANS;
+        this.updateRotation();
     }
     setPitchYawRoll(pitch, yaw, roll) {
-        this.setPitch(pitch);
-        this.setYaw(yaw);
-        this.setRoll(roll);
+        this._pitch = pitch;
+        this._yaw = yaw;
+        this._roll = roll;
+        this._pitchRad = pitch * RADIANS;
+        this._yawRad = yaw * RADIANS;
+        this._rollRad = roll * RADIANS;
+        this.updateRotation();
     }
     setScale(scale) {
         this._scale.x = this._scale.y = this._scale.z = scale;
@@ -222,13 +231,19 @@ class GeoObject {
     setPickingColor3v(color) {
         this._handler && this._handler.setPickingColorArr(this._tagData, this._tagDataIndex, color);
     }
-    updateDirection() {
+    updateRotation() {
         if (this._handler && this._handler._planet) {
             this._qNorthFrame = this._handler._planet.getNorthFrameRotation(this._position);
-            let qq = Quat.yRotation(this._yaw).mul(this._qNorthFrame).conjugate();
-            this._direction = qq.mulVec3(new Vec3(0.0, 0.0, -1.0)).normalize();
-            this._handler.setDirectionArr(this._tagData, this._tagDataIndex, this._direction);
+            let qp = Quat.xRotation(-this._pitchRad);
+            let qy = Quat.yRotation(this._yawRad);
+            let qr = Quat.zRotation(-this._rollRad);
+            this._qRot = qr.mul(qp).mul(qy).mul(this._qNorthFrame).conjugate();
+            this._direction = this._qRot.mulVec3(new Vec3(0.0, 0.0, -1.0)).normalize();
+            this._handler.setQRotArr(this._tagData, this._tagDataIndex, this._qRot);
         }
     }
+    getDirection() {
+        return this._direction.clone();
+    }
 }
 export { GeoObject };

package/lib/js/entity/GeoObjectHandler.d.ts

@@ -4,6 +4,7 @@ import { GeoObject } from "./GeoObject";
 import { Planet } from "../scene/Planet";
 import { Vec3 } from "../math/Vec3";
 import { Vec4 } from "../math/Vec4";
+import { Quat } from "../math/Quat";
 import { WebGLBufferExt, WebGLTextureExt } from "../webgl/Handler";
 import { Object3d } from "../Object3d";
 declare class InstanceData {
@@ -14,24 +15,22 @@ declare class InstanceData {
     _texture: WebGLTextureExt | null;
     _textureSrc: string | null;
     _objectSrc?: string;
-    _pitchRollArr: number[] | TypedArray;
     _sizeArr: number[] | TypedArray;
     _vertexArr: number[] | TypedArray;
     _positionHighArr: number[] | TypedArray;
     _positionLowArr: number[] | TypedArray;
-    _directionArr: number[] | TypedArray;
+    _qRotArr: number[] | TypedArray;
     _rgbaArr: number[] | TypedArray;
     _normalsArr: number[] | TypedArray;
     _indicesArr: number[] | TypedArray;
     _pickingColorArr: number[] | TypedArray;
     _visibleArr: number[] | TypedArray;
     _texCoordArr: number[] | TypedArray;
-    _pitchRollBuffer: WebGLBufferExt | null;
     _sizeBuffer: WebGLBufferExt | null;
     _vertexBuffer: WebGLBufferExt | null;
     _positionHighBuffer: WebGLBufferExt | null;
     _positionLowBuffer: WebGLBufferExt | null;
-    _directionBuffer: WebGLBufferExt | null;
+    _qRotBuffer: WebGLBufferExt | null;
     _rgbaBuffer: WebGLBufferExt | null;
     _normalsBuffer: WebGLBufferExt | null;
     _indicesBuffer: WebGLBufferExt | null;
@@ -45,13 +44,12 @@ declare class InstanceData {
     clear(): void;
     _deleteBuffers(): void;
     createVertexBuffer(): void;
-    createPitchRollBuffer(): void;
     createVisibleBuffer(): void;
     createSizeBuffer(): void;
     createTexCoordBuffer(): void;
     createPositionBuffer(): void;
     createRgbaBuffer(): void;
-    createDirectionBuffer(): void;
+    createQRotBuffer(): void;
     createNormalsBuffer(): void;
     createIndicesBuffer(): void;
     createPickingColorBuffer(): void;
@@ -84,12 +82,11 @@ declare class GeoObjectHandler {
     drawPicking(): void;
     protected _pickingPASS(): void;
     _loadDataTagTexture(tagData: InstanceData): Promise<void>;
-    setDirectionArr(tagData: InstanceData, tagDataIndex: number, direction: Vec3): void;
+    setQRotArr(tagData: InstanceData, tagDataIndex: number, qRot: Quat): void;
     setVisibility(tagData: InstanceData, tagDataIndex: number, visibility: boolean): void;
     setPositionArr(tagData: InstanceData, tagDataIndex: number, positionHigh: Vec3, positionLow: Vec3): void;
     setRgbaArr(tagData: InstanceData, tagDataIndex: number, rgba: Vec4): void;
     setPickingColorArr(tagData: InstanceData, tagDataIndex: number, color: Vec3): void;
-    setPitchRollArr(tagData: InstanceData, tagDataIndex: number, pitch: number, roll: number): void;
     setScaleArr(tagData: InstanceData, tagDataIndex: number, scale: Vec3): void;
     protected _updateTag(dataTag: InstanceData): void;
     update(): void;

package/lib/js/entity/GeoObjectHandler.js

@@ -6,12 +6,11 @@ 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 QROT_BUFFER = 5;
+const SIZE_BUFFER = 6;
+const PICKINGCOLOR_BUFFER = 7;
+const VISIBLE_BUFFER = 8;
+const TEXCOORD_BUFFER = 9;
 function setParametersToArray(arr, index = 0, length = 0, itemSize = 1, ...params) {
     const currIndex = index * length;
     for (let i = currIndex, len = currIndex + length; i < len; i++) {
@@ -34,24 +33,22 @@ class InstanceData {
         this.numInstances = 0;
         this._texture = null;
         this._textureSrc = null;
-        this._pitchRollArr = [];
         this._sizeArr = [];
         this._vertexArr = [];
         this._positionHighArr = [];
         this._positionLowArr = [];
-        this._directionArr = [];
+        this._qRotArr = [];
         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._qRotBuffer = null;
         this._rgbaBuffer = null;
         this._normalsBuffer = null;
         this._indicesBuffer = null;
@@ -61,15 +58,14 @@ class InstanceData {
         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[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._buffersUpdateCallbacks[QROT_BUFFER] = this.createQRotBuffer;
         this._changedBuffers = new Array(this._buffersUpdateCallbacks.length);
     }
     createTexture(image) {
@@ -80,12 +76,11 @@ class InstanceData {
     clear() {
         this.numInstances = 0;
         this.geoObjects = [];
-        this._pitchRollArr = [];
         this._sizeArr = [];
         this._vertexArr = [];
         this._positionHighArr = [];
         this._positionLowArr = [];
-        this._directionArr = [];
+        this._qRotArr = [];
         this._rgbaArr = [];
         this._normalsArr = [];
         this._indicesArr = [];
@@ -101,12 +96,11 @@ class InstanceData {
             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._qRotBuffer);
             gl.deleteBuffer(this._rgbaBuffer);
             gl.deleteBuffer(this._normalsBuffer);
             gl.deleteBuffer(this._indicesBuffer);
@@ -114,12 +108,11 @@ class InstanceData {
             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._qRotBuffer = null;
         this._rgbaBuffer = null;
         this._normalsBuffer = null;
         this._indicesBuffer = null;
@@ -133,15 +126,6 @@ class InstanceData {
         this._vertexArr = makeArrayTyped(this._vertexArr);
         this._vertexBuffer = h.createArrayBuffer(this._vertexArr, 3, this._vertexArr.length / 3);
     }
-    createPitchRollBuffer() {
-        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._geoObjectHandler._planet.renderer.handler, numItems = this._visibleArr.length;
         if (!this._visibleBuffer || this._visibleBuffer.numItems !== numItems) {
@@ -188,14 +172,14 @@ class InstanceData {
         this._rgbaArr = makeArrayTyped(this._rgbaArr);
         h.setStreamArrayBuffer(this._rgbaBuffer, this._rgbaArr);
     }
-    createDirectionBuffer() {
-        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);
+    createQRotBuffer() {
+        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._qRotArr.length / 4;
+        if (!this._qRotBuffer || this._qRotBuffer.numItems !== numItems) {
+            h.gl.deleteBuffer(this._qRotBuffer);
+            this._qRotBuffer = h.createStreamArrayBuffer(4, numItems);
         }
-        this._directionArr = makeArrayTyped(this._directionArr);
-        h.setStreamArrayBuffer(this._directionBuffer, this._directionArr);
+        this._qRotArr = makeArrayTyped(this._qRotArr);
+        h.setStreamArrayBuffer(this._qRotBuffer, this._qRotArr);
     }
     createNormalsBuffer() {
         const h = this._geoObjectHandler._planet.renderer.handler;
@@ -264,7 +248,7 @@ class GeoObjectHandler {
             this._loadDataTagTexture(this._instanceDataMapValues[i]);
         }
         for (let i = 0; i < this._geoObjects.length; i++) {
-            this._geoObjects[i].updateDirection();
+            this._geoObjects[i].updateRotation();
         }
         this.update();
     }
@@ -293,7 +277,6 @@ class GeoObjectHandler {
             if (object.vertices.length !== tagData._vertexArr.length) {
                 tagData._vertexArr = object.vertices;
                 tagData._changedBuffers[VERTEX_BUFFER] = true;
-                tagData._changedBuffers[DIRECTION_BUFFER] = true;
             }
             if (object.normals.length !== tagData._normalsArr.length) {
                 tagData._normalsArr = object.normals;
@@ -344,20 +327,17 @@ class GeoObjectHandler {
         y = geoObject._entity._pickingColor.y / 255;
         z = geoObject._entity._pickingColor.z / 255;
         tagData._pickingColorArr = concatArrays(tagData._pickingColorArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z));
-        x = geoObject._direction.x;
-        y = geoObject._direction.y;
-        z = geoObject._direction.z;
-        tagData._directionArr = concatArrays(tagData._directionArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z));
         itemSize = 4;
+        x = geoObject._qRot.x;
+        y = geoObject._qRot.y;
+        z = geoObject._qRot.z;
+        w = geoObject._qRot.w;
+        tagData._qRotArr = concatArrays(tagData._qRotArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z, w));
         x = geoObject._color.x;
         y = geoObject._color.y;
         z = geoObject._color.z;
         w = geoObject._color.w;
         tagData._rgbaArr = concatArrays(tagData._rgbaArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z, w));
-        itemSize = 2;
-        x = geoObject.getPitch();
-        y = geoObject.getRoll();
-        tagData._pitchRollArr = concatArrays(tagData._pitchRollArr, setParametersToArray([], 0, itemSize, itemSize, x, y));
         itemSize = 3;
         let scale = geoObject.getScale();
         x = scale.x;
@@ -373,6 +353,7 @@ class GeoObjectHandler {
         // Could be in VAO
         //
         gl.uniform3fv(u.uScaleByDistance, ec.scaleByDistance);
+        gl.uniform1f(u.useLighting, ec._useLighting);
         gl.uniform3fv(u.eyePositionHigh, r.activeCamera.eyeHigh);
         gl.uniform3fv(u.eyePositionLow, r.activeCamera.eyeLow);
         gl.uniformMatrix4fv(u.projectionMatrix, false, r.activeCamera.getProjectionMatrix());
@@ -385,12 +366,10 @@ class GeoObjectHandler {
             //
             //  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._qRotBuffer);
+            gl.vertexAttribPointer(a.qRot, tagData._qRotBuffer.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);
@@ -436,12 +415,10 @@ class GeoObjectHandler {
             //
             // 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._qRotBuffer);
+            gl.vertexAttribPointer(a.qRot, tagData._qRotBuffer.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._pickingColorBuffer);
             gl.vertexAttribPointer(a.aPickingColor, tagData._pickingColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
             gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionHighBuffer);
@@ -465,9 +442,9 @@ class GeoObjectHandler {
             tagData.createTexture(image);
         }
     }
-    setDirectionArr(tagData, tagDataIndex, direction) {
-        setParametersToArray(tagData._directionArr, tagDataIndex, 3, 3, direction.x, direction.y, direction.z);
-        tagData._changedBuffers[DIRECTION_BUFFER] = true;
+    setQRotArr(tagData, tagDataIndex, qRot) {
+        setParametersToArray(tagData._qRotArr, tagDataIndex, 4, 4, qRot.x, qRot.y, qRot.z, qRot.w);
+        tagData._changedBuffers[QROT_BUFFER] = true;
         this._updateTag(tagData);
     }
     setVisibility(tagData, tagDataIndex, visibility) {
@@ -496,11 +473,6 @@ class GeoObjectHandler {
     //     tagData._changedBuffers[TEXCOORD_BUFFER] = true;
     //     this._updateTag(tagData);
     // }
-    setPitchRollArr(tagData, tagDataIndex, pitch, roll) {
-        setParametersToArray(tagData._pitchRollArr, tagDataIndex, 2, 2, pitch, roll);
-        tagData._changedBuffers[PITCH_ROLL_BUFFER] = true;
-        this._updateTag(tagData);
-    }
     setScaleArr(tagData, tagDataIndex, scale) {
         setParametersToArray(tagData._sizeArr, tagDataIndex, 3, 3, scale.x, scale.y, scale.z);
         tagData._changedBuffers[SIZE_BUFFER] = true;
@@ -550,7 +522,7 @@ class GeoObjectHandler {
             geoObject._handlerIndex = this._geoObjects.length;
             this._geoObjects.push(geoObject);
             this._addGeoObjectToArray(geoObject);
-            geoObject.updateDirection();
+            geoObject.updateRotation();
             geoObject._tagData.refresh();
             this._updateTag(geoObject._tagData);
             geoObject.setObjectSrc(geoObject._objectSrc);
@@ -591,10 +563,9 @@ class GeoObjectHandler {
         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._qRotArr = spliceArray(tagData._qRotArr, tdi * 4, 4);
         tagData._pickingColorArr = spliceArray(tagData._pickingColorArr, tdi * 3, 3);
         tagData._sizeArr = spliceArray(tagData._sizeArr, tdi * 3, 3);
-        tagData._pitchRollArr = spliceArray(tagData._pitchRollArr, tdi * 2, 2);
         tagData._visibleArr = spliceArray(tagData._visibleArr, tdi, 1);
         geoObject._handlerIndex = -1;
         geoObject._handler = null;

package/lib/js/entity/GeometryHandler.d.ts

@@ -1,11 +1,10 @@
 import { Extent } from "../Extent";
-import { Handler } from "../webgl/Handler";
+import { Handler, WebGLBufferExt } from "../webgl/Handler";
 import { Vector } from "../layer/Vector";
 import { Node } from "../quadTree/Node";
 import { Vec3 } from "../math/Vec3";
 import { Vec4 } from "../math/Vec4";
 import { CoordinatesType, Geometry } from "./Geometry";
-import { WebGLBufferExt } from "../webgl/Handler";
 declare class GeometryHandler {
     static __counter__: number;
     protected __id: number;
@@ -80,5 +79,7 @@ declare class GeometryHandler {
     createLineThicknessBuffer(): void;
     createLineStrokesBuffer(): void;
     createLineStrokeColorsBuffer(): void;
+    clear(): void;
+    _deleteBuffers(): void;
 }
 export { GeometryHandler };