meface/primitive.md at c4e8f7c0dc16c780817fed46f623502cfbf3709b

7.1 KiB

Raw Blame History

图元 Primitive

Cesium中的绘制矢量图形的API可以分为两类：Entity、Primitive。

1.简介

Primitive API 是面向图形开发人员的低层次API，被设计成为各种类型要素提供高效和灵活的可视化功能，对比Entity API 具有更高的效率，具有以下优点：

高性能。绘制大量Primitive时，可以将其合并为单个Geometry，以减少CPU的计算量，更好的使用GPU处理。合并 Primitive由 Web worker 线程执行，用户界面保持响应。
灵活性。
低级别访问。易于修改GLSL顶点、片段着色器、使用自定义的渲染状态。

2. 组成

一个 Primitive 由 geometryInstance 和一个 Appearance (包含 Material 材料和和RenderState渲染状态)组成，代表Scene场景中的一个geometry几何对象。

geometry实例定义了结构和位置;
Appearance定义了视觉特征。

Primitive主要配置项options:

geometryInstances ：几何实例
appearance ：外观，appearance定义了着色器（sharding），包含了完整的GLSL顶点着色器和片段着色器以及用于绘制primitive的渲染状态
show : 是否展示
allowPicking ：是否允许被拾取
asynchronous ：异步
shadows ：确定此primitive是否投射或接收来自光源的阴影。ShadowMode.DISABLED
releaseGeometryInstances:是否清空原来的geometryInstances,清除后无法获取几何实例的属性。

其中geometryInstances 可以是一个GeometryInstance实例或是geometryInstance 数组。将多个geometryInstance组合成一个Primitive称为batching，可以显著提高静态数据的性能。

viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry: new Cesium.PolylineGeometry({
            positions : Cesium.Cartesian3.fromDegreesArray([
                112, 23,
                122, 24,
                130, 22,
                112, 20
            ]),
            width : 10.0,
            //指定线段每段的颜色，数量必须与线段数相同
            colors:[Cesium.Color.RED,Cesium.Color.THISTLE,Cesium.Color.TURQUOISE],
        }),
        // attributes : {
        //   // 通过attributes属性统一指定线段颜色
        //   color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 0.6))
        // },
        id:"线要素"
    }),
    // PolylineColorAppearance : 使用每顶点或者每片段的颜色来着色多线段。可以用于渲染 PolylineGeometry or GroundPolylineGeometry. 
    appearance : new Cesium.PolylineColorAppearance({
        translucent : false,
    })
}));

实例也可以单独的被拾取(picked)到。

viewer.screenSpaceEventHandler.setInputAction(function (e) {
    // topPrimitive包含{id,primitive}
    let topPrimitive = viewer.scene.pick(e.position)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

使用Scene场景的picked方法可以获得到geometry实例的id,也可以使用appearance的实例定义primitive的外表。

3.几何实例

GeometryInstance 实例的配置项：

geometry ：几何实例对象.
modelMatrix ：将geometry从模型转换为世界坐标的模型矩阵
id ：是一个用户自定义的Object对象(可以用于存储自定义属性)，当geometryInstance 被 Scene#pick 拾取到时会被返回 or get/set per-instance attributes with Primitive#getGeometryInstanceAttributes.
attributes ：每个实例的属性，如下面示例中的显示或颜色属性。

其中geometry 的基础配置项Options和类型：

attributes :是一个GeometryAttributes类型
primitiveType ：可选值：POINTS、LINES、LINE_LOOP、LINE_STRIP、TRIANGLES、TRIANGLE_STRIP、TRIANGLE_FAN
indices :是一个 Uint16Array | Uint32Array 用于确定几何图形中的primitive的可选索引数据.
boundingSphere : BoundingSphere 一个可选的将几何图形完全包围的边界球

类型：

Geometry	Outline	Description
`BoxGeometry`	`BoxOutlineGeometry`	A box
`CircleGeometry`	`CircleOutlineGeometry`	A circle or extruded circle
`CorridorGeometry`	`CorridorOutlineGeometry`	A polyline normal to the surface with a width in meters and optional extruded height
`CylinderGeometry`	`CylinderOutlineGeometry`	A cylinder, cone, or truncated cone
`EllipseGeometry`	`EllipseOutlineGeometry`	An ellipse or extruded ellipse
`EllipsoidGeometry`	`EllipsoidOutlineGeometry`	An ellipsoid
`RectangleGeometry`	`RectangleOutlineGeometry`	An rectangle or extruded rectangle
`PolygonGeometry`	`PolygonOutlineGeometry`	A polygon with optional holes or extruded polygon
`PolylineGeometry`	`SimplePolylineGeometry`	A collection of line segments with a width in pixels
`PolylineVolumeGeometry`	`PolylineVolumeOutlineGeometry`	A 2D shape extruded along a polyline
`SphereGeometry`	`SphereOutlineGeometry`	A sphere
`WallGeometry`	`WallOutlineGeometry`	A wall perpendicular to the globe

PolylineGeometry ：线要素
SimplePolylineGeometry : 轮廓线
PolygonGeometry ：面要素
RectangleGeometry ：矩形
EllipseGeometry ：椭圆
CircleGeometry ：圆形
WallGeometry
BoxGeometry
EllipsoidGeometry

4. Appearance

基础配置项options:

translucent ：geometry 应该是半透明的，所以 Appearance#renderState启用了alpha混合
closed ：是否关闭渲染状态
material ：材质
vertexShaderSource ：
fragmentShaderSource ：
renderState ：渲染状态

类型：

MaterialAppearance ：支持各种geometry类型的外观，支持使用材质来定义着色
EllipsoidSurfaceAppearance ：是MaterialAppearance的一个版本。假设几何图形与地面是平行的，并且以此来进行顶点属性的计算
PerInstanceColorAppearance ：让每个实例使用自定义的颜色着色
PolylineColorAppearance : 使用每顶点或者每片段的颜色来着色多线段。可以用于渲染 PolylineGeometry or GroundPolylineGeometry.
PolylineMaterialAppearance : 支持使用材质来着色多线段。PolylineGeometry支持材质渲染的类

| name |

参考文章

[1] Cesium快速上手6-Primitive图元的讲解https://www.jianshu.com/p/5e9cce778690

7.1 KiB Raw Blame History Unescape Escape