cesium系列篇:Entity vs Primitive 源码解析(从Entity到Primitive)02

上篇文章中,我们介绍了使用viewer.entities.add添加entity之后的信号传递以及最后entity对象被传递到GeometryVisualizer

这篇文章,我们则介绍如何在逐帧渲染的过程中根据GeometryVisualizer中的entity对象创建相应的primitive

这是下文中涉及到的类的类图,从中可以清晰的了解各个对象之间的关系,下面我们结合代码来仔细讲解。

在这里插入图片描述

循环的一帧

我们先看下viewer初始化的时候做了什么,在何处定义了每一帧的循环,并持续的进行渲染,结合时序图(见第三节)和源码,可以将其分为两个部分

Viewer初始化

  1. viewer初始化并创建clock
function Viewer(container, options){let clock;let clockViewModel;let destroyClockViewModel = false;if (defined(options.clockViewModel)) {clockViewModel = options.clockViewModel;clock = clockViewModel.clock;} else {clock = new Clock();clockViewModel = new ClockViewModel(clock);destroyClockViewModel = true;}
}
  1. clock作为参数之一创建cesiumWidget
// 省略其他参数
const cesiumWidget = new CesiumWidget(cesiumWidgetContainer, {clock: clock});
  1. 添加监听事件,建立事件响应,其效果我们在后面再具体描述
eventHelper.add(clock.onTick, Viewer.prototype._onTick, this);

cesiumWidget初始化

  1. 在构造函数中设置渲染循环策略this.useDefaultRenderLoop
this._useDefaultRenderLoop = undefined;
this.useDefaultRenderLoop = defaultValue(options.useDefaultRenderLoop,true
);

结合useDefaultRenderLoopset函数可知其实是调用了startRenderLoop函数

useDefaultRenderLoop: {get: function () {return this._useDefaultRenderLoop;},set: function (value) {if (this._useDefaultRenderLoop !== value) {this._useDefaultRenderLoop = value;if (value && !this._renderLoopRunning) {startRenderLoop(this);}}},
}
  1. startRenderLoop中定义了render函数并每一帧进行调用
function startRenderLoop(widget) {widget._renderLoopRunning = true;let lastFrameTime = 0;function render(frameTime) {// 此处省略细节widget.render();requestAnimationFrame(render);}requestAnimationFrame(render);
}
  1. render函数中起实际作用的是函数widget.render,其内部通过调用this._clock.tick()发出信号,结合上一节viewer初始化中提到的事件监听的建立可以知道,进行响应的是Viewer.prototype._onTick函数
CesiumWidget.prototype.render = function () {if (this._canRender) {this._scene.initializeFrame();const currentTime = this._clock.tick();this._scene.render(currentTime);} else {this._clock.tick();}
};Clock.prototype.tick = function () {this.onTick.raiseEvent(this);return currentTime;
};
  1. Viewer.prototype._onTick函数中,会通过调用函数this._dataSourceDisplay.update(time)进行实际的primitive对象的创建
Viewer.prototype._onTick = function (clock) {const isUpdated = this._dataSourceDisplay.update(time);
};

时序图

  • 这里我们附上整个过程的时序图,帮助大家更好的了解整个过程
    [图片]

生成Primitive

通过上面的描述,我们知道了cesium的每一帧是如何更新的,以及其通过调用this._dataSourceDisplay.update(time)进行primitive的创建,下面我们就探究下具体的创建过程

  1. update中,获取了this._defaultDataSource_visualizers属性,通过上一篇文章我们知道,其是一个包含了GeometryVisualizer等多个Visualizer的列表,其中GeometryVisualizer是后续创建polygon对应primitive的类

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

    [图片]

  2. GeometryVisualizerupdate函数中主要做了如下几件事:

    • 获取被添加对象,在上一篇文章中我们知道,通过_onCollectionChanged函数,将添加的entity添加到了this._addedObjects属性中

      const addedObjects = this._addedObjects;
      addedObjects.set(id, entity);
      
    • 遍历每一个被添加的对象

      • 创建UpdaterSet,其内部的updaters包含了PolygonGeometryUpdater在内的10个Updater
        [图片]

      • 通过updater尝试创建instance(后面详细介绍)

    • 移除已经被添加的对象

    • batch中创建primitive(后面详细介绍)

代码节选如下:

GeometryVisualizer.prototype.update = function (time) {// 获取被添加对象const addedObjects = this._addedObjects;const added = addedObjects.values;// 遍历每一个被添加的对象for (i = added.length - 1; i > -1; i--) {entity = added[i];id = entity.id;// 创建UpdaterSetupdaterSet = new GeometryUpdaterSet(entity, this._scene);this._updaterSets.set(id, updaterSet);// 通过每一个updater尝试创建instance 并添加到batch中updaterSet.forEach(function (updater) {that._insertUpdaterIntoBatch(time, updater);});}// 移除已经被添加的对象addedObjects.removeAll();// 在batch中创建primitivelet isUpdated = true;const batches = this._batches;const length = batches.length;for (i = 0; i < length; i++) {isUpdated = batches[i].update(time) && isUpdated;}return isUpdated;
};

生成instance

  1. 获取polygonOutline对应的instance

    • 在函数GeometryVisualizer.prototype._insertUpdaterIntoBatch中将updater传递到StaticOutlineGeometryBatch.prototype.add函数中
    this._outlineBatches[shadows].add(time, updater);
    

    在这里插入图片描述

    • StaticOutlineGeometryBatch.prototype.add先创建polygonOutline对应的instance
    const instance = updater.createOutlineGeometryInstance(time);
    
    • StaticOutlineGeometryBatch.prototype.add中,调用batch.add函数,传入instance,并写入字典this.geometry
    this.geometry.set(id, instance);
    

    在这里插入图片描述

  2. 获取polygon对应的instance

    • 同样在函数GeometryVisualizer.prototype._insertUpdaterIntoBatch中,将updater传递到StaticGeometryColorBatch.prototype.add函数中

      this._closedColorBatches[shadows].add(time, updater);
      

      [图片]

    • StaticGeometryColorBatch.prototype.add先创建polygon对应的instance

    const instance = updater.createFillGeometryInstance(time);
    
    • StaticGeometryColorBatch.prototype.add中,调用batch.add函数,传入instance,并写入字典this.geometry
    this.geometry.set(id, instance);
    

生成primitive

在循环中遍历所有的GeometryBatch对象,并update
[图片]

  1. 生成polygonOutline对应的primitive

    • 通过StaticOutlineGeometryBatch.prototype.update遍历solidBatchesLength属性,并update
      在这里插入图片描述
    • batch.update中生成primitive
      在这里插入图片描述
  2. 生成polygon对应的primitive

    • 通过StaticGeometryColorBatch.prototype.update调用updateItems函数,在其内部,遍历batchupdate
      [图片]

    • batch.update中生成primitive
      [图片]

时序图

  • 在这里我们附上整个过程的时序图,可以帮助大家更好的了解整个过程
    在这里插入图片描述

后续

  • 后面我们会进一步探索创建得到的primitive如何被渲染,并对比其和我们直接添加的primitive在组织结构上有什么区别

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/678605.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Netty中的ChannelInboundHandler

ChannelInboundHandler的生命周期方法。这些方法将会在数据被接收时或者与其对应的 Channel状态发生改变时被调用。和Channel的生命周期密切相关 channelRegistered:当Channel已经注册到它的EventLoop并且能够处理I/O时被调用 channelUnRegistered:当Channel从它的EventLoop注…

QGIS编译(跨平台编译)之四十九:cairo编译(Windows、Linux、MacOS环境下编译)

文章目录 一、cairo介绍二、cairo下载三、Linux下编译四、MacOS下编译五、Windows下编译一、cairo介绍 Cairo 是一种开源的图形库,提供了用于多种输出设备的统一图形绘制 API。它设计用来生成高质量的输出,并在各种输出媒介上提供一致的视觉效果,包括屏幕、打印机、PDF 文件…

vue3 之 组合式API—模版引用

模版引用的概念 通过ref标识获取真实的dom对象或者组件实例对象 如何使用&#xff08;以获取dom为例 组件同理&#xff09; 1️⃣调用ref函数生成一个ref对象 2️⃣通过ref标识绑定ref对象到标签 dom中使用 父组件中可以看到打印出来proxy里面只有一个属性&#xff0c;其他…

Java中使用Lambda表达式实现多态性和动态分派

Java中使用Lambda表达式实现多态性&#xff08;Polymorphism&#xff09; 在Java中&#xff0c;Lambda表达式本身并不直接实现多态性&#xff0c;因为多态性主要是通过类的继承和方法的重写&#xff08;override&#xff09;来实现的。但是&#xff0c;Lambda表达式可以与接口…

【Linux】学习-文件的软硬链接

文件的软硬链接 在上一篇拓展篇—文件系统中我们介绍过文件元的概念&#xff1a; 我们在使用ls -l命令查看文件元信息的时候&#xff0c;有一个硬链接数&#xff0c;说明文件的硬链接数属于文件的属性之一&#xff0c;那么硬链接究竟是什么呢&#xff1f;软链接又是什么呢&…

Spring AI - 使用向量数据库实现检索式AI对话

Spring AI - 使用向量数据库实现检索式AI对话 Spring AI 并不仅限于针对大语言模型对话API进行了统一封装&#xff0c;它还可以通过简单的方式实现LangChain的一些功能。本篇将带领读者实现一个简单的检索式AI对话接口。 一、需求背景 在一些场景下&#xff0c;我们想让AI根据…

rsa加密登录解决方案

1.问题 账密登录方式中用户输入密码后&#xff0c;把账号、密码通过http传输到后端进行校验&#xff0c;然而密码属于敏感信息&#xff0c;不能以明文传输&#xff0c;否则容易被拦截窃取&#xff0c;因此需要考虑如何安全传输密码 2.解决方案 使用rsa加密方式&#xff0c;r…

795. 前缀和

Problem: 795. 前缀和 文章目录 思路解题方法复杂度Code 思路 这是一个前缀和的问题。前缀和是一种预处理方法&#xff0c;通过预处理出一个数组的前缀和&#xff0c;可以在O(1)的时间复杂度内求出任意一个区间的和。 在这个问题中&#xff0c;我们需要求出数组中某个区间的和。…

华为机考入门python3--(10)牛客10-字符个数统计

分类&#xff1a;字符 知识点&#xff1a; 字符的ASCII码 ord(char) 题目来自【牛客】 def count_unique_chars(s): # 创建一个空集合来保存不同的字符 unique_chars set() # 遍历字符串中的每个字符 for char in s: # 将字符转换为 ASCII 码并检查是否在范围内 #…

KEIL-MDK的时间戳之time.h 结合gd32f1的RTC应用

KEIL-MDK的时间戳之time.h 的应用 1 时间戳介绍 现在物联网产品的在进行通讯的时候&#xff0c;需要加入时间戳的这个信息参数&#xff0c;方便服务器和产品之间交换时间信息。 时间戳是计算机系统中用来表示日期和时间的一种方式&#xff0c;通常是一个数字或者一串字符&am…

记一次deepin开机突然进不了可视化界面,只能进命令行

看见开机报错failed to start file system on /dev/disk/by-uid/246… 文件系统出现损坏 然后只能在控制台输入密码登录root账号 直接使用这个命令尝试&#xff0c;然后reboot命令重启 fsck /dev/disk/by-uid/246...重启之后又可以进图形化界面了

[优雅的面试] 进程 线程 协程分的清

面试官大佬&#xff1a;小伙子&#xff0c;咱今儿个先聊聊进程线程这块的知识哈&#xff0c;就先说说进程吧。 我&#xff1a;存储在硬盘中的代码是静态文件&#xff0c;运行中的程序被称为进程。进程之间数据是相互隔离的。 一般说来&#xff0c;一个进程并不是自始至终连续不…

Vits2.3-Extra-v2:中文特化,如何训练及推理(新手教程)

环境&#xff1a; Vits2.3-Extra-v2:中文特化修复版 auto_DataLabeling 干声10分钟左右.wav 问题描述&#xff1a; Vits2.3-Extra-v2:中文特化&#xff0c;如何训练及推理&#xff08;新手教程&#xff09; 解决方案&#xff1a; 一、准备数据集 切分音频 本次音频数据…

管理就是闭环

管理是什么&#xff1f;这个问题没有一个统一的答案。本文提供一个管中窥豹的答案&#xff1a;管理就是闭环。 作为基层管理者&#xff0c;日常管理事务&#xff0c;一个是目标闭环&#xff0c;一个是执行闭环。这分别对应敏捷PO和Scrum Master的职责。PO的职责是确保目标闭环&…

vue3学习——router-view 过渡动画

虽然vue3说建vue页面不用包裹一个根节点&#xff0c;但是transition不能没有唯一的标签 所以还是得包一层~ o(&#xffe3;▽&#xffe3;)o <el-main><router-view v-slot"{ Component, route }"><transition name"MainFade" mode"o…

猫头虎分享已解决Bug ‍ || TypeError: props is not a function (React)

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

linux赋予普通用户权限

当我们在Linux系统中操作文件或目录时&#xff0c;有时候会遇到权限的问题。为了正确管理文件和目录的所有权&#xff0c;我们可以使用sudo chown命令。在本文中&#xff0c;我将介绍这个命令以及它的一个示例用法。 什么是sudo chown命令&#xff1f; sudo chown是Linux系统…

【Vue项目】filters过滤器

在vue项目中需要对一些数据进行格式化&#xff0c;我们可以通过Vue.filter进行过滤 Vue.filter 过滤器在 Vue 实例中使用 Vue.filter 方法进行注册&#xff0c;注册成功就可以在任何 Vue模板中使用这些过滤器来对数据进行处理和格式化。 Vue项目中&#xff0c;过滤器可以在全…

05.坐标系

1. 坐标系原点 坐标系原点就是屏幕/窗口的左上角&#xff0c;X向右增长&#xff0c;Y向下增长。 2.设置控件位置 设置控件位置&#xff0c;就相当于是需要指定控件的坐标&#xff0c;对于该控件来说&#xff0c;其坐标原点是其父窗口/父控件的左上角。 设置方法就是通过控件的…

创新S3存储桶检索:Langchain社区S3加载器搭载OpenAI API

在瞬息万变的数据存储和处理领域&#xff0c;将高效的云存储解决方案与先进的 AI 功能相结合&#xff0c;为处理大量数据提供了一种变革性的方法。本文演示了使用 MinIO、Langchain 和 OpenAI 的 GPT-3.5 模型的实际实现&#xff0c;重点总结了存储在 MinIO 存储桶中的文档。 …