Cesium中实现顶点吸附

顶点吸附

相信大家在 Cesium 应用过程中会遇到过类似这样的问题：

1. 加载建筑物模型时，想精确的量算门的高度，但是拾取的位置总是不精准
2. 加载点云时，将测量工具放在点云上，总是无法拾取到点云中的点

如果大家用过CAD或者3DMAX等设计软件，就会发现在这些设计软件里面，我们可以很轻松的拾取到物体的顶点，这是因为开启了软件内置了顶点吸附的功能。简单地说就是鼠标靠近物体的顶点一定范围时，会将鼠标吸附到顶点上，让用户更加精确地点击到顶点的位置。

在Cesium中实现

由于在前端，我们很难修改鼠标显示的位置，因此在 Cesium 中我们不使用修改鼠标位置的方式来展示吸附效果。而是通过鼠标靠近时，返回一定范围内的最近顶点来实现。

那么怎么获取鼠标位置的最近顶点呢？

要解决这个问题，我们首先需要知道 Cesium 是怎么获取鼠标对应的场景位置的。

Cesium 在每次拾取位置时，都会重新对场景进行一次深度测试（通常只渲染鼠标位置附近1*1的范围），最后在将深度测试的结果进行反向计算，得到鼠标对应的场景位置。

顶点吸附需要获取一定范围内的最近顶点，那么我们首先需要将 Cesium 拾取位置的操作进行修改，增大深度测试的范围，使得我们能够获取到鼠标周围一定范围的所有深度。

但是这个时候，我们获取到的深度都是模型三角面片的深度，而事实上，我们只想保留顶点的深度。

因此我们还需要进行另一步操作，就是修改模型的渲染方式，让其只渲染顶点。这时候再进行深度测试，留下来的就只有顶点的深度了。

总结一下，我们需要进行的操作如下：

1. 修改模型渲染方式，让其之渲染顶点
2. 隐藏所有与模型无关的内容（地形、大气、天空盒、太阳、月亮等）
3. 对鼠标周围一定范围进行深度测试
4. 获取距离鼠标屏幕位置最近的且有深度（深度范围0-1）的点
5. 将这个点反向计算到世界坐标
6. 还原模型渲染方式
7. 还原隐藏的内容

效率测试

众所周知 Cesium 中 Pick 是一个蛮消耗性能的操作，因此这里进行一下效率测试。

测试的方式为：显示鼠标周围 100 * 100 像素的范围（实际使用中用不到那么大范围）内的所有模型顶点。

可以看到，由于模型只渲染顶点，并且其他无关内容全部不渲染，因此执行效率还是非常高的。

顶点吸附效率测试

实际效果

Cesium 模型顶点吸附

原文链接

Cesium中实现顶点吸附