@pirireis/webglobeplugins 0.6.17 → 0.6.19

package/bearing-line/plugin.js

@@ -1,10 +1,14 @@
-import { programCache as ringProgramCache } from '../partialrings/program';
-import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
-import { CircleCache } from '../programs/line-on-globe/circle';
+import { pieceOfPieProgramCache } from '../programs/rings/partial-ring/piece-of-pie';
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
+import { CircleCache as Circle3DCache } from '../programs/line-on-globe/circle-accurate-3d';
+import { CircleCache, EDGE_COUNT as flatCircleEdgeCount } from '../programs/line-on-globe/circle-accurate-flat';
 import { BufferOrchestrator, BufferManager } from '../util/account';
-import { AngledLineProgramCache } from '../programs/line-on-globe/angled-line';
+import { AngledLineProgramCache } from '../programs/line-on-globe/angled-line'; // TODO calculate the bearing target for 2d and 3d and use lineOnGlobeProgram
 import { mapGetOrThrow } from "../util/check/get";
+import { populateFloat32Array } from "../util/jshelpers/data-filler";
 import { ContextTextWriter } from '../write-text/context-text'
+
+
 export const RINGPARTIAL_DRAW_MODE = Object.freeze({
     LINE_STRIP: "LINE_STRIP",
     TRIANGLE_FAN: "TRIANGLE_FAN",
@@ -15,7 +19,10 @@ const constraintFloat = (x, lowerBound, upperBound) => {
     if (lowerBound > x || x > upperBound) throw new Error(`input must be between ${lowerBound} - ${upperBound}`)
 }
 
-
+/**
+ * partial ring angle should be different on globe and mercator.
+ * 
+ */
 
 
 /**
@@ -27,6 +34,8 @@ const constraintFloat = (x, lowerBound, upperBound) => {
  * 
  */
 
+
+
 export default class Plugin {
     /**
      * 
@@ -107,9 +116,10 @@ export default class Plugin {
         this.gl = gl;
         this.globe = globe;
         this.lineProgram = LineOnGlobeCache.get(globe);
-        this.ringProgram = ringProgramCache.get(globe);
+        this.ringProgram = pieceOfPieProgramCache.get(globe);
         this.angledLineProgram = AngledLineProgramCache.get(globe);
         this.circleProgram = CircleCache.get(globe);
+        this.circle3DProgram = Circle3DCache.get(globe);
         // this.angleTextContext = new ContextTextWriter(globe);
         // this.distanceTextContext = new ContextTextWriter(globe);
         {
@@ -118,13 +128,34 @@ export default class Plugin {
             const initialCapacity = this.bufferOrchestrator.capacity;
             this.bufferManagersCompMap = new Map(
                 [
-                    ["centerCoords", {
+
+                    ["centerCoords2d", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
+                    }],
+                    ["centerCoords2dflat", {
+                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount * 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => item.centerCoords2dflat,
+                    }],
+                    ["centerCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.long, item.lat, 0, 0)),
+                    }],
+                    ["targetCoords2d", {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.long, item.lat]),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.endLong, item.endLat))
+                    }],
+                    ["targetCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.endLong, item.endLat, 0, 0))
                     }],
-                    ["targetCoords", {
+                    ["bearingTargetCoords2d", {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.endLong, item.endLat])
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.bearingLong, item.bearingLat))
+                    }],
+                    ["bearingTargetCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetCartesian3DPoint(item.bearingLong, item.bearingLat, 0, 0))
                     }],
                     ["startAngle", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
@@ -134,6 +165,26 @@ export default class Plugin {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
                         'adaptor': (item) => new Float32Array([item.tailAngle])
                     }],
+                    ["startAngle2d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.startAngle2d])
+                    }],
+                    ["tailAngle2d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.tailAngle2d])
+                    }],
+                    ["startAngle3d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.startAngle3d])
+                    }],
+                    ["tailAngle3d", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.tailAngle3d])
+                    }],
+                    ["bearingDashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([0])
+                    }],
                     ["rgba", {
                         'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
                         'adaptor': (item) => new Float32Array(item.rgba)
@@ -160,54 +211,83 @@ export default class Plugin {
                     }],
                     ["dashOpacity", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.dashOpacity])
+                        'adaptor': (item) => new Float32Array([item.dashOpacity]),
                     }],
+
+                    // normal circle
                     ["circleDashAngle", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.circleDashAngle / 360])
-                    }]
+                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(item.rgba),
+                    }],
+                    // CIRCLE Mercator
+                    ["rgbaMercator", {
+                        'bufferManager': new BufferManager(gl, 4 * flatCircleEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillWithListData(flatCircleEdgeCount, item.rgba),
+                    }],
+                    ["circleDashAngleMercator", {
+                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(flatCircleEdgeCount, item.circleDashAngle / 360),
+                    }],
+                    ["dashOpacityMercator", {
+                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(flatCircleEdgeCount, item.dashOpacity),
+                    }],
+
                 ]
             );
         }
 
 
-        const obj = function (bufferManagerComp) {
-            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
+        const obj = function (bufferManagerComp, divisor = 1) {
+            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0, divisor }
+
         };
 
         this.lineVao = this.lineProgram.createVAO(
-            ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+            ...['centerCoords2d', 'centerCoords3d', 'targetCoords2d', 'targetCoords3d', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
         this.ringVao = this.ringProgram.createVAO(
-            ...['centerCoords', 'startAngle', 'tailAngle', 'rgba', 'radius', 'rgbaMode'].map(key => obj(this.bufferManagersCompMap.get(key))));
+            ...['centerCoords2d', 'centerCoords3d',
+                'startAngle2d',
+                'tailAngle2d',
+                'startAngle3d',
+                'tailAngle3d',
+                'rgba',
+                'radius',
+                'rgbaMode'].map(key => obj(this.bufferManagersCompMap.get(key))));
         {
-            const angledLineBuffers = ["centerCoords", "bearingAngle", "bigRadius", "rgba", "dashRatio"].map(key => obj(this.bufferManagersCompMap.get(key)));
-            // dashOpacity is same as rgba.a to eleminate effect of dashOpacity.
-            const colorBuffer = this.bufferManagersCompMap.get("rgba");
-            angledLineBuffers.push(
-                { 'buffer': colorBuffer.bufferManager.buffer, 'stride': 16, 'offset': 12 },
-            )
-            this.angledLineVao = this.angledLineProgram.createVAO(...angledLineBuffers);
+            this.bearingLineVAO = this.lineProgram.createVAO(
+                ...['centerCoords2d', 'centerCoords3d', 'bearingTargetCoords2d', 'bearingTargetCoords3d', 'bearingDashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
         }
         // centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj
         this.circleVao = this.circleProgram.createVAO(
-            ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+            ...["centerCoords2dflat", "rgbaMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+        this.circle3DVao = this.circle3DProgram.createVAO(
+            ...["centerCoords3d", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+
     }
 
 
 
     draw3D() {
         const { gl } = this;
-        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
         gl.disable(gl.DEPTH_TEST);
+        const is3D = this.globe.api_GetCurrentGeometry() === 0;
+        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
         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);
+            this.lineProgram.draw(this.bearingLineVAO, this.bufferOrchestrator.length, this._opacity * 0.8);
         }
         if (this.drawVRM) {
-            this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+            if (is3D) {
+                this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
+            } else {
+                this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+            }
         }
         if (this.drawText) {
             this._textContextInjectionMap.forEach((e) => { e.writer.draw(); });
@@ -254,7 +334,7 @@ export default class Plugin {
 
 
     deleteBulk(keys) {
-        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap, ["radius", "centerCoords", "targetCoords", "rgba"]);
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap);
         this._deleteTexts(keys);
         this.globe.DrawRender();
     }
@@ -278,7 +358,9 @@ export default class Plugin {
             data.push(this.__updateCoordsAdaptor(item));
         }
 
-        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords", "targetCoords", "startAngle", "tailAngle", "bearingAngle", "bigRadius", "radius"]);
+        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords2d", "centerCoords3d", "targetCoords2d", "targetCoords3d", "startAngle", "tailAngle",
+            "startAngle2d", "tailAngle2d", "startAngle3d", "tailAngle3d", "bearingTargetCoords2d", "bearingTargetCoords3d", "centerCoords2dflat",
+            "bearingAngle", "bigRadius", "radius"]);
         globe.DrawRender();
     }
 
@@ -292,12 +374,13 @@ export default class Plugin {
      */
     updatePartial(items, propertyIDs = [], textWriterInjectionSubSetIDs = []) { // textWriterInjectionSubSetIDs = []
         if (propertyIDs.length === 0) console.warn("updatePartial is called with no target propertyIDs");
+        const fixedPropertyIDs = this.__fixPartialProperties(propertyIDs)
         const { _textContextInjectionMap, bufferOrchestrator, bufferManagersCompMap } = this;
         const writers = textWriterGetOrThrow(this._textContextInjectionMap, textWriterInjectionSubSetIDs);
         for (let item of items) { this._insertTexts(item, writers) }
-        bufferOrchestrator.updateBulk(items, bufferManagersCompMap, propertyIDs);
+        bufferOrchestrator.updateBulk(items, bufferManagersCompMap, fixedPropertyIDs);
         // patch to update text opacity
-        for (const property of propertyIDs) {
+        for (const property of fixedPropertyIDs) {
             if (property === "rgba") {
                 _textContextInjectionMap.forEach((v) => {
                     const { writer } = v;
@@ -310,34 +393,17 @@ export default class Plugin {
 
 
     __insertAdaptor(item) {
-        const lat = radian(item.lat)
-        const long = radian(item.long)
-        const endLat = radian(item.endLat)
-        const endLong = radian(item.endLong)
+
         const rgba = item.rgba !== undefined ? item.rgba : [0, 0, 0, 0];
         const rgbaMode = item.rgbaMode !== undefined ? item.rgbaMode : 0;
         const dashRatio = item.dashRatio !== undefined ? item.dashRatio : 1.0;
         const dashOpacity = item.dashOpacity !== undefined ? item.dashOpacity : 0.9;
         const circleDashAngle = item.circleDashAngle !== undefined ? item.circleDashAngle : 360;
-        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);
-        const bearingAngle = radian(item.bearingAngle - 90);
-        let tailAngle = bearingAngle - startAngle;
-        if (tailAngle > 0) {
-            tailAngle -= Math.PI * 2;
-        }
+
+        const coordsData = this.__updateCoordsAdaptor(item);
+
         return {
-            key: item.key,
-            lat,
-            long,
-            endLat,
-            endLong,
-            bearingAngle,
-            radius,
-            bigRadius,
-            startAngle,
-            tailAngle,
+            ...coordsData,
             rgba,
             dashRatio,
             dashOpacity,
@@ -346,44 +412,96 @@ export default class Plugin {
         };
     }
 
+
     __updateCoordsAdaptor(item) {
+        const { globe } = this;
         const lat = radian(item.lat)
         const long = radian(item.long)
         const endLat = radian(item.endLat)
         const endLong = radian(item.endLong)
-        const bigRadius = item.bigRadius !== undefined ? item.bigRadius : this.globe.Math.GetDist3D(item.long, item.lat, item.endLong, item.endLat);
+        const bigRadius = item.bigRadius !== undefined ? item.bigRadius : 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);
+        const { long: bearingLong, lat: bearingLat } = globe.Math.FindPointByPolar(item.long, item.lat, bigRadius, item.bearingAngle)
+        const startAngle2d = calculateStartAngle(long, lat, endLong, endLat);
+        const bearingAngle2d = calculateStartAngle(long, lat, radian(bearingLong), radian(bearingLat))
+        let tailAngle2d = bearingAngle2d - startAngle2d;
+        if (tailAngle2d > 0) {
+            tailAngle2d -= Math.PI * 2;
+        }
         const bearingAngle = radian(item.bearingAngle - 90);
-        let tailAngle = bearingAngle - startAngle;
-        if (tailAngle > 0) {
-            tailAngle -= Math.PI * 2;
+        const startAngleOfCircle = globe.Math.GetAzimuthAngle(item.long, item.lat, item.endLong, item.endLat) //startAngle2d * 180 / Math.PI;
+        const startAngle3d = radian(startAngleOfCircle) - radian(90);
+        let tailAngle3d = bearingAngle - startAngle3d;
+        if (tailAngle3d > 0) {
+            tailAngle3d -= Math.PI * 2;
         }
+
+        const centerCoords2dflat = new Float32Array(flatCircleEdgeCount * 2);
+        const radius2d = globe.Math.GetDist2D(item.long, item.lat, item.endLong, item.endLat);
+        const pointsLongLat = globe.Math.GetEllipseGeo(
+            item.long,
+            item.lat,
+            radius2d,
+            radius2d,
+            startAngleOfCircle,
+            360 / (flatCircleEdgeCount - 2), // 1 for return to start point, 1 for cutting circles
+        );
+
+        for (let i = 1; i < flatCircleEdgeCount; i++) {
+            const { long: lg, lat: lt } = pointsLongLat[i - 1];
+            centerCoords2dflat.set(globe.api_GetMercator2DPoint(lg, lt), i * 2);
+        }
+
         return {
             key: item.key,
-            lat,
-            long,
-            endLat,
-            endLong,
+            lat: item.lat,
+            long: item.long,
+            endLat: item.endLat,
+            endLong: item.endLong,
             bearingAngle,
             radius,
             bigRadius,
-            startAngle,
-            tailAngle,
+            startAngle2d,
+            tailAngle2d,
+            startAngle3d,
+            tailAngle3d,
+            bearingLong,
+            bearingLat,
+            centerCoords2dflat
         };
     }
 
 
+    __fixPartialProperties(propertyIDs) {
+        const s = new Set("rgba", "dashOpacity", "circleDashAngle");
+        const result = []
+        for (const item of propertyIDs) {
+            result.push(item);
+            if (s.has(item)) {
+                result.push(item + "Mercator");
+            }
+        }
+        return result;
+    }
+
     //TODO free
     free() {
         if (this.isFreed) return;
         this.bufferManagersCompMap.forEach(({ bufferManager, adaptor }) => {
             bufferManager.free();
         });
-        LineOnGlobeCache.release(this.globe);
-        ringProgramCache.release(this.globe);
-        CircleCache.release(this.globe);
-        AngledLineProgramCache.release(this.globe);
+
+        const { gl, globe } = this;
+        gl.deleteVertexArray(this.lineVao);
+        gl.deleteVertexArray(this.ringVao);
+        gl.deleteVertexArray(this.bearingLineVAO);
+        gl.deleteVertexArray(this.circleVao);
+        gl.deleteVertexArray(this.circle3DVao);
+        LineOnGlobeCache.release(globe);
+        pieceOfPieProgramCache.release(globe);
+        CircleCache.release(globe);
+        AngledLineProgramCache.release(globe);
+        Circle3DCache.release(globe)
         this.isFreed = true;
     }
 
@@ -418,7 +536,7 @@ const integralSec = (angle) => {
     return Math.log(Math.tan(angle / 2 + Math.PI / 4));
 }
 
-const textWriterGetOrThrow = mapGetOrThrow("textContextInjection id does not exist in map:")
+const textWriterGetOrThrow = mapGetOrThrow("BearingLine textContextInjection id does not exist in map")
 
 const calculateStartAngle = (long, lat, endLong, endLat) => {
     const dLat = (integralSec(endLat) - integralSec(lat)); // Because lines are strectes toward poles.