• 热门专题

Cesium理篇:Batch

作者:fuckgiser  发布日期:2016-12-22 20:36:06
Tag标签:理篇  
  •        通过之前的Material和Entity介绍,不知道你有没有发现,当我们需要添加一个rectangle时,有两种方式可供选择,我们可以直接添加到Scene的PrimitiveCollection,也可以构造一个Entity,添加到Viewer的EntityCollection中,代码如下:

    // 直接构造Primitive,添加
    rectangle = scene.primitives.add(new Cesium.Primitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : new Cesium.RectangleGeometry({
                rectangle : Cesium.Rectangle.fromDegrees(-120.0, 20.0, -60.0, 40.0),
                vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
            })
        }),
        appearance : new Cesium.EllipsoidSurfaceAppearance({
            aboveGround : false
        })
    }));
    
    // 间接构造一个Entity,Cesium内部将其转化为Primitive
    viewer.entities.add({
        rectangle : {
            coordinates : Cesium.Rectangle.fromDegrees(-92.0, 20.0, -86.0, 27.0),
            outline : true,
            outlineColor : Cesium.Color.WHITE,
            outlineWidth : 4,
            stRotation : Cesium.Math.toRadians(45),
            material : stripeMaterial
        }
    });

           两者有何不同,为什么还要提供Entity这种方式,绕了一大圈,最后照样是一个primitive。当然,有一个因素是后者调用简单,对用户友好。但还有一个重点是内部在把Entity转为Primitive的这条生产线上,会根据Entity的不同进行打组分类,好比快递的分拣线会将同一个目的地的包裹分到一类,然后用一个大的箱子打包送到该目的地,目的就是优化效率,充分利用显卡的并发能力。

           在Entity转为Primitive的过程中,GeometryInstance是其中的过渡类,以Rectangle为例,我们看看构造GeometryInstance的过程:

    RectangleGeometryUpdater.prototype.createFillGeometryInstance = function(time) {
        if (this._materialProperty instanceof ColorMaterialProperty) {
            var currentColor = Color.WHITE;
            if (defined(this._materialProperty.color) && (this._materialProperty.color.isConstant || isAvailable)) {
                currentColor = this._materialProperty.color.getValue(time);
            }
            color = ColorGeometryInstanceAttribute.fromColor(currentColor);
            attributes = {
                show : show,
                color : color
            };
        } else {
            attributes = {
                show : show
            };
        }
    
        return new GeometryInstance({
            id : entity,
            geometry : new RectangleGeometry(this._options),
            attributes : attributes
        });
    }

           首先,该材质_materialProperty就是构建Entity时传入的材质对象,attributes则用来标识该Geometry实例化的attribute属性,Cesium内部判断该材质是否为color类型,进而对应不同的实例化attribute。在其他GeometryUpdater方法中都是此逻辑,因此在材质的处理上,只对color进行了实例化的处理。这里留意一下appearance参数,可以看到主要对应perInstanceColorAppearanceType和materialAppearanceType两种,分别封装ColorMaterialProperty和其他MaterialProperty,这个在之前的Material中已经讲过。

    Batch

           Cesium通过GeometryInstance作为标准,来达到物以类聚鸟以群分的结果,这个标准就是如上的介绍,有了标准还不够,还需要为这个标准搭建一条流水线,将标准转化为行动。这就是Batch的作用。之前在Entity中提到GeometryVisualizer提供了四种Batch,我们以StaticGeometryColorBatch和StaticGeometryPerMaterialBatch为例,对比说明一下这个流水线的流程。

           我们在此来到DataSourceDisplay类,初始化是针对每一个Updater,都封装了一个Visualizer.我们还是以RectangleGeometry为例展开:

    new GeometryVisualizer(WallGeometryUpdater, scene, entities)
    
    function GeometryVisualizer(type, scene, entityCollection) {
        for (var i = 0; i < numberOfShadowModes; ++i) {
            this._outlineBatches[i] = new StaticOutlineGeometryBatch(primitives, scene, i);
            this._closedColorBatches[i] = new StaticGeometryColorBatch(primitives, type.perInstanceColorAppearanceType, true, i);
            this._closedMaterialBatches[i] = new StaticGeometryPerMaterialBatch(primitives, type.materialAppearanceType, true, i);
            this._openColorBatches[i] = new StaticGeometryColorBatch(primitives, type.perInstanceColorAppearanceType, false, i);
            this._openMaterialBatches[i] = new StaticGeometryPerMaterialBatch(primitives, type.materialAppearanceType, false, i);
        }
    }

           而每一次添加的Entity都会以事件的方式通知到每一个Updater绑定的GeometryVisualizer,调用insertUpdaterIntoBatch方法,根据每个Entity材质的不同放到对应的Batch队列中,其实Cesium的batch很简单,就是看是否是color类型的材质,只有这一个逻辑判断:

    function insertUpdaterIntoBatch(that, time, updater) {    
        if (updater.fillMaterialProperty instanceof ColorMaterialProperty) {
            that._openColorBatches[shadows].add(time, updater);
        } else {
            that._openMaterialBatches[shadows].add(time, updater);
        }
    }

           我们先看ColorMaterialProperty材质的处理方式:

    function StaticGeometryColorBatch(primitives, appearanceType, closed, shadows) {
        this._solidBatch = new Batch(primitives, false, appearanceType, closed, shadows);
        this._translucentBatch = new Batch(primitives, true, appearanceType, closed, shadows);
    }
    
    StaticGeometryColorBatch.prototype.add = function(time, updater) {
        var instance = updater.createFillGeometryInstance(time);
        if (instance.attributes.color.value[3] === 255) {
            this._solidBatch.add(updater, instance);
        } else {
            this._translucentBatch.add(updater, instance);
        }
    };

           可见,按照颜色是否透明分为两类,这个不难理解,因为这两类对应的PASS不同,渲染的优先级不一样。同时,在添加到对应batch队列前,会调用Updater.createFillGeometryInstance方法创建该Geometry对应的Instance。因此,这里体现了Cesium的一个规范,每一个GeometryGraphics类型都对应了一个该Geometry的Updater类,该Updater类通过一套create*geometryInstance方法,实现不同的GeometryGraphics到GeometryInstance的标准化封装。下面是RectangleGeometryUpdater提供的三个create方法:

    // 填充面的geoinstance
    RectangleGeometryUpdater.prototype.createFillGeometryInstance
    // 边框线的geoinstance
    RectangleGeometryUpdater.prototype.createOutlineGeometryInstance
    // 针对动态批次
    RectangleGeometryUpdater.prototype.createDynamicUpdater

           前两个不用多说,看注释。后一个一看dynamic,看上去牛逼,其实只是将creategeometryinstance的过程延后进行,不是在add中创建,而是在update的时候创建。接着在Batchupdate中,将batch队列中所有的geometryinstances封装成一个Primitve,这个流水线至此结束。因为我们在之前的Entity中介绍过这个过程,所以不在此展开。下面,我们在看看StaticGeometryPerMaterialBatch,对比一下两者的不一样。

    StaticGeometryPerMaterialBatch.prototype.add = function(time, updater) {
        var items = this._items;
        var length = items.length;
        for (var i = 0; i < length; i++) {
            var item = items[i];
            if (item.isMaterial(updater)) {
                item.add(time, updater);
                return;
            }
        }
        var batch = new Batch(this._primitives, this._appearanceType, updater.fillMaterialProperty, this._closed, this._shadows);
        batch.add(time, updater);
        items.push(batch);
    };

          可以看到,非颜色材质的batch里面还有一个items数组,会判断当前的updater中的材质是否存在于items数组中,如果没有,则根据该材质创建一个新的batch,并添加到items数组中。因为多了这一层,所以之前Updater.createFillGeometryInstance的调用延后到batch.add的过程中,并无其他不同。然后调用batch.update,以材质类型为标准创建对应的primitive。

    BatchTable

           对于这些实例化的属性,Primitive在update中对其进行处理,思路就是将这些值保存到一张RGBA的纹理,并根据实例化属性的长度构建对应的VBO,从而方便Shader中的使用。下面,我们以两个Rectangle为例,来看看详细的过程。

    createBatchTable

    function createBatchTable(primitive, context) {
        // 0 获取instance
        // 获取该Primitive中instance数组
        var geometryInstances = primitive.geometryInstances;
        var instances = (isArray(geometryInstances)) ? geometryInstances : [geometryInstances];
        
        var attributeIndices = {};
        // 获取这些instances中相同的attribute属性字段的名称
        var names = getCommonPerInstanceAttributeNames(instances);
        
        // 1创建attribute
        // 创建这些属性字段的attribute,包括对应的变量名,字段类型等
        // indices是他们的索引
        for (i = 0; i < length; ++i) {
            name = names[i];
            attribute = instanceAttributes[name];
    
            attributeIndices[name] = i;
            attributes[i] = {
                functionName : 'czm_batchTable_' + name,
                componentDatatype : attribute.componentDatatype,
                componentsPerAttribute : attribute.componentsPerAttribute,
                normalize : attribute.normalize
            };
        }
        
        // 2为attributes赋值
        // 遍历所有的instance,取出每一个instance对应的attribute值
        // 将这些值按照其字段类型保存到batchTable中
        for (i = 0; i < numberOfInstances; ++i) {
            var instance = instances[i];
            instanceAttributes = instance.attributes;
    
            for (var j = 0; j < length; ++j) {
                name = names[j];
                attribute = instanceAttributes[name];
                var value = getAttributeValue(attribute.value);
                var attributeIndex = attributeIndices[name];
                batchTable.setBatchedAttribute(i, attributeIndex, value);
            }
        }
    
        // 4 将batch的结果保存在primitive中,方便下面的处理
        primitive._batchTable = batchTable;
        primitive._batchTableAttributeIndices = attributeIndices;
    }

           如上,可以看到BatchTable可以认为是这些instance的一个实例化属性表,属性也是按照VBO的结构来设计的,就是为了后续shader中使用的方便。

    BatchTable.prototype.update

    BatchTable.prototype.update = function(frameState) {
        createTexture(this, context);
        updateTexture(this);
    }

           创建完BatchTable,则调用update,将该Table的属性值以RGBA的方式保存到一张Texture中,这类似于一个float纹理,但通用性更强一些,毕竟有一些浏览器竟然不支持float纹理。比如ColorMaterialProperty,里面有color,show,distanceDisplayCondition三个实例化属性,分别控制颜色,是否可见以及可见范围的控制。实际上,还包括pickColor,boundingSphereRadius,boundingSphereCenter3DHigh,boundingSphereCenter3DLow,boundingSphereCenter2DHigh,boundingSphereCenter2DLow共计9个属性,其中Center占了四个属性,我们后续有机会在详细说一下Cesium的算法细节,目的是为了避免近距离观察物体时因为精度导致的抖动问题,用两个float来表示一个double的思路来解决。这样,假如我们有两个instance对象,则该纹理x维度是9*2 = 18,而大多数情况下,y维度则始终为1(只要x维度的长度不超过显卡最大纹理长度的限制),相当于一个一维纹理,其实就是一个hashtable。

           createTexture后就是updateTexture就是把我们之前set的attribute属性值保存到该纹理中。

    updateBatchTableBoundingSpheres

           这个不多讲了,就是刚才说的,把centre的xyz每一个属性保存为两个float的过程。

    createShaderProgram

    BatchTable.prototype.getVertexShaderCallback Primitive._appendShowToShader Primitive._appendDistanceDisplayConditionToShader Primitive._updateColorAttribute

           通过如上几个函数,添加处理BatchTable部分的片源着色器代码。

    createCommands

    BatchTable.prototype.getUniformMapCallback = function() {
        var that = this;
        return function(uniformMap) {
            var batchUniformMap = {
                batchTexture : function() {
                    return that._texture;
                },
                batchTextureDimensions : function() {
                    return that._textureDimensions;
                },
                batchTextureStep : function() {
                    return that._textureStep;
                }
            };
    
            return combine(uniformMap, batchUniformMap);
        };
    };

     

           如上,在创建command时,创建对应的uniformMap,传入uniform变量。

    总结

           如上就是Cesium批次流程的大概流程,着重介绍了BatchTable这种思想,如果我们在实际设计中这也是值得我们学习借鉴的地方。打个比方,如果你对相机不熟悉,就用自动对焦,则基本就是傻瓜操作,而如果你比较熟悉,则可以用单反,自己来设置参数。Batch流程也是如此,只是解决了最常见,最基本的分类,如果你足够熟悉,可以基于Primitive自己来手动完成分组的过程,多快好省,可以不同类型的geometry来做一个批次,always try, never die。

           好了,这里忽略了两个地方,一个是这个面如何做到贴地,二是Geometry在渲染时抖动有是怎么一回事。前者用到了模版缓冲的方法,后者则是float精度问题导致的,我们下一节在说一下第一个问题。

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规