@pirireis/webglobeplugins 1.2.17 → 1.2.20

package/package.json

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

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

@@ -16,6 +16,7 @@ const uniformBindingPoints = {
 };
 // last value of uint16 is 65535
 export const IndexAttributeEscapeValue = -1;
+export const DEPTH_START_ANGLE = 60;
 const styleBlockManager = new UniformBlockManager('Style', [
     { name: "defaultColor", type: "vec4", value: new Float32Array([0.0, 0.0, 0.0, 0.0]) },
     { name: "hoverColor", type: "vec4", value: new Float32Array([0, 0, 0, 0]) },
@@ -95,8 +96,11 @@ void main() {
         if (!hasDemSample) {
             altitude = 0.0 / 0.0;
         }
-
-        vec3 position = a_position * (elevation + altitude * elevation_scale);
+        float elevation_for_z_fighting = 0.0;
+        if ( world_tilt > ${DEPTH_START_ANGLE * (3.14159265 / 180.0)} ) {
+            elevation_for_z_fighting = (23.0 - z_level) * 0.012;
+        }
+        vec3 position = a_position * (elevation + altitude * elevation_scale + elevation_for_z_fighting);
         gl_Position = cartesian3DToGLPosition(position);
     } else {
         vec2 mercatorXY = a_xy * POLE_BY_PI;

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

@@ -6,6 +6,7 @@ import { IndexPolygonMap } from "./data/index-polygon-map";
 import { TestRecords } from "./test-records";
 import { defaultblendfunction } from "../../../util/globe-default-gl-states";
 import { opacityCheck } from "../../../util/check/typecheck";
+import { DEPTH_START_ANGLE } from "../../../programs/polygon-on-globe/texture-dem-triangles";
 export class TerrainPolygonSemiPlugin {
     id;
     globe = null;
@@ -297,6 +298,8 @@ export class TerrainPolygonSemiPlugin {
         if (this._options.pickable === false) {
             throw new Error("TerrainPolygonSemiPlugin is not pickable. Set pickable option to true on construction to enable picking.");
         }
+        if (!this._useDepth())
+            return null;
         return this._lastPickedPolygon;
     }
     getPolygon(key) {
@@ -395,34 +398,75 @@ export class TerrainPolygonSemiPlugin {
             this._pickerDisplayer?.resize();
         }
     }
+    _useDepth() {
+        const { Tilt } = this.globe.api_GetCurrentLookInfo();
+        const useDepth = Tilt > DEPTH_START_ANGLE;
+        if (this._lastPickedPolygon !== null && useDepth) {
+            this._lastPickedPolygon = null;
+            this.globe.DrawRender();
+            this._uboHandler.updateSingle("private_pickedIndex", new Float32Array([IndexAttributeEscapeValue]));
+        }
+        return useDepth;
+    }
+    getDepthStartAngle() {
+        return DEPTH_START_ANGLE;
+    }
     draw3D() {
         const gl = this.globe.gl;
-        gl.disable(gl.DEPTH_TEST);
+        const useDepth = this._useDepth();
         gl.enable(gl.BLEND);
         defaultblendfunction(gl);
+        // Use LEQUAL. Since Poly didn't write depth, lines test against Terrain.
+        // Vertices match terrain, so LEQUAL passes.
+        // FIX: Line vs Terrain z-fighting. 
+        // polygonOffset does NOT work reliably for lines in WebGL implementations.
+        // We use gl.depthRange to bias the depth values of the lines slightly towards the camera.
+        // This pulls the lines "forward" mathematically without changing geometry.
         // drawPoints 
         if (this._options.showTesselationPoints) {
             this._program.draw(this._attributeLoader, this._drawPointsRangeIndexParams, this._uboHandler);
         }
-        if (this._pickerDisplayer && !this._options.pickablePause) {
+        if (this._pickerDisplayer && !this._options.pickablePause && !useDepth) {
             this._pickerDisplayer.bindFBO();
             this._pickerDisplayer.clearTextures();
-            // gl.enable(gl.DEPTH_TEST);
         }
         gl.frontFace(gl.CW);
+        let prevDepthMask;
+        let origDepthRange;
+        if (useDepth) {
+            // --- FIX START: Poly/Edge Z-Fighting ---
+            // 1. Enable Depth Test so offset works against terrain
+            gl.enable(gl.DEPTH_TEST);
+            // 2. Pull polygons closer to camera to avoid terrain fighting
+            gl.enable(gl.POLYGON_OFFSET_FILL);
+            gl.polygonOffset(-2.0, -2.0);
+            origDepthRange = gl.getParameter(gl.DEPTH_RANGE);
+            gl.depthRange(origDepthRange[0], origDepthRange[1] - 0.0017);
+            // 3. Disable Depth Write so edges (drawn later) can overlap cleanly without fighting
+            //    (Edges will test against Terrain depth, which they pass/equal)
+            prevDepthMask = gl.getParameter(gl.DEPTH_WRITEMASK);
+            gl.depthMask(false);
+        }
+        else {
+            gl.disable(gl.DEPTH_TEST);
+        }
         this._program.draw(this._attributeLoader, this._drawRangeIndexParams, this._uboHandler);
+        // Restore states
+        // --- FIX END ---
         gl.frontFace(gl.CCW);
-        if (this._pickerDisplayer && !this._options.pickablePause) {
+        if (this._pickerDisplayer && !this._options.pickablePause && !useDepth) {
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
             this._pickerDisplayer.drawColorTexture();
             this._selfSelect();
         }
         if (this._options.drawEdges) {
-            gl.disable(gl.DEPTH_TEST);
-            // gl.enable(gl.POLYGON_OFFSET_FILL);
-            // gl.polygonOffset(-3.0, -3.0);
             this._program.draw(this._attributeLoader, this._drawRealEdgeArcs, this._uboForRealEdgeArcs);
-            // gl.disable(gl.POLYGON_OFFSET_FILL);
+            // Restore original depth range immediately
+        }
+        if (useDepth) {
+            gl.depthMask(prevDepthMask);
+            gl.depthRange(origDepthRange[0], origDepthRange[1]);
+            gl.disable(gl.POLYGON_OFFSET_FILL);
         }
         gl.enable(gl.DEPTH_TEST);
     }
@@ -472,26 +516,6 @@ function inputCheck(input) {
     }
     return true;
 }
-function getGlStates(gl) {
-    return {
-        depthTest: gl.isEnabled(gl.DEPTH_TEST),
-        cullFace: gl.isEnabled(gl.CULL_FACE),
-        blend: gl.isEnabled(gl.BLEND),
-        scissorTest: gl.isEnabled(gl.SCISSOR_TEST),
-        depthMask: gl.getParameter(gl.DEPTH_WRITEMASK),
-        colorMask: gl.getParameter(gl.COLOR_WRITEMASK),
-        frontFace: gl.getParameter(gl.FRONT_FACE),
-        viewport: gl.getParameter(gl.VIEWPORT),
-        scissorBox: gl.getParameter(gl.SCISSOR_BOX),
-        currentProgram: gl.getParameter(gl.CURRENT_PROGRAM),
-        vao: gl.getParameter(gl.VERTEX_ARRAY_BINDING),
-        arrayBuffer: gl.getParameter(gl.ARRAY_BUFFER_BINDING),
-        elementArrayBuffer: gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING),
-        framebuffer: gl.getParameter(gl.FRAMEBUFFER_BINDING),
-        activeTexture: gl.getParameter(gl.ACTIVE_TEXTURE),
-        texture2DArray: gl.getParameter(gl.TEXTURE_BINDING_2D_ARRAY),
-    };
-}
 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.

package/util/picking/picker-displayer.js

@@ -1,8 +1,3 @@
-/**
- * add implicit texture display program for color
- * add fence on query return and return id.
- * support R32I, R32F, R16UI, R32UI
- */
 import { textureOnCanvasProgramCache } from "../programs/draw-texture-on-canvas";
 import { fence } from "./fence";
 const ESCAPE_VALUE = -1;