@pirireis/webglobeplugins 0.9.11 → 0.9.13

package/timetracks/program.js

@@ -1,10 +1,8 @@
-"use strict";
 /**
  * Author: Toprak Nihat Deniz Ozturk
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-var util_1 = require("../util");
-var TrackGlowLineProgram = /** @class */ (function () {
+import { createProgram, defaultblendfunction, shaderfunctions } from "../util";
+export default class TrackGlowLineProgram {
     /**
      * @param {WebGL2RenderingContext} gl
      * @param {number} width
@@ -19,8 +17,7 @@ var TrackGlowLineProgram = /** @class */ (function () {
      * @param {number} options.finalAlphaRatio 0 ~ 1
      * @param {+int} options.blurRepetition 1 ~ inf default 2
      */
-    function TrackGlowLineProgram(gl, attrBuffer, width, height, options) {
-        if (options === void 0) { options = {}; }
+    constructor(gl, attrBuffer, width, height, options = {}) {
         this.gl = gl;
         this.program = null;
         this._premultipliedAlpha = false;
@@ -39,14 +36,13 @@ var TrackGlowLineProgram = /** @class */ (function () {
         this._totalLength = 0;
         this._initUniforms(options);
     }
-    TrackGlowLineProgram.prototype._createInnerTextures = function () {
+    _createInnerTextures() {
         this._middleTexture = this._createTextures();
         this._blurTextures = [this._createTextures(), this._createTextures()];
-    };
-    TrackGlowLineProgram.prototype._initUniforms = function (options) {
-        if (options === void 0) { options = {}; }
-        var _a = this, gl = _a.gl, _lineProgram = _a._lineProgram, _blurProgram = _a._blurProgram, _combineProgram = _a._combineProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+    }
+    _initUniforms(options = {}) {
+        const { gl, _lineProgram, _blurProgram, _combineProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_lineProgram.program);
         gl.uniform1f(_lineProgram.u_head_percentage, options.headPercentage || 1.0 / 30.0);
         gl.uniform1f(_lineProgram.u_route_alpha, options.routeAlpha || 0.025);
@@ -59,150 +55,187 @@ var TrackGlowLineProgram = /** @class */ (function () {
         gl.uniform1f(_combineProgram.u_gamma, options.gamma || 1.0);
         gl.uniform1f(_combineProgram.u_final_alpha_ratio, options.finalAlphaRatio || 1.0);
         gl.useProgram(currentProgram);
-    };
-    TrackGlowLineProgram.prototype.setPremultipliedAlpha = function (boolean) {
+    }
+    setPremultipliedAlpha(boolean) {
         if (typeof boolean !== 'boolean') {
             console.warn("boolean should be a boolean value, but got", boolean);
             return;
         }
         this._premultipliedAlpha = boolean;
-    };
+    }
     /**
      * @param {number} alpha  0 ~ 1
      * @returns
      */
-    TrackGlowLineProgram.prototype.setAlphaThreshold = function (alpha) {
+    setAlphaThreshold(alpha) {
         if (alpha < 0 || alpha > 1) {
             console.warn("alpha should be between 0 and 1, but got", alpha);
             return;
         }
-        var _a = this, gl = _a.gl, _blurProgram = _a._blurProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const { gl, _blurProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_blurProgram.program);
         gl.uniform1f(_blurProgram.u_alpha_threshold, alpha);
         gl.useProgram(currentProgram);
-    };
+    }
     /**
      * @param {number} gamma 0 ~ inf
      */
-    TrackGlowLineProgram.prototype.setGamma = function (gamma) {
+    setGamma(gamma) {
         if (gamma < 0) {
             console.warn("gamma should be equal or greater than 0, but got", gamma);
             return;
         }
-        var _a = this, gl = _a.gl, _combineProgram = _a._combineProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const { gl, _combineProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_combineProgram.program);
         gl.uniform1f(_combineProgram.u_gamma, gamma);
         gl.useProgram(currentProgram);
-    };
+    }
     /**
      *
      * @param {number} exposure 0 ~ inf
      * @returns
      */
-    TrackGlowLineProgram.prototype.setExposure = function (exposure) {
+    setExposure(exposure) {
         if (exposure < 0) {
             console.warn("exposure should be equal or greater than 0, but got", exposure);
             return;
         }
-        var _a = this, gl = _a.gl, _combineProgram = _a._combineProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const { gl, _combineProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_combineProgram.program);
         gl.uniform1f(_combineProgram.u_exposure, exposure);
         gl.useProgram(currentProgram);
-    };
+    }
     /**
      *
      * @param {number} ratio  0 ~ 1
      * @returns
      */
-    TrackGlowLineProgram.prototype.setFinalAlphaRatio = function (ratio) {
+    setFinalAlphaRatio(ratio) {
         if (ratio < 0 || ratio > 1) {
             console.warn("ratio should be between 0 and 1, but got", ratio);
             return;
         }
-        var _a = this, gl = _a.gl, _combineProgram = _a._combineProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const { gl, _combineProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_combineProgram.program);
         gl.uniform1f(_combineProgram.u_final_alpha_ratio, ratio);
         gl.useProgram(currentProgram);
-    };
+    }
     /**
      *  @param {Array.<Number>} weight  [w1, w2, w3, w4, w5]
      */
-    TrackGlowLineProgram.prototype.setBlurWeights = function (weights) {
+    setBlurWeights(weights) {
         if (weights.length !== 5) {
             console.warn("weights should be an array of 5 numbers, but got", weights);
             return;
         }
-        var _a = this, gl = _a.gl, _blurProgram = _a._blurProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const { gl, _blurProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_blurProgram.program);
         gl.uniform1fv(_blurProgram.u_weight, weights);
         gl.useProgram(currentProgram);
-    };
+    }
     /**
      * @param {number} routeAlpha 0 ~ 1
      */
-    TrackGlowLineProgram.prototype.setRouteAlpha = function (routeAlpha) {
+    setRouteAlpha(routeAlpha) {
         if (routeAlpha < 0 || routeAlpha > 1) {
             console.warn("routeAlpha should be between 0 and 1, but got", routeAlpha);
             return;
         }
-        var _a = this, gl = _a.gl, _lineProgram = _a._lineProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const { gl, _lineProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_lineProgram.program);
         gl.uniform1f(_lineProgram.u_route_alpha, routeAlpha);
         gl.useProgram(currentProgram);
-    };
-    TrackGlowLineProgram.prototype.setGlow = function (boolean) {
+    }
+    setGlow(boolean) {
         if (typeof boolean !== 'boolean') {
             console.warn("boolean should be a boolean value, but got", boolean);
             return;
         }
-        var _a = this, gl = _a.gl, _blurProgram = _a._blurProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const { gl, _blurProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_blurProgram.program);
         gl.uniform1i(_blurProgram.u_glow, boolean);
         gl.useProgram(currentProgram);
-    };
+    }
     /**
      * blur uses pingpong effect. This number decides how many times the blur will be applied.
      * @param {+int} repetition
      * @returns
      */
-    TrackGlowLineProgram.prototype.setBlurRepetition = function (repetition) {
+    setBlurRepetition(repetition) {
         if (repetition < 0 && repetition % 1 !== 0) {
             console.warn("repetition should be an integer greater than 0, but got", repetition);
             return;
         }
         this._blurRepetition = repetition;
-    };
+    }
     /**
      * Head Is colored as white. This number decides proportion of the head according to the total length of the line.
      * @param {Number} percentage 0 ~ 1
     */
-    TrackGlowLineProgram.prototype.setHeadPercentage = function (percentage) {
+    setHeadPercentage(percentage) {
         if (percentage < 0 || 1 < percentage) {
             console.warn("percentage should be between 0 and 1, but got", percentage);
             return;
         }
         ;
-        var _a = this, gl = _a.gl, _lineProgram = _a._lineProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const { gl, _lineProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_lineProgram.program);
         gl.uniform1f(_lineProgram.u_head_percentage, percentage);
         gl.useProgram(currentProgram);
-    };
-    TrackGlowLineProgram.prototype._createCombineProgram = function () {
-        var gl = this.gl;
-        var vertexShader = "#version 300 es\n        precision lowp float;\n\n        in vec2 a_position;\n\n        out vec2 v_texcoord;\n\n        void main() {\n            gl_Position = vec4(a_position, 0.0, 1.0);\n            v_texcoord = a_position.xy * 0.5 + 0.5;\n        }\n        ";
-        var fragmentShader = "#version 300 es\n        precision lowp float;\n\n        in vec2 v_texcoord;\n\n        uniform sampler2D u_main_texture;\n        uniform sampler2D u_bloom_texture;\n\n        uniform float u_exposure;\n        uniform float u_gamma;\n        uniform float u_final_alpha_ratio;\n\n        out vec4 outColor;\n\n        void main() {\n            vec4 hdrColor = texture(u_main_texture, v_texcoord);      \n            vec4 bloomColor =  texture(u_bloom_texture, v_texcoord);\n            vec4 result;\n            if (bloomColor.a > 0.09){\n                result = bloomColor * u_exposure;\n            } else {\n                result = hdrColor + bloomColor * u_exposure;\n            }\n            result = pow(result, vec4(1.0 / u_gamma));\n            outColor = vec4(result.rgb, result.a * u_final_alpha_ratio);\n        }\n        ";
-        var program = (0, util_1.createProgram)(this.gl, vertexShader, fragmentShader);
-        var buffer = gl.createBuffer();
-        var a_position = gl.getAttribLocation(program, "a_position");
-        var vao = gl.createVertexArray();
+    }
+    _createCombineProgram() {
+        const gl = this.gl;
+        const vertexShader = `#version 300 es
+        precision lowp float;
+
+        in vec2 a_position;
+
+        out vec2 v_texcoord;
+
+        void main() {
+            gl_Position = vec4(a_position, 0.0, 1.0);
+            v_texcoord = a_position.xy * 0.5 + 0.5;
+        }
+        `;
+        const fragmentShader = `#version 300 es
+        precision lowp float;
+
+        in vec2 v_texcoord;
+
+        uniform sampler2D u_main_texture;
+        uniform sampler2D u_bloom_texture;
+
+        uniform float u_exposure;
+        uniform float u_gamma;
+        uniform float u_final_alpha_ratio;
+
+        out vec4 outColor;
+
+        void main() {
+            vec4 hdrColor = texture(u_main_texture, v_texcoord);      
+            vec4 bloomColor =  texture(u_bloom_texture, v_texcoord);
+            vec4 result;
+            if (bloomColor.a > 0.09){
+                result = bloomColor * u_exposure;
+            } else {
+                result = hdrColor + bloomColor * u_exposure;
+            }
+            result = pow(result, vec4(1.0 / u_gamma));
+            outColor = vec4(result.rgb, result.a * u_final_alpha_ratio);
+        }
+        `;
+        const program = createProgram(this.gl, vertexShader, fragmentShader);
+        const buffer = gl.createBuffer();
+        const a_position = gl.getAttribLocation(program, "a_position");
+        const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
@@ -225,14 +258,137 @@ var TrackGlowLineProgram = /** @class */ (function () {
             u_gamma: gl.getUniformLocation(program, "u_gamma"),
             u_final_alpha_ratio: gl.getUniformLocation(program, "u_final_alpha_ratio"),
         };
-    };
-    TrackGlowLineProgram.prototype._createBlurProgram = function () {
-        var gl = this.gl;
-        var vertexShader = "#version 300 es\nprecision highp float;\n\nin vec2 a_position;\nout vec2 v_texcoord;\n\nvoid main() {\n    gl_Position = vec4(a_position, 0.0, 1.0);\n    v_texcoord = a_position.xy * 0.5 + 0.5;\n}\n";
-        var fragmentShader = "#version 300 es\nprecision highp float;\n\nin vec2 v_texcoord;\n\nuniform sampler2D u_texture;\nuniform bool u_horizontal;\nuniform float u_weight[5];\nuniform float u_alpha_threshold;\nuniform bool u_glow;\nout vec4 outColor;\n\nvoid main()\n{             \n    vec2 tex_offset = vec2( \n        1.0 / float(textureSize(u_texture, 0).x),\n        1.0 / float(textureSize(u_texture, 0).y) ); // gets size of single texel\n    vec3 color = vec3(0.0);\n    float total_alpha = texture(u_texture, v_texcoord).a * u_weight[0]; \n    if (total_alpha > 0.0){\n        color = texture(u_texture, v_texcoord).rgb;\n    }\n    vec2 offset = vec2(0.0);\n    float alpha;\n    float color_count = 0.0;\n    if (!u_glow){\n        if(u_horizontal){\n            for(int i = 1; i < 5; ++i)\n            {\n                offset = vec2(tex_offset.x * float(i), 0.0);\n                alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];\n\n                if (alpha > u_alpha_threshold){\n                    // color =  max( color, texture(u_texture, v_texcoord + offset).rgb);\n                    color += texture(u_texture, v_texcoord + offset).rgb;\n                    total_alpha += alpha;\n                    color_count += 1.0;\n                }\n                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];\n                if (alpha > u_alpha_threshold){\n                    // color =  max( color, texture(u_texture, v_texcoord - offset).rgb);\n                    color += texture(u_texture, v_texcoord - offset).rgb ;\n                    total_alpha += alpha;\n                    color_count += 1.0;\n\n                }\n            }\n} else {\n            for(int i = 1; i < 5; ++i)\n            {   \n                offset = vec2(0.0, tex_offset.y * float(i));\n                alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];\n                if (alpha > u_alpha_threshold){\n                    // color =  max( color , texture(u_texture, v_texcoord + offset).rgb);\n                    color += texture(u_texture, v_texcoord + offset).rgb;\n                    total_alpha += alpha;\n                    color_count += 1.0;\n\n                }\n                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];\n                if (alpha > u_alpha_threshold){\n                    // color = max( color, texture(u_texture, v_texcoord - offset).rgb );\n                    color += texture(u_texture, v_texcoord - offset).rgb ;\n                    total_alpha += alpha;\n                    color_count += 1.0;\n\n                }\n            }\n\n        }\n                        if (color_count > 0.0){\n                color /= color_count;\n            }\n    } else {\n        if(u_horizontal)\n        {\n            for(int i = 1; i < 5; ++i)\n            {\n                offset = vec2(tex_offset.x * float(i), 0.0);\n                alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];\n\n                if (alpha > u_alpha_threshold){\n                    color =  max( color, texture(u_texture, v_texcoord + offset).rgb);\n                    total_alpha += alpha;\n                }\n                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];\n                if (alpha > u_alpha_threshold){\n                    color =  max( color, texture(u_texture, v_texcoord - offset).rgb);\n\n                    total_alpha += alpha;\n                }\n            }\n        }\n        else\n        {\n            for(int i = 1; i < 5; ++i)\n            {\n                offset = vec2(0.0, tex_offset.y * float(i));\n                alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];\n                if (alpha > u_alpha_threshold){\n                    color =  max( color, texture(u_texture, v_texcoord + offset).rgb);\n                    total_alpha += alpha;\n                }\n                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];\n                if (alpha > u_alpha_threshold){\n                    color = max( color, texture(u_texture, v_texcoord - offset).rgb );\n                    total_alpha += alpha;\n                }\n            }\n        }\n    }\n    outColor = vec4(color, total_alpha);\n}\n";
-        var program = (0, util_1.createProgram)(this.gl, vertexShader, fragmentShader);
-        var buffer = gl.createBuffer();
-        var a_position = gl.getAttribLocation(program, "a_position");
+    }
+    _createBlurProgram() {
+        const gl = this.gl;
+        const vertexShader = `#version 300 es
+precision highp float;
+
+in vec2 a_position;
+out vec2 v_texcoord;
+
+void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+    v_texcoord = a_position.xy * 0.5 + 0.5;
+}
+`;
+        const fragmentShader = `#version 300 es
+precision highp float;
+
+in vec2 v_texcoord;
+
+uniform sampler2D u_texture;
+uniform bool u_horizontal;
+uniform float u_weight[5];
+uniform float u_alpha_threshold;
+uniform bool u_glow;
+out vec4 outColor;
+
+void main()
+{             
+    vec2 tex_offset = vec2( 
+        1.0 / float(textureSize(u_texture, 0).x),
+        1.0 / float(textureSize(u_texture, 0).y) ); // gets size of single texel
+    vec3 color = vec3(0.0);
+    float total_alpha = texture(u_texture, v_texcoord).a * u_weight[0]; 
+    if (total_alpha > 0.0){
+        color = texture(u_texture, v_texcoord).rgb;
+    }
+    vec2 offset = vec2(0.0);
+    float alpha;
+    float color_count = 0.0;
+    if (!u_glow){
+        if(u_horizontal){
+            for(int i = 1; i < 5; ++i)
+            {
+                offset = vec2(tex_offset.x * float(i), 0.0);
+                alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
+
+                if (alpha > u_alpha_threshold){
+                    // color =  max( color, texture(u_texture, v_texcoord + offset).rgb);
+                    color += texture(u_texture, v_texcoord + offset).rgb;
+                    total_alpha += alpha;
+                    color_count += 1.0;
+                }
+                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
+                if (alpha > u_alpha_threshold){
+                    // color =  max( color, texture(u_texture, v_texcoord - offset).rgb);
+                    color += texture(u_texture, v_texcoord - offset).rgb ;
+                    total_alpha += alpha;
+                    color_count += 1.0;
+
+                }
+            }
+} else {
+            for(int i = 1; i < 5; ++i)
+            {   
+                offset = vec2(0.0, tex_offset.y * float(i));
+                alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
+                if (alpha > u_alpha_threshold){
+                    // color =  max( color , texture(u_texture, v_texcoord + offset).rgb);
+                    color += texture(u_texture, v_texcoord + offset).rgb;
+                    total_alpha += alpha;
+                    color_count += 1.0;
+
+                }
+                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
+                if (alpha > u_alpha_threshold){
+                    // color = max( color, texture(u_texture, v_texcoord - offset).rgb );
+                    color += texture(u_texture, v_texcoord - offset).rgb ;
+                    total_alpha += alpha;
+                    color_count += 1.0;
+
+                }
+            }
+
+        }
+                        if (color_count > 0.0){
+                color /= color_count;
+            }
+    } else {
+        if(u_horizontal)
+        {
+            for(int i = 1; i < 5; ++i)
+            {
+                offset = vec2(tex_offset.x * float(i), 0.0);
+                alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
+
+                if (alpha > u_alpha_threshold){
+                    color =  max( color, texture(u_texture, v_texcoord + offset).rgb);
+                    total_alpha += alpha;
+                }
+                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
+                if (alpha > u_alpha_threshold){
+                    color =  max( color, texture(u_texture, v_texcoord - offset).rgb);
+
+                    total_alpha += alpha;
+                }
+            }
+        }
+        else
+        {
+            for(int i = 1; i < 5; ++i)
+            {
+                offset = vec2(0.0, tex_offset.y * float(i));
+                alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
+                if (alpha > u_alpha_threshold){
+                    color =  max( color, texture(u_texture, v_texcoord + offset).rgb);
+                    total_alpha += alpha;
+                }
+                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
+                if (alpha > u_alpha_threshold){
+                    color = max( color, texture(u_texture, v_texcoord - offset).rgb );
+                    total_alpha += alpha;
+                }
+            }
+        }
+    }
+    outColor = vec4(color, total_alpha);
+}
+`;
+        const program = createProgram(this.gl, vertexShader, fragmentShader);
+        const buffer = gl.createBuffer();
+        const a_position = gl.getAttribLocation(program, "a_position");
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
             -1, -1,
@@ -242,7 +398,7 @@ var TrackGlowLineProgram = /** @class */ (function () {
             1, 1,
             -1, 1,
         ]), gl.STATIC_DRAW);
-        var vao = gl.createVertexArray();
+        const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.enableVertexAttribArray(a_position);
@@ -257,14 +413,84 @@ var TrackGlowLineProgram = /** @class */ (function () {
             u_alpha_threshold: gl.getUniformLocation(program, "u_alpha_threshold"),
             u_glow: gl.getUniformLocation(program, "u_glow"),
         };
-    };
-    TrackGlowLineProgram.prototype._createBlurProgramHOLD = function () {
-        var gl = this.gl;
-        var vertexShader = "#version 300 es\nprecision highp float;\n\nin vec2 a_position;\nout vec2 v_texcoord;\n\nvoid main() {\n    gl_Position = vec4(a_position, 0.0, 1.0);\n    v_texcoord = a_position.xy * 0.5 + 0.5;\n}\n";
-        var fragmentShader = "#version 300 es\nprecision highp float;\n\nin vec2 v_texcoord;\n\nuniform sampler2D u_texture;\nuniform bool u_horizontal;\nuniform float u_weight[5];\nuniform float u_alpha_threshold;\n\nout vec4 outColor;\n\nvoid main()\n{             \n    vec2 tex_offset = vec2(1) / vec2(textureSize(u_texture, 0)); // gets size of single texel\n    vec3 color = vec3(0.0);\n    float total_alpha = texture(u_texture, v_texcoord).a * u_weight[0]; \n    if (total_alpha > 0.0){\n        color = texture(u_texture, v_texcoord).rgb;\n    }\n    vec2 offset = vec2(0.0);\n    float alpha;\n\n    if(u_horizontal)\n    {\n        for(int i = 1; i < 5; ++i)\n        {\n            offset = vec2(tex_offset.x * float(i), 0.0);\n            alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];\n\n            if (alpha > u_alpha_threshold){\n                color =  max( color, texture(u_texture, v_texcoord + offset).rgb);\n                total_alpha += alpha;\n            }\n            alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];\n            if (alpha > u_alpha_threshold){\n                color =  max( color, texture(u_texture, v_texcoord - offset).rgb);\n                total_alpha += alpha;\n            }\n        }\n    }\n    else\n    {\n        for(int i = 1; i < 5; ++i)\n        {   \n            offset = vec2(0.0, tex_offset.y * float(i));\n            alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];\n            if (alpha > u_alpha_threshold){\n                color =  max( color , texture(u_texture, v_texcoord + offset).rgb);\n                total_alpha += alpha;\n            }\n            alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];\n            if (alpha > u_alpha_threshold){\n                color = max( color, texture(u_texture, v_texcoord - offset).rgb );\n                total_alpha += alpha;\n            }\n        }\n    }\n    outColor = vec4(color, total_alpha);\n}\n";
-        var program = (0, util_1.createProgram)(this.gl, vertexShader, fragmentShader);
-        var buffer = gl.createBuffer();
-        var a_position = gl.getAttribLocation(program, "a_position");
+    }
+    _createBlurProgramHOLD() {
+        const gl = this.gl;
+        const vertexShader = `#version 300 es
+precision highp float;
+
+in vec2 a_position;
+out vec2 v_texcoord;
+
+void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+    v_texcoord = a_position.xy * 0.5 + 0.5;
+}
+`;
+        const fragmentShader = `#version 300 es
+precision highp float;
+
+in vec2 v_texcoord;
+
+uniform sampler2D u_texture;
+uniform bool u_horizontal;
+uniform float u_weight[5];
+uniform float u_alpha_threshold;
+
+out vec4 outColor;
+
+void main()
+{             
+    vec2 tex_offset = vec2(1) / vec2(textureSize(u_texture, 0)); // gets size of single texel
+    vec3 color = vec3(0.0);
+    float total_alpha = texture(u_texture, v_texcoord).a * u_weight[0]; 
+    if (total_alpha > 0.0){
+        color = texture(u_texture, v_texcoord).rgb;
+    }
+    vec2 offset = vec2(0.0);
+    float alpha;
+
+    if(u_horizontal)
+    {
+        for(int i = 1; i < 5; ++i)
+        {
+            offset = vec2(tex_offset.x * float(i), 0.0);
+            alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
+
+            if (alpha > u_alpha_threshold){
+                color =  max( color, texture(u_texture, v_texcoord + offset).rgb);
+                total_alpha += alpha;
+            }
+            alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
+            if (alpha > u_alpha_threshold){
+                color =  max( color, texture(u_texture, v_texcoord - offset).rgb);
+                total_alpha += alpha;
+            }
+        }
+    }
+    else
+    {
+        for(int i = 1; i < 5; ++i)
+        {   
+            offset = vec2(0.0, tex_offset.y * float(i));
+            alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
+            if (alpha > u_alpha_threshold){
+                color =  max( color , texture(u_texture, v_texcoord + offset).rgb);
+                total_alpha += alpha;
+            }
+            alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
+            if (alpha > u_alpha_threshold){
+                color = max( color, texture(u_texture, v_texcoord - offset).rgb );
+                total_alpha += alpha;
+            }
+        }
+    }
+    outColor = vec4(color, total_alpha);
+}
+`;
+        const program = createProgram(this.gl, vertexShader, fragmentShader);
+        const buffer = gl.createBuffer();
+        const a_position = gl.getAttribLocation(program, "a_position");
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
             -1, -1,
@@ -274,7 +500,7 @@ var TrackGlowLineProgram = /** @class */ (function () {
             1, 1,
             -1, 1,
         ]), gl.STATIC_DRAW);
-        var vao = gl.createVertexArray();
+        const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.enableVertexAttribArray(a_position);
@@ -288,28 +514,108 @@ var TrackGlowLineProgram = /** @class */ (function () {
             u_weight: gl.getUniformLocation(program, "u_weight"),
             u_alpha_threshold: gl.getUniformLocation(program, "u_alpha_threshold"),
         };
-    };
-    TrackGlowLineProgram.prototype.resize = function (width, height) {
-        var _a = this, gl = _a.gl, _lineProgram = _a._lineProgram;
+    }
+    resize(width, height) {
+        const { gl, _lineProgram } = this;
         this._width = width;
         this._height = height;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         this._createInnerTextures();
         gl.useProgram(_lineProgram.program);
         gl.uniform2fv(_lineProgram.u_scrWH, [width, height]);
         gl.useProgram(currentProgram);
-    };
-    TrackGlowLineProgram.prototype._createLineProgram = function () {
-        var gl = this.gl;
-        var vertexShader = "#version 300 es\nprecision highp float;\n\nin vec3 a_position;\nin float a_time;\nin vec3 a_color;\nin float a_track_start_time;\nin float a_track_end_time;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform vec3 uTranslate;\n\nuniform bool u_is_3d;\nuniform vec2 u_mapWH;\nuniform vec2 u_scrWH;\n\nout float v_time;\nout vec3 v_color;\nout float v_track_start_time;\nout float v_track_end_time;\n\n".concat(util_1.shaderfunctions.pixelXYToCartesian3DPoint, "\n").concat(util_1.shaderfunctions.pixelXYToCartesian2DPoint, "\n    \nvoid main() {\n    v_time = a_time;\n    v_color = a_color;\n    v_track_start_time = a_track_start_time;\n    v_track_end_time = a_track_end_time;\n    if (u_is_3d){\n        vec3 pos = pixelXYToCartesian3DPoint(a_position);\n        gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(pos - uTranslate, 1.0);\n    }  else {\n        vec2 xy = pixelXYToCartesian2DPoint(a_position.xy, uTranslate.xy, u_mapWH, u_scrWH);\n        gl_Position = uProjectionMatrix * vec4(xy.x, xy.y, 0.0, 1.0);\n    \n    }\n    gl_PointSize = 1.0;\n}\n");
-        var fragmentShader = "#version 300 es\nprecision lowp float;\n\nin float v_time;\nin vec3 v_color;\nin float v_track_start_time;\nin float v_track_end_time;\n\nuniform float u_head_time;\nuniform float u_tail_time;\n\nuniform float u_head_percentage;\nuniform float u_route_alpha;\n\nlayout(location = 0) out vec4 outColor0;\nlayout(location = 1) out vec4 outColor1;\n\n\nvoid main() {\n    if ( u_tail_time > v_track_end_time || u_head_time < v_track_start_time) discard;\n    // if ( v_time < u_tail_time || v_time > u_head_time) discard;\n\n    float gap = u_head_time - u_tail_time;\n    float head = gap * u_head_percentage;\n    float dist = u_head_time - v_time;\n    if ((v_time > u_head_time ) || (v_time < u_tail_time) ){ \n        \n        outColor0 = vec4(v_color , u_route_alpha); \n    } else if (dist < head) {\n        // white head\n        outColor0 = vec4(1.0, 1.0, 1.0, 0.77 + ( u_route_alpha * 0.23)); \n        outColor1 = vec4(1.0, 1.0, 1.0, 0.77 + ( u_route_alpha * 0.23)); \n    // \n    } else {\n        // colored body of lines\n        float alpha = ((gap - dist) / gap) / 2.0 + 0.5;\n        outColor0 = vec4(v_color , alpha ); \n        outColor1 = vec4(v_color , alpha );  \n    }\n}\n";
-        var program = (0, util_1.createProgram)(this.gl, vertexShader, fragmentShader);
-        var a_position = gl.getAttribLocation(program, "a_position");
-        var a_time = gl.getAttribLocation(program, "a_time");
-        var a_track_start_time = gl.getAttribLocation(program, "a_track_start_time");
-        var a_track_end_time = gl.getAttribLocation(program, "a_track_end_time");
-        var a_color = gl.getAttribLocation(program, "a_color");
-        var vao = gl.createVertexArray();
+    }
+    _createLineProgram() {
+        const gl = this.gl;
+        const vertexShader = `#version 300 es
+precision highp float;
+
+in vec3 a_position;
+in float a_time;
+in vec3 a_color;
+in float a_track_start_time;
+in float a_track_end_time;
+
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+uniform vec3 uTranslate;
+
+uniform bool u_is_3d;
+uniform vec2 u_mapWH;
+uniform vec2 u_scrWH;
+
+out float v_time;
+out vec3 v_color;
+out float v_track_start_time;
+out float v_track_end_time;
+
+${shaderfunctions.pixelXYToCartesian3DPoint}
+${shaderfunctions.pixelXYToCartesian2DPoint}
+    
+void main() {
+    v_time = a_time;
+    v_color = a_color;
+    v_track_start_time = a_track_start_time;
+    v_track_end_time = a_track_end_time;
+    if (u_is_3d){
+        vec3 pos = pixelXYToCartesian3DPoint(a_position);
+        gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(pos - uTranslate, 1.0);
+    }  else {
+        vec2 xy = pixelXYToCartesian2DPoint(a_position.xy, uTranslate.xy, u_mapWH, u_scrWH);
+        gl_Position = uProjectionMatrix * vec4(xy.x, xy.y, 0.0, 1.0);
+    
+    }
+    gl_PointSize = 1.0;
+}
+`;
+        const fragmentShader = `#version 300 es
+precision lowp float;
+
+in float v_time;
+in vec3 v_color;
+in float v_track_start_time;
+in float v_track_end_time;
+
+uniform float u_head_time;
+uniform float u_tail_time;
+
+uniform float u_head_percentage;
+uniform float u_route_alpha;
+
+layout(location = 0) out vec4 outColor0;
+layout(location = 1) out vec4 outColor1;
+
+
+void main() {
+    if ( u_tail_time > v_track_end_time || u_head_time < v_track_start_time) discard;
+    // if ( v_time < u_tail_time || v_time > u_head_time) discard;
+
+    float gap = u_head_time - u_tail_time;
+    float head = gap * u_head_percentage;
+    float dist = u_head_time - v_time;
+    if ((v_time > u_head_time ) || (v_time < u_tail_time) ){ 
+        
+        outColor0 = vec4(v_color , u_route_alpha); 
+    } else if (dist < head) {
+        // white head
+        outColor0 = vec4(1.0, 1.0, 1.0, 0.77 + ( u_route_alpha * 0.23)); 
+        outColor1 = vec4(1.0, 1.0, 1.0, 0.77 + ( u_route_alpha * 0.23)); 
+    // 
+    } else {
+        // colored body of lines
+        float alpha = ((gap - dist) / gap) / 2.0 + 0.5;
+        outColor0 = vec4(v_color , alpha ); 
+        outColor1 = vec4(v_color , alpha );  
+    }
+}
+`;
+        const program = createProgram(this.gl, vertexShader, fragmentShader);
+        const a_position = gl.getAttribLocation(program, "a_position");
+        const a_time = gl.getAttribLocation(program, "a_time");
+        const a_track_start_time = gl.getAttribLocation(program, "a_track_start_time");
+        const a_track_end_time = gl.getAttribLocation(program, "a_track_end_time");
+        const a_color = gl.getAttribLocation(program, "a_color");
+        const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
         gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
         gl.enableVertexAttribArray(a_position);
@@ -337,7 +643,7 @@ var TrackGlowLineProgram = /** @class */ (function () {
             u_head_percentage: gl.getUniformLocation(program, "u_head_percentage"),
             u_route_alpha: gl.getUniformLocation(program, "u_route_alpha"),
         };
-    };
+    }
     /**
      * @param { Float32Array} data // [x, y, z, time, x, y, z, time, ...]
      */
@@ -346,19 +652,19 @@ var TrackGlowLineProgram = /** @class */ (function () {
     //     gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
     //     gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
     // }
-    TrackGlowLineProgram.prototype.setIs3D = function (is3d) {
-        var _a = this, gl = _a.gl, _lineProgram = _a._lineProgram;
-        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+    setIs3D(is3d) {
+        const { gl, _lineProgram } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
         gl.useProgram(_lineProgram.program);
         gl.uniform1i(_lineProgram.u_is_3d, is3d);
         gl.useProgram(currentProgram);
-    };
-    TrackGlowLineProgram.prototype.setTotalLength = function (totalLength) {
+    }
+    setTotalLength(totalLength) {
         this._totalLength = totalLength;
-    };
-    TrackGlowLineProgram.prototype._createTextures = function () {
-        var _a = this, gl = _a.gl, _width = _a._width, _height = _a._height;
-        var texture = gl.createTexture();
+    }
+    _createTextures() {
+        const { gl, _width, _height } = this;
+        const texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); // UNSIGNED_BYTE
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
@@ -367,9 +673,9 @@ var TrackGlowLineProgram = /** @class */ (function () {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
-    };
-    TrackGlowLineProgram.prototype._resetTexture = function () {
-        var _a = this, gl = _a.gl, _width = _a._width, _height = _a._height;
+    }
+    _resetTexture() {
+        const { gl, _width, _height } = this;
         gl.bindTexture(gl.TEXTURE_2D, this._middleTexture); // UNSIGNED_BYTE
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
         gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[0]);
@@ -377,10 +683,9 @@ var TrackGlowLineProgram = /** @class */ (function () {
         gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[1]);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
         gl.bindTexture(gl.TEXTURE_2D, null);
-    };
-    TrackGlowLineProgram.prototype.draw = function (u_head_time, u_tail_time, uProjectionMatrix, uModelViewMatrix, uTranslate, u_mapWH) {
-        if (u_mapWH === void 0) { u_mapWH = null; }
-        var _a = this, gl = _a.gl, _lineProgram = _a._lineProgram, _blurProgram = _a._blurProgram, _blurRepetition = _a._blurRepetition, _premultipliedAlpha = _a._premultipliedAlpha;
+    }
+    draw(u_head_time, u_tail_time, uProjectionMatrix, uModelViewMatrix, uTranslate, u_mapWH = null) {
+        const { gl, _lineProgram, _blurProgram, _blurRepetition, _premultipliedAlpha } = this;
         this._resetTexture();
         // if (_premultipliedAlpha) {
         gl.enable(gl.BLEND);
@@ -415,7 +720,7 @@ var TrackGlowLineProgram = /** @class */ (function () {
         { // blur ping pong
             gl.useProgram(_blurProgram.program);
             gl.bindVertexArray(_blurProgram.vao);
-            for (var i = 0; i < _blurRepetition * 2; i++) {
+            for (let i = 0; i < _blurRepetition * 2; i++) {
                 gl.bindFramebuffer(gl.FRAMEBUFFER, this._blurFrameBuffers[i % 2]);
                 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._blurTextures[(i + 1) % 2], 0);
                 gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[i % 2]);
@@ -425,7 +730,7 @@ var TrackGlowLineProgram = /** @class */ (function () {
             }
         }
         if (!_premultipliedAlpha) {
-            (0, util_1.defaultblendfunction)(gl);
+            defaultblendfunction(gl);
         }
         { // combine  
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -441,11 +746,11 @@ var TrackGlowLineProgram = /** @class */ (function () {
         }
         gl.bindVertexArray(null);
         if (_premultipliedAlpha) {
-            (0, util_1.defaultblendfunction)(gl);
+            defaultblendfunction(gl);
         }
-    };
-    TrackGlowLineProgram.prototype.free = function () {
-        var _a = this, gl = _a.gl, _lineProgram = _a._lineProgram, _blurProgram = _a._blurProgram, _combineProgram = _a._combineProgram;
+    }
+    free() {
+        const { gl, _lineProgram, _blurProgram, _combineProgram } = this;
         gl.deleteBuffer(this._inBuffer);
         gl.deleteFramebuffer(this._frameBuffer);
         gl.deleteFramebuffer(this._blurFrameBuffers[0]);
@@ -460,7 +765,5 @@ var TrackGlowLineProgram = /** @class */ (function () {
         gl.deleteProgram(_lineProgram.program);
         gl.deleteProgram(_blurProgram.program);
         gl.deleteProgram(_combineProgram.program);
-    };
-    return TrackGlowLineProgram;
-}());
-exports.default = TrackGlowLineProgram;
+    }
+}