@pirireis/webglobeplugins 0.6.32-a → 0.6.35

package/bearing-line/plugin.js

@@ -19,7 +19,7 @@ const constraintFloat = (x, lowerBound, upperBound) => {
 }
 
 
-export default class Plugin {
+export default class BearingLinePlugin {
     /**
      * @param {*} id 
      * @param {Map<[key, ContextTextWriter3]>} textWritersMap

package/circle-line-chain/plugin.js

@@ -131,6 +131,7 @@ export class CircleLineChainPlugin {
     updateText(textWriterIDs) {
         const chainKeyIterator = this._chainListMap.getAllChainKeysIterator();
         this._updateTexts(chainKeyIterator, textWriterIDs);
+        this.globe.DrawRender();
     }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "0.6.32-a",
+    "version": "0.6.35",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT"

package/timetracks/adaptors-line-strip.js

@@ -0,0 +1,80 @@
+import { latLongToPixelXY } from "../util";
+
+
+
+/**
+ * @param {Array.<Array.<number>>} coordinates
+ * @param {Array.<number>} timestamps
+ * @param {Array.<String>} styleGroupNameArray
+ * @param {Object.<string, TrackStyleGroup>} _groupColorMap
+ * @param {Float32Array} floatArray
+ * @param {number} offset
+ * 
+ * create floatArray with createFloat32Array before calling this function.
+ * start offset from 0.
+ * feed the floatArray with a track data and offset that is returned from the previous call.
+ */
+function featuresToLineStringData(data) {
+    /**
+     * features are the tracks
+     * feature[i].geometry.coordinates are the points of the track
+     * feature[i].properties.messageTime are the timestamps of the points
+     * 
+     */
+    const features = data.features;
+    let size = data.features.length - 1;
+
+    let startTime = features[0].properties.messageTime[0];
+    let endTime = features[0].properties.messageTime[features[0].properties.messageTime.length - 1];
+
+    for (let feature of features) {
+        size += feature.properties.messageTime.length;
+        startTime = Math.min(startTime, feature.properties.messageTime[0]);
+        endTime = Math.max(endTime, feature.properties.messageTime[feature.properties.messageTime.length - 1]);
+    }
+    const array = new Float32Array(size * 9);
+    let offset = 0;
+
+    {
+        const feature = features[0];
+        const coordinates = feature.geometry.coordinates;
+        const timestamps = feature.properties.messageTime.map((time) => (time - startTime) / 1000);
+        offset = fillSliceOfFloat32ArrayLineStrip(array, offset, coordinates, timestamps);
+    }
+    for (let i = 1; i < features.length; i++) {
+        const feature = features[i];
+        const coordinates = feature.geometry.coordinates;
+        const timestamps = feature.properties.messageTime.map((time) => (time - startTime) / 1000);
+        offset = addCuttingPointLineStrip(array, offset);
+        offset = fillSliceOfFloat32ArrayLineStrip(array, offset, coordinates, timestamps);
+    }
+
+    return { data: array, startTime, endTime };
+}
+
+
+function fillSliceOfFloat32ArrayLineStrip(floatArray, offset, coordinates, timestamps, { styleGroupNameArray = null, groupColorFunction = () => [Math.random(), Math.random(), Math.random()] } = {}) {
+    const startTime = timestamps[0];
+    const endTime = timestamps[timestamps.length - 1];
+    for (let i = 0; i < coordinates.length; i++) {
+        const time = timestamps[i];
+        const coord = coordinates[i];
+        const styleGroupName = styleGroupNameArray ? styleGroupNameArray[i] : "default";
+        const { x, y } = latLongToPixelXY(coord[1], coord[0]);
+        const z = coord[2] ? coord[2] / 1000.0 : 0;
+        floatArray.set([x, y, z, time, ...groupColorFunction(styleGroupName), startTime, endTime], offset);
+        offset += 9;
+    }
+    return offset;
+}
+
+function addCuttingPointLineStrip(floatArray, offset) {
+    floatArray.set([0, 0, 0, 0, -1.0, -1.0, -1.0, 0, 0], offset);
+    return offset + 9;
+}
+
+
+
+
+
+export { addCuttingPointLineStrip, featuresToLineStringData, fillSliceOfFloat32ArrayLineStrip, latLongToPixelXY };

package/timetracks/index.js

@@ -1,3 +1,6 @@
 import TimeTracks from './plugin';
 import { Adaptor, fillSliceOfFloat32Array, createFloat32Array } from './adaptors';
-export { Adaptor, fillSliceOfFloat32Array, createFloat32Array, TimeTracks };
+
+import TimeTracksLineStrip from './plugin-line-strip';
+import { addCuttingPointLineStrip, featuresToLineStringData, fillSliceOfFloat32ArrayLineStrip, latLongToPixelXY } from './adaptors-line-strip';
+export { Adaptor, fillSliceOfFloat32Array, createFloat32Array, TimeTracks, TimeTracksLineStrip, addCuttingPointLineStrip, featuresToLineStringData, fillSliceOfFloat32ArrayLineStrip, latLongToPixelXY };

package/timetracks/plugin-line-strip.js

@@ -0,0 +1,294 @@
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+
+
+
+import TrackGlowLineProgram from './program-line-strip';
+import PointProgram from './programpoint-line-strip';
+
+/**
+ * @typedef {Float32Array} TimeTrackMultiColorData  | A linestring is representation, let A{a1, a2, a3}, B{b1, b2} be the points of the line.
+     * TimeTrackMultiColorData is [
+     *  a1x, a1y, a1z, a1time, a1r, a1g, a1b, a1time, a3time,
+     *  a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time, 
+     *  a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
+     *  0, 0, 0, 0, -1, -1, -1, 0, 0,
+     *  b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time, 
+     *  b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
+     * ]
+     * there is a cutting point between A and B
+     * 
+*/
+
+
+
+
+
+/**
+  * Access following methods through `plugin.program.` :
+    * * setGamma
+    * * setExposure
+    * * setAlphaThreshold
+    * * setWeights
+    * * setHeadPercentage
+    * * setRouteAlpha
+    * * setFinalAlphaRatio 
+    
+    uses float32array in a * {@link TimeTrackMultiColorData} format
+
+ */
+export default class TimeTrackMultiColorPlugin {
+    /**
+     * @param {String} id 
+     * @param {Object} options 
+     * @param {TimeTrackMultiColorData} options.data {@link TimeTrackMultiColorData}
+     * @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 {number} pointOptions.opacity 0 ~ 1
+     * @param {number} pointOptions.pointSize 0 ~ inf
+     * @param {boolean} pointOptions.isOn true | false
+    */
+    constructor(id, options = {}, { opacity = 1.0, pointSize = 1, isOn = false } = {}) {
+        this.id = id;
+
+        this.globe = null;
+        this.gl = null;
+        this.program = null;
+        this._headTime = 0;
+        this._tailTime = 0;
+
+        this._data = options.data || null;
+        this._options = options;
+        this._pointOptions = { opacity, pointSize, isOn };
+        this.program = null;
+
+        this._transporArr = new Float32Array(3);
+
+        this._ready = false;
+
+        this.pointProgram = null;
+
+        this._attrBuffer = null;
+    }
+
+    // ----------------------------------
+    //     --- user methods ---
+    // ----------------------------------
+
+    setHeadAndTailTime(headTime, tailTime) {
+        this._headTime = headTime;
+        this._tailTime = tailTime;
+        // console.log("setHeadAndTailTime", headTime, tailTime);
+        this.pointProgram?.setHeadTime(headTime);
+        this.globe.DrawRender();
+    }
+
+    setBlurWeights(weights) {
+        this.program.setBlurWeights(weights);
+        this.globe.DrawRender();
+    }
+
+    setHeadPercentage(headPercentage) {
+        this.program.setHeadPercentage(headPercentage);
+        this.globe.DrawRender();
+    }
+
+    setRouteAlpha(routeAlpha) {
+        this.program.setRouteAlpha(routeAlpha);
+        this.globe.DrawRender();
+    }
+
+    setFinalAlphaRatio(finalAlphaRatio) {
+        this.program.setFinalAlphaRatio(finalAlphaRatio);
+        this.globe.DrawRender();
+    }
+
+    setGamma(gamma) {
+        this.program.setGamma(gamma);
+        this.globe.DrawRender();
+    }
+
+    setExposure(exposure) {
+        this.program.setExposure(exposure);
+        this.globe.DrawRender();
+    }
+
+    setBlurRepetition(repetition) {
+        this.program.setBlurRepetition(repetition);
+        this.globe.DrawRender();
+    }
+
+
+
+    // ---------------point program setters-------------------
+
+    setPointOpacity(opacity) {
+        this._pointOptions.opacity = opacity;
+        if (this.pointProgram) {
+            this.pointProgram.setOpacity(opacity);
+            this.globe.DrawRender();
+        }
+    }
+
+    setPointSize(size) {
+        this._pointOptions.pointSize = size;
+        if (this.pointProgram) {
+            this.pointProgram.setPointSize(size);
+            this.globe.DrawRender();
+        }
+    }
+
+    pointSwitch(isOn) {
+        if (isOn && !this.pointProgram) {
+            this.pointProgram = this._createPointProgram();
+        } else {
+            this._deletePointProgram();
+        }
+
+    }
+
+    // ------------------------------------------------------------
+
+    _createPointProgram() {
+        const { gl } = this;
+        const program = new PointProgram(gl, this.globe, this._attrBuffer, this._pointOptions);
+        program.setDrawCount(this._totalSize);
+        return program;
+    }
+
+    _deletePointProgram() {
+        if (this.pointProgram) this.pointProgram.free();
+        this.pointProgram = null;
+    }
+
+    // -------------------------------------------------------------
+
+    isReady() {
+        return this._ready;
+    }
+
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * Check Class constructor
+     */
+    setData(data) {
+        console.log(data);
+        if (this.gl) {
+            this._ready = false;
+            this.setDataAsFloat32Array(data);
+            this._ready = true;
+        } else {
+            this._data = data;
+            this._ready = false;
+        }
+    }
+
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * @param {number} totalSize | if not provided, it is calculated from float32Array.length / 9. Use if you want to draw first n points.
+     */
+    setDataAsFloat32Array(data, totalSize = null) {
+
+        const { gl, _attrBuffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, _attrBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+
+        // this.program.setInBuffer(data);
+
+        // this.pointProgram.setData(data);
+        if (totalSize) {
+            this._totalSize = totalSize;
+        } else {
+            this._totalSize = data.length / 9;
+        }
+        this.program.setTotalLength(this._totalSize);
+        this.pointProgram?.setDrawCount(this._totalSize / 2);
+
+        this._ready = true;
+    }
+
+    // ------------------------------
+    //      --- globe Methods ---
+    // ------------------------------
+
+    draw3D(projMatrix, modelviewMatrix, transPos) {
+        if (!this._ready) return;
+        const { _headTime, _tailTime, program, _transporArr, globe } = this;
+        this.pointProgram?.draw();
+
+        _transporArr.set([transPos.x, transPos.y, transPos.z], 0);
+        const geomType = globe.api_GetCurrentGeometry();
+        if (geomType === 0) {
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr);
+        } else if (geomType === 1) {
+            const { width, height } = globe.api_GetCurrentWorldWH();
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr,
+                [width, height]);
+        } else {
+            console.error("Unknown geometry type", geomType);
+        }
+    }
+
+    resize(width, height) {
+        const { program, globe } = this;
+        width = width || globe.api_ScrW();
+        height = height || globe.api_ScrH();
+        program.resize(width, height);
+    }
+
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._attrBuffer = gl.createBuffer();
+        this.program = new TrackGlowLineProgram(gl, this._attrBuffer, globe.api_ScrW(), globe.api_ScrH(), this._options);
+        if (this._pointOptions?.isOn) this.pointProgram = new PointProgram(gl, globe, this._attrBuffer);
+
+        // this.pointProgram.setAttrBuffer(_attrBuffer);
+        this.setGeometry();
+        if (this._data) {
+            this._ready = true;
+            this.setDataAsFloat32Array(this._data);
+
+            this._data = null;
+        }
+        this.resize();
+    }
+
+
+    free() {
+        const { gl, _attrBuffer } = this;
+        this.program.free();
+        gl.deleteBuffer(_attrBuffer);
+    }
+
+
+    setGeometry() {
+        const { globe, program } = this;
+        program.setIs3D(globe.api_GetCurrentGeometry() === 0);
+    }
+
+    // ----------------------------------
+    //      --- implicit methods ---
+    // ----------------------------------
+
+
+    _latLongToPixelXY(latitude, longitude) {
+        return {
+            x: (longitude + 180) / 360,
+            y: (90 - latitude) / 180
+        };
+    }
+}
+
+
+
+

package/timetracks/program-line-strip.js

@@ -0,0 +1,693 @@
+/**
+ * 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;
+
+        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_main_texture;
+  
+
+        uniform float u_final_alpha_ratio;
+
+        out vec4 outColor;
+
+        void main() {
+
+            vec4 hdrColor = texture(u_main_texture, v_texcoord);      
+            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 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_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 = hdrColor + bloomColor * u_exposure;
+            result = pow(result, vec4(1.0 / u_gamma));
+            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 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];
+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;
+
+        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];
+                color =  mix( color, texture(u_texture, v_texcoord + offset).rgb, alpha);
+                total_alpha += alpha;
+                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
+                color =  mix( color, texture(u_texture, v_texcoord - offset).rgb, alpha);
+                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];
+                color =  mix( color, texture(u_texture, v_texcoord + offset).rgb, alpha);
+                total_alpha += alpha;
+                alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
+                color = mix( color, texture(u_texture, v_texcoord - offset).rgb, alpha);
+                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,
+            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;
+
+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() {
+    if ( a_color.x < .0 || a_color.y < .0 || a_color.z < .0) {
+        v_time = -1000000000.0;   
+        v_track_end_time = -1000000000.0;
+        v_track_start_time = -1000000001.0;   
+        return;
+    }
+    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);    
+    }
+}
+`;
+
+        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;
+    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);
+        return;
+    } else if (dist < head) {   
+        // white head
+        outColor1 = vec4(1.0, 1.0, 1.0, 1.0); 
+    // 
+    } else {
+        // colored body of lines
+        float alpha = ((gap - dist) / gap) * 0.4 + 0.6;
+        // outColor0 = vec4(v_color , alpha ); 
+        outColor1 = vec4(v_color , alpha );  
+    }
+    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.RGBA, _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.RGBA, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[0]);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        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);
+    }
+
+
+
+    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); // TODO: line_strip with thombstone to reduce buffer size in half
+            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);
+    }
+}
+

package/timetracks/programpoint-line-strip.js

@@ -0,0 +1,175 @@
+import { createProgram, shaderfunctions } from "../util";
+import { CameraUniformBlockTotem, globeProgramCache } from "../programs";
+
+
+const vertexShader = `#version 300 es
+
+layout(std140) uniform GlobeCamera {
+    mat4 view; // 64 bytes           0
+    mat4 projection; // 64 bytes     64
+    vec3 translate; // 12 bytes      128
+    bool is3D; // 4 bytes            140
+    vec2 mapWH; // 8 bytes           144
+    vec2 screenWH; //  8 bytes       152
+    float z_level; // 4 bytes        160
+};
+
+layout(std140) uniform Globals {
+    float head_time;
+    float final_opacity;
+    float point_size;
+};
+
+in vec3 start_position;
+in float start_time;
+in vec3 start_color;
+in vec3 end_position;
+in float end_time;
+in vec3 end_color;
+out vec4 v_color;
+
+`+ shaderfunctions.pixelXYToCartesian3DPoint + shaderfunctions.pixelXYToCartesian2DPoint + `
+
+void main() {
+    if (head_time < start_time || head_time > end_time) { return; }
+    if ( start_color.r < 0.0 || end_color.r < 0.0) { return; }
+    float t = (head_time - start_time) / (end_time - start_time);
+    vec3 position = mix(start_position, end_position, t);
+    if (is3D){
+        vec3 pos = pixelXYToCartesian3DPoint(position);
+        gl_Position = projection * view * vec4(pos - translate, 1.0);
+    }  else {
+        vec2 xy = pixelXYToCartesian2DPoint(position.xy, translate.xy, mapWH, screenWH);
+        gl_Position = projection * vec4(xy.x, xy.y, 0.0, 1.0);
+    }
+    v_color = vec4(mix(start_color, end_color, t), final_opacity);
+    gl_PointSize = point_size;
+}`;
+
+const fragmentShader = `#version 300 es
+precision highp float;
+in vec4 v_color;
+out vec4 outColor;
+void main() {
+    // circle point
+    vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+    float cc = dot(cxy, cxy);
+    outColor = v_color;
+    if (cc > 0.5) {
+        outColor.a = 0.0;    
+ }
+}`;
+
+
+export default class {
+
+    constructor(gl, globe, attrBuffer, options) {
+
+        this.gl = gl;
+        this._cameraBlockBindingPoint = 0;
+        this._globalsBlockBindingPoint = 1;
+        this.cameraUniformBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this._vao = gl.createVertexArray();
+        this._attbuffer = attrBuffer;
+        this.program = this._createProgram();
+        this._drawCount = 0;
+
+        this._globalsbuffer = gl.createBuffer();
+        {
+            const { gl, _globalsbuffer } = this;
+            gl.bindBuffer(gl.UNIFORM_BUFFER, _globalsbuffer);
+            gl.bufferData(gl.UNIFORM_BUFFER, 12, gl.STREAM_DRAW); // TODO: sperate head time to make it dynamic maybe?
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([0, options.opacity, options.pointSize]));
+            gl.bindBufferBase(gl.UNIFORM_BUFFER, this._globalsBlockBindingPoint, _globalsbuffer);
+            gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        }
+    }
+
+
+    _createProgram() {
+        const gl = this.gl
+
+        const program = createProgram(gl, vertexShader, fragmentShader);
+        const ubo = this.cameraUniformBlockTotem.getUBO(); // ubo bl
+        const cameraBlockIndex = gl.getUniformBlockIndex(program, "GlobeCamera");
+        gl.uniformBlockBinding(program, cameraBlockIndex, this._cameraBlockBindingPoint);
+        const globalsBlockIndex = gl.getUniformBlockIndex(program, "Globals");
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this._cameraBlockBindingPoint, ubo);
+        gl.uniformBlockBinding(program, globalsBlockIndex, this._globalsBlockBindingPoint);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this._globalsBlockBindingPoint, this._globalsbuffer);
+
+        // numaralarda yanlışlık olabilir
+        const start_position = gl.getAttribLocation(program, "start_position");
+        const start_time = gl.getAttribLocation(program, "start_time");
+        const start_color = gl.getAttribLocation(program, "start_color");
+        const end_position = gl.getAttribLocation(program, "end_position");
+        const end_time = gl.getAttribLocation(program, "end_time");
+        const end_color = gl.getAttribLocation(program, "end_color");
+
+        gl.bindVertexArray(this._vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._attbuffer);
+        gl.enableVertexAttribArray(start_position);
+        gl.vertexAttribPointer(start_position, 3, gl.FLOAT, false, 36, 0);
+        gl.enableVertexAttribArray(start_time);
+        gl.vertexAttribPointer(start_time, 1, gl.FLOAT, false, 36, 12);
+        gl.enableVertexAttribArray(start_color);
+        gl.vertexAttribPointer(start_color, 3, gl.FLOAT, false, 36, 16);
+        gl.enableVertexAttribArray(end_position);
+        gl.vertexAttribPointer(end_position, 3, gl.FLOAT, false, 36, 36);
+        gl.enableVertexAttribArray(end_time);
+        gl.vertexAttribPointer(end_time, 1, gl.FLOAT, false, 36, 48);
+        gl.enableVertexAttribArray(end_color);
+        gl.vertexAttribPointer(end_color, 3, gl.FLOAT, false, 36, 52);
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return program;
+    }
+
+
+    setOpacity(opacity) {
+        const { gl, _globalsbuffer } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, _globalsbuffer);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 4, new Float32Array([opacity]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    setDrawCount(count) {
+        this._drawCount = count;
+    }
+
+
+    setPointSize(size) {
+        const { gl, _globalsbuffer } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, _globalsbuffer);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 8, new Float32Array([size]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    setHeadTime(time) {
+        const { gl, _globalsbuffer } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, _globalsbuffer);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([time]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    draw() {
+        const { gl, program, _vao, _drawCount } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(_vao);
+        gl.disable(gl.DEPTH_TEST);
+        gl.drawArrays(gl.POINTS, 0, _drawCount);
+        gl.enable(gl.DEPTH_TEST);
+        gl.bindVertexArray(null);
+    }
+
+
+    free() {
+        const { gl, _vao, _globalsbuffer, program } = this;
+        gl.deleteVertexArray(_vao);
+        // gl.deleteBuffer(_attbuffer);
+        gl.deleteBuffer(_globalsbuffer);
+        gl.deleteProgram(program);
+    }
+}