Cesium高阶学习三、使用DC自定义Primitive

一、简介
前面两节介绍了源码搭建、源码位置、自定义构建、和着色器的基本知识，本节将学习它的应用。

1、顶点数据准备

我们知道，要绘制一个图形，首先要有这个图形的顶点，简单的图形顶点一般都是固定的，而复杂的图形顶点则需要通过算法计算出来。本节我们的目的是介绍如何通过DrawCommand实现自定义的Primitive，所以我们先使用固定的图形顶点，我们参考“进阶学习”中“Primitive”章节中的“自定义Geometry”一节，实现一个四棱锥。

四棱锥建模效果图如下（此时位于坐标原点）：

const positions = new Float32Array([ 
         // //前
        0, 0, -1,//  0
        1, -1, 1,//  1
        -1, -1, 1,// 2
        //左
        0, 0, -1,//  0 
        -1, -1, 1,// 2
        -1, 1, 1,//  3
        // //后
        0, 0, -1,//  0 
        -1, 1, 1,//  3
        1, 1, 1,//   4
        // //右
        0, 0, -1,//  0 
        1, 1, 1,//   4
        1, -1, 1,//  1
        //上
        1, -1, 1,//  1
        1, 1, 1,//   4
        -1, 1, 1,//  3
        //上
        1, -1, 1,//  1
        -1, 1, 1,//  3
        -1, -1, 1,// 2

  ]);

有了顶点数据，我们就可以创建VAO了，我们先看看VertexArray类如何构建。我们打开VertexArray.js的源码，可以看到在定义VertexArray类的上面,Cesium提供了几个创建VertexArray对象的示例代码。

* @example
 * // Example 1. Create a vertex array with vertices made up of three floating point
 * // values, e.g., a position, from a single vertex buffer.  No index buffer is used.
 * const positionBuffer = Buffer.createVertexBuffer({
   
 *     context : context,
 *     sizeInBytes : 12,
 *     usage : BufferUsage.STATIC_DRAW
 * });
 * const attributes = [
 *     {
   
 *         index                  : 0,
 *         enabled                : true,
 *         vertexBuffer           : positionBuffer,
 *         componentsPerAttribute : 3,
 *         componentDatatype      : ComponentDatatype.FLOAT,
 *         normalize              : false,
 *         offsetInBytes          : 0,
 *         strideInBytes          : 0 // tightly packed
 *         instanceDivisor        : 0 // not instanced
 *     }
 * ];
 * const va