Cesium原理篇:6 Render模块(3: Shader)

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

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

       Cesium原理篇:6 Render模块(3: Shader)_第1张图片

图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文件,文件夹结构如下图:

 

Cesium原理篇:6 Render模块(3: Shader)_第2张图片

图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
};

如下图,是根节点对应的值:

 

Cesium原理篇:6 Render模块(3: Shader)_第3张图片

 

       其中,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中对这种情况进行了特殊处理。

你可能感兴趣的:(Cesium原理篇:6 Render模块(3: Shader))