Cesium渲染模块之概述

1. 引言

Cesium是一款三维地球和地图可视化开源JavaScript库，使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，基于Apache2.0许可的开源程序，可以免费用于商业和非商业用途

Cesium官网：Cesium: The Platform for 3D Geospatial

Cesium GitHub站点：CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps (github.com)

API文档：Index - Cesium Documentation

通过阅读源码，理清代码逻辑，有助于扩展与开发，笔者主要参考了以下两个系列的文章

• Cesium教程系列汇总 - fu*k - 博客园 (cnblogs.com)
• 开源GIS/Cesium源码 - 随笔分类 - 四季留歌 - 博客园 (cnblogs.com)

渲染是前端可视化的核心，本文描述Cesium的渲染模块概述

2. WebGL渲染流程

WebGL（或者说OpenGL）的绘制流程（图形渲染管线，Graphics Pipeline）如下：

• 顶点着色(vertex shader)阶段将CPU传入的数据进行一定的变换处理
• 图元装配(shape assembly)阶段的就是上阶段的顶点数据处理成图元（如，三角形）
• 几何着色(geometry shader)阶段是根据一定规则将输入的图元变更或输出更多的图元（可选）
• 光栅化(rasterization)阶段的是将上阶段的图元进行计算得到图元占据的屏幕像素列表
• 片元着色(fragment)阶段是将上阶段生成的片元进行着色处理后
• 测试与混合阶段计算片元的深度、颜色等从而进行舍弃或保留

绘制流程繁琐，然而，我们能配置的只有三个蓝色的着色器部分。几何着色器可选，一般配置顶点着色器和片段着色器即可，即，以下步骤就是配置顶点着色器和片段着色器

2.1 生成顶点数据

生成顶点缓冲对象(Vertex Buffer Objects, VBO)并加载数据：

const vertices = new Float32Array([
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
    0.0, 0.5, 0.0,
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

2.2 链接属性数据

顶点数组对象(Vertex Array Object, VAO)与VBO绑定，用于保存属性数据（先绑定VAO，再创建VBO就会绑定到VAO上）：

const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0)

2.3 创建顶点着色器

创建顶点着色器(Vertex Shader)并编译：

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
                attribute vec3 aPos;

                void main()
                {
                    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
                }
                `);
gl.compileShader(vertexShader);

2.4 创建片段着色器

创建片段着色器(Fragment Shader)并编译：

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
                #version 100
                void main()
                {
                    gl_FragColor  = vec4(1.0, 0.5, 0.2, 1.0);
                }
                `);
gl.compileShader(fragmentShader);

2.5 链接着色器

着色器程序对象(Shader Program Object)是多个着色器合并之后并最终链接完成的版本：

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

2.6 绘制

开始绘制：

gl.clearColor(0.2, 0.3, 0.3, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);

2.7 流程总结

上述几乎可以说是最简化的WebGL渲染流程，包含的基本要素有

• VBO，顶点缓冲对象 --------> 存顶点数据
• VAO，顶点数组对象（WebGL 2支持）--------> 存顶点属性
• Shader，着色器（包括顶点和片段着色器） --------> 运算和渲染
• Shader Program，着色器程序 --------> 连接着色器

此外，常用的还有：

• Texture，纹理（通常是一张图片）
• Framebuffer，帧缓冲对象（FBO）
• Renderbuffer，渲染缓冲对象（RBO）
• CubeMap，立方体贴图

3. Cesium渲染模块

查看Cesium渲染模块中的文件：

$ ls packages/engine/Source/Renderer/
        AutomaticUniforms.js
        Buffer.js
        BufferUsage.js
        ClearCommand.js
        ComputeCommand.js
        ComputeEngine.js
        Context.js
        ContextLimits.js
        CubeMap.js
        CubeMapFace.js
        DrawCommand.js
        Framebuffer.js
        FramebufferManager.js
        MipmapHint.js
        MultisampleFramebuffer.js
        Pass.js
        PassState.js
        PixelDatatype.js
        RenderState.js
        Renderbuffer.js
        RenderbufferFormat.js
        Sampler.js
        ShaderBuilder.js
        ShaderCache.js
        ShaderDestination.js
        ShaderFunction.js
        ShaderProgram.js
        ShaderSource.js
        ShaderStruct.js
        Texture.js
        TextureCache.js
        TextureMagnificationFilter.js
        TextureMinificationFilter.js
        TextureWrap.js
        UniformState.js
        VertexArray.js
        VertexArrayFacade.js
        createUniform.js
        createUniformArray.js
        demodernizeShader.js
        freezeRenderState.js
        loadCubeMap.js

通过文件名，不难发现，Cesium的渲染模块主要包含：

• Buffer
• VAO
• Shader
• Texture
• Framebuffer
• Renderbuffer
• CubeMap

以上是WebGL渲染流程常见的对象，另外Cesium渲染模块还有：

• Command，指令对象（包含ClearCommand、ComputeCommand、DrawCommand）
• Pass，通道（渲染顺序）
• Sampler，采样器
• Uniform，GPU全局变量
• Context，WebGL上下文

3.1 Context对象

相关代码文件：

• Context.js
• ContextLimits.js

Context对象是对WebGL上下文对象的封装，包含Pass、Uniform等，并且对WebGL 1.0和WebGL 2.0做了兼容处理：

function Context(canvas, options) {
  this._canvas = canvas;
  this._originalGLContext = glContext;
  this._gl = glContext;
  this._webgl2 = webgl2;

  this._id = createGuid();
  this._clearColor = new Color(0.0, 0.0, 0.0, 0.0);
  this._clearDepth = 1.0;
  this._clearStencil = 0;
  // ...
  const us = new UniformState();
  const ps = new PassState(this);
  const rs = RenderState.fromCache();
  this._defaultPassState = ps;
  this._defaultRenderState = rs;
  // ...
  RenderState.apply(gl, rs, ps);
}

3.2 Buffer对象

相关代码文件：

• Buffer.js
• BufferUsage.js

Buffer对象主要包含顶点缓冲对象(Vertex Buffer Objects, VBO)和索引缓冲对象(Index Buffer Object，IBO)

function Buffer(options) {
  const gl = options.context._gl;
  gl.bindBuffer(bufferTarget, buffer);
  gl.bufferData(bufferTarget, hasArray ? typedArray : sizeInBytes, usage);
  gl.bindBuffer(bufferTarget, null);
}

Buffer.createVertexBuffer = function (options) {
  return new Buffer({
      // ...
  });
};

Buffer.createIndexBuffer = function (options) {
  const buffer = new Buffer({
      // ...
  });
  return buffer;
};

3.3 VAO对象

相关代码文件：

• VertexArray.js
• VertexArrayFacade.js

顶点数组对象(Vertex Array Object, VAO)与VBO绑定，用于保存属性数据

function VertexArray(options) {
    // ...
    const context = options.context;
    const gl = context._gl;
    const attributes = options.attributes;
    const indexBuffer = options.indexBuffer;

    let vao;
    vao = context.glCreateVertexArray();
    context.glBindVertexArray(vao);
    bind(gl, vaAttributes, indexBuffer);
    context.glBindVertexArray(null);
}

3.4 Shader对象

相关代码文件：

• ShaderBuilder.js
• ShaderCache.js
• ShaderStruct.js
• ShaderSource.js
• ShaderProgram.js
• ShaderFunction.js
• ShaderDestination.js

Cesium渲染模块中的Shader对象包含从创建GLSL到创建Shader Program整个流程

流程大致为：

• Cesium中支持分段编写GLSL代码，包括ShaderStruct、ShaderFunction、ShaderDestination
• 将分段的代码组合成GLSL，即ShaderSource
• 使用ShaderSource创建的ShaderProgram会缓存起来，即ShaderCache
• 需要新的ShaderProgram时，先查询缓存中是否有，有就复用，无则创建

3.5 Texture对象

主要代码文件：

• Texture.js
• TextureCache.js
• TextureMagnificationFilter.js
• TextureMinificationFilter.js
• TextureWrap.js

Cesium中的Texture对象是对WebGL中Texture对象的进一步封装：

function Texture(options) {
   // ...
  const context = options.context;
  const gl = context._gl;
  const textureTarget = gl.TEXTURE_2D;
  const texture = gl.createTexture();

  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(textureTarget, texture);
  // Source: ImageData, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
  gl.texImage2D(
      textureTarget,
      0,
      internalFormat,
      pixelFormat,
      PixelDatatype.toWebGLConstant(pixelDatatype, context),
      source
  );
  gl.bindTexture(textureTarget, null);

  this.sampler = defined(options.sampler) ? options.sampler : new Sampler();
}

3.6 Framebuffer对象

主要代码文件：

• Framebuffer.js
• FramebufferManager.js
• MultisampleFramebuffer.js

Cesium中的Framebuffer对象是对WebGL中Framebuffer对象的进一步封装：

function Framebuffer(options) {
  // ...
  this._gl = gl;
  this._framebuffer = gl.createFramebuffer();
  this._bind();

  this._colorTextures[i] = texture;
  this._colorRenderbuffers[i] = renderbuffer;
  this._depthTexture = texture;
  this._depthRenderbuffer = renderbuffer;
  this._stencilRenderbuffer = renderbuffer;
  this._depthStencilTexture = texture;
  this._depthStencilRenderbuffer = renderbuffer;

  this._unBind();
}

3.7 Renderbuffer对象

主要代码文件：

• Renderbuffer.js
• RenderState.js
• RenderbufferFormat.js

Cesium中的Renderbuffer对象是对WebGL中Renderbuffer对象的进一步封装：

function Renderbuffer(options) {
  // ...
  const gl = context._gl;
  this._renderbuffer = this._gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, this._renderbuffer);
  gl.renderbufferStorage(gl.RENDERBUFFER, format, width, height);
  gl.bindRenderbuffer(gl.RENDERBUFFER, null);
}

3.8 CubeMap对象

主要代码文件：

• CubeMap.js
• CubeMapFace.js
• loadCubeMap.js

Cesium中的CubeMap对象是对WebGL中CubeMap对象的进一步封装：

function CubeMap(options) {
  // ...
  const gl = context._gl;
  const textureTarget = gl.TEXTURE_CUBE_MAP;
  const texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(textureTarget, texture);
  gl.texImage2D()
  // ...
  gl.bindTexture(textureTarget, null);

  this.sampler = defined(options.sampler) ? options.sampler : new Sampler();
}

3.9 Command

主要代码文件：

• ClearCommand.js
• DrawCommand.js
• ComputeEngine.js
• ComputeCommand.js

Command对象主要有三类：

• ClearCommand
• DrawCommand
• ComputeCommand

Command对象包含执行的指令参数和执行方法，比如最简单的ClearCommand：

function ClearCommand(options) {
  // ...
  this.color = options.color;
  this.depth = options.depth;
  this.stencil = options.stencil;
  this.renderState = options.renderState;
  this.framebuffer = options.framebuffer;
  this.owner = options.owner;
  this.pass = options.pass;
}

ClearCommand.prototype.execute = function (context, passState) {
  context.clear(this, passState);
};

ClearCommand包含颜色、深度、通道等指令参数和执行方法 context.clear(this, passState)

3.10 Pass

主要代码文件：

• Pass.js
• PassState.js

Pass是一种渲染优先级，数值越低，等级越高：

const Pass = {
  ENVIRONMENT: 0,
  COMPUTE: 1,
  GLOBE: 2,
  TERRAIN_CLASSIFICATION: 3,
  CESIUM_3D_TILE: 4,
  CESIUM_3D_TILE_CLASSIFICATION: 5,
  CESIUM_3D_TILE_CLASSIFICATION_IGNORE_SHOW: 6,
  OPAQUE: 7,
  TRANSLUCENT: 8,
  VOXELS: 9,
  OVERLAY: 10,
  NUMBER_OF_PASSES: 11,
};

3.11 Sampler

主要代码文件：

• Sampler.js

Sampler是将采样方式封装：

function Sampler(options) {
  // ...
  this._wrapS = wrapS;
  this._wrapT = wrapT;
  this._minificationFilter = minificationFilter;
  this._magnificationFilter = magnificationFilter;
  this._maximumAnisotropy = maximumAnisotropy;
}

3.12 Uniform

主要代码文件：

• createUniform.js
• UniformState.js
• createUniformArray.js

Uniform是对WebGL中一系列Uniform的封装，比如UniformFloat：

function UniformFloat(gl, activeUniform, uniformName, location) {
  // ...
  this.name = uniformName;
  this.value = undefined;
  this._value = 0.0;
  this._gl = gl;
  this._location = location;
}

UniformFloat.prototype.set = function () {
  if (this.value !== this._value) {
    this._value = this.value;
    this._gl.uniform1f(this._location, this.value);
  }
};

4. 参考资料

[1]WebGL2RenderingContext - Web APIs | MDN (mozilla.org)

[2]LearnOpenGL CN (learnopengl-cn.github.io)

[3]Cesium教程系列汇总 - fu*k - 博客园 (cnblogs.com)

[4]Renderbuffer Object - OpenGL Wiki (khronos.org)

[5]基于JavaScript的OpenGL 01 之Hello Triangle - 当时明月在曾照彩云归 - 博客园 (cnblogs.com)