@openglobus/og 0.17.2 → 0.18.0

package/src/{og/entity/RayHandler.js → entity/RayHandler.ts}

@@ -1,7 +1,11 @@
-"use strict";
-
-import * as shaders from "../shaders/ray.js";
-import { concatArrays, makeArrayTyped, spliceArray } from "../utils/shared.js";
+import * as shaders from "../shaders/ray";
+import {concatArrays, makeArrayTyped, spliceArray, TypedArray} from "../utils/shared";
+import {EntityCollection} from "./EntityCollection";
+import {Ray} from "./Ray";
+import {Renderer} from "../renderer/Renderer";
+import {Vec3} from "../math/Vec3";
+import {Vec4} from "../math/Vec4";
+import {WebGLBufferExt} from "../webgl/Handler";
 
 const PICKINGCOLOR_BUFFER = 0;
 const START_POSITION_BUFFER = 1;
@@ -16,7 +20,49 @@ const VERTEX_BUFFER = 5;
  *
  */
 class RayHandler {
-    constructor(entityCollection) {
+
+    static __counter__: number = 0;
+
+    protected __id: number;
+
+    /**
+     * Picking rendering option.
+     * @public
+     * @type {boolean}
+     */
+    public pickingEnabled: boolean;
+
+    protected _entityCollection: EntityCollection;
+
+    protected _renderer: Renderer | null;
+
+    protected _rays: Ray[];
+
+    protected _vertexBuffer: WebGLBufferExt | null;
+    protected _startPositionHighBuffer: WebGLBufferExt | null;
+    protected _startPositionLowBuffer: WebGLBufferExt | null;
+    protected _endPositionHighBuffer: WebGLBufferExt | null;
+    protected _endPositionLowBuffer: WebGLBufferExt | null;
+    protected _thicknessBuffer: WebGLBufferExt | null;
+    protected _rgbaBuffer: WebGLBufferExt | null;
+    protected _pickingColorBuffer: WebGLBufferExt | null;
+
+    protected _vertexArr: TypedArray | number[];
+    protected _startPositionHighArr: TypedArray | number[];
+    protected _startPositionLowArr: TypedArray | number[];
+    protected _endPositionHighArr: TypedArray | number[];
+    protected _endPositionLowArr: TypedArray | number[];
+    protected _thicknessArr: TypedArray | number[];
+    protected _rgbaArr: TypedArray | number[];
+    protected _pickingColorArr: TypedArray | number[];
+
+    protected _buffersUpdateCallbacks: Function[];
+    protected _changedBuffers: boolean[];
+
+    constructor(entityCollection: EntityCollection) {
+
+        this.__id = RayHandler.__counter__++;
+
         /**
          * Picking rendering option.
          * @public
@@ -37,6 +83,7 @@ class RayHandler {
         this._endPositionLowBuffer = null;
         this._thicknessBuffer = null;
         this._rgbaBuffer = null;
+        this._pickingColorBuffer = null;
 
         this._vertexArr = [];
         this._startPositionHighArr = [];
@@ -45,8 +92,6 @@ class RayHandler {
         this._endPositionLowArr = [];
         this._thicknessArr = [];
         this._rgbaArr = [];
-
-        this._pickingColorBuffer = null;
         this._pickingColorArr = [];
 
         this._buffersUpdateCallbacks = [];
@@ -58,55 +103,43 @@ class RayHandler {
         this._buffersUpdateCallbacks[PICKINGCOLOR_BUFFER] = this.createPickingColorBuffer;
 
         this._changedBuffers = new Array(this._buffersUpdateCallbacks.length);
-
-        this.__staticId = RayHandler._staticCounter++;
-    }
-
-    static get _staticCounter() {
-        if (!this._counter && this._counter !== 0) {
-            this._counter = 0;
-        }
-        return this._counter;
     }
 
-    static set _staticCounter(n) {
-        this._counter = n;
-    }
-
-    static concArr(dest, curr) {
+    static concArr(dest: number[], curr: number[]) {
         for (let i = 0; i < curr.length; i++) {
             dest.push(curr[i]);
         }
     }
 
-    initProgram() {
-        if (this._renderer.handler) {
+    public initProgram() {
+        if (this._renderer && this._renderer.handler) {
             if (!this._renderer.handler.programs.rayScreen) {
                 this._renderer.handler.addProgram(shaders.rayScreen());
             }
 
+            // @todo: ray picking
             // if (!this._renderer.handler.programs.billboardPicking) {
             //     this._renderer.handler.addProgram(shaders.billboardPicking());
             // }
         }
     }
 
-    setRenderer(renderer) {
+    public setRenderer(renderer: Renderer) {
         this._renderer = renderer;
         this.initProgram();
     }
 
-    refresh() {
-        var i = this._changedBuffers.length;
+    public refresh() {
+        let i = this._changedBuffers.length;
         while (i--) {
             this._changedBuffers[i] = true;
         }
     }
 
-    _removeRays() {
-        var i = this._rays.length;
+    protected _removeRays() {
+        let i = this._rays.length;
         while (i--) {
-            var ri = this._rays[i];
+            let ri = this._rays[i];
             ri._handlerIndex = -1;
             ri._handler = null;
         }
@@ -114,39 +147,48 @@ class RayHandler {
         this._rays = [];
     }
 
-    clear() {
+    public clear() {
+        //@ts-ignore
         this._vertexArr = null;
+        //@ts-ignore
         this._startPositionHighArr = null;
+        //@ts-ignore
         this._startPositionLowArr = null;
+        //@ts-ignore
         this._endPositionHighArr = null;
+        //@ts-ignore
         this._endPositionLowArr = null;
+        //@ts-ignore
         this._thicknessArr = null;
+        //@ts-ignore
         this._rgbaArr = null;
 
-        this._vertexArr = new Float32Array();
-        this._startPositionHighArr = new Float32Array();
-        this._startPositionLowArr = new Float32Array();
-        this._endPositionHighArr = new Float32Array();
-        this._endPositionLowArr = new Float32Array();
-        this._thicknessArr = new Float32Array();
-        this._rgbaArr = new Float32Array();
+        this._vertexArr = new Float32Array([]);
+        this._startPositionHighArr = new Float32Array([]);
+        this._startPositionLowArr = new Float32Array([]);
+        this._endPositionHighArr = new Float32Array([]);
+        this._endPositionLowArr = new Float32Array([]);
+        this._thicknessArr = new Float32Array([]);
+        this._rgbaArr = new Float32Array([]);
 
         this._removeRays();
         this._deleteBuffers();
         this.refresh();
     }
 
-    _deleteBuffers() {
+    protected _deleteBuffers() {
         if (this._renderer) {
-            var gl = this._renderer.handler.gl;
-
-            gl.deleteBuffer(this._startPositionHighBuffer);
-            gl.deleteBuffer(this._startPositionLowBuffer);
-            gl.deleteBuffer(this._endPositionHighBuffer);
-            gl.deleteBuffer(this._endPositionLowBuffer);
-            gl.deleteBuffer(this._thicknessBuffer);
-            gl.deleteBuffer(this._rgbaBuffer);
-            gl.deleteBuffer(this._vertexBuffer);
+            let gl = this._renderer.handler.gl;
+
+            if (gl) {
+                gl.deleteBuffer(this._startPositionHighBuffer as WebGLBuffer);
+                gl.deleteBuffer(this._startPositionLowBuffer as WebGLBuffer);
+                gl.deleteBuffer(this._endPositionHighBuffer as WebGLBuffer);
+                gl.deleteBuffer(this._endPositionLowBuffer as WebGLBuffer);
+                gl.deleteBuffer(this._thicknessBuffer as WebGLBuffer);
+                gl.deleteBuffer(this._rgbaBuffer as WebGLBuffer);
+                gl.deleteBuffer(this._vertexBuffer as WebGLBuffer);
+            }
 
             this._startPositionHighBuffer = null;
             this._startPositionLowBuffer = null;
@@ -158,9 +200,9 @@ class RayHandler {
         }
     }
 
-    update() {
+    public update() {
         if (this._renderer) {
-            var i = this._changedBuffers.length;
+            let i = this._changedBuffers.length;
             while (i--) {
                 if (this._changedBuffers[i]) {
                     this._buffersUpdateCallbacks[i].call(this);
@@ -170,7 +212,7 @@ class RayHandler {
         }
     }
 
-    add(ray) {
+    public add(ray: Ray) {
         if (ray._handlerIndex == -1) {
             ray._handler = this;
             ray._handlerIndex = this._rays.length;
@@ -180,8 +222,8 @@ class RayHandler {
         }
     }
 
-    _addRayToArrays(ray) {
-        if (ray._visibility) {
+    protected _addRayToArrays(ray: Ray) {
+        if (ray.getVisibility()) {
             this._vertexArr = concatArrays(
                 this._vertexArr,
                 [-0.5, 1.0, -0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 1.0, -0.5, 1.0]
@@ -196,98 +238,22 @@ class RayHandler {
         let x = ray._startPositionHigh.x,
             y = ray._startPositionHigh.y,
             z = ray._startPositionHigh.z;
-        this._startPositionHighArr = concatArrays(this._startPositionHighArr, [
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z
-        ]);
+        this._startPositionHighArr = concatArrays(this._startPositionHighArr, [x, y, z, x, y, z, x, y, z, x, y, z, x, y, z, x, y, z]);
 
         x = ray._startPositionLow.x;
         y = ray._startPositionLow.y;
         z = ray._startPositionLow.z;
-        this._startPositionLowArr = concatArrays(this._startPositionLowArr, [
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z
-        ]);
+        this._startPositionLowArr = concatArrays(this._startPositionLowArr, [x, y, z, x, y, z, x, y, z, x, y, z, x, y, z, x, y, z]);
 
         x = ray._endPositionHigh.x;
         y = ray._endPositionHigh.y;
         z = ray._endPositionHigh.z;
-        this._endPositionHighArr = concatArrays(this._endPositionHighArr, [
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z
-        ]);
+        this._endPositionHighArr = concatArrays(this._endPositionHighArr, [x, y, z, x, y, z, x, y, z, x, y, z, x, y, z, x, y, z]);
 
         x = ray._endPositionLow.x;
         y = ray._endPositionLow.y;
         z = ray._endPositionLow.z;
-        this._endPositionLowArr = concatArrays(this._endPositionLowArr, [
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z
-        ]);
+        this._endPositionLowArr = concatArrays(this._endPositionLowArr, [x, y, z, x, y, z, x, y, z, x, y, z, x, y, z, x, y, z]);
 
         x = ray._thickness;
         this._thicknessArr = concatArrays(this._thicknessArr, [x, x, x, x, x, x]);
@@ -301,66 +267,29 @@ class RayHandler {
             b1 = ray._endColor.z,
             a1 = ray._endColor.w;
         this._rgbaArr = concatArrays(this._rgbaArr, [
-            r1,
-            g1,
-            b1,
-            a1,
-            r0,
-            g0,
-            b0,
-            a0,
-            r0,
-            g0,
-            b0,
-            a0,
-            r0,
-            g0,
-            b0,
-            a0,
-            r1,
-            g1,
-            b1,
-            a1,
-            r1,
-            g1,
-            b1,
-            a1
+            r1, g1, b1, a1,
+            r0, g0, b0, a0,
+            r0, g0, b0, a0,
+            r0, g0, b0, a0,
+            r1, g1, b1, a1,
+            r1, g1, b1, a1
         ]);
 
-        x = ray._entity._pickingColor.x / 255;
-        y = ray._entity._pickingColor.y / 255;
-        z = ray._entity._pickingColor.z / 255;
-        this._pickingColorArr = concatArrays(this._pickingColorArr, [
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z,
-            x,
-            y,
-            z
-        ]);
+        x = ray._entity!._pickingColor.x / 255;
+        y = ray._entity!._pickingColor.y / 255;
+        z = ray._entity!._pickingColor.z / 255;
+        this._pickingColorArr = concatArrays(this._pickingColorArr, [x, y, z, x, y, z, x, y, z, x, y, z, x, y, z, x, y, z]);
     }
 
-    _displayPASS() {
-        var r = this._renderer;
-        var h = r.handler;
+    protected _displayPASS() {
+        let r = this._renderer!;
+        let h = r.handler;
         h.programs.rayScreen.activate();
-        var sh = h.programs.rayScreen._program;
-        var sha = sh.attributes,
+        let sh = h.programs.rayScreen._program;
+        let sha = sh.attributes,
             shu = sh.uniforms;
 
-        var gl = h.gl,
+        let gl = h.gl!,
             ec = this._entityCollection;
 
         //gl.polygonOffset(ec.polygonOffsetFactor, ec.polygonOffsetUnits);
@@ -369,105 +298,71 @@ class RayHandler {
 
         gl.uniform1f(shu.uOpacity, ec._fadingOpacity);
 
-        gl.uniformMatrix4fv(shu.viewMatrix, false, r.activeCamera.getViewMatrix());
-        gl.uniformMatrix4fv(shu.projectionMatrix, false, r.activeCamera.getProjectionMatrix());
+        gl.uniformMatrix4fv(shu.viewMatrix, false, r.activeCamera!.getViewMatrix());
+        gl.uniformMatrix4fv(shu.projectionMatrix, false, r.activeCamera!.getProjectionMatrix());
 
-        gl.uniform3fv(shu.eyePositionHigh, r.activeCamera.eyeHigh);
-        gl.uniform3fv(shu.eyePositionLow, r.activeCamera.eyeLow);
+        gl.uniform3fv(shu.eyePositionHigh, r.activeCamera!.eyeHigh);
+        gl.uniform3fv(shu.eyePositionLow, r.activeCamera!.eyeLow);
 
-        gl.uniform1f(shu.resolution, r.activeCamera._tanViewAngle_hradOneByHeight);
+        gl.uniform1f(shu.resolution, r.activeCamera!._tanViewAngle_hradOneByHeight);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._startPositionHighBuffer);
-        gl.vertexAttribPointer(
-            sha.a_startPosHigh,
-            this._startPositionHighBuffer.itemSize,
-            gl.FLOAT,
-            false,
-            0,
-            0
-        );
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._startPositionHighBuffer!);
+        gl.vertexAttribPointer(sha.a_startPosHigh, this._startPositionHighBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._startPositionLowBuffer);
-        gl.vertexAttribPointer(
-            sha.a_startPosLow,
-            this._startPositionLowBuffer.itemSize,
-            gl.FLOAT,
-            false,
-            0,
-            0
-        );
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._startPositionLowBuffer!);
+        gl.vertexAttribPointer(sha.a_startPosLow, this._startPositionLowBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._endPositionHighBuffer);
-        gl.vertexAttribPointer(
-            sha.a_endPosHigh,
-            this._endPositionHighBuffer.itemSize,
-            gl.FLOAT,
-            false,
-            0,
-            0
-        );
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._endPositionHighBuffer!);
+        gl.vertexAttribPointer(sha.a_endPosHigh, this._endPositionHighBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._endPositionLowBuffer);
-        gl.vertexAttribPointer(
-            sha.a_endPosLow,
-            this._endPositionLowBuffer.itemSize,
-            gl.FLOAT,
-            false,
-            0,
-            0
-        );
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._endPositionLowBuffer!);
+        gl.vertexAttribPointer(sha.a_endPosLow, this._endPositionLowBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._rgbaBuffer);
-        gl.vertexAttribPointer(sha.a_rgba, this._rgbaBuffer.itemSize, gl.FLOAT, false, 0, 0);
-
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._thicknessBuffer);
-        gl.vertexAttribPointer(
-            sha.a_thickness,
-            this._thicknessBuffer.itemSize,
-            gl.FLOAT,
-            false,
-            0,
-            0
-        );
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._rgbaBuffer!);
+        gl.vertexAttribPointer(sha.a_rgba, this._rgbaBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer);
-        gl.vertexAttribPointer(sha.a_vertices, this._vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._thicknessBuffer!);
+        gl.vertexAttribPointer(sha.a_thickness, this._thicknessBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.drawArrays(gl.TRIANGLES, 0, this._vertexBuffer.numItems);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer!);
+        gl.vertexAttribPointer(sha.a_vertices, this._vertexBuffer!.itemSize, gl.FLOAT, false, 0, 0);
+
+        gl.drawArrays(gl.TRIANGLES, 0, this._vertexBuffer!.numItems);
 
         gl.enable(gl.CULL_FACE);
     }
 
-    _pickingPASS() {
+    protected _pickingPASS() {
         // ...
     }
 
-    draw() {
+    public draw() {
         if (this._rays.length) {
             this.update();
             this._displayPASS();
         }
     }
 
-    drawPicking() {
+    public drawPicking() {
         if (this._rays.length && this.pickingEnabled) {
             this._pickingPASS();
         }
     }
 
-    reindexRaysArray(startIndex) {
-        var r = this._rays;
+    public reindexRaysArray(startIndex: number) {
+        let r = this._rays;
         for (let i = startIndex; i < r.length; i++) {
             r[i]._handlerIndex = i;
         }
     }
 
-    _removeRay(ray) {
-        var ri = ray._handlerIndex;
+    protected _removeRay(ray: Ray) {
+
+        let ri = ray._handlerIndex;
 
         this._rays.splice(ri, 1);
 
-        var i = ri * 24;
+        let i = ri * 24;
         this._rgbaArr = spliceArray(this._rgbaArr, i, 24);
 
         i = ri * 18;
@@ -490,17 +385,17 @@ class RayHandler {
         ray._handler = null;
     }
 
-    remove(ray) {
-        if (ray._handler && this.__staticId == ray._handler.__staticId) {
+    public remove(ray: Ray) {
+        if (ray._handler && this.__id === ray._handler.__id) {
             this._removeRay(ray);
         }
     }
 
-    setStartPositionArr(index, positionHigh, positionLow) {
-        var i = index * 18;
+    public setStartPositionArr(index: number, positionHigh: Vec3, positionLow: Vec3) {
+        let i = index * 18;
 
         // High
-        var a = this._startPositionHighArr,
+        let a = this._startPositionHighArr,
             x = positionHigh.x,
             y = positionHigh.y,
             z = positionHigh.z;
@@ -562,11 +457,11 @@ class RayHandler {
         this._changedBuffers[START_POSITION_BUFFER] = true;
     }
 
-    setEndPositionArr(index, positionHigh, positionLow) {
-        var i = index * 18;
+    public setEndPositionArr(index: number, positionHigh: Vec3, positionLow: Vec3) {
+        let i = index * 18;
 
         // High
-        var a = this._endPositionHighArr,
+        let a = this._endPositionHighArr,
             x = positionHigh.x,
             y = positionHigh.y,
             z = positionHigh.z;
@@ -628,9 +523,9 @@ class RayHandler {
         this._changedBuffers[END_POSITION_BUFFER] = true;
     }
 
-    setPickingColorArr(index, color) {
-        var i = index * 18;
-        var a = this._pickingColorArr,
+    public setPickingColorArr(index: number, color: Vec3) {
+        let i = index * 18;
+        let a = this._pickingColorArr,
             x = color.x / 255,
             y = color.y / 255,
             z = color.z / 255;
@@ -662,9 +557,9 @@ class RayHandler {
         this._changedBuffers[PICKINGCOLOR_BUFFER] = true;
     }
 
-    setRgbaArr(index, startColor, endColor) {
-        var i = index * 24;
-        var a = this._rgbaArr,
+    public setRgbaArr(index: number, startColor: Vec4, endColor: Vec4) {
+        let i = index * 24;
+        let a = this._rgbaArr,
             r0 = startColor.x,
             g0 = startColor.y,
             b0 = startColor.z,
@@ -707,9 +602,9 @@ class RayHandler {
         this._changedBuffers[RGBA_BUFFER] = true;
     }
 
-    setThicknessArr(index, thickness) {
-        var i = index * 6;
-        var a = this._thicknessArr;
+    public setThicknessArr(index: number, thickness: number) {
+        let i = index * 6;
+        let a = this._thicknessArr;
 
         a[i] = thickness;
         a[i + 1] = thickness;
@@ -721,8 +616,8 @@ class RayHandler {
         this._changedBuffers[THICKNESS_BUFFER] = true;
     }
 
-    setVisibility(index, visibility) {
-        var vArr;
+    public setVisibility(index: number, visibility: boolean) {
+        let vArr: number[];
         if (visibility) {
             vArr = [-0.5, 1.0, -0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 1.0, -0.5, 1.0];
         } else {
@@ -731,9 +626,9 @@ class RayHandler {
         this.setVertexArr(index, vArr);
     }
 
-    setVertexArr(index, vertexArr) {
-        var i = index * 12;
-        var a = this._vertexArr;
+    public setVertexArr(index: number, vertexArr: number[]) {
+        let i = index * 12;
+        let a = this._vertexArr;
 
         a[i] = vertexArr[0];
         a[i + 1] = vertexArr[1];
@@ -754,88 +649,88 @@ class RayHandler {
         this._changedBuffers[VERTEX_BUFFER] = true;
     }
 
-    createStartPositionBuffer() {
-        var h = this._renderer.handler;
-        h.gl.deleteBuffer(this._startPositionHighBuffer);
+    public createStartPositionBuffer() {
+        let h = this._renderer!.handler;
+        h.gl!.deleteBuffer(this._startPositionHighBuffer as WebGLBuffer);
         this._startPositionHighArr = makeArrayTyped(this._startPositionHighArr);
         this._startPositionHighBuffer = h.createArrayBuffer(
-            this._startPositionHighArr,
+            this._startPositionHighArr as Float32Array,
             3,
             this._startPositionHighArr.length / 3,
-            h.gl.DYNAMIC_DRAW
+            h.gl!.DYNAMIC_DRAW
         );
-        h.gl.deleteBuffer(this._startPositionLowBuffer);
+        h.gl!.deleteBuffer(this._startPositionLowBuffer as WebGLBuffer);
         this._startPositionLowArr = makeArrayTyped(this._startPositionLowArr);
 
         this._startPositionLowBuffer = h.createArrayBuffer(
-            this._startPositionLowArr,
+            this._startPositionLowArr as Float32Array,
             3,
             this._startPositionLowArr.length / 3,
-            h.gl.DYNAMIC_DRAW
+            h.gl!.DYNAMIC_DRAW
         );
     }
 
-    createEndPositionBuffer() {
-        var h = this._renderer.handler;
-        h.gl.deleteBuffer(this._endPositionHighBuffer);
+    public createEndPositionBuffer() {
+        let h = this._renderer!.handler;
+        h.gl!.deleteBuffer(this._endPositionHighBuffer as WebGLBuffer);
         this._endPositionHighArr = makeArrayTyped(this._endPositionHighArr);
         this._endPositionHighBuffer = h.createArrayBuffer(
-            this._endPositionHighArr,
+            this._endPositionHighArr as Float32Array,
             3,
             this._endPositionHighArr.length / 3,
-            h.gl.DYNAMIC_DRAW
+            h.gl!.DYNAMIC_DRAW
         );
-        h.gl.deleteBuffer(this._endPositionLowBuffer);
+        h.gl!.deleteBuffer(this._endPositionLowBuffer as WebGLBuffer);
         this._endPositionLowArr = makeArrayTyped(this._endPositionLowArr);
         this._endPositionLowBuffer = h.createArrayBuffer(
-            this._endPositionLowArr,
+            this._endPositionLowArr as Float32Array,
             3,
             this._endPositionLowArr.length / 3,
-            h.gl.DYNAMIC_DRAW
+            h.gl!.DYNAMIC_DRAW
         );
     }
 
-    createRgbaBuffer() {
-        var h = this._renderer.handler;
-        h.gl.deleteBuffer(this._rgbaBuffer);
+    public createRgbaBuffer() {
+        let h = this._renderer!.handler;
+        h.gl!.deleteBuffer(this._rgbaBuffer as WebGLBuffer);
         this._rgbaArr = makeArrayTyped(this._rgbaArr);
-        this._rgbaBuffer = h.createArrayBuffer(this._rgbaArr, 4, this._rgbaArr.length / 4);
+        this._rgbaBuffer = h.createArrayBuffer(this._rgbaArr as Float32Array, 4, this._rgbaArr.length / 4);
     }
 
-    createThicknessBuffer() {
-        var h = this._renderer.handler;
-        h.gl.deleteBuffer(this._thicknessBuffer);
+    public createThicknessBuffer() {
+        let h = this._renderer!.handler;
+        h.gl!.deleteBuffer(this._thicknessBuffer as WebGLBuffer);
         this._thicknessArr = makeArrayTyped(this._thicknessArr);
         this._thicknessBuffer = h.createArrayBuffer(
-            this._thicknessArr,
+            this._thicknessArr as Float32Array,
             1,
             this._thicknessArr.length,
-            h.gl.DYNAMIC_DRAW
+            h.gl!.DYNAMIC_DRAW
         );
     }
 
-    createVertexBuffer() {
-        var h = this._renderer.handler;
-        h.gl.deleteBuffer(this._vertexBuffer);
+    public createVertexBuffer() {
+        let h = this._renderer!.handler;
+        h.gl!.deleteBuffer(this._vertexBuffer as WebGLBuffer);
         this._vertexArr = makeArrayTyped(this._vertexArr);
         this._vertexBuffer = h.createArrayBuffer(
-            this._vertexArr,
+            this._vertexArr as Float32Array,
             2,
             this._vertexArr.length / 2,
-            h.gl.DYNAMIC_DRAW
+            h.gl!.DYNAMIC_DRAW
         );
     }
 
-    createPickingColorBuffer() {
-        var h = this._renderer.handler;
-        h.gl.deleteBuffer(this._pickingColorBuffer);
+    public createPickingColorBuffer() {
+        let h = this._renderer!.handler;
+        h.gl!.deleteBuffer(this._pickingColorBuffer as WebGLBuffer);
         this._pickingColorArr = makeArrayTyped(this._pickingColorArr);
         this._pickingColorBuffer = h.createArrayBuffer(
-            this._pickingColorArr,
+            this._pickingColorArr as Float32Array,
             3,
             this._pickingColorArr.length / 3
         );
     }
 }
 
-export { RayHandler };
+export {RayHandler};