Cesium之使用polygon简要总结

最新推荐文章于 2024-05-15 10:42:16 发布

alegriabaile

最新推荐文章于 2024-05-15 10:42:16 发布

阅读量5.9k

点赞数 5

分类专栏：前端入门踩坑文章标签： cesium polygon CoplanarPolygon OpenGL PolygonGeometry

本文链接：https://blog.csdn.net/alegriabaile/article/details/124416682

版权

前端入门踩坑专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求：

cesium中画不规则的多面体包围盒，简称volume，并且可移动。

P.S. 以下<component>基于Vue组件的表示

1. 方案一 Entity之PolygonGraphics

<component v-for="(positions, index) in volume">
	// https://cesium.com/learn/cesiumjs-learn/cesiumjs-creating-entities/
	// https://cesium.com/learn/cesiumjs/ref-doc/PolygonGraphics.html
	viewer.entities.add({
  		name: ""+index,
  		polygon: {
    		hierarchy: new Cesium.PolygonHierarchy(positions),
			perPositionHeight: true,
			// ...
  		},
	});
</component>

基本功能没问题，而且更改颜色、轮廓等接口非常方便。Entity就是好用。
缺点是卡顿非常严重，且有拖影，节流后可适当减少拖影。

2. 方案二 Entity之PolygonGraphics+CallbackProperty

<component v-for="(positionsMutable, index) in volume">
	// https://cesium.com/learn/cesiumjs/ref-doc/PolygonGraphics.html
	viewer.entities.add({
  		name: ""+index,
  		polygon: {
    		hierarchy: new new Cesium.CallbackProperty(function (time, result) {
    			return positionsMutable
			}, /*isConstant*/ false),
			perPositionHeight: true,
			// ...
  		},
	});
</component>

从万能的stackoverflow，看到了CallbackProperty这么个玩意。
基本功能还是没问题。拖影还是存在，cesium的顶点数据更新策略有点让人摸不清，居然不是一起更新的，也没看到什么loadAsync的开关。
节流后，卡顿有所缓解，但是还是能感知到存在。

3. 方案三 Primitive之PolygonGeometry+PolygonOutlineGeometry

卡顿与拖影的根本原因，还是在顶点数据的更新上。可能出于性能原因，cesium选择不实时检测及更新Entity的顶点数据（待后面有机会再探究了）。
那么有没有什么东西，是频繁变化更新的呢？
众所周知，在OpenGL里面，layout 是非常重的东西，一般给场景中不太变化的大量数据准备，也是直接影响shader计算的数据；但是在drawcall中MVP三个投影参数，是比较小且经常需要变化的，即Uniforms。
那么如果我每次移动只是操作模型的变换矩阵，是不是就能从根本上解决卡顿与拖影呢？理论上应该是的才对。
从 Use advanced CesiumJS features 可以找到在这里插入图片描述
Custom，嗯，这个应该就是我要的了。
cesium提供了较低层的接口，Primitive。其中PolygonGeometry正是我们想要的。


	// https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/
	const instances = []
	const length = volume.length
	for(let i = 0; i < length; ++i) {
		var instance = new Cesium.GeometryInstance({
  			geometry : new Cesium.PolygonGeometry({
    			polygonHierarchy: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
    			vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  			}),
  			attributes: {
				//color:...
  			}
		});
		instances.push(instance)
	}
	
	const primitive = scene.primitives.add(new Cesium.Primitive({
  		geometryInstances : [instance, anotherInstance],
  		modelMatrix : Cesium.Matrix4.Matrix4.fromTranslation(new Cesium.Cartesian3(translation), new Cesium.Matrix4()),
  		appearance : new Cesium.EllipsoidSurfaceAppearance({
    		// ...
  		})
	}));
	function onDrag() {
		translation = updateTranslation()
		// 实时更新！！！
		primitive.modelMatrix = Cesium.Matrix4.Matrix4.fromTranslation(new Cesium.Cartesian3(translation), new Cesium.Matrix4()),
	}