@pirireis/webglobeplugins 0.3.1 → 0.3.3

package/bearing-line/plugin.js

@@ -22,11 +22,40 @@ export const RINGPARTIAL_DRAW_MODE = Object.freeze({
 export default class Plugin {
 
 
-    constructor(id, { opacity = 1, textContextInjectionMap = new Map() } = {}) {
+    constructor(id, { opacity = 1, textContextInjectionMap = new Map(), drawVRM = true, drawBearingLine = true, drawAngleRing = true, drawText = true } = {}) {
         this.id = id;
         this._opacity = opacity;
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
         this._textContextInjectionMap = textContextInjectionMap;
+        this.drawVRM = drawVRM;
+        this.drawBearingLine = drawBearingLine;
+        this.drawAngleRing = drawAngleRing;
+        this.drawText = drawText;
+    }
+
+    setDoDrawVRM(bool) {
+        if (bool === this.drawVRM) return;
+        this.drawVRM = bool;
+        this.globe.DrawRender();
+    }
+
+    setDoDrawText(bool) {
+        if (bool === this.drawText) return;
+        this.drawText = bool;
+        this.globe.DrawRender();
+    }
+
+    setDoDrawText(bool) {
+        if (bool === this.drawText) return;
+        this.drawText = bool;
+        this.globe.DrawRender();
+    }
+
+
+    setDoDrawAngleRing(bool) {
+        if (bool === this.drawAngleRing) return;
+        this.drawAngleRing = bool;
+        this.globe.DrawRender();
     }
 
 
@@ -38,14 +67,18 @@ export default class Plugin {
                 this._insertTexts(item);
             }
         }
-
     }
 
+
     setOpacity(opacity) {
         this._opacity = opacity;
+        this._textContextInjectionMap.forEach(({ writer }) => writer.setOpacity(opacity));
         this.globe.DrawRender();
     }
 
+
+
+
     init(globe, gl) {
         this.gl = gl;
         this.globe = globe;
@@ -142,18 +175,41 @@ export default class Plugin {
         const { gl } = this;
         this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
         gl.disable(gl.DEPTH_TEST);
-        this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity * 0.8, RINGPARTIAL_DRAW_MODE.TRIANGLE_FAN);
-        this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity, RINGPARTIAL_DRAW_MODE.LINE_STRIP);
-        this.angledLineProgram.draw(this.angledLineVao, this.bufferOrchestrator.length, this._opacity * 0.8);
-        this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
-        this._textContextInjectionMap.forEach((e) => { e.writer.draw(); });
+        if (this.drawAngleRing) {
+            this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity * 0.8, RINGPARTIAL_DRAW_MODE.TRIANGLE_FAN);
+            this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity, RINGPARTIAL_DRAW_MODE.LINE_STRIP);
+        }
+        if (this.drawBearingLine) {
+            this.angledLineProgram.draw(this.angledLineVao, this.bufferOrchestrator.length, this._opacity * 0.8);
+        }
+        if (this.drawVRM) {
+            this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+        }
+        if (this.drawText) {
+            this._textContextInjectionMap.forEach((e) => { e.writer.draw(); });
+        }
         gl.enable(gl.DEPTH_TEST);
     }
 
 
     /**
+     * @typedef {{key, long, lat, endLong, endLat, bearingAngle, radius,  rgba:[4numbers], rgbaMode, bigRadius, dashRatio, dashOpacity, circleDashAngle}} item
+     * @property {string} key   
+     * @property {number} long
+     * @property {number} lat
+     * @property {number} endLong
+     * @property {number} endLat 
+     * @property {number} bearingAngle 0-360
+     * @property {number} radius angle ring radius
+     * @property {Array<4numbers>} rgba [r,g,b,a]
+     * @property {number} rgbaMode 0 constant, 1 fading, 2 hides angle ring
+     * @property {number} bigRadius undefined means it will be calculated from long, lat, endLong, endLat
+     * @property {number} dashRatio 0-1
+     * @property {number} dashOpacity 0-1
+     * @property {number} circleDashAngle 0-360
      * 
-     * @param {Array<{key, long, lat, endLong, endLat, bearingAngle, radius,  rgba:[4numbers]}>} items 
+     * @param {Array<item>} items 
+     * @param {Array<string>} injectionsSubSetIDs | textContextInjectionMap keys to be used for writing text.
      */
 
     insertBulk(items, injectionsSubSetIDs = []) {
@@ -186,7 +242,8 @@ export default class Plugin {
 
     /**
      * 
-     * @param {Array<{key, long, lat, endLong, endLat, bearing}>} items // TODO
+     * @param {Array<{key, long, lat, endLong, endLat, bearingAngle}>} items
+     * @param {Array<string>} injectionSubSetIDs | textContextInjectionMap keys to be used for writing text.
      */
     updateCoordinatesBulk(items, injectionSubSetIDs = []) { //TODO
         const injectionsSubSet = injectionSubSetIDs.map((id) => this._textContextInjectionMap.get(id));
@@ -212,7 +269,6 @@ export default class Plugin {
         const dashRatio = item.dashRatio !== undefined ? item.dashRatio : 1.0;
         const dashOpacity = item.dashOpacity !== undefined ? item.dashOpacity : 0.9;
         const circleDashRatio = item.circleDashAngle !== undefined ? (item.circleDashAngle / 360) : 1.0;
-        console.log("cicleDashRati", circleDashRatio);
         const bigRadius = item.bigRadius !== undefined ? item.bigRadius : this.globe.Math.GetDist3D(item.long, item.lat, item.endLong, item.endLat);
         const radius = item.radius !== undefined ? item.radius : bigRadius * 0.2;
         const startAngle = calculateStartAngle(long, lat, endLong, endLat);

package/package.json

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

package/partialrings/program.js

@@ -83,7 +83,9 @@ void main() {
     } else {
         v_color = vec4( color.rgb , color.a * alpha );
     }
-
+    if ( color_mode == 0.0 && draw_mode == 1 ) {
+        v_color.a /= 2.0;
+    }
     float angle;
     if ( tail_angle > 0.0 ) { 
         angle =  tail_angle * (-phase + 1.0) + start_angle;

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

@@ -121,7 +121,6 @@ class Logic {
 
         this.cameraBindingPoint = 0;
         this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
-        console.log("Logic constructor", this.cameraBlockTotem);
         const cameraBlockLocation = gl.getUniformBlockIndex(program, "CameraUniformBlock");
         gl.uniformBlockBinding(program, cameraBlockLocation, this.cameraBindingPoint);
     }

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

@@ -226,7 +226,6 @@ class BufferManager extends BufferOffsetManger {
         const { gl, buffer, globe } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         for (let { key, long, lat, endLong, endLat, rgba, dashRatio = 1 } of items) {
-            console.log(key, dashRatio, "dashRatio");
             const payload = new Float32Array([
                 long,
                 lat,

package/programs/totems/canvas-webglobe-info.js

@@ -0,0 +1,136 @@
+import { globeProgramCache } from "../programcache";
+
+
+export const WebglobeInfoUniformBlockString = `
+layout(std140) uniform WebglobeInfo {
+    vec2 canvas_resolution;
+    vec2 mouse_radian_long_lat;
+    vec2 mouse_pixel_xy;
+    float north_angle;
+    float world_tilt;
+    float earth_distance;
+}; 
+`;
+
+
+
+export default class
+
+    CameraUniformBlockTotem {
+
+
+    constructor() {
+        this.id = "CameraUniformBlockTotem"
+        this.description = `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` + CameraUniformBlockString;
+        this.gl = null;
+        this.globe = null;
+        this.ubo = null;
+    }
+
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.ubo = this._createUBO();
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
+        this.setGeometry();
+        this.resize();
+    }
+
+
+    _createUBO() {
+        const { gl } = this;
+        const ubo = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferData(gl.UNIFORM_BUFFER, 164, gl.STREAM_DRAW);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return ubo;
+    }
+
+
+    resize() {
+        const { gl, globe, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 152, new Float32Array([globe.api_ScrW(), globe.api_ScrH()]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    setGeometry() {
+        const { gl, globe, ubo } = this;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 140, new Float32Array([is3D]));
+    }
+
+    draw3D(projection, modelView, translate) {
+
+        const { gl, traslateFloat32, ubo, mapWHFloat32, globe } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        {   // view, projection, translate
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
+            traslateFloat32.set([translate.x, translate.y, translate.z], 0);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
+        }
+        {
+            // zoom level
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 160, new Float32Array([globe.api_GetCurrentLODWithDecimal()]));
+        }
+        {   // mapWH
+            if (globe.api_GetCurrentGeometry() === 1) {
+                const { width, height } = globe.api_GetCurrentWorldWH();
+                mapWHFloat32.set([width, height]);
+                gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
+            }
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    getUBO() {
+        return this.ubo;
+    }
+
+
+    bind(bindingPoint) {
+        const { gl, ubo } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
+
+    }
+
+    unbind(bindingPoint) {
+        const { gl } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
+    }
+
+
+    free() {
+        const { gl, ubo } = this;
+        gl.deleteBuffer(ubo);
+    }
+
+    readBuffer() {
+        const result = new Float32Array(41);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, this.ubo);
+        this.gl.getBufferSubData(this.gl.UNIFORM_BUFFER, 0, result);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, null);
+        return {
+            view: result.slice(0, 16),
+            projection: result.slice(16, 32),
+            translate: result.slice(32, 35),
+            is3D: result[35],
+            mapWH: result.slice(36, 38),
+            screenWH: result.slice(38, 40),
+            z_level: result[40]
+        }
+    }
+}
+
+
+export const CameraUniformBlockTotemCache = Object.freeze({
+    get: (globe) => { return globeProgramCache.getProgram(globe, CameraUniformBlockTotem) },
+    release: (globe) => { return globeProgramCache.releaseProgram(globe, CameraUniformBlockTotem) }
+});

package/programs/totems/gpu-selection-uniform-block.js

@@ -0,0 +1,132 @@
+import { globeProgramCache } from "../programcache";
+// Loads mouse position to buffer
+// TODO implement it
+export const CameraUniformBlockString = `
+layout(std140) uniform GpuSelectionUniformBlock {
+    vec2 mouse_pixel_position;
+    vec2 mouse_radian_long_lat;
+}; // 11 lines
+`;
+
+
+
+export default class
+
+    CameraUniformBlockTotem {
+
+
+    constructor() {
+        this.id = "CameraUniformBlockTotem"
+        this.description = `Sets a uniform block and provides buffer for it. The following is the glsl uniform block:` + CameraUniformBlockString;
+        this.gl = null;
+        this.globe = null;
+        this.ubo = null;
+    }
+
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.ubo = this._createUBO();
+        this.traslateFloat32 = new Float32Array(3);
+        this.mapWHFloat32 = new Float32Array(2);
+        this.setGeometry();
+        this.resize();
+    }
+
+
+    _createUBO() {
+        const { gl } = this;
+        const ubo = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferData(gl.UNIFORM_BUFFER, 164, gl.STREAM_DRAW);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return ubo;
+    }
+
+
+    resize() {
+        const { gl, globe, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 152, new Float32Array([globe.api_ScrW(), globe.api_ScrH()]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    setGeometry() {
+        const { gl, globe, ubo } = this;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 140, new Float32Array([is3D]));
+    }
+
+    draw3D(projection, modelView, translate) {
+
+        const { gl, traslateFloat32, ubo, mapWHFloat32, globe } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        {   // view, projection, translate
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, modelView);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 64, projection);
+            traslateFloat32.set([translate.x, translate.y, translate.z], 0);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 128, traslateFloat32);
+        }
+        {
+            // zoom level
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 160, new Float32Array([globe.api_GetCurrentLODWithDecimal()]));
+        }
+        {   // mapWH
+            if (globe.api_GetCurrentGeometry() === 1) {
+                const { width, height } = globe.api_GetCurrentWorldWH();
+                mapWHFloat32.set([width, height]);
+                gl.bufferSubData(gl.UNIFORM_BUFFER, 144, mapWHFloat32);
+            }
+        }
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    getUBO() {
+        return this.ubo;
+    }
+
+
+    bind(bindingPoint) {
+        const { gl, ubo } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, ubo);
+
+    }
+
+    unbind(bindingPoint) {
+        const { gl } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, null);
+    }
+
+
+    free() {
+        const { gl, ubo } = this;
+        gl.deleteBuffer(ubo);
+    }
+
+    readBuffer() {
+        const result = new Float32Array(41);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, this.ubo);
+        this.gl.getBufferSubData(this.gl.UNIFORM_BUFFER, 0, result);
+        this.gl.bindBuffer(this.gl.UNIFORM_BUFFER, null);
+        return {
+            view: result.slice(0, 16),
+            projection: result.slice(16, 32),
+            translate: result.slice(32, 35),
+            is3D: result[35],
+            mapWH: result.slice(36, 38),
+            screenWH: result.slice(38, 40),
+            z_level: result[40]
+        }
+    }
+}
+
+
+export const CameraUniformBlockTotemCache = Object.freeze({
+    get: (globe) => { return globeProgramCache.getProgram(globe, CameraUniformBlockTotem) },
+    release: (globe) => { return globeProgramCache.releaseProgram(globe, CameraUniformBlockTotem) }
+});

package/write-text/context-text.js

@@ -15,18 +15,32 @@ const defaultStyle = {
 }
 
 export class ContextTextWriter {
-    constructor(globe, { style = null } = {}) {
+    constructor(globe, { style = null, doDraw = true } = {}) {
         this.globe = globe;
         this.itemMap = new Map();
         this.style = style || defaultStyle;
+        this.doDraw = doDraw;
+    }
+
+    setDoDraw(bool) {
+        this.doDraw = bool;
     }
 
     setStyle(style) {
         this.style = style;
     }
 
+    setOpacity(opacity) {
+        this.style.opacity = opacity;
+    }
+
+    doDraw(boolean) {
+        this.doDraw = boolean;
+    }
+
 
     draw() {
+        if (!this.doDraw) return;
         const { globe, style, itemMap } = this;
         const { textFont, opacity } = style;
         for (const [key, { lat, long, text }] of itemMap) {