Cut complex polygon in terrain

CesiumJS
1

i have polygon with coordinates and my goal is to cut/clip this polygon in terrain. Is it possible to not have terrain in this area? Need only ellipsoid’s surface

image
image1004×667 103 KB

i was working around this code:

  function clipPlane(points){
      console.log(points)
      // viewer.entities.removeAll();
     var lol = viewer.entities.add({
                            polygon: {
                                //perPositionHeight: false,
                                // outline: true,
                                // outlineColor: Cesium.Color.RED,
                                outlineWidth: 10,
                                hierarchy: points,
                                clampToGround: true,
                                material: new Cesium.ColorMaterialProperty(Cesium.Color.GREEN.withAlpha(0.8))
                            }
                        });
    var pointsLength = points.length;
    viewer.zoomTo(lol)
    // Create center points for each clipping plane
    var clippingPlanes = [];
    for (var i = 0; i < pointsLength; ++i) {
 
    var nextIndex = (i + 1) % pointsLength;
        var midpoint = Cesium.Cartesian3.add(points[i], points[nextIndex], new Cesium.Cartesian3());
        midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint);

        var up = Cesium.Cartesian3.normalize(midpoint, new Cesium.Cartesian3());
        var right = Cesium.Cartesian3.subtract(points[nextIndex], midpoint, new Cesium.Cartesian3());
        right = Cesium.Cartesian3.normalize(right, right);

        var normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3());
        normal = Cesium.Cartesian3.normalize(normal, normal);

        // Compute distance by pretending the plane is at the origin
        var originCenteredPlane = new Cesium.Plane(normal, 0.0);
        var distance = Cesium.Plane.getPointDistance(originCenteredPlane, midpoint);

        clippingPlanes.push(new Cesium.ClippingPlane(normal, distance));
    }
    viewer.scene.globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes : clippingPlanes,
        edgeWidth: true,
        edgeColor: Cesium.Color.WHITE,
        enabled : true
    });

}

but this is not compatible for complex polygons (like mine), only with simple figures like this:

image
image995×626 74.9 KB

Is there any others possibilities to achieve my goal?

2

Hi @Dovydas

This Sandcastle demonstrates usage of a complex polygon to clip the terrain. Select the “St. Helens” option in the drop down on the top left.

Screenshot from 2022-06-24 14-26-42
Screenshot from 2022-06-24 14-26-421920×1080 373 KB

3

any ideas why it’s not working properly? Polygon not showed.
my code:

const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});

const globe = viewer.scene.globe;

  // For tracking state when switching exampleTypes
  let clippingPlanesEnabled = true;
  let edgeStylingEnabled = true;
  
  function loadStHelens() {
    // Create clipping planes for polygon around area to be clipped.
    const points= new Cesium.Cartesian3.fromDegreesArray([
    25.30231247043702, 54.737551214420172 , 
    25.310074626511312, 54.737467596240457 , 
    25.317836742485923, 54.737383481327129 ,  
    25.317690962283628, 54.732892161288383 ,  
    25.325452179885058, 54.732807563631411 ,  
    25.333213356927597, 54.732722469334171 ,  
    25.340974493174173, 54.732636878402282 ,  
    25.340826179941942, 54.728145596942824 ,  
    25.34858641740227, 54.728059523609517 ,  
    25.348437287671519, 54.72356825275412 , 
    25.348288199180001, 54.719076978275325 , 
    25.3405296765151, 54.719163023163297 ,  
    25.340381486289676, 54.714671730843051 , 
    25.340233337035706, 54.710180434902334 , 
    25.347990145852517, 54.710094418447227 ,  
    25.347841180985615, 54.705603133097725 ,
    25.340085228737809, 54.70568913534111 , 
    25.332329235549288, 54.705774641447448 , 
    25.33218202453989, 54.70128332413892 , 
    25.332034854219337, 54.696792003212835 ,
    25.339789134948724, 54.696706525356774 , 
    25.339641149426804, 54.692215214933476 , 
    25.339493204799499, 54.687723900889324 , 
    25.339345301051438, 54.683232583224232 , 
    25.331593587238018, 54.683318018728222 , 
    25.331446579520147, 54.678826683330975 , 
    25.331299612414824, 54.674335344315701 , 
    25.339049616131753, 54.674249937030886 , 
    25.338901834929505, 54.669758608502462 ,  
    25.331152685906812, 54.669844001682385 , 
    25.331005799980876, 54.665352655430851 ,  
    25.323257464849743, 54.665437539102697 , 
    25.323111473728478, 54.660946175215926 ,  
    25.322965522923177, 54.656454807713928 , 
    25.322819612418694, 54.65196343659656 ,  
    25.322673742199939, 54.647472061863759 , 
    25.314928782335691, 54.647556394401185 , 
    25.307183782436272, 54.647640231847966 ,  
    25.299438742737127, 54.647723574198487 , 
    25.299582052272626, 54.65221499046433 , 
    25.291836119418281, 54.652297851393989 , 
    25.284090147220432, 54.652380217134585 , 
    25.276344135914584, 54.65246208768064 , 
    25.268598085736262, 54.652543463026632 ,
    25.260851996921126, 54.652624343167219 , 
    25.260991076756859, 54.657115823429194 , 
    25.253244095641097, 54.657196221634194 , 
    25.245497076345334, 54.65727612454117 , 
    25.245359704322585, 54.652784617810333 , 
    25.2452223702299, 54.648293107493814 ,  
    25.245085074053105, 54.643801593591597 ,
    25.244947815777977, 54.639310076103577 , 
    25.237204172836115, 54.639389431277166 , 
    25.237067805434418, 54.634897897102938 , 
    25.229324977840562, 54.634976744276067 , 
    25.229189500841706, 54.630485193502878 ,  
    25.221447488623955, 54.630563532836483 , 
    25.213705439252621, 54.630641377341078 , 
    25.205963352962918, 54.630718727011484 ,
    25.198221229990029, 54.630795581842555 ,
    25.190479070569182, 54.630871941829177 , 
    25.190610283535381, 54.63536355645661 ,  
    25.182867235054172, 54.635439434119483 , 
    25.175124150581855, 54.635514816846097 ,
    25.16738103035382, 54.635589704631371 , 
    25.167509720257257, 54.640081353033494 , 
    25.159765711385671, 54.640155758156055 , 
    25.159893583464353, 54.644647415286542 , 
    25.160021490854582, 54.649139068861942 , 
    25.160149433569643, 54.653630718882333 , 
    25.160277411622754, 54.658122365347822 , 
    25.160405425027193, 54.662614008258551 , 
    25.160533473796203, 54.667105647614619 , 
    25.168282606353173, 54.667031168733665 , 
    25.168411545272882, 54.671522792232651 , 
    25.168540519819729, 54.676014412174467 , 
    25.176291326517866, 54.675939413003661 , 
    25.176421191936864, 54.680431016998625 , 
    25.176551093245944, 54.684922617433926 ,  
    25.176681030458578, 54.689414214309664 , 
    25.176811003588302, 54.693905807625967 ,  
    25.169056774546224, 54.693980856372356 ,  
    25.161302509810071, 54.694055409109147 , 25.153548209616321, 54.694129465831388 , 25.153675650105676, 54.698621092544748 , 25.153803125829384, 54.703112715707007 ,  25.153930636800691, 54.707604335318287 ,  25.154058183032841, 54.712095951378679 , 25.154185764539037, 54.716587563888289 ,  25.154313381332603, 54.721079172847325 ,  25.162072822298452, 54.721005042663293 ,  25.162201332016956, 54.725496635818658 ,  25.169961595056222, 54.725421996793258 ,  25.177721822307422, 54.725346861184484 ,  25.185482013533509, 54.7252712289974 , 25.193242168497349, 54.725195100237102 ,  25.201002286961916, 54.725118474908662 ,  25.201135121336467, 54.729610002001408 ,  25.201267992461197, 54.734101525527386 ,  25.201400900349888, 54.738593045486624 , 25.201533845016403, 54.743084561879286 ,  25.201666826474565, 54.747576074705449 ,  25.209431199474839, 54.747498889045929 , 25.209565076705012, 54.751990385543614 ,  25.217330271614969, 54.75191269007172 ,  25.217465045092247, 54.756404170153289 ,  25.225231061883914, 54.756325964707166 ,  25.232997041129387, 54.756247262139091 , 25.233133570728786, 54.760738712702626 ,  25.240900371575911, 54.76065949992158 ,  25.248667134387244, 54.760579789946988 ,  25.248805421016897, 54.765071210652494 ,  25.256573005149228, 54.764990990226202 , 25.256712189899215, 54.769482394082054 ,  25.264480595323668, 54.769401663042196 , 25.272248961969908, 54.769320434660607 , 25.280017289600138, 54.769238708942822 ,  25.28778557797645, 54.769156485894214 ,  25.295553826860939, 54.769073765520446 , 25.295410343168474, 54.764582429229691 ,  25.295266899190711, 54.760091089337905 , 25.303033389095255, 54.760007899160499 ,  25.30288912554872, 54.755516569421076 ,  25.310654716262256, 54.755432895929481 ,  25.310509633622207, 54.75094157641837 ,  25.310364591127097, 54.746450253299912 ,  25.302600718207998, 54.74653389912946 ,  25.302456574383807, 54.742042558577054 ,  25.30231247043702, 54.737551214420172 ])
    const points4= new Cesium.Cartesian3.fromDegreesArray([
     25.30231247043702, 54.737551214420172 , 
     25.190479070569182, 54.630871941829177 ,
     25.185482013533509, 54.7252712289974 ,
     25.264480595323668, 54.769401663042196 
    ]);
  
    // Create center points for each clipping plane
    const clippingPlanes = [];
    for (let i = 0; i < pointsLength; ++i) {
      const nextIndex = (i + 1) % pointsLength;
      let midpoint = Cesium.Cartesian3.add(
        points[i],
        points[nextIndex],
        new Cesium.Cartesian3()
      );
      console.log(midpoint)
      midpoint = Cesium.Cartesian3.multiplyByScalar(
        midpoint,
        0.5,
        midpoint
      );
  
      const up = Cesium.Cartesian3.normalize(
        midpoint,
        new Cesium.Cartesian3()
      );
  
      console.log(up)
      let right = Cesium.Cartesian3.subtract(
        points[nextIndex],
        midpoint,
        new Cesium.Cartesian3()
      );
      right = Cesium.Cartesian3.normalize(right, right);
  
      let normal = Cesium.Cartesian3.cross(
        right,
        up,
        new Cesium.Cartesian3()
      );
      normal = Cesium.Cartesian3.normalize(normal, normal);
      console.log("////////////////////////////////////////")
      console.log(normal)
  
      // Compute distance by pretending the plane is at the origin
      const originCenteredPlane = new Cesium.Plane(normal, 0.0);
      const distance = Cesium.Plane.getPointDistance(
        originCenteredPlane,
        midpoint
      );
  
      clippingPlanes.push(new Cesium.ClippingPlane(normal, distance));
    }
    globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
      planes: clippingPlanes,
      edgeWidth: edgeStylingEnabled ? 1.0 : 0.0,
      edgeColor: Cesium.Color.WHITE,
      enabled: clippingPlanesEnabled,
    });
    globe.backFaceCulling = true;
    globe.showSkirts = true;
  
  }
  
  loadStHelens();

i also tried with smaller amount of points and didn’t get needed results as well.
First of all i was not able to see polygon from coordinates area, only could see something when drastically zoomed out (white dot):
image
from other planet side i was able to zoom and see polygon:
image

but when i use a lot of points (in my code), can’t even get these results like with 4 points.

4

Polygon has to be convex since clippingPlanes (used under the hood to convert polyline to a set of clipping planes) have infinite extent.