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