@pirireis/webglobeplugins 1.2.17 → 1.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "1.2.17",
+    "version": "1.2.19",
     "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;
@@ -397,32 +398,59 @@ export class TerrainPolygonSemiPlugin {
     }
     draw3D() {
         const gl = this.globe.gl;
+        const { Tilt } = this.globe.api_GetCurrentLookInfo();
+        const useDepth = Tilt > DEPTH_START_ANGLE;
         gl.disable(gl.DEPTH_TEST);
         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);
+        }
         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);
     }