Cesium(三) 几何图形与外观

古城微笑少年丶 2022-07-20 18:56 490阅读 0赞

#                                                            几何图形与外观 #

我们可以通过Primitive API来操控几何图形及其外观，或者绘制各种特殊的形状。需要先得到Scene对象，然后在其上添加Primitive对象：

var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
     
    scene.primitives.add(new Cesium.RectanglePrimitive({
        //绘制矩形
        rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
        material : Cesium.Material.fromType('Dot')  //设置材质
    }));

Primitive由两个部分组成：

1.  （1）几何形状（Geometry）：定义了Primitive的结构，例如三角形、线条、点等
2.  （2）外观（Appearance ）：定义Primitive的着色（Sharding），包括GLSL（OpenGL着色语言，OpenGL Shading Language）顶点着色器和片段着色器（ vertex and fragment shaders），以及渲染状态（render state）

Cesium支持以下几何图形：

<table style="color:rgb(51,51,51); border-collapse:collapse; border-spacing:0px; max-width:100%; border:0px; margin:0px 0px 30px; padding:0px; font-family:Alice; font-size:14px; line-height:22px; widows:auto; width:710px"> 
 <thead style="border:0px; margin:0px; padding:0px; font-weight:bold"> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; width:220px; text-align:center; background-color:rgb(229,229,229)"> 几何图形&nbsp;</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; text-align:center; background-color:rgb(229,229,229)"> &nbsp;说明</td> 
  </tr> 
 </thead> 
 <tbody style="border:0px; margin:20px 0px; padding:0px 0px 20px"> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> BoxGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 立方体</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> BoxOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 仅有轮廓的立方体</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> CircleGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 圆形或者拉伸的圆形</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> CircleOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 只有轮廓的圆形</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> CorridorGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 走廊：沿着地表的多段线，且具有一定的宽度，可以拉伸到一定的高度</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> CorridorOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 只有轮廓的走廊</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> CylinderGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 圆柱、圆锥或者截断的圆锥</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> CylinderOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 只有轮廓的圆柱、圆锥或者截断的圆锥</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> EllipseGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 椭圆或者拉伸的椭圆</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> EllipseOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 只有轮廓的椭圆或者拉伸的椭圆</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> EllipsoidGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 椭球体</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> EllipsoidOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 只有轮廓的椭球体</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> RectangleGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 矩形或者拉伸的矩形</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> RectangleOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 只有轮廓的矩形或者拉伸的矩形</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> PolygonGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 多边形，可以具有空洞或者拉伸一定的高度</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> PolygonOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 只有轮廓的多边形</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> PolylineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 多段线，可以具有一定的宽度</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> SimplePolylineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 简单的多段线</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> PolylineVolumeGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 多段线柱体</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> PolylineVolumeOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 只有轮廓的多段线柱体</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> SphereGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 球体</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> SphereOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 只有轮廓的球体</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> WallGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 墙</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> WallOutlineGeometry</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(245,245,245)"> 只有轮廓的墙</td> 
  </tr> 
 </tbody> 
</table>

使用Geometry和Appearance 具有以下优势：

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

同时，具有以下劣势：

1.  （1）需要编写更多地代码
2.  （2）需要对图形编程有更多的理解，特别是OpenGL的知识

使用来Geometry、Appearance 改写上面的例子，代码为：

合并几何图形（Combing Geometries）

合并多个GeometryInstances 为一个Primitive可以极大的提高性能，下面的例子创建了2592一颜色各异的矩形，覆盖整个地球 ：

选取几何图形（Picking）

即使多个 GeometryInstance被合并为单个Primitive，让然可以独立的被访问。我们可以为每一个GeometryInstance指定一个id，并且可以通过Scene.pick来判断该实例是否被选取：

几何图形实例（Geometry Instances）

上面的例子中，我们已经用到了GeometryInstances，注意GeometryInstance与Geometry的关系：前者是后者的容器，多个Instance可以共用一个Geometry，并且可以通过GeometryInstances.modelMatrix属性提供不同position、scale、rotate等位置、缩放、旋转信息。例如，下面的例子使用同一个Geometry绘制了两个Instance，一个位于另一个的上方：

更新单个GeometryInstance的属性

在添加到Primitive中以后，让然可以修改几何图形的某些属性：

1.  （1）颜色：如果Primitive设置了PerInstanceColorAppearance外观，则可以修改ColorGeometryInstanceAttribute类型的颜色
2.  （2）可见性：任何实例可以修改可见性

示例代码：

外观（Appearances）

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

![Image 1][]

Cesium支持下表列出的外观：

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; border:0px; margin:0px 0px 30px; padding:0px; color:rgb(51,51,51); font-family:Alice; font-size:14px; line-height:22px; widows:auto; width:710px"> 
 <thead style="border:0px; margin:0px; padding:0px; font-weight:bold"> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; width:220px; text-align:center; background-color:rgb(229,229,229)"> &nbsp;外观</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; text-align:center; background-color:rgb(229,229,229)"> &nbsp;说明</td> 
  </tr> 
 </thead> 
 <tbody style="border:0px; margin:20px 0px; padding:0px 0px 20px"> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> MaterialAppearance</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 支持各种Geometry类型的外观，支持使用材质来定义着色</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> EllipsoidSurfaceAppearance</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> MaterialAppearance的一个版本。假设几何图形与地表是平行的，并且依此来进行顶点属性（vertex attributes）的计算</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> PerInstanceColorAppearance</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 让每个实例使用自定义的颜色来着色</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> PolylineMaterialAppearance</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 支持使用材质来着色多段线</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> PolylineColorAppearance</td> 
   <td style="padding:8px; border:1px solid rgb(255,255,255); margin:0px; background-color:rgb(229,229,229)"> 使用每顶点或者每片段（per-vertex or per-segment ）的颜色来着色多段线</td> 
  </tr> 
 </tbody> 
</table>

外观定义了需要在GPU上执行的完整的GLSL顶点、片段着色器，通常不需要修改这一部分，除非需要定义自己的外观。

外观还定义了完整的render state，用于在绘制Primitive时控制GPU的状态，可以直接或者通过高层API来定义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
            }
        }
    } );

一旦外观被创建，其render state就不可再变，但是其材质是可以替换的。另外Primitive的外观也是不可修改的。

大部分外观具有flat、faceForward属性，可以间接的控制GLSL 着色器：

1.  （1）flat：扁平化着色，不考虑光线的作用
2.  （2）faceForward：布尔值，控制光照效果

Geometry与Appearance的兼容性

需要注意，不是所有外观和所有几何图形可以搭配使用，例如EllipsoidSurfaceAppearance与WallGeometry就不能搭配，原因是后者是垂直于地表的。

即使外观与几何图形兼容，它们还必须有匹配的顶点格式（vertex formats）—— 即几何图形必须具有外观可以作为输入的数据格式，在创建Geometry时可以提供VertexFormat。

为了简便，可以让Geometry计算所有顶点属性（vertex attributes），以使之适用于任何外观，但这样做效率较差：

var geometry = new Cesium.RectangleGeometry( {
        vertexFormat : Cesium.VertexFormat.ALL
    } );

而如果我们使用外观EllipsoidSurfaceAppearance，其实只需要知道位置：

var geometry = new Ceisum.RectangleGeometry( {
        vertexFormat : Ceisum.VertexFormat.POSITION_ONLY
    } );

大部分外观具有vertexFormat属性或者VERTEX\_FORMAT 静态常量，创建形状时只需要使用这些顶点格式即可：

此外，两个形状必须具有匹配的vertexFormat，才能被合并到一个Primitive中。