Cesium开发高级篇 | 01空间数据可视化之Primitive

在基础篇中我们讲过空间数据可视化之Entity实体类，今天我们介绍另外一个比较接近渲染引擎底层的类Primitive，虽然两者都可用于绘制同样的几何图形，但考虑到性能问题，我们更推荐您使用Primitive类实现。在使用Primitive API之前，您最好具备WebGL基础知识，如果对WebGL不是太了解，建议先学习《WebGL编程指南》这本书。

Primitive介绍

1. Primitive组成
Primitive由两部分组成：几何形状（Geometry）和外观（Appearance）。几何形状定义了Primitive的结构，例如三角形、多边形、折线、点、标签等；外观则定义了Primitive的着色或渲染（Shading），包括GLSL（OpenGL着色语言，OpenGL Shading Language）顶点着色器和片元着色器（ vertex and fragment shaders），以及渲染状态（render state）。

2. Primitive优劣势
相对于Entity，使用Primitive具有以下优势：
（1）性能：绘制大量Primitive时，可以将其合并为单个Geometry以减轻CPU负担、更好的使用GPU。合并Primitive由web worker线程执行，以保持UI响应性；
（2）灵活性：Geometry与Appearance 解耦，两者可以分别进行修改；
（3）低级别访问：易于编写GLSL顶点、片段着色器、使用自定义的渲染状态 。

同时，也具有以下劣势：
（1）需要编写更多的代码，并且对图形编程有更深刻的理解，尤其是OpenGL知识；
（2）需要对组合几何形状对于静态数据有效，而对于动态数据则不一定有效。

3.几何图形绘制方式
以下是通过Entity和Primitive两种方式绘制矩形图形的方法：

// Entity方式
viewer.entities.add({
    rectangle : {
        coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
        material : new Cesium.StripeMaterialProperty({
            evenColor: Cesium.Color.WHITE,
            oddColor: Cesium.Color.BLUE,
            repeat: 5
        })
    }
});

// Primitive方式
var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
    vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  })
});

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : instance,
  appearance : new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Stripe')
  })
}));

几何Geometry

1.支持的几何类型

从基础篇的Entity篇幅我们知道，Entity支持的图形类型是以Graphics结尾的，一共有17种类型。而Primitive支持的几何类型则是以Geometry结尾的，和Entity除了结尾命名不一样之外，Cesium中还提供了独有的点形状PointPrimitive和一些形状的集合，包括PointPrimitiveCollection、BillboardCollection、LabelCollection、PolylineCollection。支持的形状如下图所示：

添加简单的点图元集合方法如下：

 // Create a pointPrimitive collection with two points
    var points = scene.primitives.add(
      new Cesium.PointPrimitiveCollection({
        modelMatrix: Cesium.Matrix4.IDENTITY,
        debugShowBoundingVolume: false,
        // OPAQUE 完全不透明；TRANSLUCENT 完全透明；OPAQUE_AND_TRANSLUCENT 不透明和半透明
        blendOption: Cesium.BlendOption.OPAQUE_AND_TRANSLUCENT,
      })
    );
    // add PointPrimitive
    points.add({
      position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.53883, 1000.0),
      color: Cesium.Color.YELLOW,
    });
    points.add({
      position: Cesium.Cartesian3.fromDegrees(-74.59777, 40.53883, 1000.0),
      color: Cesium.Color.CYAN,
    });

2.贴地或贴模型特性
跟Entity类似，Primitive也支持贴地或贴模型的特性，但不一样的是，Primitive是通过classificationType属性控制的。其中GroundPolylineGeometry、GroundPolylinePrimitive结合实现贴地线；GroundPrimitive实现贴地几何形状，包括CircleGeometry、CorridorGeometry、EllipseGeometry、PolygonGeometry、RectangleGeometry；ClassificationPrimitive可实现贴地或贴模型，包括BoxGeometry、CylinderGeometry、EllipsoidGeometry、PolylineVolumeGeometry、SphereGeometry几何形状。下面为一简单的贴模型示例：

 scene.primitives.add(
      new Cesium.ClassificationPrimitive({
        geometryInstances: new Cesium.GeometryInstance({
          geometry: Cesium.BoxGeometry.fromDimensions({
            vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
            dimensions: new Cesium.Cartesian3(8.0, 5.0, 8.0),
          }),
          modelMatrix: modelMatrix,
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              new Cesium.Color(1.0, 0.0, 0.0, 0.5)
            ),
            show: new Cesium.ShowGeometryInstanceAttribute(true),
          },
          id: "volume",
        }),
        classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
      })
    );

3.组合几何
当我们使用一个图元绘制多个静态几何图形时，我们就会看到性能的优势。组合多个GeometryInstances 为一个Primitive可以极大的提高性能，以下示例绘制了2592个颜色各异的矩形，并覆盖整个地球。

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instances = [];

for (var lon = -180.0; lon < 180.0; lon += 5.0) {
  for (var lat = -85.0; lat < 85.0; lat += 5.0) {
    instances.push(new Cesium.GeometryInstance({
      geometry : new Cesium.RectangleGeometry({
        rectangle : Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0),
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
      }),
      attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 0.5}))
      }
    }));
  }
}

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : instances,
  appearance : new Cesium.PerInstanceColorAppearance()
}));

4.实例化几何
实例化可用于在场景的不同部分定位、缩放和旋转相同的几何体。多个实例可以引用相同的Geometry，并且每个实例可以具有不同的modelMatrix。这允许我们只需计算一次几何图形，并多次重复使用它。

下面的示例创建一个EllipsoidGeometry和两个实例。每个实例都引用相同的椭球几何体，但使用不同的modelMatrix放置它， 从而导致一个椭球位于另一个之上。

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
    vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    radii : new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
});

var cyanEllipsoidInstance = new Cesium.GeometryInstance({
    geometry : ellipsoidGeometry,
    modelMatrix : Cesium.Matrix4.multiplyByTranslation(
        Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
        new Cesium.Cartesian3(0.0, 0.0, 150000.0),
        new Cesium.Matrix4()
    ),
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
    }
});

var orangeEllipsoidInstance = new Cesium.GeometryInstance({
    geometry : ellipsoidGeometry,
    modelMatrix : Cesium.Matrix4.multiplyByTranslation(
        Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
        new Cesium.Cartesian3(0.0, 0.0, 450000.0),
        new Cesium.Matrix4()
    ),
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
    }
});

scene.primitives.add(new Cesium.Primitive({
    geometryInstances : [cyanEllipsoidInstance, orangeEllipsoidInstance],
    appearance : new Cesium.PerInstanceColorAppearance({
        translucent : false,
        closed : true
    })
}));

5.更新每个示例的属性
在将几何图形添加到Primitive中以后，仍然可以修改几何图形实例的某些属性：
（1）颜色：如果Primitive设置了PerInstanceColorAppearance外观，则可以修改ColorGeometryInstanceAttribute类型的颜色
（2）可见性：任何实例可以修改可见性

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
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))
    },
    id: 'circle'
});
var primitive = new Cesium.Primitive({
    geometryInstances : circleInstance,
    appearance : new Cesium.PerInstanceColorAppearance({
        translucent : false,
        closed : true
    })
});
scene.primitives.add(primitive);

setInterval(function() {
    var attributes = primitive.getGeometryInstanceAttributes('circle');
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({alpha : 1.0}));
},2000);

外观Apperance

Primitive由两个重要部分组成：几何图形实例、外观。一个Primitive可以有多个几何实例，但只能有一个外观。几何图形定义了结构，外观定义了每个像素如何被着色，外观可能直接使用材质（Material）。一个Primitive结构组成如下图所示：

同时，Cesium定义了以下外观：

外观定义了需要在GPU上执行的完整的GLSL顶点、片段着色器，通常不需要修改这一部分，除非需要定义自己的外观。外观还定义了完整的渲染状态，用于在绘制Primitive时控制GPU的状态，我们可以直接或者通过高层API来定义渲染状态，如“闭合(closed)”和“半透明(translucent)”，外观将转换为渲染状态。如右图所示：

//下面的外观可用于定义一个不可进入的不透明的盒子
    var appearance = new Cesium.PerInstanceColorAppearance({
      translucent: false,
      closed: true,
    });

    //下面的代码效果同上
    var anotherAppearance = new Cesium.PerInstanceColorAppearance({
      renderState: {
        depthTest: {
          enabled: true,
        },
        cull: {
          enabled: true,
          face: Cesium.CullFace.BACK,
        },
      },
    });

创建外观后，不能更改其renderState属性，但可以更改其material。我们还可以更改primitive的appearnace属性。。
大部分外观具有flat、faceForward属性，可以间接的控制GLSL着色器：
（1）flat：扁平化着色，不考虑光线的作用
（2）faceForward：布尔值，控制光照效果

着色器shader
shader即着色器，分为顶点着色器（Vertex Shader）、片元着色器（Fragment Shader）、几何着色器（Geometry shader）、计算着色器（Compute shader）、细分曲面着色器（Tessellation or hull shader），其中可编程的是顶点着色器和片元着色器。示意图如下：

在屏幕上绘制或显示一些物体时，这些物体的显示形式是图元（Primitive）或者网格（Mesh），比如一个贴在网格上的纹理角色。

几何和外观兼容性

并非所有外观都适用于所有几何图形。例如，EllipsoidSurfaceAppearance外观不适用于WallGeometry几何图形，因为墙不在球体的表面上。要使外观与几何图形兼容，它们必须具有匹配的顶点格式，这意味着几何图形必须具有外观所期待的输入数据。创建几何图形时可以提供vertexFormat。

几何图形的vertexFormat确定它是否可以与其他几何图形组合。两个几何图形不必是相同的类型，但它们需要匹配的顶点格式。为方便起见，外观要么具有vertexFormat属性，要么具有可作为几何体选项传入的VERTEX_FORMAT静态常量。

var geometry = new Ceisum.RectangleGeometry({
  vertexFormat : Ceisum.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  // ...
});

var geometry2 = new Ceisum.RectangleGeometry({
  vertexFormat : Ceisum.PerInstanceColorAppearance.VERTEX_FORMAT
  // ...
});

var appearance = new Ceisum.MaterialAppearance(/* ... */);
var geometry3 = new Ceisum.RectangleGeometry({
  vertexFormat : appearance.vertexFormat
  // ...
});

---

微信扫描下方二维码，获取更多资讯。

微信公众号二维码