Cesium,ClippingPlanes,任意剪裁面对3DTiles剪裁

一、简介

相关官方文档地址:ClippingPlaneCollection、Cesium3DTileset
官方Demo地址:3D Tiles Clipping Planes
官方介绍:Cesium Feature Highlight: Clipping Planes
对于3DTiles和gltf，均可以通过ClippingPlaneCollection来实现显示时的模型剪裁显示，即仅显示模型的一部分区域。该项特性在cesium1.4开始提供。
由于官方demo和文档的信息依然较少，在下在业务需求中又遇到了需要将3DTiles按照任意多边形进行剪裁的需求，因此此篇文章主要是总结了下如何实现该需求。

二、具体实现

业务需求是希望将3DTiles按照任意平行于地表的多边形进行剪裁显示，换句话说，剪裁面都是垂直于地表的，因此只考虑这种需求。

图1 未剪裁前：

图2 剪裁后：

关于ClippingPlanes的基本使用在api文档和demo中有详细描述。
下面给出一个简单示例：

 tileSet.clippingPlanes=new Cesium.ClippingPlaneCollection({
      planes: planes,
      unionClippingRegions: true,
    })

各参数不再赘述。
这里的重点是planes的计算，planes对应一个ClippingPlane对象的数组。ClippingPlane也就是实际使用的剪裁面。

ClippingPlane的计算

构造：

Cesium.ClippingPlane(normal, distance)

由文档可知，需要计算剪裁面的法向量作为normal和原点到该剪裁面的最短距离作为distance。
需注意的是，对于平面的normal,它指向的方向将不会被裁剪，反向的方向才会被裁剪。
根据文档中的介绍可知，ClippingPlane所位于的坐标系应该是，以3DTiles原点为坐标原点，该点正东为x轴正方向，该点正北为y轴正方向，该点的地球椭球体法线为z轴，远离地心的那一端为z轴正方向。
因此可以先将剪裁面的相应计算所需的点，转换到上述坐标系，然后进行计算。
假设一条位于地表的线段p1,p2定义一个剪裁面，那么计算如下：

1.计算坐标转换需要用到的矩阵的方法：

function getInverseTransform (tileSet) {
  let transform
  let tmp = tileSet.root.transform
  if ((tmp && tmp.equals(Cesium.Matrix4.IDENTITY)) || !tmp) {
  	// 如果root.transform不存在，则3DTiles的原点变成了boundingSphere.center
    transform = Cesium.Transforms.eastNorthUpToFixedFrame(tileSet.boundingSphere.center)
  } else {
    transform = Cesium.Matrix4.fromArray(tileSet.root.transform)
  }
  return Cesium.Matrix4.inverseTransformation(transform, new Cesium.Matrix4())
}

关于原点的一点补充，原点的选择直接影响到ClippingPlane的构造，ClippingPlaneCollection的文档中提到了这一点，如果root.transform存在，需要使用root.transform对应的坐标原点作为构造ClippingPlane时的坐标原点，如果不存在的话，就使用boundingSphere.center。
这也是显而易见的，因为如果root.transform存在并且不等于Cesium.Matrix4.IDENTITY，就说明3DTiles的根瓦片存在一个自身定义的相对变换。此时包围盒的中心点和3DTiles中对图形顶点定位的局部坐标系坐标原点并不重合。
2.对点进行坐标转换的方法：

function getOriginCoordinateSystemPoint (point, inverseTransform) {
  let val = Cesium.Cartesian3.fromDegrees(point.lng, point.lat)
  return Cesium.Matrix4.multiplyByPoint(
    inverseTransform, val, new Cesium.Cartesian3(0, 0, 0))
}

3.具体的计算：

function createPlane (p1, p2, inverseTransform) {
  // 将仅包含经纬度信息的p1,p2，转换为相应坐标系的cartesian3对象
  let p1C3 = getOriginCoordinateSystemPoint(p1, inverseTransform)
  let p2C3 = getOriginCoordinateSystemPoint(p2, inverseTransform)
 
  // 定义一个垂直向上的向量up
  let up = new Cesium.Cartesian3(0, 0, 10)
  //  right 实际上就是由p1指向p2的向量
  let right = Cesium.Cartesian3.subtract(p2C3, p1C3, new Cesium.Cartesian3())
  
  // 计算normal， right叉乘up，得到平面法向量，这个法向量指向right的右侧
  let normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3())
  normal = Cesium.Cartesian3.normalize(normal, normal)

  //由于已经获得了法向量和过平面的一点，因此可以直接构造Plane,并进一步构造ClippingPlane
  let planeTmp = Cesium.Plane.fromPointNormal(p1C3, normal)
  return Cesium.ClippingPlane.fromPlane(planeTmp)
}

上面就构造了一个由地平面两点p1,p2定义的剪裁面，这个剪裁面始终剪裁掉位于p1指向p2的向量的左侧。

4.数组的构造
由3可以得到一个剪裁面了。那么对于数组[p1,p2,p3…pN]，当该数组中的点是按照顺时针排序时(因为3中叉乘的方向是right × up)，相邻点两两构成一个剪裁面，就可以达到如上图2的效果。如果数组是按照逆时针排序，还需要将数组reverse下。

如何判断位于数组中的点，是按照顺时针还是逆时针排序？
网上能找到很多资料，这里我用的是下面的方法：
判断一个多变形是顺时针还是逆时针的方法（含凹多边形）
下面给出我使用上面算法的具体实现：

function isClockWise (latLngArr) {
  if (latLngArr.length < 3) {
    return null
  }
  if (latLngArr[0] === latLngArr[latLngArr.length - 1]) {
    latLngArr = latLngArr.slice(0, latLngArr.length - 1)
  }
  let latMin = { i: -1, val: 90 }
  for (let i = 0; i < latLngArr.length; i++) {
    let { lat } = latLngArr[i]
    if (lat < latMin.val) {
      latMin.val = lat
      latMin.i = i
    }
  }
  let i1 = (latMin.i + latLngArr.length - 1) % latLngArr.length
  let i2 = latMin.i
  let i3 = (latMin.i + 1) % latLngArr.length

  let v2_1 = {
    lat: latLngArr[i2].lat - latLngArr[i1].lat,
    lng: latLngArr[i2].lng - latLngArr[i1].lng
  }
  let v3_2 = {
    lat: latLngArr[i3].lat - latLngArr[i2].lat,
    lng: latLngArr[i3].lng - latLngArr[i2].lng
  }
  let result = v3_2.lng * v2_1.lat - v2_1.lng * v3_2.lat
  // result>0 3-2在2-1的顺时针方向 result<0 3-2在2-1的逆时针方向 result==0 3-2和2-1共线，可能同向也可能反向
  return result === 0 ? (latLngArr[i3].lng < latLngArr[i1].lng) : (result > 0)
}

关于凹多边形作为剪裁面

虽然传值是可以正常传入凹多边形的剪裁面，但实际表现情况如下图：