顶点吸附
相信大家在 Cesium 应用过程中会遇到过类似这样的问题:
- 加载建筑物模型时,想精确的量算门的高度,但是拾取的位置总是不精准
- 加载点云时,将测量工具放在点云上,总是无法拾取到点云中的点
如果大家用过CAD或者3DMAX等设计软件,就会发现在这些设计软件里面,我们可以很轻松的拾取到物体的顶点,这是因为开启了软件内置了顶点吸附的功能。简单地说就是鼠标靠近物体的顶点一定范围时,会将鼠标吸附到顶点上,让用户更加精确地点击到顶点的位置。
在Cesium中实现
由于在前端,我们很难修改鼠标显示的位置,因此在 Cesium 中我们不使用修改鼠标位置的方式来展示吸附效果。而是通过鼠标靠近时,返回一定范围内的最近顶点来实现。
那么怎么获取鼠标位置的最近顶点呢?
要解决这个问题,我们首先需要知道 Cesium 是怎么获取鼠标对应的场景位置的。
Cesium 在每次拾取位置时,都会重新对场景进行一次深度测试(通常只渲染鼠标位置附近1*1的范围),最后在将深度测试的结果进行反向计算,得到鼠标对应的场景位置。
顶点吸附需要获取一定范围内的最近顶点,那么我们首先需要将 Cesium 拾取位置的操作进行修改,增大深度测试的范围,使得我们能够获取到鼠标周围一定范围的所有深度。
但是这个时候,我们获取到的深度都是模型三角面片的深度,而事实上,我们只想保留顶点的深度。
因此我们还需要进行另一步操作,就是修改模型的渲染方式,让其只渲染顶点。这时候再进行深度测试,留下来的就只有顶点的深度了。
总结一下,我们需要进行的操作如下:
- 修改模型渲染方式,让其之渲染顶点
- 隐藏所有与模型无关的内容(地形、大气、天空盒、太阳、月亮等)
- 对鼠标周围一定范围进行深度测试
- 获取距离鼠标屏幕位置最近的且有深度(深度范围0-1)的点
- 将这个点反向计算到世界坐标
- 还原模型渲染方式
- 还原隐藏的内容
效率测试
众所周知 Cesium 中 Pick 是一个蛮消耗性能的操作,因此这里进行一下效率测试。
测试的方式为:显示鼠标周围 100 * 100 像素的范围(实际使用中用不到那么大范围)内的所有模型顶点。
可以看到,由于模型只渲染顶点,并且其他无关内容全部不渲染,因此执行效率还是非常高的。
顶点吸附效率测试
实际效果
Cesium 模型顶点吸附