Cesium高阶学习二、Cesium渲染器

一、简介

我们都知道，Cesium是一个WebGL引擎，其绘图操作底层都是调用的WebGL绘图接口，Cesium将底层与WebGL交互的操作封装到了一个渲染模块，我们也可以称该模块为Cesium渲染器。

封装渲染器的好处：
重用性，将与WebGL交互的部分封装到一个模块，在Cesium其他地方都可以调用
移植性，减小WebGL更新带来的影响，
状态管理，Webgl是一个状态机，渲染器能够统一管理这些状态
性能，Cesium团队具有丰富的经验，封装的渲染器能够保证程序性能

Cesium渲染器源码位于packages/engine/Source/Renderer目录下：

Cesium的渲染器会涉及到很多WebGL的概念，如果您不熟悉WebGL相关的概念，可以先参考“WebGL编程指南”一书。下面就开始学习重要的对象：

1、Buffer 顶点缓冲对象，即常说的VBO，源码如下：

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

   if (hasArray) {
   
   
     sizeInBytes = typedArray.byteLength;
   } 
   const buffer = gl.createBuffer();
   gl.bindBuffer(bufferTarget, buffer);
   gl.bufferData(bufferTarget, hasArray ? typedArray : sizeInBytes, usage);
   gl.bindBuffer(bufferTarget, null);   
} 

Buffer.createVertexBuffer = function (options) {
   
   
  ...
};  
Buffer.createIndexBuffer = function (options) {
   
   
  ...
};

2、VertextArray 顶点数组对象，即常说的VAO，创建一个VAO，最常用的是VertexArray.fromGeometry（）方法，而不是new VertexArray（），源码如下：

function VertexArray(options) {
   
   
 ...
 this._numberOfVertices = numberOfVertices;
 this._hasInstancedAttributes = hasInstancedAttributes