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。

因为它在表面上，所以我们可以使用EllipsoidSurfaceAppearance。这通过假设几何图形在曲面上或在椭球体上