Fix clipping planes for tiles with RTC and/or no transforms

Apps/Sandcastle/gallery/3D Tiles Clipping Planes.html

@@ -104,19 +104,18 @@
     }
 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
-var scratchPlane = new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0);
-function createPlaneUpdateFunction(plane, transform) {
+function createPlaneUpdateFunction(plane) {
     return function () {
         plane.distance = targetY;
-        return Cesium.Plane.transform(plane, transform, scratchPlane);
+        return plane;
     };
 }
 
 var tileset;
 function loadTileset(url) {
     clippingPlanes = new Cesium.ClippingPlaneCollection({
         planes : [
-            new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -100.0)
+            new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), 0.0)
         ],
         edgeWidth : viewModel.edgeStylingEnabled ? 1.0 : 0.0
     });
@@ -140,7 +139,7 @@
                 plane : {
                     dimensions : new Cesium.Cartesian2(radius * 2.5, radius * 2.5),
                     material : Cesium.Color.WHITE.withAlpha(0.1),
-                    plane : new Cesium.CallbackProperty(createPlaneUpdateFunction(plane, tileset.modelMatrix), false),
+                    plane : new Cesium.CallbackProperty(createPlaneUpdateFunction(plane), false),
                     outline : true,
                     outlineColor : Cesium.Color.WHITE
                 }
@@ -157,7 +156,7 @@
 function loadModel(url) {
     clippingPlanes = new Cesium.ClippingPlaneCollection({
         planes : [
-            new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -100.0)
+            new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), 0.0)
         ],
         edgeWidth : viewModel.edgeStylingEnabled ? 1.0 : 0.0
     });
@@ -189,7 +188,7 @@
             plane : {
                 dimensions : new Cesium.Cartesian2(300.0, 300.0),
                 material : Cesium.Color.WHITE.withAlpha(0.1),
-                plane : new Cesium.CallbackProperty(createPlaneUpdateFunction(plane, Cesium.Matrix4.IDENTITY), false),
+                plane : new Cesium.CallbackProperty(createPlaneUpdateFunction(plane), false),
                 outline : true,
                 outlineColor : Cesium.Color.WHITE
             }
@@ -218,13 +217,9 @@
     if (newValue === clipObjects[0]) {
         loadTileset(bimUrl);
     } else if (newValue === clipObjects[1]) {
-        loadTileset(pointCloudUrl).then(function(tileset) {
-            tileset.clippingPlanes.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(tileset.boundingSphere.center);
-        });
+        loadTileset(pointCloudUrl);
     } else if (newValue === clipObjects[2]) {
-        loadTileset(instancedUrl).then(function(tileset) {
-            tileset.clippingPlanes.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(tileset.boundingSphere.center);
-        });
+        loadTileset(instancedUrl);
     } else {
         loadModel(modelUrl);
     }

Source/Scene/Batched3DModel3DTileContent.js

@@ -9,11 +9,11 @@ define([
         '../Core/destroyObject',
         '../Core/DeveloperError',
         '../Core/FeatureDetection',
-        '../Core/getBaseUri',
         '../Core/getStringFromTypedArray',
         '../Core/Matrix4',
         '../Core/RequestType',
         '../Core/RuntimeError',
+        '../Core/Transforms',
         '../Renderer/Pass',
         './Axis',
         './Cesium3DTileBatchTable',
@@ -33,11 +33,11 @@ define([
         destroyObject,
         DeveloperError,
         FeatureDetection,
-        getBaseUri,
         getStringFromTypedArray,
         Matrix4,
         RequestType,
         RuntimeError,
+        Transforms,
         Pass,
         Axis,
         Cesium3DTileBatchTable,
@@ -355,10 +355,10 @@ define([
             primitive : tileset
         };
 
-        content._rtcCenterTransform = Matrix4.clone(Matrix4.IDENTITY);
+        content._rtcCenterTransform = Matrix4.IDENTITY;
         var rtcCenter = featureTable.getGlobalProperty('RTC_CENTER', ComponentDatatype.FLOAT, 3);
         if (defined(rtcCenter)) {
-            content._rtcCenterTransform = Matrix4.fromTranslation(Cartesian3.fromArray(rtcCenter), content._rtcCenterTransform);
+            content._rtcCenterTransform = Matrix4.fromTranslation(Cartesian3.fromArray(rtcCenter));
         }
 
         content._contentModelMatrix = Matrix4.multiply(tile.computedTransform, content._rtcCenterTransform, new Matrix4());
@@ -465,6 +465,11 @@ define([
         // Update clipping planes
         var tilesetClippingPlanes = this._tileset.clippingPlanes;
         if (this._tile.clippingPlanesDirty && defined(tilesetClippingPlanes)) {
+            if (!this._tileset.root._useBoundingSphereForClipping) {
+                this._model._clippingPlaneOffsetMatrix = this._tileset.root.computedTransform;
+            } else {
+                this._model._clippingPlaneOffsetMatrix = this._tileset.root._clippingPlaneOffsetMatrix;
+            }
             // Dereference the clipping planes from the model if they are irrelevant.
             // Link/Dereference directly to avoid ownership checks.
             // This will also trigger synchronous shader regeneration to remove or add the clipping plane and color blending code.

Source/Scene/Cesium3DTile.js

@@ -24,6 +24,7 @@ define([
         '../Core/RequestType',
         '../Core/Resource',
         '../Core/RuntimeError',
+        '../Core/Transforms',
         '../ThirdParty/when',
         './Cesium3DTileContentFactory',
         './Cesium3DTileContentState',
@@ -60,6 +61,7 @@ define([
         RequestType,
         Resource,
         RuntimeError,
+        Transforms,
         when,
         Cesium3DTileContentFactory,
         Cesium3DTileContentState,
@@ -199,7 +201,6 @@ define([
                 Cesium3DTile._deprecationWarning('contentUrl', 'This tileset JSON uses the "content.url" property which has been deprecated. Use "content.uri" instead.');
                 contentHeaderUri = contentHeader.url;
             }
-
             hasEmptyContent = false;
             contentState = Cesium3DTileContentState.UNLOADED;
             contentResource = baseResource.getDerivedResource({
@@ -333,6 +334,12 @@ define([
         this._priority = 0.0;
         this._isClipped = true;
         this._clippingPlanesState = 0; // encapsulates (_isClipped, clippingPlanes.enabled) and number/function
+        this._useBoundingSphereForClipping = false;
+        // If this is the root tile, and it doesn't have a defined transform, fall back to bounding sphere.
+        if (!defined(this.parent) && !defined(this._header.transform)) {
+            this._clippingPlaneOffsetMatrix = Transforms.eastNorthUpToFixedFrame(this.boundingSphere.center);
+            this._useBoundingSphereForClipping = true;
+        }
 
         this._debugBoundingVolume = undefined;
         this._debugContentBoundingVolume = undefined;
@@ -702,7 +709,6 @@ define([
         }
 
         var contentFailedFunction = getContentFailedFunction(this);
-
         promise.then(function(arrayBuffer) {
             if (that.isDestroyed()) {
                 // Tile is unloaded before the content finishes loading
@@ -822,6 +828,9 @@ define([
         var clippingPlanes = tileset.clippingPlanes;
         if (defined(clippingPlanes) && clippingPlanes.enabled) {
             var tileTransform = tileset.root.computedTransform;
+            if(defined(tileset.root._clippingPlaneOffsetMatrix)) {
+                tileTransform = tileset.root._clippingPlaneOffsetMatrix;
+            }
             var intersection = clippingPlanes.computeIntersectionWithBoundingVolume(boundingVolume, tileTransform);
             this._isClipped = intersection !== Intersect.INSIDE;
             if (intersection === Intersect.OUTSIDE) {
@@ -857,6 +866,9 @@ define([
         var clippingPlanes = tileset.clippingPlanes;
         if (defined(clippingPlanes) && clippingPlanes.enabled) {
             var tileTransform = tileset.root.computedTransform;
+            if(defined(tileset.root._clippingPlaneOffsetMatrix)) {
+                tileTransform = tileset.root._clippingPlaneOffsetMatrix;
+            }
             var intersection = clippingPlanes.computeIntersectionWithBoundingVolume(boundingVolume, tileTransform);
             this._isClipped = intersection !== Intersect.INSIDE;
             if (intersection === Intersect.OUTSIDE) {
@@ -1051,6 +1063,9 @@ define([
             this._viewerRequestVolume = this.createBoundingVolume(header.viewerRequestVolume, this.computedTransform, this._viewerRequestVolume);
         }
 
+        if (this._useBoundingSphereForClipping) {
+            this._clippingPlaneOffsetMatrix = Transforms.eastNorthUpToFixedFrame(this.boundingSphere.center);
+        }
         // Destroy the debug bounding volumes. They will be generated fresh.
         this._debugBoundingVolume = this._debugBoundingVolume && this._debugBoundingVolume.destroy();
         this._debugContentBoundingVolume = this._debugContentBoundingVolume && this._debugContentBoundingVolume.destroy();

Source/Scene/Cesium3DTileset.js

@@ -1478,7 +1478,6 @@ define([
         filterProcessingQueue(tileset);
         var tiles = tileset._processingQueue;
         var length = tiles.length;
-
         // Process tiles in the PROCESSING state so they will eventually move to the READY state.
         for (var i = 0; i < length; ++i) {
             tiles[i].process(tileset, frameState);

Source/Scene/ClippingPlaneCollection.js

@@ -55,6 +55,13 @@ define([
     /**
      * Specifies a set of clipping planes. Clipping planes selectively disable rendering in a region on the
      * outside of the specified list of {@link ClippingPlane} objects for a single gltf model, 3D Tileset, or the globe.
+     * <p>
+     * In general the clipping planes' coordinates are relative to the object they're attached to, so a plane with distance set to 0 will clip 
+     * through the center of the object. 
+     * </p>
+     * <p>
+     * For 3D Tiles, the root tile's transform is used to position the clipping planes. If a transform is not defined, the root tile's {@link Cesium3DTile#boundingSphere} is used instead.
+     * </p>
      *
      * @alias ClippingPlaneCollection
      * @constructor
@@ -66,6 +73,30 @@ define([
      * @param {Boolean} [options.unionClippingRegions=false] If true, a region will be clipped if included in any plane in the collection. Otherwise, the region to be clipped must intersect the regions defined by all planes in this collection.
      * @param {Color} [options.edgeColor=Color.WHITE] The color applied to highlight the edge along which an object is clipped.
      * @param {Number} [options.edgeWidth=0.0] The width, in pixels, of the highlight applied to the edge along which an object is clipped.
+     *
+     * @demo {@link https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=3D%20Tiles%20Clipping%20Planes.html|Clipping 3D Tiles and glTF models.}
+     * @demo {@link https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Terrain%20Clipping%20Planes.html|Clipping the Globe.}
+     *
+     * @example
+     * // This clipping plane's distance is positive, which means its normal
+     * // is facing the origin. This will clip everything that is behind 
+     * // the plane, which is all pixels with y > 5.
+     * var clippingPlanes = new Cesium.ClippingPlaneCollection({
+     *     planes : [
+     *         new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), 5.0)
+     *     ],
+     * });
+     * // Create an entity and attach the ClippingPlaneCollection to the model.
+     * var entity = viewer.entities.add({
+     *     position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 10000),
+     *     model : {
+     *         uri : '../../../../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
+     *         minimumPixelSize : 128,
+     *         maximumScale : 20000,
+     *         clippingPlanes : clippingPlanes
+     *     }
+     * });
+     * viewer.zoomTo(entity);
      */
     function ClippingPlaneCollection(options) {
         options = defaultValue(options, defaultValue.EMPTY_OBJECT);
@@ -587,7 +618,7 @@ define([
 
         var modelMatrix = this.modelMatrix;
         if (defined(transform)) {
-            modelMatrix = Matrix4.multiply(modelMatrix, transform, scratchMatrix);
+            modelMatrix = Matrix4.multiply(transform, modelMatrix, scratchMatrix);
         }
 
         // If the collection is not set to union the clipping regions, the volume must be outside of all planes to be

Source/Scene/Instanced3DModel3DTileContent.js

@@ -472,6 +472,12 @@ define([
             // Update for clipping planes
             var tilesetClippingPlanes = this._tileset.clippingPlanes;
             if (this._tile.clippingPlanesDirty && defined(tilesetClippingPlanes)) {
+                // Use the root tile's transform.
+                if (!this._tileset.root._useBoundingSphereForClipping) {
+                    model._clippingPlaneOffsetMatrix = this._tileset.root.computedTransform;
+                } else if (this._tileset.ready) {
+                    model._clippingPlaneOffsetMatrix = this._tileset.root._clippingPlaneOffsetMatrix;
+                }
                 // Dereference the clipping planes from the model if they are irrelevant - saves on shading
                 // Link/Dereference directly to avoid ownership checks.
                 model._clippingPlanes = (tilesetClippingPlanes.enabled && this._tile._isClipped) ? tilesetClippingPlanes : undefined;

Source/Scene/Model.js

@@ -539,6 +539,10 @@ define([
         this.clippingPlanes = options.clippingPlanes;
         // Used for checking if shaders need to be regenerated due to clipping plane changes.
         this._clippingPlanesState = 0;
+        // If defined, it's used to position the clipping planes instead of the modelMatrix.
+        // This is so that when models are part of a tileset they all get clipped relative
+        // to the root tile.
+        this._clippingPlaneOffsetMatrix = undefined;
 
         /**
          * This property is for debugging only; it is not for production use nor is it optimized.
@@ -4426,7 +4430,11 @@ define([
             var clippingPlanes = this._clippingPlanes;
             var currentClippingPlanesState = 0;
             if (defined(clippingPlanes) && clippingPlanes.enabled) {
-                Matrix4.multiply(context.uniformState.view3D, modelMatrix, this._modelViewMatrix);
+                if (!defined(this._clippingPlaneOffsetMatrix)) {
+                    Matrix4.multiply(context.uniformState.view3D, modelMatrix, this._modelViewMatrix);
+                } else {
+                    Matrix4.multiply(context.uniformState.view3D, this._clippingPlaneOffsetMatrix, this._modelViewMatrix);
+                }
                 currentClippingPlanesState = clippingPlanes.clippingPlanesState;
             }
 

Source/Scene/PointCloud.js

@@ -185,6 +185,10 @@ define([
         this.clippingPlanes = undefined;
         this.isClipped = false;
         this.clippingPlanesDirty = false;
+        // If defined, it's used to position the clipping planes instead of the modelMatrix.
+        // This is so that when point clouds are part of a tileset they all get clipped relative
+        // to the root tile.
+        this._clippingPlaneOffsetMatrix = undefined;
 
         this.attenuation = false;
         this._attenuation = false;
@@ -819,8 +823,13 @@ define([
                 if (!defined(clippingPlanes)) {
                     return Matrix4.IDENTITY;
                 }
-                var modelViewMatrix = Matrix4.multiply(context.uniformState.view3D, pointCloud._modelMatrix, scratchClippingPlaneMatrix);
-                return Matrix4.multiply(modelViewMatrix, clippingPlanes.modelMatrix, scratchClippingPlaneMatrix);
+
+                if (!defined(pointCloud._clippingPlaneOffsetMatrix)) {
+                    Matrix4.multiply(context.uniformState.view3D, pointCloud._modelMatrix, scratchClippingPlaneMatrix);
+                } else {
+                    Matrix4.multiply(context.uniformState.view3D, pointCloud._clippingPlaneOffsetMatrix, scratchClippingPlaneMatrix);
+                }
+                return scratchClippingPlaneMatrix;
             }
         };
 

Source/Scene/PointCloud3DTileContent.js

@@ -297,6 +297,12 @@ define([
         var styleDirty = this._styleDirty;
         this._styleDirty = false;
 
+        if (!tileset.root._useBoundingSphereForClipping) {
+            pointCloud._clippingPlaneOffsetMatrix = tileset.root.computedTransform;
+        } else {
+            pointCloud._clippingPlaneOffsetMatrix = tileset.root._clippingPlaneOffsetMatrix;
+        }
+
         pointCloud.style = defined(batchTable) ? undefined : tileset.style;
         pointCloud.styleDirty = styleDirty;
         pointCloud.modelMatrix = tile.computedTransform;

Specs/Cesium3DTilesTester.js

@@ -132,7 +132,8 @@ define([
         var tileset = {
             _statistics : {
                 batchTableByteLength : 0
-            }
+            },
+            root : {}
         };
         var url = Resource.createIfNeeded('');
         var content = Cesium3DTileContentFactory[type](tileset, mockTile, url, arrayBuffer, 0);