@openglobus/og 0.10.4 → 0.11.1

package/src/og/utils/VectorTileCreator.js

@@ -4,53 +4,55 @@
 
 'use strict';
 
+import { doubleToTwoFloats2 } from '../math/coder.js';
 import * as quadTree from '../quadTree/quadTree.js';
 import { Framebuffer } from '../webgl/Framebuffer.js';
 import { Program } from '../webgl/Program.js';
-import { doubleToTwoFloats2 } from '../math/coder.js';
 
 let tempArr = new Float32Array(2);
 
-const VectorTileCreator = function (planet, maxFrames, width, height) {
-
-    this._width = width || 256;
-    this._height = height || 256;
-    this._handler = planet.renderer.handler;
-    this._planet = planet;
-    this._framebuffer = null;
-    this.MAX_FRAMES = maxFrames || 5;
-    this._currentFrame = 0;
-    this._queue = [];
-    this._initialize();
-};
-
-VectorTileCreator.prototype._initialize = function () {
-
-    //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;
+export class VectorTileCreator {
+
+    constructor(planet, maxFrames, width, height) {
+
+        this._width = width || 256;
+        this._height = height || 256;
+        this._handler = planet.renderer.handler;
+        this._planet = planet;
+        this._framebuffer = null;
+        this.MAX_FRAMES = maxFrames || 5;
+        this._currentFrame = 0;
+        this._queue = [];
+        this._initialize();
+    };
+
+    _initialize() {
+
+        //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;
 
@@ -133,29 +135,29 @@ VectorTileCreator.prototype._initialize = function () {
                     }
                     gl_Position = vec4(m.x, m.y, 0.0, 1.0);
                 }`,
-            fragmentShader: `precision highp float;
+                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;
+            }));
+        }
+
+        //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; 
@@ -172,244 +174,243 @@ VectorTileCreator.prototype._initialize = function () {
                     color = colors;
                     gl_Position = vec4(proj(coordinatesHigh, coordinatesLow), 0.0, 1.0); 
                 }`,
-            fragmentShader: 
-                `precision highp float;
+                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();
-};
+        this._framebuffer = new Framebuffer(this._handler, {
+            width: this._width,
+            height: this._height,
+            useDepth: false
+        });
+        this._framebuffer.init();
+    };
 
-VectorTileCreator.prototype.frame = function () {
-    if (this._planet.layerLock.isFree() && this._queue.length) {
-        var h = this._handler,
-            gl = h.gl;
+    frame() {
+        if (this._planet.layerLock.isFree() && this._queue.length) {
+            var h = this._handler,
+                gl = h.gl;
 
-        gl.disable(gl.CULL_FACE);
-        gl.disable(gl.DEPTH_TEST);
-        gl.enable(gl.BLEND);
-        gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
-        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            gl.disable(gl.CULL_FACE);
+            gl.disable(gl.DEPTH_TEST);
+            gl.enable(gl.BLEND);
+            gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+            gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
-        var hLine = h.programs.vectorTileLineRasterization,
-            hPoly = h.programs.vectorTilePolygonRasterization;
+            var hLine = h.programs.vectorTileLineRasterization,
+                hPoly = h.programs.vectorTilePolygonRasterization;
 
-        var _w = this._width,
-            _h = this._height,
-            width = _w,
-            height = _h,
-            _w2 = width << 1,
-            _h2 = height << 1;
+            var _w = this._width,
+                _h = this._height,
+                width = _w,
+                height = _h,
+                _w2 = width << 1,
+                _h2 = height << 1;
 
-        var pickingMask = null,
-            texture = null;
+            var pickingMask = null,
+                texture = null;
 
-        // var prevLayerId = -1;
+            // var prevLayerId = -1;
 
-        var extentParams = new Float32Array(4);
+            var extentParams = new Float32Array(4);
 
-        var extentParamsHigh = new Float32Array(4);
-        var extentParamsLow = new Float32Array(4);
+            var extentParamsHigh = new Float32Array(4);
+            var extentParamsLow = new Float32Array(4);
 
-        var f = this._framebuffer.activate();
+            var f = this._framebuffer.activate();
 
-        var deltaTime = 0,
-            startTime = window.performance.now();
+            var deltaTime = 0,
+                startTime = window.performance.now();
 
-        while (this._planet.layerLock.isFree() && this._queue.length && deltaTime < 0.25) {
-            var material = this._queue.shift();
-            if (material.isLoading && material.segment.node.getState() === quadTree.RENDERING) {
+            while (this._planet.layerLock.isFree() && this._queue.length && deltaTime < 0.25) {
+                var material = this._queue.shift();
+                if (material.isLoading && material.segment.node.getState() === quadTree.RENDERING) {
 
-                if (material.segment.tileZoom <= 3) {
-                    width = _w2;
-                    height = _h2;
-                } else {
-                    width = _w;
-                    height = _h;
-                }
+                    if (material.segment.tileZoom <= 3) {
+                        width = _w2;
+                        height = _h2;
+                    } else {
+                        width = _w;
+                        height = _h;
+                    }
 
-                texture = (material._updateTexture && material._updateTexture) || h.createEmptyTexture_l(width, height);
+                    texture = (material._updateTexture && material._updateTexture) || h.createEmptyTexture_l(width, height);
 
-                f.setSize(width, height);
+                    f.setSize(width, height);
 
-                f.bindOutputTexture(texture);
+                    f.bindOutputTexture(texture);
 
-                gl.clearColor(1.0, 1.0, 1.0, 0.0);
-                gl.clear(gl.COLOR_BUFFER_BIT);
+                    gl.clearColor(1.0, 1.0, 1.0, 0.0);
+                    gl.clear(gl.COLOR_BUFFER_BIT);
 
-                var extent = material.segment.getExtentMerc();
+                    var extent = material.segment.getExtentMerc();
 
-                doubleToTwoFloats2(extent.southWest.lon, tempArr);
-                extentParamsHigh[0] = tempArr[0];
-                extentParamsLow[0] = tempArr[1];
+                    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];
+                    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();
+                    extentParamsHigh[2] = 2.0 / extent.getWidth();
+                    extentParamsHigh[3] = 2.0 / extent.getHeight();
 
-                hPoly.activate();
-                var sh = hPoly._program;
-                var sha = sh.attributes,
-                    shu = sh.uniforms;
+                    hPoly.activate();
+                    var sh = hPoly._program;
+                    var sha = sh.attributes,
+                        shu = sh.uniforms;
+
+                    var geomHandler = material.layer._geometryHandler;
 
-                var geomHandler = material.layer._geometryHandler;
+                    //=========================================
+                    //Polygon rendering
+                    //=========================================
+                    gl.uniform4fv(shu.extentParamsHigh, extentParamsHigh);
+                    gl.uniform4fv(shu.extentParamsLow, extentParamsLow);
 
-                //=========================================
-                //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._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._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.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.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, geomHandler._polyIndexesBuffer);
+                    gl.drawElements(gl.TRIANGLES, geomHandler._polyIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
 
-                gl.drawElements(gl.TRIANGLES, geomHandler._polyIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
+                    //Polygon picking PASS
+                    if (material.layer._pickingEnabled) {
+                        if (!material.pickingReady) {
+                            if (material._updatePickingMask) {
+                                pickingMask = material._updatePickingMask;
+                            } else {
+                                pickingMask = h.createEmptyTexture_n(width, height);
+                            }
+
+                            f.bindOutputTexture(pickingMask);
+
+                            gl.clearColor(0.0, 0.0, 0.0, 0.0);
+                            gl.clear(gl.COLOR_BUFFER_BIT);
 
-                //Polygon picking PASS
-                if (material.layer._pickingEnabled) {
-                    if (!material.pickingReady) {
-                        if (material._updatePickingMask) {
-                            pickingMask = material._updatePickingMask;
+                            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);
                         } else {
-                            pickingMask = h.createEmptyTexture_n(width, height);
+                            pickingMask = material.pickingMask;
                         }
+                    }
 
-                        f.bindOutputTexture(pickingMask);
+                    //=========================================
+                    //Strokes and linestrings rendering
+                    //=========================================
+                    f.bindOutputTexture(texture);
 
-                        gl.clearColor(0.0, 0.0, 0.0, 0.0);
-                        gl.clear(gl.COLOR_BUFFER_BIT);
+                    hLine.activate();
+                    sh = hLine._program;
+                    sha = sh.attributes;
+                    shu = sh.uniforms;
 
-                        gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._polyPickingColorsBuffer);
-                        gl.vertexAttribPointer(sha.colors, geomHandler._polyPickingColorsBuffer.itemSize, gl.FLOAT, false, 0, 0);
+                    gl.uniform2fv(shu.viewport, [width, height]);
 
-                        gl.drawElements(gl.TRIANGLES, geomHandler._polyIndexesBuffer.numItems, gl.UNSIGNED_INT, 0);
-                    } else {
-                        pickingMask = material.pickingMask;
-                    }
-                }
+                    gl.uniform4fv(shu.extentParamsHigh, extentParamsHigh);
+                    gl.uniform4fv(shu.extentParamsLow, extentParamsLow);
+
+                    //vertex
+                    var mb = geomHandler._lineVerticesHighBufferMerc;
+                    gl.bindBuffer(gl.ARRAY_BUFFER, mb);
 
-                //=========================================
-                //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
-                var 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 (material.layer._pickingEnabled && !material.pickingReady) {
-                    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.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);
-                }
 
-                material.applyTexture(texture, pickingMask);
+                    //PASS - inside line
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._lineThicknessBuffer);
+                    gl.vertexAttribPointer(sha.thickness, geomHandler._lineThicknessBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
-            } else {
-                material.isLoading = false;
-            }
+                    gl.bindBuffer(gl.ARRAY_BUFFER, geomHandler._lineColorsBuffer);
+                    gl.vertexAttribPointer(sha.color, geomHandler._lineColorsBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
-            deltaTime = window.performance.now() - startTime;
-            // prevLayerId = material.layer._id;
-        }
+                    //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);
 
-        gl.disable(gl.BLEND);
-        gl.enable(gl.DEPTH_TEST);
-        gl.enable(gl.CULL_FACE);
+                    if (material.layer._pickingEnabled && !material.pickingReady) {
+                        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);
+                    }
 
-        f.deactivate();
-    }
-};
+                    material.applyTexture(texture, pickingMask);
 
-VectorTileCreator.prototype.add = function (material) {
-    this._queue.push(material);
-};
+                } else {
+                    material.isLoading = false;
+                }
+
+                deltaTime = window.performance.now() - startTime;
+                // prevLayerId = material.layer._id;
+            }
+
+            gl.disable(gl.BLEND);
+            gl.enable(gl.DEPTH_TEST);
+            gl.enable(gl.CULL_FACE);
+
+            f.deactivate();
+        }
+    };
 
-VectorTileCreator.prototype.remove = function (material) {
-    //...
-};
+    add(material) {
+        this._queue.push(material);
+    };
 
-export { VectorTileCreator };
+    remove(material) {
+        //...
+    };
+}