@pirireis/webglobeplugins 0.15.34 → 0.16.0

package/timetracks/program-line-strip.js

@@ -1,162 +1,194 @@
-/**
- * Author: Toprak Nihat Deniz Ozturk
- */
-import { createProgram, defaultblendfunction, shaderfunctions } from "../util";
-export default class TrackGlowLineProgram {
-    /**
-     * @param {WebGL2RenderingContext} gl
-     * @param {number} width
-     * @param {number} height
-     * @param {Object} options
-     * @param {number} options.headPercentage 0 ~ 1
-     * @param {number} options.routeAlpha 0 ~ 1
-     * @param {Array.<Number>} options.weights  [w1, w2, w3, w4, w5]
-     * @param {number} options.alphaThreshold 0 ~ 1
-     * @param {number} options.exposure 0 ~ inf
-     * @param {number} options.gamma 0 ~ inf
-     * @param {number} options.finalAlphaRatio 0 ~ 1
-     * @param {+int} options.blurRepetition 1 ~ inf default 2
-     */
-    constructor(gl, attrBuffer, width, height, options = {}) {
-        this.gl = gl;
-        this.program = null;
-        // this._inBuffer = gl.createBuffer();
-        this._inBuffer = attrBuffer;
-        this._frameBuffer = gl.createFramebuffer();
-        this._lineProgram = this._createLineProgram();
-        this._blurProgram = this._createBlurProgram();
-        this._combineProgram = this._createCombineProgram();
-        this.resize(width, height);
-        this._middleTexture = null;
-        this._blurTextures = null;
-        this._createInnerTextures();
-        this._blurFrameBuffers = [gl.createFramebuffer(), gl.createFramebuffer()];
-        this._blurRepetition = options.blurRepetition || 1;
-        this._totalLength = 0;
-        this._initUniforms(options);
-    }
-    _createInnerTextures() {
-        this._middleTexture = this._createTextures();
-        this._blurTextures = [this._createTextures(), this._createTextures()];
-    }
-    _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);
-        gl.useProgram(_blurProgram.program);
-        gl.uniform1fv(_blurProgram.u_weight, options.weights || [0.55, 0.45045946, 0.3216216, 0.254054, 0.056216]);
-        gl.useProgram(_combineProgram.program);
-        gl.uniform1f(_combineProgram.u_exposure, options.exposure || 1.0);
-        gl.uniform1f(_combineProgram.u_gamma, options.gamma || 1.0);
-        gl.uniform1f(_combineProgram.u_final_alpha_ratio, options.finalAlphaRatio || 1.0);
-        gl.useProgram(currentProgram);
-    }
-    /**
-     * @param {number} gamma 0 ~ inf
-     */
-    setGamma(gamma) {
-        if (gamma < 0) {
-            console.warn("gamma should be equal or greater than 0, but got", gamma);
-            return;
-        }
-        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
-     */
-    setExposure(exposure) {
-        if (exposure < 0) {
-            console.warn("exposure should be equal or greater than 0, but got", exposure);
-            return;
-        }
-        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
-     */
-    setFinalAlphaRatio(ratio) {
-        if (ratio < 0 || ratio > 1) {
-            console.warn("ratio should be between 0 and 1, but got", ratio);
-            return;
-        }
-        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]
-     */
-    setBlurWeights(weights) {
-        if (weights.length !== 5) {
-            console.warn("weights should be an array of 5 numbers, but got", weights);
-            return;
-        }
-        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
-     */
-    setRouteAlpha(routeAlpha) {
-        if (routeAlpha < 0 || routeAlpha > 1) {
-            console.warn("routeAlpha should be between 0 and 1, but got", routeAlpha);
-            return;
-        }
-        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);
-    }
-    /**
-     * blur uses pingpong effect. This number decides how many times the blur will be applied.
-     * @param {+int} repetition
-     * @returns
-     */
-    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
-    */
-    setHeadPercentage(percentage) {
-        if (percentage < 0 || 1 < percentage) {
-            console.warn("percentage should be between 0 and 1, but got", percentage);
-            return;
-        }
-        ;
-        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);
-    }
-    _createDrawTextureProgram() {
-        const gl = this.gl;
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+
+import { createProgram, defaultblendfunction, shaderfunctions } from "../util";
+
+export default class TrackGlowLineProgram {
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @param {number} width
+     * @param {number} height
+     * @param {Object} options
+     * @param {number} options.headPercentage 0 ~ 1
+     * @param {number} options.routeAlpha 0 ~ 1
+     * @param {Array.<Number>} options.weights  [w1, w2, w3, w4, w5]
+     * @param {number} options.alphaThreshold 0 ~ 1
+     * @param {number} options.exposure 0 ~ inf
+     * @param {number} options.gamma 0 ~ inf
+     * @param {number} options.finalAlphaRatio 0 ~ 1
+     * @param {+int} options.blurRepetition 1 ~ inf default 2
+     */
+    constructor(gl, attrBuffer, width, height, options = {}) {
+        this.gl = gl;
+        this.program = null;
+
+
+        // this._inBuffer = gl.createBuffer();
+        this._inBuffer = attrBuffer;
+
+        this._frameBuffer = gl.createFramebuffer();
+        this._lineProgram = this._createLineProgram();
+        this._blurProgram = this._createBlurProgram();
+        this._combineProgram = this._createCombineProgram();
+        this.resize(width, height);
+
+        this._middleTexture = null;
+        this._blurTextures = null;
+        this._createInnerTextures();
+
+        this._blurFrameBuffers = [gl.createFramebuffer(), gl.createFramebuffer()];
+
+        this._blurRepetition = options.blurRepetition || 1;
+        this._totalLength = 0;
+        this._initUniforms(options);
+    }
+
+
+    _createInnerTextures() {
+        this._middleTexture = this._createTextures();
+        this._blurTextures = [this._createTextures(), this._createTextures()];
+    }
+
+    _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);
+
+        gl.useProgram(_blurProgram.program);
+        gl.uniform1fv(_blurProgram.u_weight, options.weights || [0.55, 0.45045946, 0.3216216, 0.254054, 0.056216]);
+
+        gl.useProgram(_combineProgram.program);
+        gl.uniform1f(_combineProgram.u_exposure, options.exposure || 1.0);
+        gl.uniform1f(_combineProgram.u_gamma, options.gamma || 1.0);
+        gl.uniform1f(_combineProgram.u_final_alpha_ratio, options.finalAlphaRatio || 1.0);
+        gl.useProgram(currentProgram);
+    }
+
+
+
+
+
+    /**
+     * @param {number} gamma 0 ~ inf    
+     */
+    setGamma(gamma) {
+        if (gamma < 0) {
+            console.warn("gamma should be equal or greater than 0, but got", gamma);
+            return;
+        }
+        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 
+     */
+    setExposure(exposure) {
+        if (exposure < 0) {
+            console.warn("exposure should be equal or greater than 0, but got", exposure);
+            return;
+        }
+        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 
+     */
+    setFinalAlphaRatio(ratio) {
+        if (ratio < 0 || ratio > 1) {
+            console.warn("ratio should be between 0 and 1, but got", ratio);
+            return;
+        }
+        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]
+     */
+    setBlurWeights(weights) {
+        if (weights.length !== 5) {
+            console.warn("weights should be an array of 5 numbers, but got", weights);
+            return;
+        }
+        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
+     */
+    setRouteAlpha(routeAlpha) {
+        if (routeAlpha < 0 || routeAlpha > 1) {
+            console.warn("routeAlpha should be between 0 and 1, but got", routeAlpha);
+            return;
+        }
+        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);
+    }
+
+
+    /**
+     * blur uses pingpong effect. This number decides how many times the blur will be applied.
+     * @param {+int} repetition 
+     * @returns 
+     */
+    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
+    */
+    setHeadPercentage(percentage) {
+        if (percentage < 0 || 1 < percentage) {
+            console.warn("percentage should be between 0 and 1, but got", percentage);
+            return
+        };
+        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);
+    }
+
+
+    _createDrawTextureProgram() {
+        const gl = this.gl;
+
         const vertexShader = `#version 300 es
 precision highp float;
 
@@ -168,7 +200,8 @@ 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;
 
@@ -187,33 +220,38 @@ void main() {
     outColor = hdrColor;
     outColor.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([
-            -1, -1,
-            1, -1,
-            1, 1,
-            -1, -1,
-            1, 1,
-            -1, 1,
-        ]), gl.STATIC_DRAW);
-        gl.enableVertexAttribArray(a_position);
-        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
-        gl.bindVertexArray(null);
-        return {
-            program: program,
-            vao: vao,
-            u_main_texture: gl.getUniformLocation(program, "u_main_texture"),
-            u_final_alpha_ratio: gl.getUniformLocation(program, "u_final_alpha_ratio"),
-        };
-    }
-    _createCombineProgram() {
-        const gl = this.gl;
+        `;
+        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([
+            -1, -1,
+            1, -1,
+            1, 1,
+            -1, -1,
+            1, 1,
+            -1, 1,
+        ]), gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(a_position);
+        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
+        gl.bindVertexArray(null);
+
+        return {
+            program: program,
+            vao: vao,
+            u_main_texture: gl.getUniformLocation(program, "u_main_texture"),
+            u_final_alpha_ratio: gl.getUniformLocation(program, "u_final_alpha_ratio"),
+        };
+    }
+
+
+    _createCombineProgram() {
+        const gl = this.gl;
+
         const vertexShader = `#version 300 es
 precision highp float;
 
@@ -225,7 +263,8 @@ 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;
 
@@ -249,36 +288,41 @@ void main() {
     result.a *= u_final_alpha_ratio;
     outColor = result;
 }
-        `;
-        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([
-            -1, -1,
-            1, -1,
-            1, 1,
-            -1, -1,
-            1, 1,
-            -1, 1,
-        ]), gl.STATIC_DRAW);
-        gl.enableVertexAttribArray(a_position);
-        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
-        gl.bindVertexArray(null);
-        return {
-            program: program,
-            vao: vao,
-            u_main_texture: gl.getUniformLocation(program, "u_main_texture"),
-            u_bloom_texture: gl.getUniformLocation(program, "u_bloom_texture"),
-            u_exposure: gl.getUniformLocation(program, "u_exposure"),
-            u_gamma: gl.getUniformLocation(program, "u_gamma"),
-            u_final_alpha_ratio: gl.getUniformLocation(program, "u_final_alpha_ratio"),
-        };
-    }
-    _createBlurProgram() {
-        const gl = this.gl;
+        `;
+        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([
+            -1, -1,
+            1, -1,
+            1, 1,
+            -1, -1,
+            1, 1,
+            -1, 1,
+        ]), gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(a_position);
+        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
+        gl.bindVertexArray(null);
+
+        return {
+            program: program,
+            vao: vao,
+            u_main_texture: gl.getUniformLocation(program, "u_main_texture"),
+            u_bloom_texture: gl.getUniformLocation(program, "u_bloom_texture"),
+            u_exposure: gl.getUniformLocation(program, "u_exposure"),
+            u_gamma: gl.getUniformLocation(program, "u_gamma"),
+            u_final_alpha_ratio: gl.getUniformLocation(program, "u_final_alpha_ratio"),
+        };
+    }
+
+
+    _createBlurProgram() {
+        const gl = this.gl;
+
         const vertexShader = `#version 300 es
 precision highp float;
 
@@ -288,7 +332,7 @@ 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;
 
@@ -338,45 +382,54 @@ void main()
         }
     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,
-            1, -1,
-            1, 1,
-            -1, -1,
-            1, 1,
-            -1, 1,
-        ]), gl.STATIC_DRAW);
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.enableVertexAttribArray(a_position);
-        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
-        gl.bindVertexArray(null);
-        return {
-            program: program,
-            vao: vao,
-            u_texture: gl.getUniformLocation(program, "u_texture"),
-            u_horizontal: gl.getUniformLocation(program, "u_horizontal"),
-            u_weight: gl.getUniformLocation(program, "u_weight"),
-        };
-    }
-    resize(width, height) {
-        const { gl, _lineProgram } = this;
-        this._width = width;
-        this._height = height;
-        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-        this._createInnerTextures();
-        gl.useProgram(_lineProgram.program);
-        gl.uniform2fv(_lineProgram.u_scrWH, [width, height]);
-        gl.useProgram(currentProgram);
-    }
-    _createLineProgram() {
-        const gl = this.gl;
+`;
+
+        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,
+            1, -1,
+            1, 1,
+            -1, -1,
+            1, 1,
+            -1, 1,
+        ]), gl.STATIC_DRAW);
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.enableVertexAttribArray(a_position);
+
+        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
+        gl.bindVertexArray(null);
+
+        return {
+            program: program,
+            vao: vao,
+            u_texture: gl.getUniformLocation(program, "u_texture"),
+            u_horizontal: gl.getUniformLocation(program, "u_horizontal"),
+            u_weight: gl.getUniformLocation(program, "u_weight"),
+        };
+    }
+
+
+    resize(width, height) {
+        const { gl, _lineProgram } = this;
+        this._width = width;
+        this._height = height;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        this._createInnerTextures();
+        gl.useProgram(_lineProgram.program);
+        gl.uniform2fv(_lineProgram.u_scrWH, [width, height]);
+        gl.useProgram(currentProgram);
+    }
+
+    _createLineProgram() {
+
+        const gl = this.gl;
+
         const vertexShader = `#version 300 es
 precision highp float;
 
@@ -415,7 +468,8 @@ void main() {
         gl_Position = uProjectionMatrix * vec4(xy.x, xy.y, 0.0, 1.0);
     }
 }
-`;
+`;
+
         const fragmentShader = `#version 300 es
 precision lowp float;
 
@@ -454,155 +508,181 @@ void main() {
     }
     outColor0 = vec4(v_color , 1.0);
 }
-`;
-        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);
-        gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 36, 0);
-        gl.enableVertexAttribArray(a_time);
-        gl.vertexAttribPointer(a_time, 1, gl.FLOAT, false, 36, 12);
-        gl.enableVertexAttribArray(a_color);
-        gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 36, 16);
-        gl.enableVertexAttribArray(a_track_start_time);
-        gl.vertexAttribPointer(a_track_start_time, 1, gl.FLOAT, false, 36, 28);
-        gl.enableVertexAttribArray(a_track_end_time);
-        gl.vertexAttribPointer(a_track_end_time, 1, gl.FLOAT, false, 36, 32);
-        gl.bindVertexArray(null);
-        return {
-            program: program,
-            vao: vao,
-            u_head_time: gl.getUniformLocation(program, "u_head_time"),
-            u_tail_time: gl.getUniformLocation(program, "u_tail_time"),
-            uTranslate: gl.getUniformLocation(program, "uTranslate"),
-            uModelViewMatrix: gl.getUniformLocation(program, "uModelViewMatrix"),
-            uProjectionMatrix: gl.getUniformLocation(program, "uProjectionMatrix"),
-            u_is_3d: gl.getUniformLocation(program, "u_is_3d"),
-            u_mapWH: gl.getUniformLocation(program, "u_mapWH"),
-            u_scrWH: gl.getUniformLocation(program, "u_scrWH"),
-            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, ...]
-     */
-    // setInBuffer(data) {
-    //     const gl = this.gl;
-    //     gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
-    //     gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
-    // }
-    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);
-    }
-    setTotalLength(totalLength) {
-        this._totalLength = totalLength;
-    }
-    _createTextures() {
-        const { gl, _width, _height } = this;
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); // UNSIGNED_BYTE
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        return texture;
-    }
-    _resetTexture() {
-        const { gl, _width, _height } = this;
-        gl.bindTexture(gl.TEXTURE_2D, this._middleTexture); // UNSIGNED_BYTE
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[0]);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[1]);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-    }
-    draw(u_head_time, u_tail_time, uProjectionMatrix, uModelViewMatrix, uTranslate, u_mapWH = null) {
-        const { gl, _lineProgram, _blurProgram, _blurRepetition } = this;
-        this._resetTexture();
-        gl.enable(gl.BLEND);
-        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        { // draw lines
-            gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._middleTexture, 0);
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this._blurTextures[0], 0);
-            gl.drawBuffers([
-                gl.COLOR_ATTACHMENT0,
-                gl.COLOR_ATTACHMENT1,
-            ]);
-            gl.useProgram(_lineProgram.program);
-            gl.uniform1f(_lineProgram.u_head_time, u_head_time);
-            gl.uniform1f(_lineProgram.u_tail_time, u_tail_time);
-            gl.uniformMatrix4fv(_lineProgram.uProjectionMatrix, false, uProjectionMatrix);
-            if (u_mapWH) {
-                gl.uniform2fv(_lineProgram.u_mapWH, u_mapWH);
-            }
-            else {
-                gl.uniformMatrix4fv(_lineProgram.uModelViewMatrix, false, uModelViewMatrix);
-            }
-            gl.uniform3fv(_lineProgram.uTranslate, uTranslate);
-            gl.bindVertexArray(_lineProgram.vao);
-            gl.drawArrays(gl.LINE_STRIP, 0, this._totalLength);
-            gl.drawBuffers([
-                gl.COLOR_ATTACHMENT0,
-                gl.NONE
-            ]);
-        }
-        { // blur ping pong
-            gl.useProgram(_blurProgram.program);
-            gl.bindVertexArray(_blurProgram.vao);
-            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]);
-                gl.uniform1i(_blurProgram.u_texture, 0);
-                gl.uniform1f(_blurProgram.u_horizontal, i % 2 == 0);
-                gl.drawArrays(gl.TRIANGLES, 0, 6);
-            }
-        }
-        { // combine  
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-            gl.useProgram(this._combineProgram.program);
-            gl.bindVertexArray(this._combineProgram.vao);
-            gl.activeTexture(gl.TEXTURE1);
-            gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[1]);
-            gl.uniform1i(this._combineProgram.u_bloom_texture, 1);
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, this._middleTexture);
-            gl.uniform1i(this._combineProgram.u_main_texture, 0);
-            gl.drawArrays(gl.TRIANGLES, 0, 6);
-        }
-        gl.bindVertexArray(null);
-        defaultblendfunction(gl);
-    }
-    free() {
-        const { gl, _lineProgram, _blurProgram, _combineProgram } = this;
-        gl.deleteBuffer(this._inBuffer);
-        gl.deleteFramebuffer(this._frameBuffer);
-        gl.deleteFramebuffer(this._blurFrameBuffers[0]);
-        gl.deleteFramebuffer(this._blurFrameBuffers[1]);
-        // gl.deleteBuffer(this._middleTexture);
-        gl.deleteTexture(this._middleTexture);
-        gl.deleteTexture(this._blurTextures[0]);
-        gl.deleteTexture(this._blurTextures[1]);
-        gl.deleteVertexArray(_lineProgram.vao);
-        gl.deleteVertexArray(_blurProgram.vao);
-        gl.deleteVertexArray(_combineProgram.vao);
-        gl.deleteProgram(_lineProgram.program);
-        gl.deleteProgram(_blurProgram.program);
-        gl.deleteProgram(_combineProgram.program);
-    }
-}
+`;
+        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);
+        gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 36, 0);
+        gl.enableVertexAttribArray(a_time);
+        gl.vertexAttribPointer(a_time, 1, gl.FLOAT, false, 36, 12);
+        gl.enableVertexAttribArray(a_color);
+        gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 36, 16);
+        gl.enableVertexAttribArray(a_track_start_time);
+        gl.vertexAttribPointer(a_track_start_time, 1, gl.FLOAT, false, 36, 28);
+        gl.enableVertexAttribArray(a_track_end_time);
+        gl.vertexAttribPointer(a_track_end_time, 1, gl.FLOAT, false, 36, 32);
+        gl.bindVertexArray(null);
+        return {
+            program: program,
+            vao: vao,
+            u_head_time: gl.getUniformLocation(program, "u_head_time"),
+            u_tail_time: gl.getUniformLocation(program, "u_tail_time"),
+            uTranslate: gl.getUniformLocation(program, "uTranslate"),
+            uModelViewMatrix: gl.getUniformLocation(program, "uModelViewMatrix"),
+            uProjectionMatrix: gl.getUniformLocation(program, "uProjectionMatrix"),
+            u_is_3d: gl.getUniformLocation(program, "u_is_3d"),
+            u_mapWH: gl.getUniformLocation(program, "u_mapWH"),
+            u_scrWH: gl.getUniformLocation(program, "u_scrWH"),
+            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, ...]
+     */
+    // setInBuffer(data) {
+    //     const gl = this.gl;
+    //     gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
+    //     gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    // }
+
+
+
+    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);
+    }
+
+
+    setTotalLength(totalLength) {
+        this._totalLength = totalLength;
+    }
+
+
+    _createTextures() {
+        const { gl, _width, _height } = this;
+
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); // UNSIGNED_BYTE
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return texture;
+    }
+
+    _resetTexture() {
+        const { gl, _width, _height } = this;
+        gl.bindTexture(gl.TEXTURE_2D, this._middleTexture); // UNSIGNED_BYTE
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[0]);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[1]);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+
+
+
+    draw(u_head_time, u_tail_time, uProjectionMatrix, uModelViewMatrix, uTranslate, u_mapWH = null) {
+        const { gl, _lineProgram, _blurProgram, _blurRepetition } = this;
+        this._resetTexture();
+
+        gl.enable(gl.BLEND);
+        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+        { // draw lines
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._middleTexture, 0);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this._blurTextures[0], 0);
+            gl.drawBuffers([
+                gl.COLOR_ATTACHMENT0,
+                gl.COLOR_ATTACHMENT1,
+
+            ])
+            gl.useProgram(_lineProgram.program);
+            gl.uniform1f(_lineProgram.u_head_time, u_head_time);
+            gl.uniform1f(_lineProgram.u_tail_time, u_tail_time);
+            gl.uniformMatrix4fv(_lineProgram.uProjectionMatrix, false, uProjectionMatrix);
+            if (u_mapWH) {
+                gl.uniform2fv(_lineProgram.u_mapWH, u_mapWH);
+
+            } else {
+                gl.uniformMatrix4fv(_lineProgram.uModelViewMatrix, false, uModelViewMatrix);
+            }
+            gl.uniform3fv(_lineProgram.uTranslate, uTranslate);
+
+            gl.bindVertexArray(_lineProgram.vao);
+            gl.drawArrays(gl.LINE_STRIP, 0, this._totalLength);
+            gl.drawBuffers([
+                gl.COLOR_ATTACHMENT0,
+                gl.NONE
+            ])
+        }
+
+        {  // blur ping pong
+            gl.useProgram(_blurProgram.program);
+            gl.bindVertexArray(_blurProgram.vao);
+            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]);
+                gl.uniform1i(_blurProgram.u_texture, 0);
+                gl.uniform1f(_blurProgram.u_horizontal, i % 2 == 0);
+                gl.drawArrays(gl.TRIANGLES, 0, 6);
+            }
+        }
+
+        { // combine  
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.useProgram(this._combineProgram.program);
+            gl.bindVertexArray(this._combineProgram.vao);
+            gl.activeTexture(gl.TEXTURE1);
+            gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[1]);
+            gl.uniform1i(this._combineProgram.u_bloom_texture, 1);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this._middleTexture);
+            gl.uniform1i(this._combineProgram.u_main_texture, 0);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+        }
+        gl.bindVertexArray(null);
+
+        defaultblendfunction(gl)
+
+    }
+
+
+    free() {
+        const { gl, _lineProgram, _blurProgram, _combineProgram } = this;
+        gl.deleteBuffer(this._inBuffer);
+        gl.deleteFramebuffer(this._frameBuffer);
+        gl.deleteFramebuffer(this._blurFrameBuffers[0]);
+        gl.deleteFramebuffer(this._blurFrameBuffers[1]);
+        // gl.deleteBuffer(this._middleTexture);
+        gl.deleteTexture(this._middleTexture);
+        gl.deleteTexture(this._blurTextures[0]);
+        gl.deleteTexture(this._blurTextures[1]);
+        gl.deleteVertexArray(_lineProgram.vao);
+        gl.deleteVertexArray(_blurProgram.vao);
+        gl.deleteVertexArray(_combineProgram.vao);
+        gl.deleteProgram(_lineProgram.program);
+        gl.deleteProgram(_blurProgram.program);
+        gl.deleteProgram(_combineProgram.program);
+    }
+}
+