cesium比较区别 opengl_Cesium原理篇：6 Render模块(3: Shader)【转】

https://www.cnblogs.com/fuckgiser/p/5975274.html

在介绍Renderer的第一篇，我就提到WebGL1.0对应的是OpenGL ES2.0，也就是可编程渲染管线。之所以单独强调这一点，算是为本篇埋下一个伏笔。通过前两篇，我们介绍了VBO和Texture两个比较核心的WebGL概念。假设生产一辆汽车，VBO就相当于这个车的骨架，纹理相当这个车漆，但有了骨架和车漆还不够，还需要一台机器人来加工，最终才能成产出这辆汽车。而Shader模块就是负责这个生产的过程，加工参数(VBO，Texture)，执行渲染任务。

这里假设大家对Shader有一个基本的了解，这一块内容也很多，不可能简单两句轻描淡写就豁然开朗，而且我也没有进行过系统的学习，所以就不班门弄斧了。进入主题，来看看Cesium对Shader的封装。

图1：ES2.0可编程渲染管线

上图是可编程渲染管线的一个大概流程，我们关注的两个橙色的圆角矩形部分，分别是顶点着色器和片源着色器。既然是可编程渲染管线，面向Shader的开发者提供了一种称为GLSL的语言，如果你懂C的话，两者语法是相当的，所以从语法层面学习成本不大。

ShaderSource创建

首先，Cesium提供了ShaderSource类来加载GLSL代码，我们来看一下它对应的拷贝构造函数：

ShaderSource.prototype.clone = function() {

return new ShaderSource({

sources : this.sources,

defines : this.defines,

pickColorQuantifier : this.pickColorQualifier,

includeBuiltIns : this.includeBuiltIns

});

};

sources

必须，代码本身，这里是一个数组，可以是多个代码片段的叠加

defines

非必须，执行该代码时声明的预编译宏

pickColorQualifier

非必须，当需要点击选中地物时设置此参数，值为'uniform'，下面会介绍其大概

includeBuiltIns

非必须，默认为true，认为需要加载Cesium自带的GLSL变量或function，下面会详细介绍

在使用上，通常只需要指定前两个参数，就可以创建一个顶点或片元着色器，比如在Globe中创建渲染地球的着色器代码就是这么的简单：

// 顶点着色器

this._surfaceShaderSet.baseVertexShaderSource = new ShaderSource({

sources : [GroundAtmosphere, GlobeVS]

});

// 片元着色器

this._surfaceShaderSet.baseFragmentShaderSource = new ShaderSource({

sources : [GlobeFS]

});

ShaderSource脚本加载

当然用起来简单，但其内部实现还是有些复杂的，在介绍ShaderSource前需要先了解两个知识点：CzmBuiltins&AutomaticUniforms。

CzmBuiltins

Cesium中提供了一些常用的GLSL文件，文件夹结构如下图：

图2：BuiltIn文件夹清单

如图所示主要分为三类(常量，方法，结构体)，这些都是Cesium框架内部比较常用的基本结构和方法，属于内建类型，它们的特点是前缀均为czm_并且通过CzmBuiltins.js(打包时gulp会自动生成该文件)引用所有内建的GLSL代码：

// 1 常量，例如：1 / Pi

onst float czm_oneOverPi = 0.3183098861837907;

// 方法，例如：八进制解码，地形数据中用于数据压缩

vec3 czm_octDecode(vec2 encoded)

{

encoded = encoded / 255.0 * 2.0 - 1.0;

vec3 v = vec3(encoded.x, encoded.y, 1.0 - abs(encoded.x) - abs(encoded.y));

if (v.z < 0.0)

{

v.xy = (1.0 - abs(v.yx)) * czm_signNotZero(v.xy);

}

return normalize(v);

}

// 结构体，例如：材质

struct czm_material

{

vec3 diffuse;

float specular;

float shininess;

vec3 normal;

vec3 emission;

float alpha;

};

AutomaticUniforms

然而作为参数而言，仅仅有这些Const常量还是不够的，比如在一个三维场景中，随着位置的变化，相机的状态也是需要更新的，比如ModelViewMatrix，ProjectMatrix以及ViewPort等变量通常也需要参与到GLSL的计算中，Cesium提供了AutomaticUniform类，用来封装这些内建的变量，构造函数如下：

function AutomaticUniform(options) {

this._size = options.size;

this._datatype = options.datatype;

this.getValue = options.getValue;

}

所有的内部变量都可以基于该构造函数创建，并添加到AutomaticUniforms数组中，并且在命名上也遵守czm_*的格式，通过命名就可以知道该变量是不是内建的，如果是，则从CzmBuiltins和AutomaticUniforms对应的列表(创建列表并维护的过程则是在ShaderSource中完成的，下面会讲)中找其对应的值就可以，这样，Cesium内部自动调用这些变量而不需要用户来处理，如果不是，则需要用户自己定义一个uniformMap的数组来自己维护。如下是AutomaticUniforms的代码片段，可以看到AutomaticUniforms中创建了czm_viewport变量，类型是vec4，并提供了getValue的方式，负责传值。

var AutomaticUniforms = {

czm_viewport : new AutomaticUniform({

size : 1,

datatype : WebGLConstants.FLOAT_VEC4,

getValue : function(uniformState) {

return uniformState.viewportCartesian4;

}

})

}

return AutomaticUniforms;

但这还有一个问题，只提供了getValue的方式，可以把值传到GLSL中，但这个值是怎么获取的，也就是setValue是如何实现，而且不需要用户来关心。如果你看的足够自信，会发现getValue中有一个uniformState参数，正是UniformState这个类的功劳了，Scene在初始化时会创建该属性，而UniformState提供了update方法，在每一帧Render中都会更新这些变量值，不需要用户自己来维护。

综上所述，也就是Cesium内部有一套内建的变量，常量，方法和结构体，这些内容之间有一套完整的机制保证他们的正常运作，而ShaderSource的第一个作用就是在初始化的时候声明_czmBuiltinsAndUniforms属性，并加载CzmBuiltins和AutomaticUniforms中的内建属性，建立一个全局的黄页，为整个程序服务。另外要强调的是，这个过程是在加载ShaderSource.js脚本时执行的，只会运行一次，不需要每次new ShaderSource的时候执行。

ShaderSource._czmBuiltinsAndUniforms = {};

// 合并automatic uniforms和Cesium内建实例

// CzmBuiltins是打包时自动创建的，里面包括所有内建实例的类型和命名

for ( var builtinName in CzmBuiltins) {

if (CzmBuiltins.hasOwnProperty(builtinName)) {

ShaderSource._czmBuiltinsAndUniforms[builtinName] = CzmBuiltins[builtinName];

}

}

// AutomaticUniforms数组是在AutomaticUniforms.js中创建并返回

for ( var uniformName in AutomaticUniforms) {

if (AutomaticUniforms.hasOwnProperty(uniformName)) {

var uniform = AutomaticUniforms[uniformName];

if (typeof uniform.getDeclaration === 'function') {

ShaderSource._czmBuiltinsAndUniforms[uniformName] = uniform.getDeclaration(uniformName);

}

}

}

Shader创建

上面介绍了ShaderSource的创建，当用户创建完VertexShaderSource和FragmentShaderSource后，下面就要创建ShaderProgram，将这两个ShaderSource关联起来。如下是SkyBox中创建ShaderProgram的示例代码：

command.shaderProgram = ShaderProgram.fromCache({

context : context,

vertexShaderSource : SkyBoxVS,

fragmentShaderSource : SkyBoxFS,

attributeLocations : attributeLocations

});

vertexShaderSource和fragmentShaderSource都属于之前我们提到的ShaderSource概念，attributeLocations则对应之前的VBO中VertexBuffer。GLSL中变量分为两种，一类是attribute，比如位置，法线，纹理坐标这些，每一个顶点对应的值都不同，一类是uniform，跟顶点无关，值都相同的。这里需要传入attribute变量，而uniform在渲染时才会指定。我们来看一下fromCache的内部实现，详细的介绍一下：

ShaderProgram.fromCache = function(options) {

// Cesium提供了ShaderCache缓存机制，可以重用ShaderProgram

return options.context.shaderCache.getShaderProgram(options);

};

ShaderCache.prototype.getShaderProgram = function(options) {

// 合并该ShaderProgram所用到的顶点和片元着色器的代码

var vertexShaderText = vertexShaderSource.createCombinedVertexShader();

var fragmentShaderText = fragmentShaderSource.createCombinedFragmentShader();

// 创建Cache缓存中Key-Value中的Key值

var keyword = vertexShaderText + fragmentShaderText + JSON.stringify(attributeLocations);

var cachedShader;

// 如果已存在，则直接用

if (this._shaders[keyword]) {

cachedShader = this._shaders[keyword];

// No longer want to release this if it was previously released.

delete this._shadersToRelease[keyword];

} else {

// 如果不存在，则需要创建新的ShaderProgram

var context = this._context;

var shaderProgram = new ShaderProgram({

gl : context._gl,

logShaderCompilation : context.logShaderCompilation,

debugShaders : context.debugShaders,

vertexShaderSource : vertexShaderSource,

vertexShaderText : vertexShaderText,

fragmentShaderSource : fragmentShaderSource,

fragmentShaderText : fragmentShaderText,

attributeLocations : attributeLocations

});

// Key-Value中的Value值

cachedShader = {

cache : this,

shaderProgram : shaderProgram,

keyword : keyword,

count : 0

};

添加到Cache中，并更新该Cache容器内总的shader数目

shaderProgram._cachedShader = cachedShader;

this._shaders[keyword] = cachedShader;

++this._numberOfShaders;

}

// 该ShaderProgram的引用计数值

++cachedShader.count;

return cachedShader.shaderProgram;

};

不难发现，fromCache最终是通过shaderCache.getShaderProgram方法实现ShaderProgram的创建，从这可以看出Cesium提供了ShaderCache缓存机制，可以重用ShaderProgram，通过双面的代码注释可以很好的理解这个过程。另外，1通过createCombinedVertexShader/createCombinedFragmentShader方法，生成最终的GLSL代码(下面会详细介绍)，并2创建ShaderProgram。下面讨论一下1和2的具体实现。

文件合并

前面我们提到Cesium提供了丰富的内建函数和变量，这样提高了代码的重用性，正因为如此，很可以出现一个GLSL代码是由多个代码片段组合而成的，因此ShaderSource.sources是一个数组类型，可以加载多个GLSL文件。这样，自然要提供一个多文件合并成一个GLSL代码的方法。

但合并代码并不只是单纯文本的叠加，算是一个简易的语法解析器，特别是一些内建变量的声明，我们来看一下combine代码的大致逻辑：

function combineShader(shaderSource, isFragmentShader) {

var i;

var length;

// sources中的文本合并

var combinedSources = '';

var sources = shaderSource.sources;

if (defined(sources)) {

for (i = 0, length = sources.length; i < length; ++i) {

// #line needs to be on its own line.

combinedSources += '\n#line 0\n' + sources[i];

}

}

// 去掉代码中的注释部分

combinedSources = removeComments(combinedSources);

// 最终的GLSL代码

var result = '';

// 支持的版本号

if (defined(version)) {

result = '#version ' + version;

}

// 添加预编译宏

var defines = shaderSource.defines;

if (defined(defines)) {

for (i = 0, length = defines.length; i < length; ++i) {

var define = defines[i];

if (define.length !== 0) {

result += '#define ' + define + '\n';

}

}

}

// 追加内建变量

if (shaderSource.includeBuiltIns) {

result += getBuiltinsAndAutomaticUniforms(combinedSources);

}

result += '\n#line 0\n';

// 追加combinedSources中的代码

result += combinedSources;

return result;

}

注释部分是基本的逻辑，1合并sources中的文件，2删除注释，3提取版本信息，4拼出最终的代码。4.1版本声明，4.2预编译宏，4.3内建变量的声明，4.4加载步骤1中的代码。这里的逻辑都还比较容易理解，但4.3，内建变量的声明还是比较复杂的，我们专门介绍一下。

function getBuiltinsAndAutomaticUniforms(shaderSource) {

var dependencyNodes = [];

// 获取Main根节点

var root = getDependencyNode('main', shaderSource, dependencyNodes);

// 生成该root依赖的所有节点，保存在dependencyNodes

generateDependencies(root, dependencyNodes);

// 根据依赖关系排序

sortDependencies(dependencyNodes);

// 创建需要的内建变量声明

var builtinsSource = '';

for (var i = dependencyNodes.length - 1; i >= 0; --i) {

builtinsSource = builtinsSource + dependencyNodes[i].glslSource + '\n';

}

return builtinsSource.replace(root.glslSource, '');

}

该部分的重点在于对dependencyNode的维护，我们先看看该节点的结构：

dependencyNode = {

name : name,

glslSource : glslSource,

dependsOn : [],

requiredBy : [],

evaluated : false

};

如下图，是根节点对应的值：

其中，name就是名称，根节点就是main函数入口；glslSource则是其内部的代码；dependsOn是他依赖的节点；requiredBy是依赖他的节点；evaluated用来表示该节点是否已经解析过。有了根节点root，下面就是顺藤摸瓜，最终构建出所有节点的队列，这就是generateDependencies函数做的事情，伪代码如下：

function generateDependencies(currentNode, dependencyNodes) {

// 更新标识，当前节点已经结果过

currentNode.evaluated = true;

// 正则表达式，搜索当前代码中符合czm_*的所有内建变量或函数

var czmMatches = currentNode.glslSource.match(/\bczm_[a-zA-Z0-9_]*/g);

if (defined(czmMatches) && czmMatches !== null) {

// remove duplicates

czmMatches = czmMatches.filter(function(elem, pos) {

return czmMatches.indexOf(elem) === pos;

});

// 遍历czmMatches找到的所有符合规范的变量，建立依赖关系，是一个双向链表

czmMatches.forEach(function(element) {

if (element !== currentNode.name && ShaderSource._czmBuiltinsAndUniforms.hasOwnProperty(element)) {

var referencedNode = getDependencyNode(element, ShaderSource._czmBuiltinsAndUniforms[element], dependencyNodes);

// currentNodetNode依赖referencedNode

currentNode.dependsOn.push(referencedNode);

// referencedNode被currentNodetNode依赖

referencedNode.requiredBy.push(currentNode);

// recursive call to find any dependencies of the new node

generateDependencies(referencedNode, dependencyNodes);

}

});

}

}

有了这个节点队列还并不能满足要求，因为队列中的元素是按照在glsl代码中出现的先后顺序来解析的，而元素之间也存在一个依赖关系，所以我们需要一个过程，把这个无序队列转化为一个有依赖关系的双向链表，这就是sortDependencies函数的工作。这其实是一个树的广度优先的遍历，左右上的顺序，遍历的过程中会解除requiredBy的关联，有兴趣的可以看一下源码。最后会判断是否有循环依赖的错误情况。也算是一个依赖关系的语法解析器。

至此，ShaderSource基本完成了自己的核心使命，当然，如果是拾取状态，属于特殊情况，则会更新片源着色器的代码，对于选中的地物赋予选中风格(颜色)，对应的函数为：ShaderSource.createPickFragmentShaderSource。

ShaderProgram创建

有了最终版本的着色器代码后，终于可以创建ShaderProgram了，构造函数如下，本身也是一个空壳，只有在渲染中第一次使用该ShaderProgram时进行WebGL层面的调用，避免不必要的资源消耗：

function ShaderProgram(options) {

this._vertexShaderSource = options.vertexShaderSource;

this._vertexShaderText = options.vertexShaderText;

this._fragmentShaderSource = options.fragmentShaderSource;

this._fragmentShaderText = modifiedFS.fragmentShaderText;

this.id = nextShaderProgramId++;

}

渲染状态

主要介绍渲染状态中ShaderProgram的相关操作。

绑定ShaderProgram

代码如上，在渲染时会先绑定该ShaderProgram，如果是第一次则会初始化。注释是里面的关键逻辑，应该比较容易理解，这里值得强调的是对uniform的区分，方便后面渲染中参数的传值。

ShaderProgram.prototype._bind = function() {

// 初始化

initialize(this);

// 绑定

this._gl.useProgram(this._program);

};

function initialize(shader) {

// 如果已经创建，则不需要初始化

if (defined(shader._program)) {

return;

}

var gl = shader._gl;

// 创建该Program，如果编译有错，则抛出异常

var program = createAndLinkProgram(gl, shader, shader._debugShaders);

// 获取attribute变量的数目

var numberOfVertexAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);

// 获取uniform变量的列表

var uniforms = findUniforms(gl, program);

// 根据czm_*规则区分uniform，分为自定义uniform和内建uniform

var partitionedUniforms = partitionUniforms(shader, uniforms.uniformsByName);

// 保存属性

shader._program = program;

shader._numberOfVertexAttributes = numberOfVertexAttributes;

shader._vertexAttributes = findVertexAttributes(gl, program, numberOfVertexAttributes);

shader._uniformsByName = uniforms.uniformsByName;

shader._uniforms = uniforms.uniforms;

shader._automaticUniforms = partitionedUniforms.automaticUniforms;

shader._manualUniforms = partitionedUniforms.manualUniforms;

shader.maximumTextureUnitIndex = setSamplerUniforms(gl, program, uniforms.samplerUniforms);

}

findUniforms

createUniform封装了所有Uniform类型的创建方法，并提供set函数，实现变量值和WebGL之间的传递。构造函数如下：

function createUniform(gl, activeUniform, uniformName, location) {

switch (activeUniform.type) {

case gl.FLOAT:

return new UniformFloat(gl, activeUniform, uniformName, location);

case gl.FLOAT_VEC2:

return new UniformFloatVec2(gl, activeUniform, uniformName, location);

case gl.FLOAT_VEC3:

return new UniformFloatVec3(gl, activeUniform, uniformName, location);

case gl.FLOAT_VEC4:

return new UniformFloatVec4(gl, activeUniform, uniformName, location);

case gl.SAMPLER_2D:

case gl.SAMPLER_CUBE:

return new UniformSampler(gl, activeUniform, uniformName, location);

case gl.INT:

case gl.BOOL:

return new UniformInt(gl, activeUniform, uniformName, location);

case gl.INT_VEC2:

case gl.BOOL_VEC2:

return new UniformIntVec2(gl, activeUniform, uniformName, location);

case gl.INT_VEC3:

case gl.BOOL_VEC3:

return new UniformIntVec3(gl, activeUniform, uniformName, location);

case gl.INT_VEC4:

case gl.BOOL_VEC4:

return new UniformIntVec4(gl, activeUniform, uniformName, location);

case gl.FLOAT_MAT2:

return new UniformMat2(gl, activeUniform, uniformName, location);

case gl.FLOAT_MAT3:

return new UniformMat3(gl, activeUniform, uniformName, location);

case gl.FLOAT_MAT4:

return new UniformMat4(gl, activeUniform, uniformName, location);

default:

throw new RuntimeError('Unrecognized uniform type: ' + activeUniform.type + ' for uniform "' + uniformName + '".');

}

}

这样，我们找到所有的uniforms，并根据其对应的type来封装，set方法相当于虚函数，不同的类型有不同的实现方法，这样的好处是在传值时直接调用set方法，而不需要因为类型的不同而分散注意力。

_setUniforms

我们在ShaderProgram初始化的时候，已经完成了对attribute变量的赋值过程，现在则是对uniform变量的赋值。这里分为两种情况，自定义和内建uniform两种情况，严格说还包括纹理的samplerUniform变量。

uniformMap

对应自定义的变量，会构造一个uniformMap赋给DrawCommand(后续会介绍，负责整个渲染的调度，将VBO，Texture，Framebuffer和Shader串联起来)，如下是一个最简单的UniformMap示例：

var uniformMap = {

u_initialColor : function() {

return this.properties.initialColor;

}

｝

其中u_initialColor就是该uniform变量的name，return则是其返回值。接下来我们来看看setUniforms代码：

ShaderProgram.prototype._setUniforms = function(uniformMap, uniformState, validate) {

var len;

var i;

if (defined(uniformMap)) {

var manualUniforms = this._manualUniforms;

len = manualUniforms.length;

for (i = 0; i < len; ++i) {

var mu = manualUniforms[i];

mu.value = uniformMap[mu.name]();

}

}

var automaticUniforms = this._automaticUniforms;

len = automaticUniforms.length;

for (i = 0; i < len; ++i) {

var au = automaticUniforms[i];

au.uniform.value = au.automaticUniform.getValue(uniformState);

}

// It appears that assigning the uniform values above and then setting them here

// (which makes the GL calls) is faster than removing this loop and making

// the GL calls above. I suspect this is because each GL call pollutes the

// L2 cache making our JavaScript and the browser/driver ping-pong cache lines.

var uniforms = this._uniforms;

len = uniforms.length;

for (i = 0; i < len; ++i) {

uniforms[i].set();

}

};

首先，无论是manualUniforms还是automaticUniforms，都是经过createUniform封装后的uniform，这里更新它们的value，通过uniformMap或getValue方法，这两个在上面的内容中已经介绍过，然后uniforms[i].set()，实现最终向WebGL的传值。这里我保留了Cesium的注释，里面是一个很有意思的性能调优，不妨自己看看。

总结

终于写完了，有一种如释重负的感觉。ShaderProgram本身并不复杂，但本身是一个面向过程的方式，Cesium为了达到面向状态的目的做了大量的封装，在使用中更容易理解和维护。本文主要介绍这种封装的思路和技巧，对我而言，这个过程中还是很有收获，也加深了我对Shader的理解。我一直担心很多人可能看完后似懂非懂，确实知识点很多，而且之间的联系也很紧密，关键是需要对WebGL在这一块的内容需要有一个扎实的认识，才能较好的解读这层封装的意义。我尽量说的详细一些，但精力和能力有限，我自认为对这一块了解已经很清晰了，但也不敢打包票。所以，如果真的想要了解，还是需要亲自调试代码，亲自查探一下本文中提到的相关代码部分。

另外，个人认为shadersource在combine函数中还是很消耗计算的，如果执行ShaderProgram.fromCache都会执行此函数两遍(顶点和片元)，所以这也是一个性能隐患处，比如GlobeSurfaceTile，如果每一个Tile都从ShaderCache中获取对应的ShaderProgram，尽管ShaderProgram只会创建一次，但每一次在Cache中通过Key查找Value的过程中，构建Key的代价也是很大的，这也是为什么Cesium有提供了GlobeSurfaceShaderSet来的原因所在(之一)。

最后要提醒一下，本文主要提供的是一个大概的流程，对于一些特殊情况并未涉及，比如GlobeSurfaceTile中，有可能出现多影像图层叠加的情况，也就是多重纹理，但N不固定的情况，GlobeSurfaceShaderSet.prototype.getShaderProgram中对这种情况进行了特殊处理。