Cesium | Primitive图元介绍及与Entity对比

这是我参与更文挑战的第8天，活动详情查看： 更文挑战。

前言

在之前的文章中，我们大部分使用的添加实体的方式都是entity添加，而在性能优化中我们提到了primitive添加的方式，entity在本文就不多做介绍了，本文主要介绍一下primitive相关知识。

什么是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几何图形

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

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对比

看过上边对Primitive相关接口的用法，我们会有这样的疑惑：entity调用方便，封装完美，为什么还要使用Primitive？区别就是记载的效率问题。Primitve更接近webGL的底层，没有entity一样的附加属性，加载时效率会更高。在前文性能优化中已经体现出Primitive的优势了，所以在加载几何体时二者都有优有劣，需要根据具体情况进行选择。