【Cesium 历史博客】Cesium 中的图形技术:渲染体系结构

翻译有误请指出,规范性转载。@秋意正寒。

原文出处Graphics Tech in Cesium - Renderer Architecture | cesium.com

Cesium 是一个 WebGL 引擎,自 WebGL 1.0 在 2011 年 3 月发布后,官方就开始开发了。

官方将 Cesium 的 Renderer 视为他们自己的第四代渲染器,因为它基于他们的 OpenGlobe 的经验改进而来。除此之外,还有其他技术人员在 AGI 的 Insight 3D 和 STK 的经验。所以说,Cesium 的渲染器并不是凭空设计而来。

为什么需要一个渲染器?

当然,可以把 WebGL 的调度分散在各处,但是集中在一个渲染器对象中有很多好处:

  • 便于使用:渲染器提供了对 WebGL 的高级抽象,做了一层封装后,Cesium 的其他部分用起来就简单了,且不容易出问题。
  • 着色器流水线:Cesium 需要用到着色器流水线,这集成在渲染器中了。
  • 性能:缓存、最小化 WebGL 的调用全部集中在渲染器内,使得 Cesium 在其他地方调用的时候能获得不错的性能。
  • 状态:WebGL 是一个状态机器,渲染器就帮助 Cesium 在管理这些状态。
  • 可移植性:渲染器添加 WebGL 扩展、升级到 WebGL 2,或在特定的平台上工作是容易实现的。

为什么要自己动手?

推出 Cesium 的渲染器的主要原因是官方有丰富的经验,并且可以根据实际情况调整 Cesium 引擎以获得最佳性能。

Cesium 的着色器流水线远远超出了普通图形程序的概念范围。

还有一个原因是因为,官方推出这个其实是想通过此学习 JavaScript,而且 WebGL 在 2011 年的时候并不成熟(发文时是 2015年)。

渲染器长啥样?

在 Cesium 1.9 中,渲染器的主要组件(js对象)是:

VertexArray、RenderState、ShaderProgram、FrameBuffer

Renderer 类在 Source/Renderer 目录下。Renderer 的代码并不是公开的 api,所以谨慎使用。

左边一列的对象构成 Cesium 的绘制命令的基础,它们封装了 WebGL 的 drawcall 指令。为了渲染一帧,Cesium 在随处都会执行这些命令。

  • VertexArray(参考 VertexArray.js):顶点数据和索引数据。顶点属性和索引存储在 Buffer 对象中(参考 Buffer.js)。如果可行,顶点数组使用 OES_vertex_array_object 的扩展名以减少 WebGL 的调用次数(这句不太懂)。
  • RenderState(参考 RenderState.js):包括发出 drawcall 所需的 WebGL 状态数据,例如深度、混合和状态等。
  • ShaderProgram(参考 ShaderProgram.js):表示已编译、连接的 WebGLProgram。uniforms 可与 Cesium 的矩阵、笛卡尔变量、纹理、颜色等直接运作。
  • Framebuffer(参考 Framebuffer.js):帧缓存对象,包括纹理缓存、渲染缓存的容器,是 drawcall 所需要的素材。

着色器流水线(Shader Pipeline)

着色器保存在 Source/Shader 目录下的 .glsl 后缀名的文件中。

Cesium 会删除文件内的注释、无效空格,并转换为 js 代码(字符串)以便其他 Cesium 对象能调用,而无需重新请求文件。

Cesium 提供了一个庞大的 GLSL 函数库,包括函数、结构体、常量。如果你的代码需要用到自定义 glsl 代码,你完全可以不声明、不加入 #include 预编译指令,可以直接使用它们。

它们以 czm_ 开头标识。例如,这是一个天空大气的片元着色器:

czm_ellipsoid ellipsoid = czm_getWgs84EllipsoidEC();

vec3 direction = normalize(v_positionEC);
czm_ray ray = czm_ray(vec3(0.0), direction);

czm_raySegment intersection = czm_rayEllipsoidIntersectionInterval(ray, ellipsoid);
if (!czm_isEmpty(intersection)) {
    discard;
}

这些内置对象形成了有向无环图(DAG)。

在运行时,glsl 源代码将传递给 ShaderSource 对象,这个对象查找 czm_ 字符串并遍历 DAG 以生成最终的着色器。

如果在拾取操作时用到了着色器,它还会输出 pick id,而不是真正的颜色(这句话没看太懂)。

以上均在 Cesium 程序运行的时候完成的,而不是写死在引擎内部。因为有的绘制直到它要进行绘制时才知道着色器的编码顺序等。

内置的 GLSL uniform 被称为 自动 uniform。它也不需要声明或引入 #include,遍历 DAG 会一样遍历到。

自动 uniform 通常代表与帧相关(或视锥体相关、命令相关)的值,例如变换矩阵。见 AutomaticUniforms.js

例如,天空盒的顶点着色器使用到了自动 uniform 来转换一个 2x2x2 的立方体的坐标,这个立方体的中心在 True Equator Mean Equinox 框架,转换到裁剪坐标的中心:

attribute vec3 position;
varying vec3 v_texCoord;

void main()
{
    vec3 p = czm_viewRotation * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));
    gl_Position = czm_projection * vec4(p, 1.0);
    v_texCoord = position.xyz;
}

使用原始的 GLSL 源代码作为 key 来缓存着色器程序,以减少初始化和使用着色器时的 WebGL 调用数。参考 ShaderCache.js

执行(绘制)命令

熟悉 WebGL 的读者,应该知道绘制命令的执行是由 WebGLContext 对象的 drawXXX 函数执行的。它被封装在 Cesium 的 Context.prototype.draw 方法中,它做了这些事:

  • 如果与前一个命令不一样,那么绑定帧缓存(framebuffer)
  • 使当前渲染状态生效。由于渲染状态是不可变的,且能缓存,因此比较前一个状态和当前状态的差异,就能产生一个对已改变部分进行处理的函数进行下一步处理
  • 绑定着色器程序(当然,如果有需要也会编译、连接)并设置 uniforms 变量(包括 Cesium 自动的)
  • 绑定顶点数组并触发 drawElements 和 drawArrays

当一帧结束后,Context.prototype.endFrame 方法会解除着色器的 WebGLProgram 的绑定、解除对帧缓存、绘制缓存、纹理的绑定以清理状态。这样能减少每个绘制命令执行时渲染器的状态管理量。

Cesium 中的渲染器结构

渲染器将被 Scene 对象给 Primitive 对象来创建 WebGL 资源。例如,Globe 本身和三维模型。并且,渲染器还将执行绘制命令,将这些资源绘制到一帧上。

未来的工作

WebGL 2.0 的出现,需要对渲染器进行很多改进。

Uniform Buffers

与时下很多引擎一样,设置 uniform 变量是 Cesium 的瓶颈。Uniform buffers 在 WebGL 2 得到了性能上的提高。

Instancing

支持实例的绘制使得 Cesium 能渲染大量对象,例如树,当然每棵树可以有不同的属性,例如位置、高度等。

致谢

感谢 Greg Beatty 和 Scott Hunter,他们编写了 glsl 着色器。

参考

[Cozzi11] Patrick Cozzi and Kevin Ring. 3D Engine Design for Virtual Globes. CRC Press. 2011.

posted @ 2020-11-23 00:02  四季留歌  阅读(1058)  评论(0编辑  收藏  举报