Cesium之Primitive

莫问前程F6
148 阅读4分钟

什么是Primitive

首先我们在Cesium API文档中搜索primitive，看文档中对Primitive类的介绍，翻译过来大致如下：

图元代表场景中的几何体。 几何可以来自单个 GeometryInstance，也可以来自实例数组，即使geometry 来自不同的几何类型。图元将 geometry 实例与描述完整着色的 Appearance 相结合，包括 Material 和 RenderState。 粗略地说，geometry 实例定义了结构和位置，appearance 定义了视觉特征。 解耦 geometry 和 appearance 允许我们混合和匹配它们中的大部分，并相互独立地添加新的geometry 或 appearance 。

将多个实例组合成一个原语称为批处理，可显着提高静态数据的性能。 实例可以单独挑选； Scene#pick 返回它们的 GeometryInstance#id。 使用 PerInstanceColorAppearance 等每个实例的外观，每个实例也可以具有唯一的颜色。

Geometry可以在 web worker 或主线程上创建和批处理。

通过阅读我们可以知道，primitive主要由两部分组成：Geometry和Appearance。

Geometry主要定义了primitive的几何结构，而Appearance主要负责定义primitive的着色，包括GLSL顶点着色器、片段着色器和渲染状态。

我们可以通过Primitive API来操控几何图形及其外观，绘制各种形状。

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.EllipseGeometry({
 center : Cesium.Cartesian3.fromDegrees(-100.0, 20.0),
 semiMinorAxis : 500000.0,
 semiMajorAxis : 1000000.0,
 rotation : Cesium.Math.PI_OVER_FOUR,
 vertexFormat : Cesium.VertexFormat.POSITION_AND_ST
 }),
 id : 'object returned when this instance is picked and to get/set per-instance attributes'
});
scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instance,
 appearance : new Cesium.EllipsoidSurfaceAppearance({
 material : Cesium.Material.fromType('Checkerboard')
 })
}));

Geometry

在Cesium中，支持以下几种Geometry几何图形

几何图形说明
BoxGeometry立方体
BoxOutlineGeometry仅有轮廓的立方体，只有外部线条的的盒子
CircleGeometry圆形或者拉伸的圆形，圆圈或挤压圆
CircleOutlineGeometry只有轮廓的圆形
CorridorGeometry走廊：沿着地表的多段线(垂直于表面的折线)，且具有一定的宽度，可以拉伸到一定的高度
CorridorOutlineGeometry只有轮廓的走廊
CylinderGeometry圆柱、圆锥或者截断的圆锥
CylinderOutlineGeometry只有轮廓的圆柱、圆锥或者截断的圆锥
EllipseGeometry椭圆或者拉伸的椭圆
EllipseOutlineGeometry只有轮廓的椭圆或者拉伸的椭圆
EllipsoidGeometry椭球体
EllipsoidOutlineGeometry只有轮廓的椭球体
RectangleGeometry矩形或者拉伸的矩形
RectangleOutlineGeometry只有轮廓的矩形或者拉伸的矩形
PolygonGeometry多边形，可以具有空洞或者拉伸一定的高度
PolygonOutlineGeometry只有轮廓的多边形
PolylineGeometry多段线，可以具有一定的宽度
SimplePolylineGeometry简单的多段线
PolylineVolumeGeometry多段线柱体
PolylineVolumeOutlineGeometry只有轮廓的多段线柱体
SphereGeometry球体
SphereOutlineGeometry只有轮廓的球体
WallGeometry墙
WallOutlineGeometry只有轮廓的墙

Geometry Instances - 几何图形实例

在前边的示例代码中，我们已经用到了它，它相当于Geometry的容器，而多个Instance可以公用一个Geomotry并利用GeometryInstance.modelMatrix提供多种属性信息。

var geometry = Cesium.BoxGeometry.fromDimensions({
 vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL,
 dimensions : new Cesium.Cartesian3(1000000.0, 1000000.0, 500000.0)
});
var instanceBottom = new Cesium.GeometryInstance({
 geometry : geometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
 Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 1000000.0), new Cesium.Matrix4()),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
 },
 id : 'bottom'
});
var instanceTop = new Cesium.GeometryInstance({
 geometry : geometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
 Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 3000000.0), new Cesium.Matrix4()),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
 },
 id : 'top'
});

Combing Geometries - 合并几何图形

我们可以合并多个Instance为一个Primitive，提高我们的性能。

var instances = [Instance1, Instance2, Instance3, ……];
scene.primitives.add( new Cesium.Primitive( {
 geometryInstances : instances, //合并
 //某些外观允许每个几何图形实例分别指定某个属性，例如：
 appearance : new Cesium.PerInstanceColorAppearance({translucent : false,closed : true})
} ) );

更新单个Instance属性

在添加到Primitive后，我们仍然可以通过Id获取指定Instance并修改其属性。

var circleInstance = new Cesium.GeometryInstance( {
 geometry : new Cesium.CircleGeometry( {
 center : Cesium.Cartesian3.fromDegrees( -95.0, 43.0 ),
 radius : 250000.0,
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 } ),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor( new Cesium.Color( 1.0, 0.0, 0.0, 0.5 ) ),
 show : new Cesium.ShowGeometryInstanceAttribute( true ) //显示或者隐藏
 },
 id : 'circle'
} );
var primitive = new Cesium.Primitive( {
 geometryInstances : circleInstance,
 appearance : new Cesium.PerInstanceColorAppearance( {
 translucent : false,
 closed : true
 } )
} );
scene.primitives.add( primitive );
var attributes = primitive.getGeometryInstanceAttributes( 'circle' );//获取某个实例的属性集
attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue( Cesium.Color.fromRandom( {
 alpha : 1.0
} ) );

Appearance

Cesium支持以下列出的Appearance

外观描述
MaterialAppearance支持各种Geometry类型的外观，支持使用材质来定义着色。支持材料描述阴影。
EllipsoidSurfaceAppearanceMaterialAppearance的一个版本。假设几何图形与地表是平行的，并且依此来进行顶点属性（vertex attributes）的计算。和Material Appearance一样，就像一个多边形，并且使用这个假设来通过程序上计算许多顶点属性来节省内存。
PerInstanceColorAppearance让每个实例使用自定义的颜色来着色，使用每个实例的颜色来遮蔽每个实例。
PolylineMaterialAppearance支持使用材质来着色多段线。支持材料遮蔽Polyline。
PolylineColorAppearance使用每顶点或者每片段（per-vertex or per-segment ）的颜色来着色多段线—使用每顶点或每段着色来遮蔽折线

Appearance定义了需要在GPU上执行的GLSL着色器，这部分一般只有在自定义外观时需要修改。|

render state用来在绘制Primitive的时候控制GPU状态，一旦外观被创建，render state就不能再改变了，但是我们可以修改其材质。

//下面的外观可用于定义一个Viewer不可进入的不透明盒子
var appearance = new Cesium.PerInstanceColorAppearance( {
 translucent : false,
 closed : true
} );
//下面的代码效果同上
var translucent = new Cesium.PerInstanceColorAppearance( {
 renderState : {
 depthTest : {
 enabled : true
 },
 cull : {
 enabled : true,
 face : Cesium.CullFace.BACK
 }
 }
});

Primitive与Entity对比

  1. entity调用方便，封装完美
  2. 加载的效率不同。Primitve更接近webGL的底层，没有entity一样的附加属性，加载时效率会更高。
avatar
文章
阅读
粉丝