Cesium中级教程7 - Geometry and Appearances 几何图形和外观

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本教程将向您介绍提供使用Primitive API的几何图形和外观系统。这是一个高级主题，用于扩展具有自定义网格、形状、体积和外观的CesiumJS，而不是面向通用的Cesium用户。如果您有兴趣学习如何在地球上绘制各种形状和体积，请查看创建实体教程。
CesiumJS可以使用实体（如多边形和椭圆体）创建不同的几何类型。例如，将以下代码复制并粘贴到Hello World Sandcastle示例中，以在球体上创建具有点模式的矩形：

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

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结构，即构成基本体的三角形、线或点。外观定义了Primitive的着色，包括其完整的GLSL顶点和面片着色，以及渲染状态。

使用几何图形和外观的好处是：

• Performance(性能)：在绘制大量Primitive（如美国每个邮政编码的多边形）时，使用几何图形直接允许我们将它们组合成单个几何图形，以减少CPU开销并更好地利用GPU。组合Primitive是在Web worker上完成的，以保持UI的响应性。
• Flexibility(灵活)：Primitive结合了几何图形和外观。通过分离它们，我们可以独立地修改每一个。我们可以添加与许多不同外观兼容的新几何图形，反之亦然。
• Low-level access（低层级访问）：外观提供接近金属的渲染访问，无需担心直接使用Renderer的所有细节。外观使下列情况变得容易：
  • 写所有GLSL的顶点和面片着色器
  • 使用自定义渲染状态

当然也会有一些缺点：

• 直接使用几何图形和外观需要更多的代码和对图形更深入的理解。实体处于适合映射应用程序的抽象级别；几何图形和外观的抽象级别更接近于传统的3D引擎。
• 组合几何图形对静态数据有效，对动态数据不一定有效。

让我们使用几何图形和外观重写初始代码示例：

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

// original code
//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
//        })
//    }
//});

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')
  })
}));

我们使用Primitive（Primitive）代替矩形实体，它结合了几何图形和外观。现在，我们将不区分Geometry和GemometryInstance。实例不仅是几何图形的实例，更是其的容器。

为了创建矩形的几何图形，即覆盖矩形区域的三角形和适合球体曲率的三角形，我们创建了一个RectangleGeometry。

因为它在表面上，所以我们可以使用EllipsoidSurfaceAppearance。这通过假设几何图形在曲面上或在椭球体上方的恒定高度来节省内存。

Geometry types 几何图形类型

CesiumJS提供下列几何图形：

[外链图片转存失败(img-MGOJJZ5Y-1563172450546)(https://i.loli.net/2019/06/02/5cf37e714b37217644.png)]

组合几何图形

当我们使用一个Primitive绘制多个静态几何图形时，我们看到了性能优势。例如，在一个Primitive中绘制两个矩形。

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

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
  })