@pirireis/webglobeplugins 1.2.3 → 1.2.5

package/package.json

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

package/programs/polygon-on-globe/texture-dem-triangles.js

@@ -25,6 +25,7 @@ const styleBlockManager = new UniformBlockManager('Style', [
     { name: "private_isPickedOn", type: "bool", value: new Float32Array([0]) },
     { name: "useDefaultColor", type: "bool", value: new Float32Array([0]) },
     { name: "private_changeHoverColor", type: "bool", value: new Float32Array([1]) },
+    { name: "useTiltOpacity", type: "bool", value: new Float32Array([1.0]) },
 ], uniformBindingPoints.style);
 const vertexShaderSource = `#version 300 es
 #pragma vscode_glsllint_stage : vert
@@ -99,7 +100,7 @@ void main() {
     }
 
     
-    v_color.a *= opacity; 
+    v_color.a *= opacity * (useTiltOpacity ? tilt_opacity : 1.0); 
     gl_PointSize = u_pointSize;
 }
 `;

package/programs/totems/camerauniformblock.js

@@ -15,12 +15,18 @@ layout(std140) uniform CameraUniformBlock {
     float world_tilt; // 4 bytes             168
     float world_north_angle; // 4 bytes      172
     vec2 world_center_radian; // 8 bytes     176
-    float NaN; // padding to 16 bytes         184
+    float tilt_opacity; // padding to 16 bytes         184
 };  // 188 bytes total
 `;
 // TODO: Remove NaN
 const Radian = Math.PI / 180.0;
 const _0vec3 = [0, 0, 0];
+function tiltOpacity(tiltAngle) {
+    const tilt = tiltAngle / 72 * 87;
+    // const tiltFactor = Math.min(1, Math.sqrt(1 / Math.tan(Radian * tilt)));
+    const tiltFactor = Math.sqrt(Math.cos(Radian * tilt));
+    return tiltFactor; // Ensure opacity is not less than 0.1
+}
 export class CameraUniformBlockTotem {
     id;
     description;
@@ -124,6 +130,8 @@ The following is the glsl uniform block: ${CameraUniformBlockString}`;
             Radian * CenterLat,
         ]));
         // this._frustumPlanes = getFrustumPlanes(projection, translate);
+        const tilt_opacity = tiltOpacity(Tilt);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 184, new Float32Array([tilt_opacity]));
         gl.bindBuffer(gl.UNIFORM_BUFFER, null);
         // isMoved
         const currentLOD = globe.api_GetCurrentLODWithDecimal();

package/semiplugins/shape-on-terrain/terrain-polygon/terrain-polygon.js

@@ -19,6 +19,7 @@ export class TerrainPolygonSemiPlugin {
             hoverColor: [1, 0, 0, 1],
             opacity: 1.0,
             useDefaultColor: false,
+            useTiltOpacity: true,
         },
         edgeStyle: {
             defaultColor: [1, 1, 0, 1],
@@ -26,6 +27,7 @@ export class TerrainPolygonSemiPlugin {
             changeColorOnHover: true,
             opacity: 1.0,
             useDefaultColor: true,
+            useTiltOpacity: true,
         },
         // Global opacity multiplier applied on top of style opacities
         opacity: 1.0,
@@ -115,6 +117,7 @@ export class TerrainPolygonSemiPlugin {
             this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([1.0]));
             this._uboHandler.updateSingle("hoverColor", new Float32Array(this._options.polygonStyle.hoverColor));
             this._uboHandler.updateSingle("private_changeHoverColor", new Float32Array([this._options.polygonStyle.changeColorOnHover ? 1 : 0]));
+            this._uboHandler.updateSingle("useTiltOpacity", new Float32Array([this._options.polygonStyle.useTiltOpacity ? 1 : 0]));
         }
         else {
             this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([0.0]));
@@ -126,6 +129,8 @@ export class TerrainPolygonSemiPlugin {
             this._uboForRealEdgeArcs.updateSingle("opacity", this._effectiveOpacity("edgeArc"));
             this._uboForRealEdgeArcs.updateSingle("private_isPickedOn", new Float32Array([0.0]));
             this._uboForRealEdgeArcs.updateSingle("private_changeHoverColor", new Float32Array([this._options.edgeStyle.changeColorOnHover ? 1 : 0]));
+            this._uboForRealEdgeArcs.updateSingle("hoverColor", new Float32Array(this._options.edgeStyle.hoverColor));
+            this._uboForRealEdgeArcs.updateSingle("useTiltOpacity", new Float32Array([this._options.edgeStyle.useTiltOpacity ? 1 : 0]));
             this._drawRealEdgeArcs.elementBuffer = gl.createBuffer();
         }
         if (this._options.variativeColorsOn) {
@@ -162,7 +167,7 @@ export class TerrainPolygonSemiPlugin {
             ...p,
             geometry: p.geometry.map((g) => ({
                 ...g,
-                vertices: g.vertices.map((v) => roundTo7(v)),
+                vertices: g.vertices.map((v) => roundTo6(v)),
             })),
         }));
         filteredPolygons = this._indexPolygonMap.insertBulk(filteredPolygons);
@@ -480,11 +485,9 @@ function getGlStates(gl) {
         texture2DArray: gl.getParameter(gl.TEXTURE_BINDING_2D_ARRAY),
     };
 }
-function roundTo7(n) {
-    // Keep at most 7 digits after the decimal (degrees), then quantize to float32
+function roundTo6(n) {
+    // Keep at most 6 digits after the decimal (degrees), then quantize to float32
     // to match GPU attribute precision and make identity comparisons stable.
-    const rounded = Math.round(n * 1e7) / 1e7;
+    const rounded = Math.round(n * 1e6) / 1e6;
     return rounded;
-    // return Math.round(rounded);
-    // return Math.fround(n);
 }