cesium源碼研究之VertexArray（VAO對象）生成的兩種方式

1、方式（利用內置primitive圖元）

      var polygon = new Cesium.PolygonGeometry({
            polygonHierarchy: new Cesium.PolygonHierarchy(
                Cesium.Cartesian3.fromDegreesArray(degreesArray)
            ),
            height: maxHeight,
            extrudedHeight: 0
        });
       var geometry = Cesium.PolygonGeometry.createGeometry(polygon);
       var vertexArray = Cesium.VertexArray.fromGeometry({
                context: context,
                geometry: geometry,
                bufferUsage: Cesium.BufferUsage.STATIC_DRAW,
        });

2、自定義圖元

    // 立方體
    //    v6----- v5
    //   /|      /|
    //  v1------v0|
    //  | |     | |
    //  | |v7---|-|v4
    //  |/      |/
    //  v2------v3
    // 座標系
    //  z
    //  | /y
    //  |/
    //  o------x

    // 1.1 定義位置數組
    let v0 = [0.5, -0.5, 0.5];
    let v1 = [-0.5, -0.5, 0.5];
    let v2 = [-0.5, -0.5, -0.5];
    let v3 = [0.5, -0.5, -0.5];
    let v4 = [0.5, 0.5, -0.5];
    let v5 = [0.5, 0.5, 0.5];
    let v6 = [-0.5, 0.5, 0.5];
    let v7 = [-0.5, 0.5, -0.5];
    let rawVertex = [
        // 下 -z
        ...v2, ...v3, ...v4, ...v7,
        // 前 -y
        ...v2, ...v3, ...v0, ...v1,
        // 後 +y
        ...v4, ...v7, ...v6, ...v5,
        // 左 -x
        ...v7, ...v2, ...v1, ...v6,
        // 右 +x
        ...v3, ...v4, ...v5, ...v0,
        // 上 +z
        ...v1, ...v0, ...v5, ...v6,
    ];
    var positions = new Float64Array(rawVertex);

    // 1.2 定義法向數組
    var npx = [1, 0, 0];
    var nnx = [-1, 0, 0];
    var npy = [0, 1, 0];
    var nny = [0, -1, 0];
    var npz = [0, 0, 1];
    var nnz = [0, 0, -1];
    var normals = new Float32Array([
        // 下 -z
        ...nnz, ...nnz, ...nnz, ...nnz,
        // 前 -y
        ...nny, ...nny, ...nny, ...nny,
        // 後 +y
        ...npy, ...npy, ...npy, ...npy,
        // 左 -x
        ...nnx, ...nnx, ...nnx, ...nnx,
        // 右 +x
        ...npx, ...npx, ...npx, ...npx,
        // 上 +z
        ...npz, ...npz, ...npz, ...npz,
    ]);

    // 1.3 定義紋理數組
    var sts = new Float32Array([
        0, 0, 1, 0, 1, 1, 0, 1,
        0, 0, 1, 0, 1, 1, 0, 1,
        0, 0, 1, 0, 1, 1, 0, 1,
        0, 0, 1, 0, 1, 1, 0, 1,
        0, 0, 1, 0, 1, 1, 0, 1,
        0, 0, 1, 0, 1, 1, 0, 1,
    ]);
    // 1.4 定義索引
    var indices = new Uint16Array([
        0, 1, 2, 0, 2, 3,
        4, 5, 6, 4, 6, 7,
        8, 9, 10, 8, 10, 11,
        12, 13, 14, 12, 14, 15,
        16, 17, 18, 16, 18, 19,
        20, 21, 22, 20, 22, 23,
    ]);
       let attributeLocations = {
        position: 0,
        normal: 1,
        //textureCoordinates: 2,
    };
    this._attributeLocations = attributeLocations
    let geometry = new Cesium.Geometry({
        attributes: {
            position: new Cesium.GeometryAttribute({
                // vtxf 使用double類型的position進行計算
                // componentDatatype : Cesium.ComponentDatatype.DOUBLE,
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 3,
                values:positions
            }),
            normal: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 3,
                values: normals
            }),
            // textureCoordinates: new Cesium.GeometryAttribute({
            //     componentDatatype: Cesium.ComponentDatatype.FLOAT,
            //     componentsPerAttribute: 2,
            //     values: sts
            // })
        },
        // Workaround Internet Explorer 11.0.8 lack of TRIANGLE_FAN
        indices: options.indices,
        primitiveType: Cesium.PrimitiveType.TRIANGLES,
        boundingSphere: Cesium.BoundingSphere.fromVertices(options.positions)
    });
    let vertexArray = Cesium.VertexArray.fromGeometry({
        context: context,
        geometry: geometry,
        attributeLocations: attributeLocations,
        bufferUsage: Cesium.BufferUsage.STATIC_DRAW,
        // interleave : true
    });