@pirireis/webglobeplugins 0.9.6 → 0.9.7

package/point-tracks/plugin.js

@@ -1,394 +0,0 @@
-import { BufferOrchestrator, BufferManager, ObjectStore } from "../util/account";
-
-import { PickerDisplayer } from "../util/picking/picker-displayer";
-import { PointOnGlobeProgramCache } from "../programs/point-on-globe/square-pixel-point";
-
-import { wgs84ToCartesian3d, wgs84ToMercator } from "../Math/methods";
-
-/**
- * @typedef {number} long
- * @typedef {number} lat
- * @typedef {number} height
- * @typedef {string} ID
- * @typedef {string} trackID
- * @typedef {[number, number, number, number]} rgba 0-1
- * @typedef { long ,lat, height, ID } Point
- * @typedef {Array<Point>, rgba, trackID} Track
- */
-
-
-class PointTracksPlugin {
-
-    constructor(id, { pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0 } = {}) {
-        this.id = id;
-        this._isFreed = false;
-        this._pointProgram = null
-        this._vao = null;
-        this._bufferManagersMap = null;
-        this._bufferOrchestrator = null;
-        this._pickerDisplayer = null
-        this._selectedID = -1;
-        this._selectedObj = null;
-        this._tracksToPointsMap = new Map(); // one to many
-        this._opacity = opacity;
-        this.program = null
-        this._lastWH = { w: 0, h: 0 };
-        this._focusParams = { on: false, length: 0, elementBuffer: null, trackIDs: [] };
-        this.pointSizes = {
-            pointSize,
-            selectionPointFilling,
-            hoveredPointSize
-        }
-    }
-
-
-    init(globe, gl) {
-
-        this.globe = globe;
-        this.gl = gl;
-        this._pickerDisplayer = new PickerDisplayer(globe);
-        this._pointProgram = PointOnGlobeProgramCache.get(globe);
-        this._focusParams.elementBuffer = gl.createBuffer();
-        this._initBufferManagers();
-    }
-
-
-    _initBufferManagers() {
-        const { gl } = this;
-        const initialCapacity = 10;
-        const bufferType = "DYNAMIC_DRAW";
-        this._bufferOrchestrator = new BufferOrchestrator({ initialCapacity });
-        this._bufferManagersMap = new Map(
-            [
-                ["pos3D", {
-                    bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    adaptor: (item) => new Float32Array(wgs84ToCartesian3d(item.long, item.lat, item.height / 1000)) // height is in meters
-                }],
-                ["pos2D", {
-                    bufferManager: new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    adaptor: (item) => new Float32Array(wgs84ToMercator(item.long, item.lat))
-                }],
-                ["rgba", {
-                    bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                    adaptor: (item) => item.rgba
-                }],
-                ["objectStore", {
-                    bufferManager: new ObjectStore({ initialCapacity }),
-                    adaptor: (item) => {
-                        return {
-                            trackID: item.trackID, pointID: item.pointID
-                        }
-                    }
-                }]
-            ]
-        );
-
-        this._vao = this._pointProgram.createVAO(
-            this._bufferManagersMap.get("pos3D").bufferManager.buffer,
-            this._bufferManagersMap.get("pos2D").bufferManager.buffer,
-            this._bufferManagersMap.get("rgba").bufferManager.buffer,
-        );
-    }
-
-
-    setPointSize(size) {
-        this.pointSizes.pointSize = size;
-        this.globe?.DrawRender();
-    }
-
-    setSelectionPointFilling(size) {
-        this.pointSizes.selectionPointFilling = size;
-        this.globe?.DrawRender();
-    }
-
-    setHoveredPointSize(size) {
-        this.pointSizes.hoveredPointSize = size;
-        this.globe?.DrawRender();
-    }
-
-    setOpacity(opacity) {
-        if (opacity < 0 || opacity > 1) return;
-        this._opacity = opacity;
-        this.globe?.DrawRender();
-    }
-
-    getCurrentSelection() {
-        return this._selectedObj;
-    }
-
-
-    /**
-     * 
-     * @param {*} x screen x
-     * @param {*} y screen y
-     * @param {*} callback callback on selection
-     */
-    screenSelection(x, y, callback) {
-        const { pointSizes, _pickerDisplayer } = this;
-        const objectStore = this._bufferManagersMap.get("objectStore").bufferManager;
-        const wrapper = (selectedIDsSet) => {
-            const selectedIDs = Array.from(selectedIDsSet);
-            if (selectedIDs.length === 0) {
-                this._selectedObj = null;
-                this._selectedID = -1;
-                callback([]);
-                return;
-            }
-            const selectedPoints = [];
-            for (let i = 0; i < selectedIDs.length; i++) {
-                const id = selectedIDs[i];
-                if (i === 0) {
-                    this._selectedID = id;
-                    this._selectedObj = objectStore.get(id);
-                }
-                const obj = objectStore.get(id);
-                selectedPoints.push(obj);
-            }
-
-            callback(selectedPoints);
-        }
-        _pickerDisplayer.pickXY(x, y, pointSizes.selectionPointFilling, wrapper);
-    }
-
-
-    /**
-     * @param {Array<Track>} tracks 
-     * @returns 
-     */
-    insertBulk(tracks) {
-        this._fillTracksToPointsMap(tracks); // TODO error should be at the top
-        const flattenedPoints = tracks.map(trackToFlatPoints).flat();
-        const currentLoad = this._bufferOrchestrator.length;
-        if (currentLoad + flattenedPoints.length >= 2147483647) {
-            throw new Error("Too many points, Point count cannot exceed 2147483647");
-        }
-        const { _bufferManagersMap, _bufferOrchestrator } = this;
-        _bufferOrchestrator.insertBulk(flattenedPoints, _bufferManagersMap);
-        this._refillFocus();
-
-        this.globe?.DrawRender();
-
-    }
-
-
-    flush() {
-        const capacity = 100
-        this._bufferOrchestrator?.flush({ capacity });
-        this._bufferManagersMap.forEach(({ bufferManager }) => bufferManager.resetWithCapacity(capacity));
-        this._turnOffFocus();
-        this._tracksToPointsMap.clear();
-        this.globe?.DrawRender();
-    }
-
-    /**
-     * @param {string} trackID
-     */
-    deleteTrack(trackID) {
-        const pointSet = this._tracksToPointsMap.get(trackID);
-        const points = Array.from(pointSet);
-        const { _bufferOrchestrator, _bufferManagersMap } = this;
-        _bufferOrchestrator.deleteBulk(
-            points.map((pointID) => keyMethod(trackID, pointID)),
-            _bufferManagersMap
-        );
-        this._tracksToPointsMap.delete(trackID);
-        this._redraw = true;
-        this._refillFocus();
-
-        this.globe?.DrawRender();
-    }
-
-
-    /**
-     * @param {string} trackID
-     * @param {Array<string>} pointIDs
-     */
-    deletePoints(trackID, pointIDs) {
-        const { _bufferOrchestrator, _bufferManagersMap } = this;
-        _bufferOrchestrator.deleteBulk(
-            pointIDs.map((pointID) => keyMethod(trackID, pointID)),
-            _bufferManagersMap
-        );
-        this._deletePointsFromTracksMap(trackID, pointIDs);
-        this._refillFocus();
-        this.globe?.DrawRender();
-    }
-
-    focusTracks(trackIDs = null) {
-        if (!this.globe) return;
-        if (!trackIDs) {
-            this._focusParams.on = false;
-            this.globe?.DrawRender();
-            return;
-        }
-        this._focusParams.on = this._fillElementBuffer(trackIDs);
-        if (!this._focusParams.on) {
-            this._turnOffFocus();
-        }
-        this.globe.DrawRender();
-    }
-
-
-    // GLOBE API METHODS
-
-    free() {
-        if (this._isFreed) return;
-        this._isFreed = true;
-        this._pickerDisplayer.free();
-        PointOnGlobeProgramCache.release(this.globe);
-        this.gl.deleteBuffer(this._focusParams.elementBuffer);
-        this._bufferManagersMap.forEach(
-            ({ bufferManager, adaptor }) => bufferManager.free()
-        );
-    }
-
-
-    draw3D() {
-        const { gl, _pointProgram, _pickerDisplayer, _bufferOrchestrator, _vao } = this;
-        this.resize();
-
-        _pickerDisplayer.bindFBO();
-        _pickerDisplayer.clearTextures();
-
-        if (this._focusParams.on) {
-            _pointProgram.draw(_vao, this._focusParams.length,
-                {
-                    hoveredID: this._selectedID,
-                    opacity: this._opacity,
-                    pointSize: this.pointSizes.pointSize,
-                    hoveredPointSize: this.pointSizes.hoveredPointSize,
-                    elementBuffer: this._focusParams.elementBuffer
-                });
-        } else {
-            _pointProgram.draw(_vao, _bufferOrchestrator.length,
-                {
-                    hoveredID: this._selectedID,
-                    opacity: this._opacity,
-                    pointSize: this.pointSizes.pointSize,
-                    hoveredPointSize: this.pointSizes.hoveredPointSize
-                });
-        }
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        _pickerDisplayer.drawColorTexture();
-
-        this._selfSelect();
-    }
-
-
-    resize() {
-        const w = this.globe.api_ScrW();
-        const h = this.globe.api_ScrH();
-        if (w === this._lastWH.w && h === this._lastWH.h) return;
-
-        this._lastWH.w = w;
-        this._lastWH.h = h;
-        this._pickerDisplayer.resize();
-        this.globe?.DrawRender();
-    }
-
-    // IMPLICIT METHODS
-
-    _fillTracksToPointsMap(tracks) {
-        for (const track of tracks) {
-            const trackID = track.trackID;
-            const points = track.points;
-            if (!this._tracksToPointsMap.has(trackID)) {
-                this._tracksToPointsMap.set(trackID, new Set());
-            }
-            const pointSet = this._tracksToPointsMap.get(trackID);
-            for (let p = 0; p < points.length; p++) {
-                const pointID = points[p].ID;
-                pointSet.add(pointID);
-            }
-        }
-    }
-
-    _refillFocus() {
-        if (this._focusParams.on) {
-            this.focusTracks(this._focusParams.trackIDs);
-        }
-    }
-
-    _deletePointsFromTracksMap(trackID, pointIDs) {
-        const trackSet = this._tracksToPointsMap.get(trackID);
-        for (const pointID of pointIDs) {
-            trackSet.delete(pointID);
-        }
-    }
-
-
-    _selfSelect() {
-        const { globe } = this;
-        const pos = globe.api_GetMousePos();
-        const x = pos.canvasX;
-        const y = globe.api_ScrH() - pos.canvasY;
-        this.screenSelection(x, y, (selectedPoints) => {
-        });
-
-    }
-
-    _turnOffFocus() {
-        const { gl } = this;
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._focusParams.elementBuffer);
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array([]), gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-        this._focusParams.length = 0;
-        this._focusParams.on = false;
-    }
-
-    _fillElementBuffer(trackIDs) {
-
-        let length = 0;
-        const indexes = [];
-        const foundTracks = []
-        for (const trackID of trackIDs) {
-            const pointSet = this._tracksToPointsMap.get(trackID);
-            if (!pointSet) continue;
-            foundTracks.push(trackID);
-            const points = Array.from(pointSet);
-            for (const pointID of points) {
-                const key = keyMethod(trackID, pointID);
-                const index = this._bufferOrchestrator.offsetMap.get(key);
-                indexes.push(index);
-                length++;
-            }
-        }
-        this._focusParams.trackIDs = foundTracks;
-        this._focusParams.length = length;
-        if (length === 0) {
-            return false;
-        }
-        const { gl } = this;
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._focusParams.elementBuffer);
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indexes), gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-        return true;
-    }
-
-}
-
-
-const trackToFlatPoints = (track) => {
-
-    const trackID = track.trackID;
-    const points = track.points;
-    const rgba = new Float32Array(track.rgba);
-    const flatPoints = [];
-    for (const point of points) {
-        flatPoints.push({
-            key: keyMethod(trackID, point.ID),
-            long: point.long,
-            lat: point.lat,
-            height: point.height,
-            pointID: point.ID,
-            rgba,
-            trackID
-        });
-    }
-    return flatPoints;
-}
-
-const keyMethod = (trackID, pointID) => `${trackID}_${pointID}`;
-
-
-export { PointTracksPlugin, keyMethod } 

package/programs/arrowfield/index.js

@@ -1,2 +0,0 @@
-import ArrowField from './object';
-export default ArrowField;

package/programs/arrowfield/logic.js

@@ -1,286 +0,0 @@
-import { createProgram } from "../../util";
-import { globeProgramCache } from "../programcache";
-import { CameraUniformBlockTotem } from "../totems";
-
-const arrowVertexShader = `#version 300 es
-#define R 6378.137
-#define PI 3.1415926535897932384626433832795
-#define POLE 20037508.34
-#define POLE_BY_PI 6366198.2
-#define HALF_PI 1.5707963267948966192313216916398
-
-uniform sampler2D rotation; // rotation of arrow
-
-out vec4 v_color;
-
-layout(std140) uniform CameraBlock {
-    mat4 u_view;
-    mat4 u_projection;
-    vec3 u_translate;
-    bool u_is3D;
-    vec2 u_mapWH;
-    vec2 u_scrWH;
-    float u_zlevel;
-};
-
-layout(std140) uniform ArrowBlock {
-    vec4 u_color;
-    vec2 u_bbox_offset_rad;
-    vec2 u_bbox_size_rad;
-    vec2 u_resolution;
-    float u_length_ratio;
-    float u_width_ratio;
-    float u_height;
-    float u_no_data_value;
-};
-
-vec2 f_texCoord(){
-    float fID = float(gl_InstanceID);
-    float x = mod( fID, u_resolution.x ) / ( u_resolution.x - 1.0);
-    float y = 1.0 - floor( fID / u_resolution.x ) / ( u_resolution.y - 1.0);
-    return vec2(x, y);
-}
-
-vec2 f_radCoord(vec2 texCoord){
-    float x = (texCoord.x * u_bbox_size_rad.x ) + u_bbox_offset_rad.x;
-    float y = (texCoord.y * u_bbox_size_rad.y ) + u_bbox_offset_rad.y;
-    return vec2(x, y);
-}
-
-vec3 f_onSphere(vec2 radCoord){
-    float x = sin(radCoord.y) * cos(radCoord.x);
-    float y = sin(radCoord.y) * sin(radCoord.x);
-    float z = cos(radCoord.y);
-    return vec3(x, y, z) * (R + u_height);
-}
-
-
-vec2 f_onFlat(vec2 radCoord){
-    float mercX = radCoord.x * POLE_BY_PI;
-    float mercY = log(tan(HALF_PI - radCoord.y * 0.5)) * POLE_BY_PI;
-    float normX = ( mercX - u_translate.x ) / u_mapWH.x;
-    float normY = ( mercY - u_translate.y ) / u_mapWH.y;
-    return vec2(normX, normY);
-}
-
-void main() {
-    // escape if no data
-    vec2 texCoord = f_texCoord();
-    vec2 geoCoord = vec2( texCoord.x , 1.0 - texCoord.y );
-
-
-    float angle = texture(rotation, texCoord).r;
-
-    if ( angle == u_no_data_value ) {
-        gl_Position = vec4(-2.0, -2.0, 0.0, 1.0);
-        return;
-    }
-    vec2 arrowLimb;
-    if (0.0 == mod(float(gl_VertexID), 2.0)) {
-        arrowLimb = vec2(0.0, 0.0);
-    } else if (gl_VertexID == 1) {
-        // tail
-        arrowLimb = vec2( cos(angle), sin(angle)) * u_length_ratio / (170.0 );
-    } else if (gl_VertexID == 3) {
-        // right wing
-        arrowLimb = vec2( cos(angle + 0.45), sin(angle + 0.45)) * u_width_ratio / (170.0 );
-    } else if (gl_VertexID == 5) {
-        // left wing
-        arrowLimb = vec2( cos(angle - 0.45), sin(angle - 0.45)) * u_width_ratio / (170.0 );
-    }
-
-
-    vec2 radCoord = f_radCoord(geoCoord + arrowLimb);
-    if ( u_is3D ) {
-        vec3 spherePos = f_onSphere(radCoord);
-        gl_Position = u_projection * u_view * vec4(spherePos - u_translate, 1.0);
-    } else {
-        vec2 flatPos = f_onFlat(radCoord);
-        gl_Position = u_projection * vec4(
-            flatPos.x * u_scrWH.x, 
-            (1.0 - flatPos.y) * u_scrWH.y,
-            0.0, 1.0
-        );
-    }
-
-
-    v_color = u_color;
-    gl_PointSize = 4.0;
-}
-`;
-
-
-const arrowFragmentShader = `#version 300 es
-precision highp float;
-in vec4 v_color;
-out vec4 outColor;
-
-void main() {
-    outColor = v_color;
-}
-`;
-
-
-export default class ArrowFieldLogic {
-
-    constructor() {
-        this.gl = null;
-        this.globe = null;
-        this.cameraUniformBlockTotem = null;
-        this.program = null;
-        this.cameraBlockBindingPoint = 0;
-        this.arrayBlockBindingPoint = 1;
-    }
-
-    init(globe, gl) {
-        this.gl = gl;
-        this.globe = globe;
-        this.cameraUniformBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
-        this.program = this._createProgram();
-    }
-
-    _createProgram() {
-        const gl = this.gl;
-        const program = createProgram(gl, arrowVertexShader, arrowFragmentShader);
-
-        const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraBlock");
-        gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
-
-
-
-        const arrowBlockIndex = gl.getUniformBlockIndex(program, "ArrowBlock");
-        gl.uniformBlockBinding(program, arrowBlockIndex, this.arrayBlockBindingPoint);
-
-        this.textureLocations = {
-            rotationLocation: gl.getUniformLocation(program, "rotation"),
-        }
-
-        return program;
-    }
-
-    getArrowBlockBufferManager() {
-        return new ArrowBlockBufferManager(this.gl, this.arrayBlockBindingPoint);
-    }
-
-    // initial load type is static. 
-    // after that, it is dynamic.
-    getTextureManager(width, height) {
-        return new TextureManager(this.gl, width, height, this.textureLocations);
-    }
-
-    draw(arrowBlockManager, textureManager, instanceCount) {
-        const { gl, cameraBlockBindingPoint, cameraUniformBlockTotem } = this;
-        gl.useProgram(this.program);
-        arrowBlockManager.bind();
-        textureManager.activate();
-        cameraUniformBlockTotem.bind(cameraBlockBindingPoint);
-        gl.drawArraysInstanced(gl.LINES, 0, 6, instanceCount);
-        // gl.drawArraysInstanced(gl.POINTS, 0, 4, instanceCount);
-        cameraUniformBlockTotem.unbind(cameraBlockBindingPoint);
-        arrowBlockManager.unbind();
-    }
-
-    free() {
-        const { gl, program } = this;
-        gl.deleteProgram(program);
-        globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
-    }
-}
-
-
-class ArrowBlockBufferManager {
-    constructor(gl, bindingPoint) {
-        this.gl = gl;
-        this.bindingPoint = bindingPoint;
-        this.ubo = gl.createBuffer();
-        gl.bindBuffer(gl.UNIFORM_BUFFER, this.ubo);
-        // 4 + 2+ 2 + 2 + 1 +1 +1 +1+1= 15 ~= 16
-        gl.bufferData(gl.UNIFORM_BUFFER, 56, gl.DYNAMIC_DRAW);
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-
-    update({
-        color = null,
-        bboxOffsetRad = null,
-        bboxSizeRad = null,
-        resolution = null,
-        tailLengthRatio = null,
-        wingLengthRatio = null,
-        height = null,
-        opacity = null,
-        noDataValue = null,
-    } = {}) {
-        const { gl, ubo } = this;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        if (color !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array(color));
-        if (opacity !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 12, new Float32Array([opacity]));
-        if (bboxOffsetRad !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 16, new Float32Array(bboxOffsetRad));
-        if (bboxSizeRad !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 24, new Float32Array(bboxSizeRad));
-        if (resolution !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 32, new Float32Array(resolution));
-        if (tailLengthRatio !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 40, new Float32Array([tailLengthRatio]));
-        if (wingLengthRatio !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 44, new Float32Array([wingLengthRatio]));
-        if (height !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 48, new Float32Array([height]));
-        if (noDataValue !== null) gl.bufferSubData(gl.UNIFORM_BUFFER, 52, new Float32Array([noDataValue]));
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-
-    bind() {
-        const { gl, ubo, bindingPoint } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
-    }
-
-    unbind() {
-        const { gl, bindingPoint } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
-    }
-
-    free() {
-        const { gl, ubo } = this;
-        gl.deleteBuffer(ubo);
-    }
-}
-
-class TextureManager {
-
-    constructor(gl, width, height, { rotationLocation }) {
-        this.gl = gl;
-        this.width = width;
-        this.height = height;
-        this.rotationLocation = rotationLocation;
-        this.rotationTexture = this._createFloatTexture();
-    }
-
-    _createFloatTexture() {
-        const { gl, width, height } = this;
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, width, height, 0, gl.RED, gl.FLOAT, null);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        return texture;
-    }
-
-    setData(rotation) {
-        const { gl, rotationTexture, width, height } = this;
-        // gl flip y axis
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-        gl.bindTexture(gl.TEXTURE_2D, rotationTexture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, width, height, 0, gl.RED, gl.FLOAT, rotation);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-    }
-
-    activate() {
-        const { gl, rotationTexture } = this;
-
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, rotationTexture);
-        gl.uniform1i(this.rotationLocation, 0);
-    }
-
-    free() {
-        const { gl, rotationTexture } = this;
-        gl.deleteTexture(rotationTexture);
-    }
-}