![6f3dfb6a37bbb0b8af759f0bdba3c0ab.png](https://i-blog.csdnimg.cn/blog_migrate/f38cfec2a0e784800e5969aecdd2e0db.jpeg)
EverCraft一直在关注Web可视化技术的发展,在本系列文章里,小编将对国外一篇感觉很不错的综述性文章进行翻译,供这一领域的爱好者相互学习。这篇paper的信息为:“Mwalongo, F., et al., State-of-the-Art Report in Web-based Visualization. COMPUTER GRAPHICS FORUM, 2016. 35(3): p. 553-575. ”。感兴趣的小伙伴可以直接阅读原文献哈。(关注公众号EverCraft,回复“可视化”可获得原文)
2.5 数据编码与传输技术
高效的数据编码和传输对于浏览器中的交互可视化非常重要。如果没有有效的数据传输格式,带宽和延迟问题可能导致客户端等待数据加载时间过长。对于动态数据,这可能会妨碍实时数据更新,影响时间序列的动画效果流畅性。尽管数据压缩减少了要传输的数据量并因此节省了带宽,但它不能独自保证交互式数据的更新,因为压缩和解压时间的开销可能超过传输节省的时间。
理想情况下,从数据编码、传输、解码到渲染这个完整的数据传输管线,都应该综合优化,以获得平衡的端到端性能体验。需要技术只关注优化其中的一个或者几个环节。瓶颈通常在解码和渲染阶段,因为这两个阶段在客户端执行。针对网络提出的各种压缩和解压缩方法集中于允许有效的解码和渲染,而不是仅优化压缩率。
流式和渐进式网格格式是一种隐藏的方法,可以隐藏延迟并改善交互性,从而改善用户体验。网格数据通常以不同的细节级别表示,并且每个级别被编码为可以逐步解压缩并在客户端上呈现的单独的数据块。大多数方法专注于基于CPU的高效解码,另一个选择是使用GPU友好格式,可以将其直接上传到GPU。在这种情况下,解码完全在GPU上执行。这不仅可以通过减少客户端上的解码时间来提高性能,而且仅需要更少的CPU-GPU带宽。
3. 基于Web可视化的应用
以下列举一些基于Web可视化的行业应用。
粒子数据可视化
在浏览器中实现分子可视化在互联网的早期就很流行。分子数据可视化,例如小球模型,是基于粒子的可视化的一个示例,其中每个原子都描述为一个球体。每个球体的大小代表相应元素的范德瓦尔斯半径。使用基于多边形的渲染时,必须将这些球体细分为三角形,然后对其进行栅格化。下图为该领域应用的一个案例:
![b7fb53cb08b8c9b7b905e01743bd207a.png](https://i-blog.csdnimg.cn/blog_migrate/bed716d105090074cb09367cef7d71e3.jpeg)
分子模拟中动态分子数据(轨迹)的可视化也是该领域科学家的一项重要功能,但是这一实现直到最近几年仅限于桌面解决方案。如2.4.1节所述,两种主要方法可用于渲染球体:基于GPU的射线投射和网格渲染。基于GPU的光线投射技术在渲染性能和图像质量方面提供了更好的结果。
体数据可视化
正如2.4所述,有研究者使用WebGL提出一种基于GPU的体积射线行进算法的早期实现。他们使用基于GPU的多线程体数据射线投射方法来可视化来自医学成像和天气雷达扫描的体数据。也有人提出用于医学图像分割和渲染的CS架构应用程序。这一分割算法使用一种基于图像的方法,从服务器上的原始数据中提取切片,并将它们作为JPEG或PNG图像发送到客户端,在其中可以对其进行操作以出发服务器上的图像分割。完成图像分割后的等值面发送到客户端渲染实现可视化。其服务器使用VTK库,客户端使用Three.js库(这一应用实例如下图)。这种方法最直接的应用为通过MR断层图像分割,获取患者的膝关节三维可视化(话说小编BOSS以前实验室就有做过这个)。
![6abc7a87bfad0292122388772a759fe0.png](https://i-blog.csdnimg.cn/blog_migrate/2959a635330a0d9dcd828c3c22fd774e.jpeg)
地理空间数据可视化
网络上的地理空间数据(包括4D时空数据)的可视化涵盖了各种数据,例如海洋数据,栅格图像,天气预报数据和城市模型。在所有基于Web的现代地理空间可视化中,常见的是将WebGL用于硬件加速渲染和其他现代HTML5技术。一些方法直接使用WebGL,而其他方法则使用声明性框架,例如X3DOM。X3DOM实现了X3D标准中的一个组件,用于可视化地理空间数据。
![46cb1650d2b4404db9afc5eea3318294.png](https://i-blog.csdnimg.cn/blog_migrate/cea2bb6d5e5853c408cd172c3df1f0b0.png)
,
![e9bd5f4d79f225e506f34dd78305943c.png](https://i-blog.csdnimg.cn/blog_migrate/77af9e6a6b0a38ead79748cd67c43a1c.jpeg)
信息可视化
比如有研究者介绍了用于大型二维点数据的交互式可视化的散点图技术,该技术基于WebGL实现。该方法解决了常规散点图方式可视化大量点数据集时遇到的数据量过载问题。 原始实现中在CPU上执行的计算已使用“渲染到纹理”技术移至GPU,以获得更好的性能。
3D模型可视化
3D模型可视化历史则由来已久,早在上个世纪60年代就开始存在3D的CAD软件(比如UG、Solidworks等),只不过大多数时间都是基于客户端安装软件的形式而不是Web可视化。随着SAAS服务的发展,各传统的3D CAD公司都在做云端的迁移,逐渐实现基于Web的3D模型可视化,甚至可以直接基于Web 3D做产品的设计(如前端时间以4.7亿美金被PTC收购的onshape),以及一些主要用于做3D协作项目管理,同时提供Web可视化功能的解决方案(比如EverCraft.co)
![14f27af7078a8d852b4e0013b07bb2e4.png](https://i-blog.csdnimg.cn/blog_migrate/161082a0c4fdc34e3d67cf0f9840bf15.jpeg)
通用工具包
有很多基于Web的通用可视化工具包,涵盖了一系列应用领域,包括信息可视化,蛋白质可视化,医学可视化和地理空间可视化。 本节中讨论的大多数工具箱都使用了WebGL之类的基于浏览器的现代Web技术的客户端渲染方式。
比如比较流行的商用云端信息可视化解决方案以Tableau Online和TIBCO Spotfire Cloud为例。 这些解决方案提供了SaaS工具,用于本地或在线数据创建各种交互式可视化,并允许在用户之间共享可视化结果。这些商业解决方案通常可支持非常大的数据集和许多并发用户。
Cesium.js则是用于地理空间数据可视化的通用库,它基于WebGL进行快速渲染。 其支持各种标准数据格式以及glTF格式,用于在客户端和服务器之间进行3D数据交换。
而EverAPI库则主要针对工程类3D模型的可视化,其支持各种工程类数据格式如stp、stl、obj等,并默认集成了针对机械领域对3D模型常用的操作功能,如结构树、剖切图、标注等。
EverCraft.co(关注公众号EverCraft,获取更多信息)
我们相信。每个人都具有创新的力量,每一份对未来的设计都将让生活变得更有趣。
![9d7c60223cb23105725021a4b0bbfa34.png](https://i-blog.csdnimg.cn/blog_migrate/3d8b289d99efbcbf24b266c9fe2faff2.png)