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

https://www.bbsmax.com/A/n2d9P1Q5Dv/

刚刚结束完地球切片的渲染调度后，打算介绍一下目前大家都很关注的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接口，我们对其中的参数做一个简单介绍：

1. void gl.bufferData(target, size, usage);
2. 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提供的方法创建顶点属性的代码：

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

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

1. function Buffer(options) {
2. var gl = options.context._gl;
3. var bufferTarget = options.bufferTarget;
4. var typedArray = options.typedArray;
5. var sizeInBytes = options.sizeInBytes;
6. var usage = options.usage;
7. var hasArray = defined(typedArray);
8. if (hasArray) {
9. sizeInBytes = typedArray.byteLength;
10. }
11. // ……
12. var buffer = gl.createBuffer();
13. gl.bindBuffer(bufferTarget, buffer);
14. gl.bufferData(bufferTarget, hasArray ? typedArray : sizeInBytes, usage);
15. gl.bindBuffer(bufferTarget, null);
16. // ……
17. this._gl = gl;
18. this._bufferTarget = bufferTarget;
19. this._sizeInBytes = sizeInBytes;
20. this._usage = usage;
21. this._buffer = buffer;
22. this.vertexArrayDestroyable = true;
23. }

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

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

1. Buffer.createVertexBuffer = function(options) {
2. return new Buffer({
3. context: options.context,
4. bufferTarget: WebGLConstants.ARRAY_BUFFER,
5. typedArray: options.typedArray,
6. sizeInBytes: options.sizeInBytes,
7. usage: options.usage
8. });
9. };
10. Buffer.createIndexBuffer = function(options) {
11. return new Buffer({
12. context: options.context,
13. bufferTarget : WebGLConstants.ELEMENT_ARRAY_BUFFER,
14. typedArray : options.typedArray,
15. sizeInBytes : options.sizeInBytes,
16. usage : options.usage
17. });
18. };

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

1. var buffer = Buffer.createVertexBuffer({
2. context : context,
3. sizeInBytes : 16,
4. usage : BufferUsage.DYNAMIC_DRAW
5. });
6. var buffer = Buffer.createIndexBuffer({
7. context : context,
8. typedArray : new Uint16Array([0, 1, 2]),
9. usage : BufferUsage.STATIC_DRAW,
10. indexDatatype : IndexDatatype.UNSIGNED_SHORT
11. });

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

1. Buffer.prototype.copyFromArrayView = function(arrayView, offsetInBytes) {
2. var gl = this._gl;
3. var target = this._bufferTarget;
4. gl.bindBuffer(target, this._buffer);
5. gl.bufferSubData(target, offsetInBytes, arrayView);
6. gl.bindBuffer(target, null);
7. };

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

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