码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2016-12-06 09:36:56      阅读：890      评论：0      收藏：0      [点我收藏+]

标签：pipeline   orm   不同   values   minimum   states   return   类型   函数   

       上一篇，我们介绍了当我们添加一个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在设计上确实很优雅，但这在性能上多少也是有代价的。

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

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

标签：pipeline   orm   不同   values   minimum   states   return   类型   函数   

原文地址：http://www.cnblogs.com/fuckgiser/p/6115421.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！