Location of ClippingPlaneCollection

Hello community,
I have a question about the location of a ClippingPlaneCollection. On my image you see on the upper side the one for the globe, on the lower side the one for my tileset. But they don’t have the same location, I would like to situate the tilesets one on the globes one.
For the globe I use this function and a center position:

        globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
            modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
            planes: [

When I use the same function for the tileset it will not load, when I use no definition for modelmatrix it looks like on the image.
Any tip would be great!

Hi there,

The clipping planes modelMatrix are always relative to the root transformed of what is being clipped. For the globe, this is from the origin, so the modelMatrix you’ve calculated in your example should be fine. For the tileset, it will likely be a different root transform that is relative to the tileset origin.


Hi Gabby,
thank you for this answer!

I’ve tried a few things to put the tileset clipping over the globe clipping, but so far I haven’t succeeded.
This is what I tried: (globeCenter is where the blue star is)

            const tilesetCenter = tileset.boundingSphere.center;
            const globeCenter = new Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1]);
            const diffX = tilesetCenter.x - globeCenter.x;
            const diffY = tilesetCenter.y - globeCenter.y;

            const translation = new Cesium.Cartesian3(
            this.clippingPlanes.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

You see I’m getting closer to the goal, but I’m still not there. Do you have an idea what is wrong?

Thank you and greetings

How about the following? It should “undo” any transform applied to the clipping planes to match the tileset, then apply the same transform as the globe.

        const inverse = Cesium.Matrix4.inverse(tileset.clippingPlanesOriginMatrix, new Cesium.Matrix4());
        const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);

        this.clippingPlanes.modelMatrix = Cesium.Matrix4.multiply(inverse, modelMatrix, this.clippingPlanes.modelMatrix)l

Hi Gabby,
this works great! Exactly what I need :slight_smile:

(‘clippingPlanesOriginMatrix’ is not mentioned in the api docs and my ide shows it as unresolved variable…)

Thank you a lot and kind regards