@pirireis/webglobeplugins 0.0.4 → 0.0.6

package/index.js

@@ -3,8 +3,9 @@ import * as waveparticles from "./waveparticles";
 import * as timetracks from "./timetracks";
 import * as arrowfield from "./arrowfield";
 import * as rangerings from "./rangerings";
+import * as partialring from "./partialrings";
 import * as compassrose from "./compassrose";
 import * as heatwave from "./heatwave";
 import * as util from "./util";
 import * as programs from "./programs";
-export { wind, waveparticles, timetracks, rangerings, compassrose, heatwave, util, programs, arrowfield };
+export { wind, waveparticles, timetracks, rangerings, compassrose, heatwave, util, programs, arrowfield, partialring };

package/package.json

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

package/partialrings/goals.md

@@ -0,0 +1,15 @@
+* Pie Statistacal view 
+ A Unit is a bundle of partial rings. 
+ Multiple partial rings of different color on the same center. 
+ Update center updates a bundle 
+ Updating an the amount of a a ring updates all the rings percentage in the same bundle.
+
+An animation can be added 
+
+* EBM bearing view
+ 
+create a plugin with line  and points 
+
+* Target 1 is a point
+* Target 2 is a point or an angle
+

package/partialrings/index.js

@@ -0,0 +1,3 @@
+import PartialRing, { RINGPARTIAL_ALPHA_MODE, RINGPARTIAL_DRAW_MODE, PART_OFFSET_LOOPUP } from './plugin';
+
+export { PartialRing, RINGPARTIAL_ALPHA_MODE, RINGPARTIAL_DRAW_MODE, PART_OFFSET_LOOPUP };

package/partialrings/plugin.js

@@ -0,0 +1,174 @@
+
+
+import BufferOffsetManager from '../util/account/bufferoffsetmanager';
+import { programCache, ITEM_SIZE } from './program';
+
+
+
+const emptyBlock = new Float32Array([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+
+export const RINGPARTIAL_DRAW_MODE = Object.freeze({
+    LINE_STRIP: "LINE_STRIP",
+    TRIANGLE_FAN: "TRIANGLE_FAN",
+});
+
+export const RINGPARTIAL_ALPHA_MODE = Object.freeze({
+    CONSTANT: 0,
+    FADING: 1,
+    HIDE: 2,
+});
+
+
+export const PART_OFFSET_LOOPUP = Object.freeze({
+    CENTER: 0,
+    START_ANGLE: 2,
+    TAIL_ANGLE: 3,
+    COLOR: 4,
+    RADIUS: 8,
+    COLOR_MODE: 9,
+});
+
+
+export default class {
+    constructor(id, { edgeCount = 10, drawMode = RINGPARTIAL_DRAW_MODE.LINE_STRIP, startLod = 3, endLod = 13, alphaMultiplier = 1 } = {}) {
+        this.id = id;
+        this.edgeCount = edgeCount;
+        this.drawMode = drawMode;
+        this.startLod = startLod;
+        this.endLod = endLod;
+        this.alphaMultiplier = alphaMultiplier;
+
+    }
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.program = programCache.get(globe);
+        console.log(this.program);
+        const { vao, buffer } = this.program.getVaoBuffer();
+        this.vao = vao;
+        this.buffer = buffer;
+
+
+    }
+
+
+    draw3D() {
+        const LOD = this.globe.api_GetCurrentLOD();
+
+        if (LOD < this.startLod || LOD > this.endLod) return;
+        this.program.draw(
+            this.bufferManager,
+            this.vao,
+            this.edgeCount,
+            this.alphaMultiplier,
+            this.drawMode,
+        )
+    }
+
+    /**
+     * 
+     * @param {RINGPARTIAL_DRAW_MODE} drawMode 
+     */
+    setDrawMode(drawMode) {
+        this.drawMode = drawMode;
+    }
+
+    setOpacity(opacity) {
+        this.alphaMultiplier = opacity;
+    }
+
+    setStartEndLOD({ startLod = null, endLod = null } = {}) {
+        if (startLod !== null) this.startLod = startLod;
+        if (endLod !== null) this.endLod = endLod;
+    }
+
+    createBufferMAnager(initialCapacity = 10, extendRatio = 1.2, bufferType = 'DYNAMIC_DRAW') {
+        if (!this.bufferManager) { this.bufferManager = new BufferManager(this.globe, this.gl, this.buffer, bufferType, { initialCapacity, extendRatio }); }
+        return this.bufferManager;
+    }
+
+    free() {
+        programCache.free(this.globe);
+        this.bufferManager.free();
+    }
+}
+
+
+class BufferManager extends BufferOffsetManager {
+
+    constructor(globe, gl, buffer, bufferType, { initialCapacity = 10, extendRatio = 1.2 } = {}) {
+        super(10, { capacity: initialCapacity });
+        this.globe = globe;
+        this.gl = gl;
+        this.buffer = buffer;
+        this.bufferType = bufferType;
+        this.extendRatio = extendRatio;
+
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        console.log(bufferType, gl[bufferType], initialCapacity * ITEM_SIZE * 4);
+        gl.bufferData(gl.ARRAY_BUFFER, initialCapacity * ITEM_SIZE * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+    /**
+     * 
+     * @param { Array<{key, center[2], startAngle, tailAngle, radius, color[4], color_mode }>} rings 
+     * @returns 
+     */
+    insertRings(rings) {
+        if (rings.length === 0) return;
+        this._autoExtendBuffer(rings.length);
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, center, startAngle, tailAngle, color, radius, colorMode } of rings) {
+            let offset = this.getOffset(key);
+            if (offset === undefined) {
+                offset = this.nextOffset();
+                this.setOffset(key, offset);
+            }
+            const block = new Float32Array([
+                ...center, startAngle, tailAngle, ...color, radius, colorMode]);
+            console.log(offset, block);
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
+            // 2         1       1           1         4       1 = 10
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {Array<{key:string, payload:Float32Array}} rings 
+     * @param {PART_OFFSET_LOOPUP} part | CENTER, START_ANGLE, ROTATION_ANGLE, RADIUS, COLOR, COLOR_MODE
+     * @returns 
+     */
+    updatePartial(rings, part) {
+        const { gl, buffer } = this;
+        this._updatePartial(rings, part, gl, buffer);
+        this.globe.DrawRender();
+
+    }
+
+
+    delete(keys) {
+        const { gl, buffer } = this;
+        this._removefromBuffer(gl, buffer, keys, emptyBlock);
+        this.globe.DrawRender();
+    }
+
+    _autoExtendBuffer(payloadSize) {
+        const { gl, buffer, bufferType, extendRatio } = this;
+        if (payloadSize <= this.spaceLeft()) return;
+        const newCapacity = Math.ceil((payloadSize + this.length) * extendRatio);
+        this.extendBuffer(gl, buffer, bufferType, newCapacity);
+    }
+
+
+    free() {
+        this.gl.deleteBuffer(this.buffer);
+        this.buffer = null;
+    }
+}

package/partialrings/program.js

@@ -0,0 +1,246 @@
+import { createProgram, shaderfunctions } from "../util";
+import { CameraUniformBlockTotem, CameraUniformBlockString, noRegisterGlobeProgramCache, globeProgramCache } from "../programs";
+
+import {
+    POLE,
+    PI,
+    longLatRadToMercator,
+    mercatorXYTo2DPoint,
+    longLatRadToCartesian3D,
+    circleLimpFromLongLatRadCenterCartesian3D,
+    circleLimpFromLongLatRadCenterMercatorCompass,
+    cartesian3DToGLPosition
+
+
+} from "../util/shaderfunctions/geometrytransformations";
+
+
+/**
+ * TODO:
+ * 1. Triangle face looks at screen. if rotation angle is positive the last vertex must be the faintest.
+ * 
+ */
+
+const drawModeMap = Object.freeze({
+    LINE_STRIP: 0,
+    TRIANGLE_FAN: 1,
+});
+
+
+
+const vertexShaderSource = `#version 300 es` +
+    CameraUniformBlockString +
+    PI +
+    longLatRadToMercator +
+    mercatorXYTo2DPoint +
+    longLatRadToCartesian3D +
+    circleLimpFromLongLatRadCenterCartesian3D +
+    circleLimpFromLongLatRadCenterMercatorCompass +
+    cartesian3DToGLPosition + `
+
+uniform float edge_count;
+uniform int draw_mode; // %2 => 0: LINE_STRIP, 1: TRIANGLE_FAN 
+uniform float plugin_alpha_multiplier;
+
+in vec2 center; // long, lat in radian
+in float start_angle; // the start of partial circle from bearing point
+in float tail_angle; // the rotation of the partial circle
+in vec4 color;
+in float radius; // in meter
+in float color_mode; // 0.0: constant, 1.0: fading, 2.0: hide
+
+out vec2 v_pos;
+out vec4 v_color;
+
+
+void main() {
+    if (color_mode == 2.0 || radius == 0.0) { return; }
+
+    float vertexID;
+    float radius_ = radius;
+    float alpha = plugin_alpha_multiplier;
+    if (draw_mode == 1) { // TRIANGLE_FAN
+        vertexID = float(gl_VertexID - 1);
+        if (gl_VertexID == 0) { 
+            radius_ = 0.0; vertexID = 0.0; 
+            if ( color_mode == 1.0 ) { alpha = 0.0; }
+        }
+    } else { // LINE_STRIP
+        vertexID = float(gl_VertexID); 
+    }
+    
+    float phase = ( vertexID / edge_count);
+
+    if ( color_mode == 1.0 ) {
+        if ( tail_angle > 0.0 ) {
+                v_color = vec4( color.rgb , color.a * ( 1.0 - phase ) * alpha );
+            } else {
+                v_color = vec4( color.rgb , color.a * (phase ) * alpha );
+        }
+    } else {
+        v_color = vec4( color.rgb , color.a * alpha );
+    }
+
+    float angle;
+    if ( tail_angle < 0.0 ) { 
+        angle =  tail_angle * (-phase + 1.0) + start_angle;
+        } else {
+        angle = tail_angle * phase + start_angle;
+    }
+    if (is3D) {
+
+        vec3 pos = circleLimpFromLongLatRadCenterCartesian3D(center, radius_, angle);
+        v_pos = vec2(0.0, 0.0);
+        gl_Position = cartesian3DToGLPosition(pos);
+    }
+    else {
+        vec2 pos = circleLimpFromLongLatRadCenterMercatorCompass(center, radius_, angle);
+        v_pos = pos;
+        gl_Position = mercatorXYTo2DPoint(pos);
+    }
+
+
+    gl_PointSize = 2.0;
+}`;
+
+
+const fragmentShaderSource = `#version 300 es` + POLE + `
+precision highp float;
+
+in vec4 v_color;
+in vec2 v_pos;
+out vec4 outColor;
+
+void main() {
+    if ( v_pos.x < -POLE || v_pos.x > POLE || v_pos.y < -POLE || v_pos.y > POLE ) { discard; }
+    outColor = v_color;
+}`;
+
+export const ITEM_SIZE = 10;
+
+export class Logic {
+
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this._lastMode = 0;
+        this._lastEdgeCount = 64;
+        this._lastAlphaMultiplier = 1.0;
+
+        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
+
+        const { gl, program } = this;
+        {   // set attributes locations 
+            gl.bindAttribLocation(program, 0, 'center');
+            gl.bindAttribLocation(program, 1, 'start_angle');
+            gl.bindAttribLocation(program, 2, 'tail_angle');
+            gl.bindAttribLocation(program, 3, 'color');
+            gl.bindAttribLocation(program, 4, 'radius');
+            gl.bindAttribLocation(program, 5, 'color_mode');
+            // vao
+            // instanced draw read 1 
+        }
+        {   // Uniforms
+            this._edgeCountLocation = gl.getUniformLocation(program, 'edge_count');
+            this._draw_modeLocation = gl.getUniformLocation(program, 'draw_mode');
+            this._plugin_alpha_multiplierLocation = gl.getUniformLocation(program, 'plugin_alpha_multiplier');
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1i(this._draw_modeLocation, this._lastMode);
+            gl.uniform1f(this._edgeCountLocation, this._lastEdgeCount);
+            gl.uniform1f(this._plugin_alpha_multiplierLocation, 1.0);
+
+            this.cameraBlockBindingPoint = 0;
+            this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+            const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
+            gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
+
+            gl.useProgram(currentProgram);
+        }
+
+    }
+
+
+
+    draw(bufferManager, vao, edgeCount, alphaMultiplier, drawMode) {
+        if (alphaMultiplier === 0) { console.log("no draw"); return };
+        const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this
+
+        gl.disable(gl.DEPTH_TEST);
+        gl.useProgram(program);
+        if (drawMode !== this._lastMode) {
+            gl.uniform1i(this._draw_modeLocation, drawModeMap[drawMode]);
+            this._lastMode = drawMode;
+        }
+        if (edgeCount !== this._lastEdgeCount) {
+            gl.uniform1f(this._edgeCountLocation, edgeCount);
+            this._lastEdgeCount = edgeCount;
+        }
+        if (alphaMultiplier !== this._lastAlphaMultiplier) {
+            gl.uniform1f(this._plugin_alpha_multiplierLocation, alphaMultiplier);
+            this._lastAlphaMultiplier = alphaMultiplier;
+        }
+        const overdraw = drawModeMap[drawMode];
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        gl.bindVertexArray(vao);
+        gl.drawArraysInstanced(gl[drawMode], 0, edgeCount + overdraw, bufferManager.length);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        gl.bindVertexArray(null);
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+
+    free() {
+        noRegisterGlobeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+        this.gl.deleteProgram(this.program);
+        this.program = null;
+    }
+
+
+    getVaoBuffer() {
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        const buffer = gl.createBuffer();
+        gl.bindVertexArray(vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+        const stride = ITEM_SIZE * 4;
+        let offset = 0;
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, stride, offset);
+        offset += 2 * 4;
+        gl.enableVertexAttribArray(1);
+        gl.vertexAttribPointer(1, 1, gl.FLOAT, false, stride, offset);
+        offset += 1 * 4;
+        gl.enableVertexAttribArray(2);
+        gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
+        offset += 1 * 4;
+        gl.enableVertexAttribArray(3);
+        gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
+        offset += 4 * 4;
+        gl.enableVertexAttribArray(4);
+        gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, offset);
+        offset += 1 * 4;
+        gl.enableVertexAttribArray(5);
+        gl.vertexAttribPointer(5, 1, gl.FLOAT, false, stride, offset);
+
+        gl.vertexAttribDivisor(0, 1);
+        gl.vertexAttribDivisor(1, 1);
+        gl.vertexAttribDivisor(2, 1);
+        gl.vertexAttribDivisor(3, 1);
+        gl.vertexAttribDivisor(4, 1);
+        gl.vertexAttribDivisor(5, 1);
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        return {
+            vao,
+            buffer,
+        }
+    }
+}
+
+export const programCache = Object.freeze({
+    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    free: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
+});

package/programs/rings/distancering/circleflatprogram.js

@@ -61,7 +61,7 @@ void main() {
 }`;
 
 class Logic {
-    constructor(globe,) {
+    constructor(globe) {
         this.globe = globe;
         this.gl = globe.gl;
         this.program = createProgram(this.gl, vertexShader, fragmentShader);
@@ -105,7 +105,7 @@ class Logic {
             gl.uniform1f(this._circleEdgeCountLocation, circle_edge_count);
             this._circle_edge_count = circle_edge_count;
         }
-        gl.drawArraysInstanced(gl.LINE_LOOP, 0, CIRCLE_EDGE_COUNT, attrBufferManager.length);
+        gl.drawArraysInstanced(gl.LINE_LOOP, 0, circle_edge_count, attrBufferManager.length);
         gl.bindVertexArray(null);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
     }