cesium着色器学习系列1-Geometry对象

参照网页的一些demo可知，primitive就是对geometry的二次封装。

primitive需要指定geometryInstance属性和appearance属性，因此脱离entity和primitive来实现图元的渲染，则需要构造geometry和appearance。

首先来看geometry，查阅API可知有四个属性

attributes	GeometryAttributes		Attributes, which make up the geometry's vertices.
primitiveType	PrimitiveType	PrimitiveType.TRIANGLES	optionalThe type of primitives in the geometry.
indices	Uint16Array | Uint32Array		optionalOptional index data that determines the primitives in the geometry.
boundingSphere	BoundingSphere

 

GeometryAttributes中一共有6个属性

bitangent: bitangent属性(标准化)，用于凹凸映射等切线空间效果。//暂未明白如何使用

color :  顶点坐标的颜色

normal : 法线，通常用于光照  //暂未明白如何使用

position :顶点位置属性

st :纹理坐标

tangent :正切属性(规范化)，用于凹凸映射等切线空间效果。  //暂未明白

先打开primitiveType 可以发现，其实这里面的type与webgl原生的draw type就完全一致

以上六个属性均由GeometryAttribute构造生成，GeometryAttribute的API为：

componentDatatype	ComponentDatatype		optionalThe datatype of each component in the attribute, e.g., individual elements in values.
componentsPerAttribute	Number		optionalA number between 1 and 4 that defines the number of components in an attributes.
normalize	Boolean	false	optionalWhen true and componentDatatype is an integer format, indicate that the components should be mapped to the range [0, 1] (unsigned) or [-1, 1] (signed) when they are accessed as floating-point for rendering.
values	TypedArray		optionalThe values for the attributes stored in a typed array.

componentDatatype：数据类型

componentsPerAttribute：每个元素取的value中的个数，可理解为webgl中的步长

normalize：是否归一化

values：坐标数组

indice就不用说了，索引坐标，索引position。

boundingSphere：

包围球，查看API可发现有响应的多种方式生成。

根据以上知识：构造三角扇。

var p1 = Cesium.Cartesian3.fromDegrees(120.6822, 50.9247, 10);
var p2 = Cesium.Cartesian3.fromDegrees(120.6822, 38.9247, 10);
var p3 = Cesium.Cartesian3.fromDegrees(133.6822, 38.9247, 10);
var p4 = Cesium.Cartesian3.fromDegrees(133.6822, 50.9247, 10);
var positions = new Float64Array([
    p1.x, p1.y, p1.z,
    p2.x, p2.y, p2.z,
    p3.x, p3.y, p3.z,
    p4.x, p4.y, p4.z
]);
var colors = new Float32Array([
    1.0, 0.0, 0.0, 1.0,
    0.0, 1.0, 0.0, 1.0,
    1.0, 1.0, 0.0, 1.0,
    1.0, 1.0, 1.0, 1.0
]);
var geometry = new Cesium.Geometry({
    attributes: {
        position: new Cesium.GeometryAttribute({
            componentDatatype: Cesium.ComponentDatatype.DOUBLE,
            componentsPerAttribute: 3,
            values: positions
        }),
        color: new Cesium.GeometryAttribute({
            componentDatatype: Cesium.ComponentDatatype.FLOAT,
            componentsPerAttribute: 4,
            values: colors
        })
    },
    //索引
    indices: new Uint16Array([
        0, 1, 2,  //第一个三角形用的坐标点
        1, 2, 3  //第二个三角形用的坐标点
    ]),
    //绘制类型
    primitiveType: Cesium.PrimitiveType.TRIANGLE_FAN ,
    boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
});