feat(PlanarView): add clippingPlanes options

Author: ftoromanoff

src/Core/Prefab/Planar/PlanarLayer.js

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 
 import TiledGeometryLayer from 'Layer/TiledGeometryLayer';
-import { globalExtentTMS } from 'Core/Geographic/Extent';
+import { globalExtentTMS, schemeTiles } from 'Core/Geographic/Extent';
 import CRS from 'Core/Geographic/Crs';
 import PlanarTileBuilder from './PlanarTileBuilder';
 
@@ -39,19 +39,47 @@ class PlanarLayer extends TiledGeometryLayer {
      */
     constructor(id, extent, object3d, config = {}) {
         const tms = CRS.formatToTms(extent.crs);
-        const tileMatrixSets = [tms];
+
+        const scheme = schemeTiles.get(tms);
+        let schemeTile;
+        let clipPlanes = [];
+        if (scheme) {
+            schemeTile = globalExtentTMS.get(extent.crs).subdivisionByScheme(scheme);
+            clipPlanes = [
+                new THREE.Plane(new THREE.Vector3(1, 0, 0), -extent.west),
+                new THREE.Plane(new THREE.Vector3(-1, 0, 0), extent.east),
+                new THREE.Plane(new THREE.Vector3(0, -1, 0), extent.north),
+                new THREE.Plane(new THREE.Vector3(0, 1, 0), -extent.south),
+            ];
+            config.materialOptions = { clippingPlanes: clipPlanes };
+        } else {
+            schemeTile = [extent];
+        }
+
         if (!globalExtentTMS.get(extent.crs)) {
             // Add new global extent for this new crs projection.
             globalExtentTMS.set(extent.crs, extent);
         }
-        config.tileMatrixSets = tileMatrixSets;
-        super(id, object3d || new THREE.Group(), [extent], new PlanarTileBuilder({ crs: extent.crs }), config);
+
+        config.tileMatrixSets = [tms];
+
+        const builder = new PlanarTileBuilder({ crs: extent.crs });
+
+        super(id, object3d || new THREE.Group(), schemeTile, builder, config);
+
         this.isPlanarLayer = true;
         this.extent = extent;
         this.minSubdivisionLevel = this.minSubdivisionLevel == undefined ? 0 : this.minSubdivisionLevel;
-        this.maxSubdivisionLevel = this.maxSubdivisionLevel == undefined ? 5 : this.maxSubdivisionLevel;
+        this.maxSubdivisionLevel = this.maxSubdivisionLevel == undefined ? 19 : this.maxSubdivisionLevel;
         this.maxDeltaElevationLevel = this.maxDeltaElevationLevel || 4.0;
     }
+
+    culling(node, camera) {
+        if (super.culling(node, camera)) {
+            return true;
+        }
+        return !node.extent.intersectsExtent(this.extent);
+    }
 }
 
 export default PlanarLayer;

src/Renderer/LayeredMaterial.js

@@ -98,6 +98,7 @@ const fragmentShader = [];
 class LayeredMaterial extends THREE.ShaderMaterial {
     #_visible = true;
     constructor(options = {}, crsCount) {
+        options.clipping = options.clipping || options.clippingPlanes !== undefined;
         super(options);
 
         nbSamplers = nbSamplers || [samplersElevationCount, getMaxColorSamplerUnitsCount()];

src/Renderer/Shader/TileFS.glsl

@@ -8,13 +8,15 @@
 #include <itowns/lighting_pars_fragment>
 #endif
 #include <itowns/mode_pars_fragment>
+#include <clipping_planes_pars_fragment>
 
 uniform vec3        diffuse;
 uniform float       opacity;
 varying vec3        vUv; // uv.x/uv_1.x, uv.y, uv_1.y
 varying vec2        vHighPrecisionZW;
 
 void main() {
+    #include <clipping_planes_fragment>
     #include <logdepthbuf_fragment>
 
 #if MODE == MODE_ID

src/Renderer/Shader/TileVS.glsl

@@ -2,6 +2,7 @@
 #include <common>
 #include <itowns/elevation_pars_vertex>
 #include <logdepthbuf_pars_vertex>
+#include <clipping_planes_pars_vertex>
 #if NUM_CRS > 1
 attribute float     uv_1;
 #endif
@@ -15,10 +16,12 @@ varying vec3        vUv;
 varying vec3        vNormal;
 #endif
 void main() {
+
         #include <begin_vertex>
         #include <itowns/elevation_vertex>
         #include <itowns/geoid_vertex>
-        #include <project_vertex>
+        #include <project_vertex> // mvPosition
+        #include <clipping_planes_vertex>
         #include <logdepthbuf_vertex>
         vHighPrecisionZW = gl_Position.zw;
 #if MODE == MODE_FINAL

src/Renderer/c3DEngine.js

@@ -87,6 +87,7 @@ class c3DEngine {
                 alpha: options.alpha,
                 logarithmicDepthBuffer: options.logarithmicDepthBuffer,
             });
+            this.renderer.localClippingEnabled = true;
             this.renderer.domElement.style.position = 'relative';
             this.renderer.domElement.style.zIndex = 0;
             this.renderer.domElement.style.top = 0;