feat(core): optimization subdivision with horizon

src/Core/Prefab/Globe/GlobeLayer.js

@@ -13,6 +13,7 @@ let magnitudeSquared = 0.0;
 
 // vectors for operation purpose
 const scaledHorizonCullingPoint = new THREE.Vector3();
+const scaledToSphere = new THREE.Vector3(1.0, 1.0, ellipsoidSizes.x / ellipsoidSizes.z);
 
 /**
  * @property {boolean} isGlobeLayer - Used to checkout whether this layer is a
@@ -89,6 +90,16 @@ class GlobeLayer extends TiledGeometryLayer {
         cameraPosition.copy(context.camera.camera3D.position).applyMatrix4(worldToScaledEllipsoid);
         magnitudeSquared = cameraPosition.lengthSq() - 1.0;
 
+        // pre-horizon subdivision
+        scaledHorizonCullingPoint.copy(context.camera.camera3D.position).multiply(scaledToSphere);
+
+        const distanceToCenter = scaledHorizonCullingPoint.length();
+        const distanceToHorizon = (distanceToCenter ** 2 - ellipsoidSizes.x ** 2) ** 0.5;
+        const distanceToGround = Math.max(distanceToCenter - ellipsoidSizes.x, 0);
+        const factor = Math.min(distanceToGround / ellipsoidSizes.x, 1.0) ** 0.25;
+        // context.horizon = distanceToHorizon - (distanceToHorizon - distanceToGround) * 0.75 * (1 - factor);
+        context.horizon = distanceToHorizon - (distanceToHorizon - distanceToGround) * 0.2 * (1 - factor);
+
         return super.preUpdate(context, changeSources);
     }
 

src/Core/Prefab/Planar/PlanarLayer.js

@@ -45,6 +45,15 @@ class PlanarLayer extends TiledGeometryLayer {
         this.maxSubdivisionLevel = this.maxSubdivisionLevel || 5.0;
         this.maxDeltaElevation = this.maxDeltaElevation || 4.0;
     }
+
+    preUpdate(context, changeSources) {
+        const fov = THREE.Math.degToRad(context.camera.camera3D.fov * 0.5);
+        const ratioHorizon = 0.1;
+        const distanceToGround = context.camera.camera3D.position.z;
+        context.horizon = distanceToGround / Math.sin(Math.atan(ratioHorizon * Math.tan(fov)));
+
+        return super.preUpdate(context, changeSources);
+    }
 }
 
 export default PlanarLayer;

src/Layer/TiledGeometryLayer.js

@@ -234,6 +234,10 @@ class TiledGeometryLayer extends GeometryLayer {
                     node.material.fogDistance = context.view.fogDistance;
                 }
 
+                if (context.horizon != undefined) {
+                    node.material.horizonDistance = context.horizon;
+                }
+
                 if (!requestChildrenUpdate) {
                     return ObjectRemovalHelper.removeChildren(this, node);
                 }
@@ -396,14 +400,21 @@ class TiledGeometryLayer extends GeometryLayer {
             0.0,
             context.camera.camera3D.position.distanceTo(boundingSphereCenter) - node.boundingSphere.radius * subdivisionVector.x);
 
+        let o = 0.0;
+        if (context.horizon) {
+            const a = context.horizon / (800.0 * 6378137.0);
+            o += 10.0 / (1.0 + Math.exp(-a * (distance - context.horizon)));
+            // return false;
+        }
+
         // Size projection on pixel of bounding
         node.screenSize = context.camera._preSSE * (2 * node.boundingSphere.radius * subdivisionVector.x) / distance;
 
         // The screen space error is calculated to have a correct texture display.
         // For the projection of a texture's texel to be less than or equal to one pixel
         const sse = node.screenSize / (SIZE_DIAGONAL_TEXTURE * 2);
 
-        return this.sseSubdivisionThreshold < sse;
+        return this.sseSubdivisionThreshold * (1 + o) < sse;
     }
 }
 

src/Renderer/LayeredMaterial.js

@@ -153,6 +153,7 @@ class LayeredMaterial extends THREE.RawShaderMaterial {
         setUniformProperty(this, 'overlayAlpha', 0);
         setUniformProperty(this, 'overlayColor', new THREE.Color(1.0, 0.3, 0.0));
         setUniformProperty(this, 'objectId', 0);
+        setUniformProperty(this, 'horizonDistance', 1000000000.0);
 
         // > 0 produces gaps,
         // < 0 causes oversampling of textures

src/Renderer/Shader/TileFS.glsl

@@ -11,6 +11,7 @@
 
 uniform vec3        diffuse;
 uniform float       opacity;
+uniform float       horizonDistance;
 varying vec3        vUv; // WGS84.x/PM.x, WGS84.y, PM.y
 
 void main() {
@@ -52,5 +53,15 @@ void main() {
     #include <itowns/lighting_fragment>
     #include <itowns/overlay_fragment>
 
+    float a = horizonDistance / ( 800.0 * 6378137.0);
+    float factor = 10.0 / (1.0 + exp(-a*(fogDepth - horizonDistance)));
+
+    gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(1.0, 0.0, 0.0), factor);
+
+
+    // if (fogDepth > horizonDistance && fogDepth < (horizonDistance + 20000.0)) {
+    //     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+    // }
+
 #endif
 }

src/Renderer/Shader/TileVS.glsl

@@ -25,5 +25,6 @@ void main() {
         #include <fog_vertex>
         vUv = vec3(uv_wgs84, (uv_pm > 0.) ? uv_pm : uv_wgs84.y); // set pm=wgs84 if pm=0 (not computed)
         vNormal = normalize ( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
+        fogDepth = length(mvPosition.xyz);
 #endif
 }