Cesium原理篇:7最长的一帧之Entity(下)

       上一篇,我们介绍了当我们添加一个Entity时,通过Graphics封装其对应参数,通过EntityCollection.Add方法,将EntityCollection的Entity传递到DataSourceDisplay.Visualizer中。本篇则从Visualizer开始,介绍数据的处理,并最终实现渲染的过程。

CesiumWidget.prototype.render = function() {
    if (this._canRender) {
        this._scene.initializeFrame();
        var currentTime = this._clock.tick();
        this._scene.render(currentTime);
    } else {
        this._clock.tick();
    }
};

       如上,在渲染阶段,分别调用了clock.tick()和scene.render()。在这两个阶段中都有很多跟Entity相关的方面,我们分别阐述其大概过程

Viewer.prototype._onTick

       我们先温习一下上篇的两个知识点:DataSourceDisplay初始化的时候会调用defaultVisualizersCallback,会针对所有Geometry的Type创建对应的Visualizer;EntityCollection.Add每次添加一个Entity,会通过一系列事件传递,将该Entity传递到每一个Visualizer,保存到Visualizer中_addedObjects队列中。

function Viewer(container, options) {
    eventHelper.add(clock.onTick, Viewer.prototype._onTick, this);
}

Viewer.prototype._onTick = function(clock) {
    var time = clock.currentTime;
    var isUpdated = this._dataSourceDisplay.update(time);
}

DataSourceDisplay.prototype.update = function(time) {
    visualizers = this._defaultDataSource._visualizers;
    vLength = visualizers.length;
    for (x = 0; x < vLength; x++) {
        result = visualizers[x].update(time) && result;
    }
}

       如上,Viewer初始化时会绑定clock.onTick事件,确保每一帧都会调用。而其内部则调用DataSourceDisplay.update,进而遍历所有的Visualizer,调用其update方法。下面,我们重点看一下Visualizer.update到底干了哪些事情。为了方便,我们还是以Rectangle为例来展开。

GeometryVisualizer.prototype.update = function(time) {
    // 获取添加Entity队列
    var addedObjects = this._addedObjects;
    var added = addedObjects.values;
    
    for (i = added.length - 1; i > -1; i--) {
        entity = added[i];
        id = entity.id;
        // 每一个GeometryVisualizer都绑定一个具体的Updater,用来解析Entity,以Rectangle为例
        // Rectangle则由对应的RectangleGeometryUpdater来解析
        // 通过new Updater,将Entity对应的RectangleGraphics解析为RectangleGeometryUpdater的GeometryOptions
        updater = new this._type(entity, this._scene);
        this._updaters.set(id, updater);
        // 根据该RectangleGeometryUpdater的材质风格创建对应的GeometryInstance,分到对应的批次队列中
        // 每一个批次队列中的Geometry风格相同,因此可以通过一次DrawCommand渲染该队列中所有Geometry
        // 目的是减少渲染次数,提高渲染效率
        insertUpdaterIntoBatch(this, time, updater);
        this._subscriptions.set(id, updater.geometryChanged.addEventListener(GeometryVisualizer._onGeometryChanged, this));
    }
    
    // 清空添加Entity队列,下次update中就不用重复处理
    addedObjects.removeAll();
    
    var isUpdated = true;
    var batches = this._batches;
    var length = batches.length;
    for (i = 0; i < length; i++) {
        // 对所有批次队列进行更新
        // 根据batch的GeometryInstance创建Primitive,并添加到Scene的PrimitiveCollection中
        isUpdated = batches[i].update(time) && isUpdated;
    }

    return isUpdated;
};

       如上结合代码和注释,分为三步,下面我们详细介绍一下:

  • new Updater
  • insertUpdaterIntoBatch
  • batch.update

1.new Updater

function RectangleGeometryUpdater(entity, scene) {
    this._options = new GeometryOptions(entity);
    this._onEntityPropertyChanged(entity, 'rectangle', entity.rectangle, undefined);
}

       如上,简单说,Updater的构造函数主要就做了一件事情,构建对应的GeometryOptions,并对其赋值。GeometryOptions是Cesium的一个简单的封装,不同的Updater对应不同的Graphics,GeometryOptions的属性也是根据不同的Graphics量身定做,比如RectangleGeometryUpdater中对应的GeometryOptions属性如下:

function GeometryOptions(entity) {
    this.id = entity;
    this.vertexFormat = undefined;
    this.rectangle = undefined;
    this.closeBottom = undefined;
    this.closeTop = undefined;
    this.height = undefined;
    this.extrudedHeight = undefined;
    this.granularity = undefined;
    this.stRotation = undefined;
    this.rotation = undefined;
}

       大家可以看看其他的Updater,比如PolygonGeometryUpdater,EllipseGeometryUpdater等等,对应的GeometryOptions也不相同。这样,从设计的角度,将不同Graphics中对应的不同属性,封装成一个标准的GeometryOptions,对外表象一致(都是Updater中的_options属性),内部各自提供解析方法(_onEntityPropertyChanged方法),我们再看一下RectangleGeometryUpdater的_onEntityPropertyChanged实现:

RectangleGeometryUpdater.prototype._onEntityPropertyChanged = function(entity, propertyName, newValue, oldValue) {
    var rectangle = this._entity.rectangle;
    
    // ……
    var height = rectangle.height;
    // ……
    
    var options = this._options;
    options.vertexFormat = isColorMaterial ? PerInstanceColorAppearance.VERTEX_FORMAT : MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat;
    options.rectangle = coordinates.getValue(Iso8601.MINIMUM_VALUE, options.rectangle);
    options.height = defined(height) ? height.getValue(Iso8601.MINIMUM_VALUE) : undefined;
    options.extrudedHeight = defined(extrudedHeight) ? extrudedHeight.getValue(Iso8601.MINIMUM_VALUE) : undefined;
    options.granularity = defined(granularity) ? granularity.getValue(Iso8601.MINIMUM_VALUE) : undefined;
    options.stRotation = defined(stRotation) ? stRotation.getValue(Iso8601.MINIMUM_VALUE) : undefined;
    options.rotation = defined(rotation) ? rotation.getValue(Iso8601.MINIMUM_VALUE) : undefined;
    options.closeBottom = defined(closeBottom) ? closeBottom.getValue(Iso8601.MINIMUM_VALUE) : undefined;
    options.closeTop = defined(closeTop) ? closeTop.getValue(Iso8601.MINIMUM_VALUE) : undefined;
    this._isClosed = defined(extrudedHeight) && defined(options.closeTop) && defined(options.closeBottom) && options.closeTop && options.closeBottom;
    this._outlineWidth = defined(outlineWidth) ? outlineWidth.getValue(Iso8601.MINIMUM_VALUE) : 1.0;
    this._dynamic = false;
    this._geometryChanged.raiseEvent(this);
 }

       如上是代码片段,this._entity.rectangle为RectangleGraphics类,将其属性赋给_options(GeometryOptions类),属性赋值的过程也是一个自检测的过程,如果存在必要属性缺失的情况则指定一个默认值,最终完成了RectangleGraphics到GeometryOptions的转移。

2.insertUpdaterIntoBatch

function insertUpdaterIntoBatch(that, time, updater) {
    if (updater.outlineEnabled) {
        that._outlineBatches[shadows].add(time, updater);
    }

    if (updater.fillEnabled) {
        if (updater.onTerrain) {
            that._groundColorBatch.add(time, updater);
        } else {
            if (updater.isClosed) {
                if (updater.fillMaterialProperty instanceof ColorMaterialProperty) {
                    that._closedColorBatches[shadows].add(time, updater);
                } else {
                    that._closedMaterialBatches[shadows].add(time, updater);
                }
            } else {
                if (updater.fillMaterialProperty instanceof ColorMaterialProperty) {
                    that._openColorBatches[shadows].add(time, updater);
                } else {
                    that._openMaterialBatches[shadows].add(time, updater);
                }
            }
        }
    }
}

       不准确的说(但有助于理解),GeometryOptions主要对应RectangleGraphics的几何数值,而在insertUpdaterIntoBatch中则根据RectangleGraphics的材质风格进行分组,只有材质一致的RectangleGeometryUpdater才能分到一起,进行后面的批次。比如学校分班,优等生,中等生分到不同的班级,老师根据不同班级的能力进行适当的区分,就是一种通过分组的方式来优化的思路。打组批次也是同样一个道理。

       针对GeometryVisualizer,一共提供了四种Batch类型:

  • StaticGeometryColorBatch
  • StaticGeometryPerMaterialBatch
  • StaticGroundGeometryColorBatch
  • StaticOutlineGeometryBatch

       不同的Batch,根据材质属性的不同,会选择Updater的对应方法,创建GeometryInstance。比如RectangleGeometryUpdater提供了createFillGeometryInstance和createOutlineGeometryInstance两个方法来创建其面和边线对应的GeometryInstance。如下是RectangleGeometryUpdater对应的一种逻辑情况:

StaticOutlineGeometryBatch.prototype.add = function(time, updater) {
    // Key 1
    var instance = updater.createOutlineGeometryInstance(time);
    var width = this._scene.clampLineWidth(updater.outlineWidth);
    var batches;
    var batch;
    if (instance.attributes.color.value[3] === 255) {
        batches = this._solidBatches;
        batch = batches.get(width);
        if (!defined(batch)) {
            batch = new Batch(this._primitives, false, width, this._shadows);
            batches.set(width, batch);
        }
        // Key 2
        batch.add(updater, instance);
    } 
};
// Key 1
RectangleGeometryUpdater.prototype.createFillGeometryInstance = function(time) {
    return new GeometryInstance({
        id : entity,
        geometry : new RectangleGeometry(this._options),
        attributes : attributes
    });
};
// Key 2
Batch.prototype.add = function(updater, instance) {
    var id = updater.entity.id;
    this.createPrimitive = true;
    this.geometry.set(id, instance);
    this.updaters.set(id, updater);
};

       第一是构建GeometryInstance,这里有一个新的对象RectangleGeometry,之前我们对于Rectangle的理解,都是在Graphics这样的一个概念,可以认为这是一个参数化的对象,对用户而言容易理解。比如一个圆对应的参数化信息就是圆心+半径,我们很好理解,但对计算机,或者WebGL则不能理解,WebGL能理解的是三角形,所以我们就需要把这个圆分解成三角形的拼接,比如切成一块块的西瓜状。将参数化的图形分解成非参数的简单三角形。这个过程是在Primitive.update中完成的,但最终是由RectangleGeometry提供的算法来实现。其他Geometry也是同样的一个逻辑。第二,把创建的GeometryInstance放到Batch队列中。

3.batch.update

       之前的步骤1和步骤2,我们对当前这一帧中新增的Entity进行解析,构造成对应的GeometryInstance,放到对应的Batch队列中。比如有两个Rectangle类型的Entity,假设他们的风格一样,都是纯色的,当然颜色可能不相同,但最终都是在一个批次队列(StaticOutlineGeometryBatch)。接下来,1每一个批次队列会构建一个Primitive,包括该队列中所有的GeometryInstances,因为显卡强大的并行能力,绘制一个三角面和绘制N个三角面的所需的时间是一样的(N取决于顶点数),2所以尽可能的将多个Geometry封装成一个VBO是提高渲染性能的一个关键思路(批次&实例化)。而这个batch.update完成的前半部分,而Primitive.update则完成了最后,也是最关键的一步。

function Batch(primitives, translucent, appearanceType, closed, shadows) {
    // 每一个Batch中的GeometryInstance队列
    this.geometry = new AssociativeArray();
}

Batch.prototype.add = function(updater, instance) {
    var id = updater.entity.id;
    // 添加新的GeometryInstance,并标识,此时需要创建Primitvie
    this.createPrimitive = true;
    this.geometry.set(id, instance);
};

Batch.prototype.update = function(time) {
    var isUpdated = true;
    var removedCount = 0;
    var primitive = this.primitive;
    var primitives = this.primitives;
    var attributes;
    var i;

    // 检测需要创建Primitive
    if (this.createPrimitive) {
        var geometries = this.geometry.values;
        var geometriesLength = geometries.length;
        if (geometriesLength > 0) {    
            // 将队列中所有的GeometryInstances封装成一个primitive对象
            primitive = new Primitive({
                asynchronous : true,
                geometryInstances : geometries,
                appearance : new this.appearanceType({
                    translucent : this.translucent,
                    closed : this.closed
                }),
                shadows : this.shadows
            });
            // 将primitive添加到Scene.primitives中
            // 既然已经绑定到Scene,接下来就要准备渲染
            primitives.add(primitive);
            isUpdated = false;
        } 

        this.attributes.removeAll();
        this.primitive = primitive;
        this.createPrimitive = false;
        this.waitingOnCreate = true;
    } 
    return isUpdated;
};

       如上是this._clock.tick()的一个大概过程,一步一步摩擦,最终创建了Primitive,并添加到PrimitiveCollection队列中,如果以Rectangle类型的Entity为例,大概的流程如下:

DataSourceDisplay.prototype.update
    GeometryVisualizer.prototype.update
        updater = new this._type(entity, this._scene);
            new GeometryOptions(entity);
            _onEntityPropertyChanged()
            
        insertUpdaterIntoBatch
            StaticGeometryColorBatch.prototype.add
                RectangleGeometryUpdater.prototype.createFillGeometryInstance
                    new GeometryInstance()
                Batch.prototype.add
                
        batches[i].update(time)
            StaticGeometryColorBatch.prototype.update
                Batch.prototype.update
                    new Primitive()
                    primitives.add(primitive);

Primitive.prototype.update

       看完了tick()后,马不停蹄的则开始了this._scene.render(currentTime),大概经过下面的几层,最终开始了Primitive.prototype.update,也就是接下来我们介绍的中重点。

this._scene.render(currentTime);
    Scene.prototype.render
        function render(scene, time)
            function updateAndExecuteCommands()
                function executeCommandsInViewport()
                    function updatePrimitives()
                        PrimitiveCollection.prototype.update()
                            for (var i = 0; i < primitives.length; ++i) {
                                primitives[i].update(frameState);
                            }

       如上的铺垫工作结束,进入正文。Primitive.prototype.update究竟做了哪些重要的事情.

var PrimitiveState = {
    READY : 0,
    CREATING : 1,
    CREATED : 2,
    COMBINING : 3,
    COMBINED : 4,
    COMPLETE : 5,
    FAILED : 6
};

       似曾相识的感觉有没有。在设计上,Primitive和Globe相似,也是基于状态的管理:每个状态都有专门的模块来负责,而每一帧主要用来维护和更新状态,并根据当前的状态来调用对应的模块。我们看看PrimitiveState,里面主要有三类:CREATE,COMBINE,COMPLETE。心里大概有个一知半解,下面来解惑。

Primitive.prototype.update = function(frameState) {
    if (this._batchTable.attributes.length > 0) {
        this._batchTable.update(frameState);
    }
    
    if (this._state !== PrimitiveState.COMPLETE && this._state !== PrimitiveState.COMBINED) {
        if (this.asynchronous) {
            loadAsynchronous(this, frameState);
        } else {
            loadSynchronous(this, frameState);
        }
    }

    if (this._state === PrimitiveState.COMBINED) {
        createVertexArray(this, frameState);
    }
    
     if (!this.show || this._state !== PrimitiveState.COMPLETE) {
        return;
    }
    
    if (createRS) {
        var rsFunc = defaultValue(this._createRenderStatesFunction, createRenderStates);
        rsFunc(this, context, appearance, twoPasses);
    }

    if (createSP) {
        var spFunc = defaultValue(this._createShaderProgramFunction, createShaderProgram);
        spFunc(this, frameState, appearance);
    }

    if (createRS || createSP) {
        var commandFunc = defaultValue(this._createCommandsFunction, createCommands);
        commandFunc(this, appearance, material, translucent, twoPasses, this._colorCommands, this._pickCommands, frameState);
    }
    
    updateAndQueueCommandsFunc();
}

       如上是Primitive.update的主要过程,我们以状态的变化为序,介绍一下loadAsynchronous,createVertexArray以及create*这几个内容。

loadAsynchronous

       Primitive初始化时,默认为READY状态。Update方法中,首先会进入loadAsynchronous方法。这里主要做了两个事情:Create&Combine。

function loadAsynchronous(primitive, frameState) {
    var instances;
    var geometry;
    var i;
    var j;

    var instanceIds = primitive._instanceIds;

    //开始进入createGeometry
    if (primitive._state === PrimitiveState.READY) {
        instances = (isArray(primitive.geometryInstances)) ? primitive.geometryInstances : [primitive.geometryInstances];
        var length = primitive._numberOfInstances = instances.length;

        var promises = [];
        var subTasks = [];
        for (i = 0; i < length; ++i) {
            geometry = instances[i].geometry;
            instanceIds.push(instances[i].id);

            // 用于处理数据的线程名称
            // 需要进行数据处理的geometry对象
            subTasks.push({
                moduleName : geometry._workerName,
                geometry : geometry
            });
        }

        // 根据当前浏览器允许的最大线程数,创建N个createGeometry线程,方便后续通过Workers线程处理
        if (!defined(createGeometryTaskProcessors)) {
            createGeometryTaskProcessors = new Array(numberOfCreationWorkers);
            for (i = 0; i < numberOfCreationWorkers; i++) {
                createGeometryTaskProcessors[i] = new TaskProcessor('createGeometry', Number.POSITIVE_INFINITY);
            }
        }

        // 分摊任务,当前Primitive中可能需要对多个Geometry进行处理
        // 平坦任务,均分
        var subTask;
        subTasks = subdivideArray(subTasks, numberOfCreationWorkers);

        for (i = 0; i < subTasks.length; i++) {
            var packedLength = 0;
            var workerSubTasks = subTasks[i];
            var workerSubTasksLength = workerSubTasks.length;
            for (j = 0; j < workerSubTasksLength; ++j) {
                subTask = workerSubTasks[j];
                geometry = subTask.geometry;
                if (defined(geometry.constructor.pack)) {
                    subTask.offset = packedLength;
                    packedLength += defaultValue(geometry.constructor.packedLength, geometry.packedLength);
                }
            }

            var subTaskTransferableObjects;

            // 将Geometry中的参数化信息保存到arraybuffer中
            // 方便后续传入到线程
            if (packedLength > 0) {
                var array = new Float64Array(packedLength);
                subTaskTransferableObjects = [array.buffer];

                for (j = 0; j < workerSubTasksLength; ++j) {
                    subTask = workerSubTasks[j];
                    geometry = subTask.geometry;
                    if (defined(geometry.constructor.pack)) {
                        geometry.constructor.pack(geometry, array, subTask.offset);
                        subTask.geometry = array;
                    }
                }
            }

            // 调用线程,传入参数subTask,subTaskTransferableObjects中以引用方式,非复制
            promises.push(createGeometryTaskProcessors[i].scheduleTask({
                subTasks : subTasks[i]
            }, subTaskTransferableObjects));
        }

        // creating状态,线程中处理
        primitive._state = PrimitiveState.CREATING;

        when.all(promises, function(results) {
            // 成功后更新状态,已经创建成功,返回值results
            primitive._createGeometryResults = results;
            primitive._state = PrimitiveState.CREATED;
        }).otherwise(function(error) {
            setReady(primitive, frameState, PrimitiveState.FAILED, error);
        });
    } else if (primitive._state === PrimitiveState.CREATED) {
        // 如下,同上面的思路一致,通过combine线程,将多个geometry的返回值合并成一个vbo
        var transferableObjects = [];
        instances = (isArray(primitive.geometryInstances)) ? primitive.geometryInstances : [primitive.geometryInstances];

        var scene3DOnly = frameState.scene3DOnly;
        var projection = frameState.mapProjection;

        var promise = combineGeometryTaskProcessor.scheduleTask(PrimitivePipeline.packCombineGeometryParameters({
            createGeometryResults : primitive._createGeometryResults,
            instances : instances,
            ellipsoid : projection.ellipsoid,
            projection : projection,
            elementIndexUintSupported : frameState.context.elementIndexUint,
            scene3DOnly : scene3DOnly,
            vertexCacheOptimize : primitive.vertexCacheOptimize,
            compressVertices : primitive.compressVertices,
            modelMatrix : primitive.modelMatrix,
            createPickOffsets : primitive._createPickOffsets
        }, transferableObjects), transferableObjects);

        primitive._createGeometryResults = undefined;
        primitive._state = PrimitiveState.COMBINING;

        when(promise, function(packedResult) {
            var result = PrimitivePipeline.unpackCombineGeometryResults(packedResult);
            primitive._geometries = result.geometries;
            primitive._attributeLocations = result.attributeLocations;
            primitive.modelMatrix = Matrix4.clone(result.modelMatrix, primitive.modelMatrix);
            primitive._pickOffsets = result.pickOffsets;
            primitive._instanceBoundingSpheres = result.boundingSpheres;
            primitive._instanceBoundingSpheresCV = result.boundingSpheresCV;

            if (defined(primitive._geometries) && primitive._geometries.length > 0) {
                primitive._state = PrimitiveState.COMBINED;
            } else {
                setReady(primitive, frameState, PrimitiveState.FAILED, undefined);
            }
        }).otherwise(function(error) {
            setReady(primitive, frameState, PrimitiveState.FAILED, error);
        });
    }
}

       如上是一段代码示意,从中可见,Create和Combine这类计算量比较大的操作,都是放在线程中进行的,避免阻塞主线程。这样,通过loadAsynchronous函数,将参数化的geometry转化为三角形,同时对同类的geometry合并成一个渲染批次,进而优化了渲染效率。可以说,这一块是Cesium对Geometry处理的核心。此时,状态已经更新为PrimitiveState.COMBINED。      

       备注:如果对Workers不太了解,可以参考之前写的《Cesium原理篇:4Web Workers剖析

create*

  • createVertexArray
    上面的Geometry已经将数据处理为indexBuffer和vertexBuffer,下面则需要将该数据结合attributes创建为vbo&vao,这个过程就是通过createVertexArray完成
  • createRS
    创建RenderState
  • createSP
    创建ShaderProgram

       很明显,渲染主要是数据+风格,当我们满足了geometry的数据部分已经符合WebGL渲染的格式后,结合appearance封装的材质,设置对应的RenderState以及Shader和所需要的参数。最后,我们构造出最终的DrawCommand,添加到DrawCommandList中,完成最终的渲染。这块就不对细节展开了,涉及到Renderer模块的,在之前的Renderer系列都有详细介绍,这里主要介绍了大概的流程。

总结

       Entity牵扯到的内容很多,从方便用户使用,到Geometry类型以及风格的多样性,到最终构造出DrawCommand,以及渲染Pass的优先级,里面牵扯的内容非常多,同时出于渲染性能的优化,还要打组批次,搞多线程,里面随便一个点都有很多值得学习,借鉴的地方。

       自问如果要自己来做这一套Geometry渲染,首先多线程是必须要设计的,不然性能上负担不起,打组也是一个技术要点,但优先级不是最高。个人可能不会把Add,Updater以及Primitive分的这么细,材质上压根就想不出来该如何做。Cesium在设计上确实很优雅,但这在性能上多少也是有代价的。

       终于将大概的过程写完了,总觉得欠了一些内容,有点力不从心。希望能把这个流程的大概介绍清楚,后面可以针对某一个局部细节可以细细钻研,学习里面的技巧,理解其中的设计原委。

posted @ 2016-12-06 08:43  fu*k  阅读(8302)  评论(4编辑  收藏  举报