@openglobus/og 0.17.2 → 0.18.1

package/lib/js/utils/TextureAtlas.js

@@ -0,0 +1,231 @@
+import { ImageCanvas } from "../ImageCanvas";
+import { Rectangle } from "../Rectangle";
+import { ImagesCacheManager } from "./ImagesCacheManager";
+/**
+ * Texture atlas stores images in one texture. Each image has its own
+ * atlas texture coordinates.
+ * @class
+ * @param {number} [width=1024] - Texture atlas width, if it hasn't 1024 default.
+ * @param {number} [height=1024] - Texture atlas height, if it hasn't 1024 default.
+ */
+class TextureAtlas {
+    constructor(width = 1024, height = 1024) {
+        this.nodes = new Map();
+        this.texture = null;
+        this.canvas = new ImageCanvas(width, height);
+        this.clearCanvas();
+        this._handler = null;
+        this._images = [];
+        this._btree = null;
+        this._imagesCacheManager = new ImagesCacheManager();
+        this.borderSize = 4;
+    }
+    /**
+     * Returns atlas javascript image object.
+     * @public
+     * @returns {HTMLImageElement} -
+     */
+    getImage() {
+        return this.canvas.getImage();
+    }
+    /**
+     * Returns canvas object.
+     * @public
+     * @returns {HTMLCanvasElement} -
+     */
+    getCanvas() {
+        return this.canvas.getCanvas();
+    }
+    /**
+     * Clear atlas with black.
+     * @public
+     */
+    clearCanvas() {
+        this.canvas.fillEmpty();
+    }
+    /**
+     * Sets openglobus gl handler that creates gl texture.
+     * @public
+     * @param {Handler} handler - WebGL handler.
+     */
+    assignHandler(handler) {
+        this._handler = handler;
+        this.createTexture();
+    }
+    /**
+     * Returns image diagonal size.
+     * @param {HTMLImageElementExt} image - Image object.
+     * @returns {number} -
+     */
+    getDiagonal(image) {
+        let w = image.atlasWidth || image.width, h = image.atlasHeight || image.height;
+        return Math.sqrt(w * w + h * h);
+    }
+    /**
+     * Adds image to the atlas and returns created node with texture coordinates of the stored image.
+     * @public
+     * @param {HTMLImageElementExt} image - Input javascript image object.
+     * @param {boolean} [fastInsert] - If it's true atlas doesn't restore all images again
+     * and store image in the current atlas scheme.
+     * @returns {TextureAtlasNode | undefined} -
+     */
+    addImage(image, fastInsert = false) {
+        if (!(image.width && image.height)) {
+            return;
+        }
+        this._images.push(image);
+        this._makeAtlas(fastInsert);
+        if (image.__nodeIndex != undefined) {
+            return this.get(image.__nodeIndex);
+        }
+    }
+    _completeNode(nodes, node) {
+        if (node) {
+            let w = this.canvas.getWidth(), h = this.canvas.getHeight();
+            let im = node.image;
+            let r = node.rect;
+            let bs = Math.round(this.borderSize * 0.5);
+            this.canvas.drawImage(im, r.left + bs, r.top + bs, im.atlasWidth || 0, im.atlasHeight || 0);
+            let tc = node.texCoords;
+            tc[0] = (r.left + bs) / w;
+            tc[1] = (r.top + bs) / h;
+            tc[2] = (r.left + bs) / w;
+            tc[3] = (r.bottom - bs) / h;
+            tc[4] = (r.right - bs) / w;
+            tc[5] = (r.bottom - bs) / h;
+            tc[6] = (r.right - bs) / w;
+            tc[7] = (r.bottom - bs) / h;
+            tc[8] = (r.right - bs) / w;
+            tc[9] = (r.top + bs) / h;
+            tc[10] = (r.left + bs) / w;
+            tc[11] = (r.top + bs) / h;
+            nodes.set(im.__nodeIndex, node);
+        }
+    }
+    /**
+     * Main atlas making function.
+     * @protected
+     * @param {boolean} [fastInsert] - If it's true atlas doesn't restore all images again
+     * and store image in the current atlas scheme.
+     */
+    _makeAtlas(fastInsert = false) {
+        if (fastInsert && this._btree) {
+            let im = this._images[this._images.length - 1];
+            this._completeNode(this.nodes, this._btree.insert(im));
+        }
+        else {
+            let im = this._images.slice(0);
+            im.sort(function (b, a) {
+                return ((a.atlasWidth || a.width) - (b.atlasWidth || b.width) ||
+                    (a.atlasHeight || a.height) - (b.atlasHeight || b.height));
+            });
+            this._btree = new TextureAtlasNode(new Rectangle(0, 0, this.canvas.getWidth(), this.canvas.getHeight()));
+            this._btree.atlas = this;
+            this.clearCanvas();
+            let newNodes = new Map();
+            for (let i = 0; i < im.length; i++) {
+                this._completeNode(newNodes, this._btree.insert(im[i]));
+            }
+            //@ts-ignore
+            this.nodes = null;
+            this.nodes = newNodes;
+        }
+    }
+    get(key) {
+        return this.nodes.get(key);
+    }
+    set(key, value) {
+        this.nodes.set(key, value);
+    }
+    /**
+     * Creates atlas gl texture.
+     * @public
+     */
+    createTexture(img, internalFormat) {
+        if (this._handler) {
+            this._handler.gl.deleteTexture(this.texture);
+            if (img) {
+                this.canvas.resize(img.width, img.height);
+                this.canvas.drawImage(img, 0, 0, img.width, img.height);
+            }
+            this.texture = this._handler.createTexture_l(this.canvas.getCanvas(), internalFormat);
+        }
+    }
+    /**
+     * Asynchronous function that loads and creates image to the image cache, and call success callback when it's done.
+     * @public
+     * @param {string} src - Image object src string.
+     * @param {ImagesCacheManagerCallback} success - The callback that handles the image loads done.
+     */
+    loadImage(src, success) {
+        this._imagesCacheManager.load(src, success);
+    }
+    getImageTexCoordinates(img) {
+        if (img.__nodeIndex != null) {
+            let n = this.get(img.__nodeIndex);
+            if (n) {
+                return n.texCoords;
+            }
+        }
+    }
+}
+/**
+ * Atlas binary tree node.
+ * @class
+ * @param {Rectangle} rect - Node image rectangle.
+ * @param {number[]} texCoords - Node image rectangle.
+ */
+class TextureAtlasNode {
+    constructor(rect, texCoords) {
+        this.childNodes = null;
+        this.image = null;
+        this.rect = rect || new Rectangle();
+        this.texCoords = texCoords || [];
+        this.atlas = null;
+    }
+    insert(img) {
+        if (this.childNodes) {
+            let newNode = this.childNodes[0].insert(img);
+            if (newNode) {
+                return newNode;
+            }
+            return this.childNodes[1].insert(img);
+        }
+        else {
+            if (this.image != null) {
+                return;
+            }
+            let rc = this.rect;
+            const w = (img.atlasWidth || img.width) + this.atlas.borderSize;
+            const h = (img.atlasHeight || img.height) + this.atlas.borderSize;
+            if (w > rc.getWidth() || h > rc.getHeight()) {
+                return;
+            }
+            if (rc.fit(w, h)) {
+                this.image = img;
+                return this;
+            }
+            this.childNodes = new Array(2);
+            this.childNodes[0] = new TextureAtlasNode();
+            this.childNodes[0].atlas = this.atlas;
+            this.childNodes[1] = new TextureAtlasNode();
+            this.childNodes[1].atlas = this.atlas;
+            const dw = rc.getWidth() - w;
+            const dh = rc.getHeight() - h;
+            if (dw > dh) {
+                // this.childNodes[0].rect = new Rectangle(rc.left, rc.top, rc.left + w, rc.bottom);
+                // this.childNodes[1].rect = new Rectangle(rc.left + w, rc.top, rc.right, rc.bottom);
+                this.childNodes[0].rect.set(rc.left, rc.top, rc.left + w, rc.bottom);
+                this.childNodes[1].rect.set(rc.left + w, rc.top, rc.right, rc.bottom);
+            }
+            else {
+                // this.childNodes[0].rect = new Rectangle(rc.left, rc.top, rc.right, rc.top + h);
+                // this.childNodes[1].rect = new Rectangle(rc.left, rc.top + h, rc.right, rc.bottom);
+                this.childNodes[0].rect.set(rc.left, rc.top, rc.right, rc.top + h);
+                this.childNodes[1].rect.set(rc.left, rc.top + h, rc.right, rc.bottom);
+            }
+            return this.childNodes[0].insert(img);
+        }
+    }
+}
+export { TextureAtlas, TextureAtlasNode };

package/lib/js/utils/VectorTileCreator.d.ts

@@ -0,0 +1,18 @@
+import { Framebuffer } from '../webgl/Framebuffer';
+import { Handler } from "../webgl/Handler";
+import { Material } from "../layer/Material";
+import { Planet } from "../scene/Planet";
+export declare class VectorTileCreator {
+    protected _width: number;
+    protected _height: number;
+    protected _planet: Planet;
+    protected _framebuffer: Framebuffer | null;
+    protected _queue: Material[];
+    protected _handler: Handler | null;
+    constructor(planet: Planet, width?: number, height?: number);
+    init(): void;
+    frame(): void;
+    add(material: Material): void;
+    remove(material: Material): void;
+    get queueSize(): number;
+}

package/lib/js/utils/VectorTileCreator.js

@@ -0,0 +1,320 @@
+import { doubleToTwoFloats2 } from '../math/coder';
+import { Framebuffer } from '../webgl/Framebuffer';
+import { Program } from '../webgl/Program';
+import { RENDERING } from '../quadTree/quadTree';
+let tempArr = new Float32Array(2);
+const MAX_FRAME_TIME = 25.0;
+export class VectorTileCreator {
+    constructor(planet, width = 512, height = 512) {
+        this._width = width;
+        this._height = height;
+        this._planet = planet;
+        this._framebuffer = null;
+        this._queue = [];
+        this._handler = null;
+    }
+    init() {
+        this._handler = this._planet.renderer.handler;
+        //Line
+        if (!this._handler.programs.vectorTileLineRasterization) {
+            this._handler.addProgram(new Program("vectorTileLineRasterization", {
+                uniforms: {
+                    'viewport': "vec2",
+                    'thicknessOutline': "float",
+                    'alpha': "float",
+                    'extentParamsHigh': "vec4",
+                    'extentParamsLow': "vec4"
+                },
+                attributes: {
+                    'prevHigh': "vec2",
+                    'currentHigh': "vec2",
+                    'nextHigh': "vec2",
+                    'prevLow': "vec2",
+                    'currentLow': "vec2",
+                    'nextLow': "vec2",
+                    'order': "float",
+                    'color': "vec4",
+                    'thickness': "float"
+                },
+                vertexShader: `attribute vec2 prevHigh;
+                attribute vec2 currentHigh;
+                attribute vec2 nextHigh;
+
+                attribute vec2 prevLow;
+                attribute vec2 currentLow;
+                attribute vec2 nextLow;
+
+                attribute float order;
+                attribute float thickness;
+                attribute vec4 color;
+                uniform float thicknessOutline;
+                uniform vec2 viewport;
+                uniform vec4 extentParamsHigh;
+                uniform vec4 extentParamsLow;
+                varying vec4 vColor;
+                
+                vec2 proj(vec2 coordHigh, vec2 coordLow) {
+                    vec2 highDiff = coordHigh - extentParamsHigh.xy;
+                    vec2 lowDiff = coordLow - extentParamsLow.xy;
+                    return vec2(-1.0 + (highDiff + lowDiff) * extentParamsHigh.zw) * vec2(1.0, -1.0);
+                }
+                
+                void main(){
+                    vColor = color;
+
+                    vec2 vNext = proj(nextHigh, nextLow),
+                         vCurrent = proj(currentHigh, currentLow),
+                         vPrev = proj(prevHigh, prevLow);
+
+                    vec2 _next = vNext;
+                    vec2 _prev = vPrev;
+                    vec2 _current = vCurrent;
+
+                    if(_prev == _current){
+                        if(_next == _current){
+                            _next = _current + vec2(1.0, 0.0);
+                            _prev = _current - _next;
+                        }else{
+                            _prev = _current + normalize(_current - _next);
+                        }
+                    }
+
+                    if(_next == _current){
+                        _next = _current + normalize(_current - _prev);
+                    }
+
+                    vec2 sNext = _next;
+                    vec2 sCurrent = _current;
+                    vec2 sPrev = _prev;
+                    
+                    vec2 dirNext = normalize(sNext - sCurrent);
+                    vec2 dirPrev = normalize(sPrev - sCurrent);
+                    float dotNP = dot(dirNext, dirPrev);
+                    
+                    vec2 normalNext = normalize(vec2(-dirNext.y, dirNext.x));
+                    vec2 normalPrev = normalize(vec2(dirPrev.y, -dirPrev.x));
+                    vec2 d = (thickness + thicknessOutline) * 0.5 * sign(order) / viewport;
+                    
+                    vec2 m;
+                    if(dotNP >= 0.99991){
+                        m = sCurrent - normalPrev * d;
+                    }else{
+                        vec2 dir = normalPrev + normalNext;
+                        m = sCurrent + dir * d / (dirNext.x * dir.y - dirNext.y * dir.x);
+                        
+                        if( dotNP > 0.5 && dot(dirNext + dirPrev, m - sCurrent) < 0.0 ){
+                            float occw = order * sign(dirNext.x * dirPrev.y - dirNext.y * dirPrev.x);
+                            if(occw == -1.0){
+                                m = sCurrent + normalPrev * d;
+                            }else if(occw == 1.0){
+                                m = sCurrent + normalNext * d;
+                            }else if(occw == -2.0){
+                                m = sCurrent + normalNext * d;
+                            }else if(occw == 2.0){
+                                m = sCurrent + normalPrev * d;
+                            }
+                        }else if(distance(sCurrent, m) > min(distance(sCurrent, sNext), distance(sCurrent, sPrev))){
+                            m = sCurrent + normalNext * d;
+                        }
+                    }
+                    gl_Position = vec4(m.x, m.y, 0.0, 1.0);
+                }`,
+                fragmentShader: `precision highp float;
+                uniform float alpha;
+                varying vec4 vColor;
+                void main() {
+                    gl_FragColor = vec4(vColor.rgb, alpha * vColor.a);
+                }`
+            }));
+        }
+        //Polygon
+        if (!this._handler.programs.vectorTilePolygonRasterization) {
+            this._handler.addProgram(new Program("vectorTilePolygonRasterization", {
+                uniforms: {
+                    'extentParamsHigh': "vec4",
+                    'extentParamsLow': "vec4"
+                },
+                attributes: {
+                    'coordinatesHigh': "vec2",
+                    'coordinatesLow': "vec2",
+                    'colors': "vec4"
+                },
+                vertexShader: `attribute vec2 coordinatesHigh;
+                attribute vec2 coordinatesLow; 
+                attribute vec4 colors; 
+                uniform vec4 extentParamsHigh; 
+                uniform vec4 extentParamsLow; 
+                varying vec4 color;
+
+                vec2 proj(vec2 coordHigh, vec2 coordLow) {
+                    vec2 highDiff = coordHigh - extentParamsHigh.xy;
+                    vec2 lowDiff = coordLow - extentParamsLow.xy;
+                    return vec2(-1.0 + (highDiff + lowDiff) * extentParamsHigh.zw) * vec2(1.0, -1.0);
+                }
+
+                void main() { 
+                    color = colors;
+                    gl_Position = vec4(proj(coordinatesHigh, coordinatesLow), 0.0, 1.0); 
+                }`,
+                fragmentShader: `precision highp float;
+                varying vec4 color;
+                void main () {  
+                    gl_FragColor = color; 
+                }`
+            }));
+        }
+        this._framebuffer = new Framebuffer(this._handler, {
+            width: this._width,
+            height: this._height,
+            useDepth: false
+        });
+        this._framebuffer.init();
+    }
+    frame() {
+        if (this._planet.layerLock.isFree() && this._queue.length) {
+            let h = this._handler, gl = h.gl;
+            gl.disable(gl.CULL_FACE);
+            gl.disable(gl.DEPTH_TEST);
+            let hLine = h.programs.vectorTileLineRasterization, hPoly = h.programs.vectorTilePolygonRasterization;
+            let _w = this._width, _h = this._height, width = _w, height = _h, _w2 = width << 1, _h2 = height << 1;
+            // var prevLayerId = -1;
+            let extentParamsHigh = new Float32Array(4);
+            let extentParamsLow = new Float32Array(4);
+            let f = this._framebuffer.activate();
+            let deltaTime = 0, startTime = window.performance.now();
+            while (this._queue.length && deltaTime < MAX_FRAME_TIME) {
+                let material = this._queue.shift();
+                if (material.isLoading && material.segment.node.getState() === RENDERING) {
+                    let pickingEnabled = material.layer._pickingEnabled;
+                    if (material.segment.tileZoom < 4) {
+                        width = _w2;
+                        height = _h2;
+                    }
+                    else {
+                        width = _w;
+                        height = _h;
+                    }
+                    let texture = material._updateTexture || h.createEmptyTexture_l(width, height);
+                    let pickingMask = pickingEnabled ? material._updatePickingMask || h.createEmptyTexture_n(width, height) : null;
+                    material.applyTexture(texture, pickingMask);
+                    f.setSize(width, height);
+                    f.bindOutputTexture(texture);
+                    gl.clearColor(0.0, 0.0, 0.0, 0.0);
+                    gl.clear(gl.COLOR_BUFFER_BIT);
+                    let extent = material.segment.getExtentMerc();
+                    doubleToTwoFloats2(extent.southWest.lon, tempArr);
+                    extentParamsHigh[0] = tempArr[0];
+                    extentParamsLow[0] = tempArr[1];
+                    doubleToTwoFloats2(extent.southWest.lat, tempArr);
+                    extentParamsHigh[1] = tempArr[0];
+                    extentParamsLow[1] = tempArr[1];
+                    extentParamsHigh[2] = 2.0 / extent.getWidth();
+                    extentParamsHigh[3] = 2.0 / extent.getHeight();
+                    hPoly.activate();
+                    let sh = hPoly._program;
+                    let sha = sh.attributes, shu = sh.uniforms;
+                    let geomHandler = material.layer._geometryHandler;
+                    //=========================================
+                    //Polygon rendering
+                    //=========================================
+                    gl.uniform4fv(shu.extentParamsHigh, extentParamsHigh);
+                    gl.uniform4fv(shu.extentParamsLow, extentParamsLow);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._polyVerticesHighBufferMerc);
+                    gl.vertexAttribPointer(sha.coordinatesHigh, geomHandler._polyVerticesHighBufferMerc.itemSize, gl.FLOAT, false, 0, 0);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._polyVerticesLowBufferMerc);
+                    gl.vertexAttribPointer(sha.coordinatesLow, geomHandler._polyVerticesLowBufferMerc.itemSize, gl.FLOAT, false, 0, 0);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._polyColorsBuffer);
+                    gl.vertexAttribPointer(sha.colors, geomHandler._polyColorsBuffer.itemSize, gl.FLOAT, false, 0, 0);
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, geomHandler._polyIndexesBuffer);
+                    gl.drawElements(gl.TRIANGLES, geomHandler._polyIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
+                    //Polygon picking PASS
+                    if (pickingEnabled) {
+                        f.bindOutputTexture(pickingMask);
+                        gl.clearColor(0.0, 0.0, 0.0, 0.0);
+                        gl.clear(gl.COLOR_BUFFER_BIT);
+                        gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._polyPickingColorsBuffer);
+                        gl.vertexAttribPointer(sha.colors, geomHandler._polyPickingColorsBuffer.itemSize, gl.FLOAT, false, 0, 0);
+                        gl.drawElements(gl.TRIANGLES, geomHandler._polyIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
+                    }
+                    //=========================================
+                    //Strokes and linestrings rendering
+                    //=========================================
+                    f.bindOutputTexture(texture);
+                    hLine.activate();
+                    sh = hLine._program;
+                    sha = sh.attributes;
+                    shu = sh.uniforms;
+                    gl.uniform2fv(shu.viewport, [width, height]);
+                    gl.uniform4fv(shu.extentParamsHigh, extentParamsHigh);
+                    gl.uniform4fv(shu.extentParamsLow, extentParamsLow);
+                    //vertex
+                    let mb = geomHandler._lineVerticesHighBufferMerc;
+                    gl.bindBuffer(gl.ARRAY_BUFFER, mb);
+                    gl.vertexAttribPointer(sha.prevHigh, mb.itemSize, gl.FLOAT, false, 8, 0);
+                    gl.vertexAttribPointer(sha.currentHigh, mb.itemSize, gl.FLOAT, false, 8, 32);
+                    gl.vertexAttribPointer(sha.nextHigh, mb.itemSize, gl.FLOAT, false, 8, 64);
+                    mb = geomHandler._lineVerticesLowBufferMerc;
+                    gl.bindBuffer(gl.ARRAY_BUFFER, mb);
+                    gl.vertexAttribPointer(sha.prevLow, mb.itemSize, gl.FLOAT, false, 8, 0);
+                    gl.vertexAttribPointer(sha.currentLow, mb.itemSize, gl.FLOAT, false, 8, 32);
+                    gl.vertexAttribPointer(sha.nextLow, mb.itemSize, gl.FLOAT, false, 8, 64);
+                    //order
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._lineOrdersBuffer);
+                    gl.vertexAttribPointer(sha.order, geomHandler._lineOrdersBuffer.itemSize, gl.FLOAT, false, 4, 0);
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, geomHandler._lineIndexesBuffer);
+                    //PASS - stroke
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._lineStrokesBuffer);
+                    gl.vertexAttribPointer(sha.thickness, geomHandler._lineStrokesBuffer.itemSize, gl.FLOAT, false, 0, 0);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._lineStrokeColorsBuffer);
+                    gl.vertexAttribPointer(sha.color, geomHandler._lineStrokeColorsBuffer.itemSize, gl.FLOAT, false, 0, 0);
+                    //Antialias pass
+                    gl.uniform1f(shu.thicknessOutline, 2);
+                    gl.uniform1f(shu.alpha, 0.54);
+                    gl.drawElements(gl.TRIANGLE_STRIP, geomHandler._lineIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
+                    //
+                    //Aliased pass
+                    gl.uniform1f(shu.thicknessOutline, 1);
+                    gl.uniform1f(shu.alpha, 1.0);
+                    gl.drawElements(gl.TRIANGLE_STRIP, geomHandler._lineIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
+                    //PASS - inside line
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._lineThicknessBuffer);
+                    gl.vertexAttribPointer(sha.thickness, geomHandler._lineThicknessBuffer.itemSize, gl.FLOAT, false, 0, 0);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._lineColorsBuffer);
+                    gl.vertexAttribPointer(sha.color, geomHandler._lineColorsBuffer.itemSize, gl.FLOAT, false, 0, 0);
+                    //Antialias pass
+                    gl.uniform1f(shu.thicknessOutline, 2);
+                    gl.uniform1f(shu.alpha, 0.54);
+                    gl.drawElements(gl.TRIANGLE_STRIP, geomHandler._lineIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
+                    //
+                    //Aliased pass
+                    gl.uniform1f(shu.thicknessOutline, 1);
+                    gl.uniform1f(shu.alpha, 1.0);
+                    gl.drawElements(gl.TRIANGLE_STRIP, geomHandler._lineIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
+                    if (pickingEnabled) {
+                        f.bindOutputTexture(pickingMask);
+                        gl.uniform1f(shu.thicknessOutline, 8);
+                        gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._linePickingColorsBuffer);
+                        gl.vertexAttribPointer(sha.color, geomHandler._linePickingColorsBuffer.itemSize, gl.FLOAT, false, 0, 0);
+                        gl.drawElements(gl.TRIANGLE_STRIP, geomHandler._lineIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
+                    }
+                }
+                else {
+                    material.isLoading = false;
+                }
+                deltaTime = window.performance.now() - startTime;
+            }
+            gl.enable(gl.DEPTH_TEST);
+            gl.enable(gl.CULL_FACE);
+            f.deactivate();
+        }
+    }
+    add(material) {
+        this._queue.push(material);
+    }
+    remove(material) {
+        //...
+    }
+    get queueSize() {
+        return this._queue.length;
+    }
+}

package/lib/js/utils/colorTable.d.ts

@@ -0,0 +1,3 @@
+export declare const colorTable: {
+    [id: string]: string;
+};