@pirireis/webglobeplugins 0.10.10-alpha → 0.10.12-alpha

package/programs/line-on-globe/angled-line.js

@@ -1,173 +0,0 @@
-// angle radius, rgba, dashRatio, rgbaMode
-import { createProgram } from "../../util";
-import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
-import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition, circleLimpFromLongLatRadCenterCartesian3D, circleLimpFromLongLatRadCenterMercatorCompass, circleLimpFromLongLatRadCenterMercatorRealDistance, POLE } from "../../util/shaderfunctions/geometrytransformations";
-import { noRegisterGlobeProgramCache } from "../programcache";
-const EDGE_COUNT_ON_SPHERE = 50;
-const vertexShaderSource = `#version 300 es
-precision highp float;
-
-${CameraUniformBlockString}
-${longLatRadToMercator}
-${longLatRadToCartesian3D}
-${cartesian3DToGLPosition}
-${mercatorXYToGLPosition}
-${circleLimpFromLongLatRadCenterCartesian3D}
-${circleLimpFromLongLatRadCenterMercatorCompass}
-${circleLimpFromLongLatRadCenterMercatorRealDistance}
-
-in vec2 center_point;
-in float angle;
-in float radius;
-in vec4 rgba;
-in float dash_ratio;
-in float dash_opacity;
-
-out vec4 v_color;
-out float v_dash_ratio;
-out float interpolation;
-out float v_dash_opacity;
-out vec2 v_limp;
-// TODO: Draw World Boundaries 
-void main() {
-    if ( is3D ) {
-        interpolation = float( gl_VertexID ) / ${EDGE_COUNT_ON_SPHERE - 1}.0;
-        float radius_ = radius* interpolation;
-        vec3 position = circleLimpFromLongLatRadCenterCartesian3D( center_point, radius_, angle);
-        gl_Position = cartesian3DToGLPosition( position);
-        v_limp = vec2(0.0, 0.0);
-    } else {
-        interpolation = float( gl_VertexID );
-        float radius_ = radius * interpolation;
-        vec2 position = circleLimpFromLongLatRadCenterMercatorRealDistance( center_point, radius_, angle);
-        v_limp = position;
-        gl_Position = mercatorXYToGLPosition( position);
-    }
-    v_dash_opacity = dash_opacity;
-    v_color = rgba;
-    v_dash_ratio = dash_ratio;
-}`;
-const fragmentShaderSource = `#version 300 es
-${POLE}
-precision highp float;
-
-uniform float opacity;
-in vec4 v_color;
-in float v_dash_ratio;
-in float v_dash_opacity;
-in float interpolation;
-in vec2 v_limp;
-out vec4 color;
-
-void main() {
-    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ color = vec4(0.0,0.0,0.0,0.0); return; }
-    color = vec4(v_color.rgb, v_color.a * opacity);
-    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5 ) {
-        color.a *= v_dash_opacity;
-    }   
-}`;
-class Logic {
-    constructor(globe) {
-        this.globe = globe;
-        this.gl = globe.gl;
-        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
-        this._lastOpacity = 1;
-        const { gl, program } = this;
-        { // assign attribute locations
-            gl.bindAttribLocation(program, 0, "center_point");
-            gl.bindAttribLocation(program, 1, "angle");
-            gl.bindAttribLocation(program, 2, "radius");
-            gl.bindAttribLocation(program, 3, "rgba");
-            gl.bindAttribLocation(program, 4, "dash_ratio");
-            gl.bindAttribLocation(program, 5, "dash_opacity");
-        }
-        {
-            this._opacityLocation = gl.getUniformLocation(program, "opacity");
-            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
-            gl.useProgram(program);
-            gl.uniform1f(this._opacityLocation, this._lastOpacity);
-            gl.useProgram(currentProgram);
-        }
-        this.cameraBlockBindingPoint = 0;
-        const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
-        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
-        gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
-    }
-    draw(vao, length, opacity) {
-        const { gl, program, globe, cameraBlockTotem, cameraBlockBindingPoint } = this;
-        gl.useProgram(program);
-        if (opacity !== this._lastOpacity) {
-            gl.uniform1f(this._opacityLocation, opacity);
-            this._lastOpacity = opacity;
-        }
-        const drawCount = globe.api_GetCurrentGeometry() === 0 ? EDGE_COUNT_ON_SPHERE : 2;
-        gl.bindVertexArray(vao);
-        cameraBlockTotem.bind(cameraBlockBindingPoint);
-        // gl.disable(gl.DEPTH_TEST);
-        gl.drawArraysInstanced(gl.LINE_STRIP, 0, drawCount, length);
-        gl.bindVertexArray(null);
-        cameraBlockTotem.unbind(cameraBlockBindingPoint);
-        // gl.enable(gl.DEPTH_TEST);
-    }
-    createVAO(centerCoords, angle, radius, rgba, dashRatio, dashOpacity) {
-        const { gl } = this;
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        {
-            const { buffer, stride = 0, offset = 0 } = centerCoords;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(0);
-            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(0, 1);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = angle;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(1);
-            gl.vertexAttribPointer(1, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(1, 1);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = radius;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(2);
-            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(2, 1);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = rgba;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(3);
-            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(3, 1);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = dashRatio;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(4);
-            gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(4, 1);
-        }
-        {
-            const { buffer, stride = 0, offset = 0 } = dashOpacity;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.enableVertexAttribArray(5);
-            gl.vertexAttribPointer(5, 1, gl.FLOAT, false, stride, offset);
-            gl.vertexAttribDivisor(5, 1);
-        }
-        gl.bindVertexArray(null);
-        return vao;
-    }
-    free() {
-        if (this.isFreed)
-            return;
-        CameraUniformBlockTotemCache.release(this.globe);
-        this.cameraBlockTotem = null;
-        this.gl.deleteProgram(this.program);
-        this.isFreed = true;
-    }
-}
-export const AngledLineProgramCache = Object.freeze({
-    get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic); },
-    release: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic); }
-});

package/timetracks/adaptors.js

@@ -1,117 +0,0 @@
-import { latLongToPixelXY } from "../util";
-const _latLongToPixelXY = latLongToPixelXY;
-class Adaptor {
-    /**
-     * @param {Object.<string, Color>} groupColorMap
-     * @typedef {Array} Color | [r, g, b] | between 0-1
-     */
-    constructor(groupColorMap) {
-        this._groupColorMap = groupColorMap;
-    }
-    /**
-     * @param {Object} geojsonObject
-     * @param {number} startTime
-     * @param {string} timePropertyName
-     * @param {string} styleGroupPropertyName
-     * @returns {lineData} lineData for Plugin
-     */
-    fromGeoJson(geojsonObject, startTime, timePropertyName = "messageTime", styleGroupPropertyName = "styleGroup") {
-        const features = geojsonObject.features.filter(feature => feature.geometry.coordinates.length > 1);
-        const buffer = createFloat32Array(features.map(feature => feature.geometry.coordinates));
-        let offset = 0;
-        for (let feature of features) {
-            const coordinates = feature.geometry.coordinates;
-            const timestamps = feature.properties[timePropertyName].map((time) => (time - startTime) / 1000);
-            const styleGroupNameArray = feature.properties[styleGroupPropertyName];
-            offset = fillSliceOfFloat32Array(coordinates, timestamps, styleGroupNameArray, this._groupColorMap, buffer, offset);
-        }
-        return buffer;
-    }
-    /**
-     * Inputs are lists of tracks. Each track is a list of coordinates, timestamps and styleGroupNames.
-     * @param {Array.<Array.<Array.<number>>>} coordinatesList | [ [ [lon, lat, z], [lon, lat, z], ...], ...
-     * @param {Array.<Array.<number>>} timestampsList | [ [time, time, ...], ...
-     * @param {Array.<Array.<String>>} colorGroupList | [ [styleGroupName, styleGroupName, ...], ...
-     * @param {number} startTime | epoch time
-     * @returns {lineData} lineData for Plugin
-     */
-    fromLists(coordinatesList, timestampsList, colorGroupList, startTime) {
-        const buffer = createFloat32Array(coordinatesList);
-        let offset = 0;
-        for (let i = 0; i < coordinatesList.length; i++) {
-            const coordinates = coordinatesList[i];
-            const timestamps = timestampsList[i].map((time) => (time - startTime) / 1000);
-            const styleGroupNameArray = colorGroupList[i];
-            offset = fillSliceOfFloat32Array(coordinates, timestamps, styleGroupNameArray, this._groupColorMap, buffer, offset);
-        }
-        return buffer;
-    }
-}
-/**
- * @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 fillSliceOfFloat32Array(coordinates, timestamps, styleGroupNameArray, _groupColorMap, floatArray, offset) {
-    if (coordinates[0].length === 2) {
-        const startTime = timestamps[0];
-        const endTime = timestamps[timestamps.length - 1];
-        let prevPointData = null;
-        { // first point
-            const { x, y } = _latLongToPixelXY(coordinates[0][1], coordinates[0][0]);
-            prevPointData = [x, y, 0, timestamps[0], ..._groupColorMap[styleGroupNameArray[0]]];
-        }
-        { // middle points until end
-            for (let i = 1; i < coordinates.length; i++) {
-                const time = timestamps[i];
-                const coord = coordinates[i];
-                const { x, y } = _latLongToPixelXY(coord[1], coord[0]);
-                floatArray.set([...prevPointData, startTime, endTime, x, y, 0, time, ..._groupColorMap[styleGroupNameArray[i]], startTime, endTime], offset);
-                prevPointData = [x, y, 0, time, ..._groupColorMap[styleGroupNameArray[i]]];
-                offset += 18;
-            }
-        }
-    }
-    else {
-        const startTime = timestamps[0];
-        const endTime = timestamps[timestamps.length - 1];
-        let prevPointData = null;
-        { // first point
-            const { x, y } = _latLongToPixelXY(coordinates[0][1], coordinates[0][0]);
-            prevPointData = [x, y, coordinates[0][2] / 1000.0, timestamps[0], ..._groupColorMap[styleGroupNameArray[0]]];
-        }
-        { // middle points until end
-            for (let i = 1; i < coordinates.length; i++) {
-                const time = timestamps[i];
-                const coord = coordinates[i];
-                const { x, y } = _latLongToPixelXY(coord[1], coord[0]);
-                floatArray.set([...prevPointData, startTime, endTime, x, y, coord[2] / 1000.0, time, ..._groupColorMap[styleGroupNameArray[i]], startTime, endTime], offset);
-                prevPointData = [x, y, coord[2] / 1000.0, time, ..._groupColorMap[styleGroupNameArray[i]]];
-                offset += 18;
-            }
-        }
-    }
-    return offset;
-}
-/**
- *
- * @param {*} coordinatesArray
- * @returns Float32Array
- * Coordinates array is needed to calculate the size of the buffer.
- */
-function createFloat32Array(coordinatesArray) {
-    let filteredSize = 0;
-    for (let coordinates of coordinatesArray) {
-        filteredSize += coordinates.length * 2 - 2;
-    }
-    const array = new Float32Array(filteredSize * 9);
-    return array;
-}
-export { Adaptor, fillSliceOfFloat32Array, createFloat32Array };

package/timetracks/plugin.js

@@ -1,248 +0,0 @@
-/**
- * Author: Toprak Nihat Deniz Ozturk
- */
-import TrackGlowLineProgram from './program';
-import PointProgram from './programpoint';
-/**
- * @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,
-     *  a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time, a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
-     *  b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time, b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
-     * ]
-     * As you can see, the middle points of a line is repeated.
-     * Start Time is the first time of the line, End Time is the last time of the line.
-     * startTime of A = a1time, endTime time of A = a3time
-     * Check Adaptor to create TimeTrackMultiColorData. import {Adaptor} from '.';
-*/
-/**
-  * 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;
-        this.pointProgram?.setHeadTime(headTime);
-        this.globe.DrawRender();
-    }
-    setGlow(isGlow) {
-        this.program.setGlow(isGlow);
-        this.globe.DrawRender();
-    }
-    setPremultipliedAlpha(isPremultiplied) {
-        this.program.setPremultipliedAlpha(isPremultiplied);
-        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();
-    }
-    setAlphaThreshold(alphaThreshold) {
-        this.program.setAlphaThreshold(alphaThreshold);
-        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 / 2);
-        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) {
-        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
-        };
-    }
-}