Cesium原理篇：6 Renderer模块(1: Buffer)

       刚刚结束完地球切片的渲染调度后，打算介绍一下目前大家都很关注的3D Tiles方面的内容，但发现要讲3D Tiles，或者充分理解它，需要对DataSource，Primitive要有基础，而这要求对最底层的渲染模块，也就是Render有一个了解，真的是书到用时方恨少的代入感，索性从头到尾的说清楚。所以，下面几篇（估算四篇）先把Render模块介绍清楚。

       Render，顾名思义就是渲染模块，在Cesium中，所有的对象，都是通过Render模块完成最终调用WebGL的渲染过程。换句话说，Render是Cesium的渲染引擎模块，在Cesium的Geometry和WebGL之间搭建了一个桥梁。至于为什么不直接调用WebGL接口，还需要封装一套，这样做有何意义呢，这就是一个比较发散的问题了。首先WebGL提供的是函数，而在真正的渲染中，会有很多状态的切换，而且随着逻辑的负责而难以维护，而面向对象的思想的精髓就在于对对象状态的管理，这也是为什么很多三维应用都提供了自己的渲染引擎模块，个人觉得主要的价值在于易用性和状态的管理。

       首先，目前主流的浏览器基本支持WebGL 1.0的标准，对应的是OpenGL ES2.0，也就是可编程渲染管线，采用GPU渲染，性能上有保证。据我了解，只有FireFox的一些实验版本支持WebGL2.0，也就是OpenGL ES3.0的标准。如果对WebGL的基本接口还不熟悉，推荐这本《WebGL编程指南》，除了感觉价格略贵外，还是一本很不错的入门书。我们的重点是学习Cesium如何设计并封装WebGL接口，并不会过多纠结在WebGL本身的理解，所以假设你对WebGL有一个基本的了解。

Buffer

       任意一个非参数化的几何对象（参数化的可以通过差值转为非参数化，比如一个参数化的圆，对应的是圆心和半径，我们通过差值，将该圆转为一个多边形，圆周对应的点越密，则效果越好，而代价也是点数据越大），对应的就是N个顶点（Node）之间的空间关系。当我们想要通过WebGL渲染该几何对象时，首先就是要讲该几何对象转化为WebGL可以识别的数据格式：1构建该对象的顶点数组，里面包括每一个点的XYZ位置（必须），该点的颜色，纹理坐标，法线等信息；2构建该对象对应的索引信息，也就是点之间的先后顺序。

       上述说的就是一个VBO（顶点缓存）的概念，WebGL提供了bufferData接口，我们对其中的参数做一个简单介绍：

void gl.bufferData(target, size, usage);
void gl.bufferData(target, data, usage);

        

• target
  gl.ARRAY_BUFFER 该数据为顶点数据，比如位置信息，颜色，法线，纹理坐标或自定义的一些属性信息
  gl.ELEMENT_ARRAY_BUFFER 该数据为顶点索引
• size
  数据长度，此时只是预留了对应长度的空间，里面的数据为空
• data
  数据内容，此时WebGL内部可以判断该数据内容对应的长度
• usage
  gl.STATIC_DRAW 静态数据，数据保存在GPU中，适合一次写入不再更改，多次使用情况
  gl.DYNAMIC_DRAW 动态数据，保存在内存中，适合多次写入，多次使用下调用情况
  gl.STREAM_DRAW 流数据，保存在GPU中，适合一次写入一次使用的情况

       如下是直接调用WebGL提供的方法创建顶点属性的代码：

// 获取WebGL对象
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
// 创建顶点缓存
var buffer = gl.createBuffer();
// 绑定该顶点缓存类型为顶点属性数据
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// 指定其对应的数据长度及方式
gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
// 解除绑定
gl.bindBuffer(bufferTarget, null);

      通过上面的介绍，可见顶点属性和顶点索引的调用方法完全相同，逻辑上的创建过程也如出一辙，只是具体的参数稍有不同，因此，在Cesium中把创建VBO的过程化的函数封装为一个抽象的Buffer类，伪代码如下：

function Buffer(options) {
    var gl = options.context._gl;
    var bufferTarget = options.bufferTarget;
    var typedArray = options.typedArray;
    var sizeInBytes = options.sizeInBytes;
    var usage = options.usage;
    var hasArray = defined(typedArray);

    if (hasArray) {
        sizeInBytes = typedArray.byteLength;
    }
    // ……
    var buffer = gl.createBuffer();
    gl.bindBuffer(bufferTarget, buffer);
    gl.bufferData(bufferTarget, hasArray ? typedArray : sizeInBytes, usage);
    gl.bindBuffer(bufferTarget, null);
    // ……
    this._gl = gl;
    this._bufferTarget = bufferTarget;
    this._sizeInBytes = sizeInBytes;
    this._usage = usage;
    this._buffer = buffer;
    this.vertexArrayDestroyable = true;
}

       可见，这个过程和刚才WebGL调用的方式几乎一模一样，只是把所需要的参数都封装了一下，并将调用函数的返回值，作为属性保存在该Buffer对象中。于是，一个过程式的函数调用封装成了一个Ojbect，即可以重用，也方便内部细节的管理。

       当然，如果只有如上的一个方法也能用，但输入的参数不太少，只是一个很简单的函数封装而已，使用上并没有太多简化，而且也不方便理解，只能算是一个半成品。接着Cesium在Buffer类中提供了Buffer.createVertexBuffer和Buffer.createIndexBuffer方法，算是基于Buffer的一个二次加工：

Buffer.createVertexBuffer = function(options) {
    return new Buffer({
        context: options.context,
        bufferTarget: WebGLConstants.ARRAY_BUFFER,
        typedArray: options.typedArray,
        sizeInBytes: options.sizeInBytes,
        usage: options.usage
    });
};
    
Buffer.createIndexBuffer = function(options) {
    return new Buffer({
        context: options.context,
        bufferTarget : WebGLConstants.ELEMENT_ARRAY_BUFFER,
        typedArray : options.typedArray,
        sizeInBytes : options.sizeInBytes,
        usage : options.usage
    });
};

       这下用起来就so easy了，用户创建顶点属性和顶点索引的范例如下：

var buffer = Buffer.createVertexBuffer({
  context : context,
  sizeInBytes : 16,
  usage : BufferUsage.DYNAMIC_DRAW
});
     
var buffer = Buffer.createIndexBuffer({
  context : context,
  typedArray : new Uint16Array([0, 1, 2]),
  usage : BufferUsage.STATIC_DRAW,
  indexDatatype : IndexDatatype.UNSIGNED_SHORT
});

       当然，如果你此时是用的DYNAMIC_DRAW的方式，并没有指定bufferdata，则创建该顶点缓存对象，但数据还是空的，在获取数据后可以调用Buffer.prototype.copyFromArrayView方法更新一下该数据。可见，Buffer类的设计还是比较周全的，考虑到数据更新可能存在这种不确定的逻辑：

Buffer.prototype.copyFromArrayView = function(arrayView, offsetInBytes) {
    var gl = this._gl;
    var target = this._bufferTarget;
    gl.bindBuffer(target, this._buffer);
    gl.bufferSubData(target, offsetInBytes, arrayView);
    gl.bindBuffer(target, null);
};

       如上就是创建VBO的一个完整过程，可以仔细对比一下两者之间的不同。因为VBO是渲染中最基本的，也是最重要的概念和渲染对象，通过Buffer类对这个过程进行分装和管理，虽然难度不大，但意义却很重要。

       通过Buffer，我们可以将Primitive（图元）中的几何数据转化为VBO，这相当于创建了该几何对象的骨架。通常我们还需要纹理信息，贴在这个骨架的表面，让它看上去有血有肉，惟妙惟肖。下一篇我们介绍Cesium是如何封装Texture。