Creating a Section Box from Clipping Planes

CesiumJS
1

I’m attempting to create a section box from a tilesets clipping plane collection, where only the geometry inside the box is visible by pushing/pulling the faces. Similar to below:
image

To get all 6 faces, I have been creating a clipping plane in each dimension using the tilesets bounding sphere:

private createTilesetClippingPlanes(tileset: Cesium3DTileset): ClippingPlaneCollection {

const boundingSphereRadius = tileset.boundingSphere.radius;

const topPlane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1), boundingSphereRadius);
topPlane.face = ClippingPlaneFace.Top;
const bottomPlane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, 1), boundingSphereRadius);
bottomPlane.face = ClippingPlaneFace.Bottom;
const frontPlane = new Cesium.ClippingPlane(new Cesium.Cartesian3(-1, 0.0, 0.0), boundingSphereRadius);
frontPlane.face = ClippingPlaneFace.Front;
const backPlane = new Cesium.ClippingPlane(new Cesium.Cartesian3(1, 0.0, 0.0), boundingSphereRadius);
backPlane.face = ClippingPlaneFace.Back;
const leftPlane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1, 0.0), boundingSphereRadius);
leftPlane.face = ClippingPlaneFace.Left;
const rightPlane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1, 0.0), boundingSphereRadius);
rightPlane.face = ClippingPlaneFace.Right;

// create the clipping planes
const clippingPlanes: ClippingPlaneCollection = new Cesium.ClippingPlaneCollection({
  planes : [
    topPlane,
    bottomPlane,
    frontPlane,
    backPlane,
    leftPlane,
    rightPlane
  ],
  unionClippingRegions: true,
  enabled : false
});

return clippingPlanes;
}

I then add the planes to the viewers entity collection, where the dimensions of the plane equal the diameter of the bounding sphere and enable them when I want to section the tileset. I’ve been using this sandcastle to help me out.

In order to achieve this, when a face is pulled/pushed (lets say the top face), the side faces will need their origins updated along with their dimensions updated to either stretch or shrink to the edges of the top face.

But it doesn’t look like I can edit the dimensions / origin of the planes. Is this possible? I have access to the analytics SDK and attempted to use the ClippingPlaneEditor, but this was too restrictive. I’ve also noticed there is a CullingVolume in the SDK but haven’t figured out how to use this yet.

Is there anything I can do to achieve the above (or similar)? Anything in the SDK that can help me out?

Thanks for your time,
Tom

2

Hi,

I couldn’t edit clipping planes either, but it’s reasonably fast so I simply loop creating new clipping planes continously (assuming the internal API marks it as dirty, and update it accordingly on the next render while discarding the old). I haven’t measured the penalty for it, though.

Cheers,

Alex

3

That’s great thanks @Alexander_Johannesen. I actually ended up being able to edit the planes by grabbing the plane entity and updating the private dimension and position values.

Editing the dimensions of the planes was easy enough, but updating the position in the xy direction has proved to be quite tricky so i’m still working on that. Looks like I’ll have to modify the planes position matrix relative to the selected plane but i’ve not got this working yet.

4

Hi,

Yeah, they’re a bit tricky. Here’s the function I use for continous updating. I’m lucky in that I just needed a square, but with a bit of tinkering I’m sure I can extend it;

updateClip() {
        let neg = - (this.controls.size.value/2);
        let entity = this.entity('box');
        this.globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
            modelMatrix: entity.computeModelMatrix(Cesium.JulianDate.now()),
            planes: [
                new Cesium.ClippingPlane( new Cesium.Cartesian3(1.0, 0.0, 0.0), neg ),
                new Cesium.ClippingPlane( new Cesium.Cartesian3(-1.0, 0.0, 0.0), neg ),
                new Cesium.ClippingPlane( new Cesium.Cartesian3(0.0, 1.0, 0.0), neg ),
                new Cesium.ClippingPlane( new Cesium.Cartesian3(0.0, -1.0, 0.0), neg ),
            ],
            edgeWidth: 2,
            edgeColor: Cesium.Color.PINK,
            enabled: true,
        });
    }

Cheers,

Alex

5

Great thanks Alex, haven’t been on this for a while but will be jumping back in soon, will try this out