cesium绘制网格_Cesium教程中级7 -几何图形和外观
本教程将向您介绍提供使用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。