ParaViewWeb:一个JavaScript库,用于构建基于web的科学可视化应用程序

ParaViewWeb是一个Web框架,用于在Web浏览器中构建具有交互式科学可视化的应用程序。这些应用程序可以利用VTK和/或ParaView后台进行大型数据处理和呈现,但也可以在静态Web服务器上使用,如Apache或NGINX,高性能HTTP服务器,甚至是使用浏览器的本地命令行应用程序。

一个现代的方法

全新的ParaViewWeb包含了下一代JavaScript规范,允许更好地跨项目重用代码,而不会迫使不必要的代码膨胀到开发人员应用程序中。该功能允许ParaViewWeb贡献者在ParaViewWeb (JavaScript库)中以组件、UI、数据处理和基于web的科学可视化算法的形式收集所有专业知识,而不会给利用该库的最终应用程序带来任何不必要的成本。开发人员只需提取他们需要的功能和特性,然后在使用科学可视化快速构建下一代基于web的应用程序时放弃其他部分。

功能和特性

ParaViewWeb提供了几个模块,应用程序开发人员会发现,这些模块对于使用科学数据和可视化构建现代基于web的应用程序非常有用。

常用:数据模型和助手

数据模型定义数据和组件如何相互关联。在ParaViewWeb中,我们的目标是创建最简单、最通用的数据模型,以满足基于web的应用程序的具体需求,实现科学可视化。common模块提供核心数据模型和助手,在某些组件和功能存在的情况下智能地增强数据模型,其中包括:颜色处理、屏幕外画布、WebGL实用工具和各种数据模型扩展,以保存许多可视化组件和UI小部件的状态。图1:2014 - 2015赛季NBA球员统计的相互信息弦图。

图1:2014 - 2015赛季NBA球员统计的相互信息弦图。

可视化组件

ParaViewWeb提供了一组可视化组件,用于说明大型数据集中的模式和结构。每个组件都突出显示了许多查看数据集的可能方法中的一种,如图1所示。这些可视化组件可以集成到一个基于Web的类似工作台的环境中,该环境提供新的界面来支持发现、探索、过滤和分析。可视化组件模块是一组交互式工具,用于探索和可视化共享相同API(setContainer/resize/render/destroy)的数据。目前,这些可视化组件演示了各种类型的信息可视化。ParaViewWeb有一个互信息图(如图1所示)。两个随机变量的互信息是两个变量之间相互依赖性的度量。它意味着通过另一个随机变量获得的关于一个随机变量的知识。可视化组件还包括:字段选择器、一维(1D)直方图和平行坐标。希望看到Sankey图,一种特定类型的流程图,其中箭头的宽度与流量成比例显示,以及其他用于在不久的将来注释数据的工具。图2:(a)一个可折叠的字段选择器,可以显示字段名、最小值、最大值和1D直方图,(b) 1D/2D直方图,(c)平行坐标。

图2:(a)一个可折叠的字段选择器,可以显示字段名、最小值、最大值和1D直方图,(b) 1D/2D直方图,(c)平行坐标。

交互

交互式可视化是科学、工程和医学研究中重要的发现机制。这些工具使最终用户能够:关注有趣的细节;自定义内容;并修改可视化,同时增强对大量数据的探索。在最好的情况下,它们为探究提供了一个吸引人的环境。ParaViewWeb的交互模块,由帮助用户输入/交互、鼠标和触摸处理的实用程序组成,使开发人员更容易创建具有科学可视化的迷人的基于web的应用程序。

数据访问(I / O)

ParaViewWeb的IO模块旨在提供与各种数据源的连接,包括以下三种主要类型:

  • 核心:Core提供了几个下载助手来处理各种类型数据(二进制数组、图像、文本、csv、json等)的基于模式的数据查询。
  • WebSocket:WebSocket为VTK和/或ParaView Web后端提供了通信助手。
  • 梁:主梁提供了一个可组合的网络客户端,简化了与Kitware的主梁数据管理系统作为后端的交互。

ParaViewWeb helper仅使用XHR和WebSocket用于基于客户端的JavaScript (Web浏览器)。XHR是内置在浏览器中的主要HTTP客户端。XHR(特别是XHR版本2)是在浏览器中用本地(c++)代码实现的,并公开为JavaScript API。对于XHR, ParaViewWeb依赖于标准请求来获取任何类型的数据,但为访问提供了更高级别的API。fetchData({time:21,字段:'temperature'})). WebSockets通过HTTP在服务器和客户端之间提供网络连接,允许双向通信,目前大多数浏览器都支持这种连接。ParaViewWeb依靠WebSockets提供一个与基于Python的VTK和/或ParaView服务器的简单接口,用于生成交互式数据、几何图形和图像。最后,ParaViewWeb为Kitware的数据管理系统提供了一个客户端,,以便从JavaScript代码库中为其提供一致的接口。图3:(a)选择编辑器,(b)查询表编辑器,(c)均衡器编辑器,(d)光属性编辑器,(e)传递函数编辑器。

图3:(a)选择编辑器,(b)查询表编辑器,(c)均衡器编辑器,(d)光属性编辑器,(e)传递函数编辑器。

UI小部件

ParaViewWeb提供了两种形式的UI小部件:

  • 本地用户界面–本机UI小部件由各种无依赖关系的UI部件组成,以及
  • 界面反应- React UI小部件由React组成,来自Facebook开发团队的开源项目。

ParaViewWeb的NativeUI和React模块提供了各种UI小部件。ParaViewWeb的开发人员发现,React可以轻松地从小型封装的React组件创建复杂的交互式UI。JavaScript库ParaViewWeb提供了许多已知的UI组件(例如,TextInput,…),但它也包含一些更适合科学可视化交互的神奇小部件(见图3)。图3a中的选择编辑器可用于执行多范围、多字段选择。创建查找表(如图3b所示)是呈现科学可视化技术的常见任务。我们使用均衡器编辑器(如图3c所示)作为科学可视化元素(如计算机辅助设计(CAD)零件或三维(3D)数据集中的分层iso轮廓)的不透明度控制。场景的灯光属性(如图3d所示)对于VTK和ParaView、WebGL科学可视化元素或图像中的JavaScript或WebGL复合科学可视化元素的渲染至关重要。最后,图3e所示的传递函数编辑器用于科学可视化元素的不透明度映射和体积可视化。

呈现查看器

渲染模块收集用于生成图像或其他类型数据结构的渲染查看器和数据处理算法。由于生成的数据处理算法比实际的渲染代码多,因此该模块可能在不久的将来被重命名和重构。ParaViewWeb具有图像查看器、JavaScript或WebGL图像合成查看器以及用于几何数据结构的WebGL查看器(见图4)。到目前为止,ParaViewWeb一直在使用Three.js为WebGL处理3D场景。但是,如果时间允许,我们将开始从Three.js迁移到vtk.js,因为vtk.js本机支持动态几何数据结构。图4:ParaViewWeb的示例图像查看器、JavaScript或WebGL图像合成查看器和WebGL几何体查看器。

图4:ParaViewWeb的示例图像查看器、JavaScript或WebGL图像合成查看器和WebGL几何体查看器。

本模块中数据处理算法的一个示例是一种算法,该算法允许应用程序开发人员对3D浮点值体积进行切片,使用查找表生成图像,将数值转换为实际颜色。在图5中,应用程序开发人员使用一个多视图布局组件,将3D体积按x、y和z进行切片,并使用光谱查找表根据温度场对切片进行着色。图5:ArcticViewer的布局组件,将三维浮点值、温度、体积用三个正交切片和一个时间探针图切片。

图5:ArcticViewer的布局组件,将三维浮点值、温度、体积用三个正交切片和一个时间探针图切片。

ParaViewWeb应用程序

ParaViewWeb被许多Kitware公司使用。Web项目。

视觉型的人(git/木卫一)

Visualizer Web应用程序在Web浏览器中提供了类似paraview的Qt应用程序体验。ParaViewWeb库包含了构建UI和数据访问(I/O)例程所需的所有组件,以便使用WebSocket连接与ParaView服务器通信。Visualizer只是简单地以一种有意义的方式将所有组件连接在一起。

可视化工具

图6:Visualizer,显示具有与ParaView Qt应用程序类似功能的可视化管道和彩色地图编辑器。

除了通过服务远程运行Visualizer外,ParaViewWeb还提供了一个很好的命令行界面,以便最终用户可以在本地使用Visualizer和他们本地安装的ParaView版本。

LightViz (git/木卫一)

LightViz应用程序旨在提供一个更简单、更直观和交互式的科学可视化实用程序,它可以很容易地适应特定的数据和任务。我们成功了吗?在用户研究和重新设计之间可能需要很少的迭代。它目前所做的是为终端用户提供大约8个简化模块,用于ParaView最常用的可视化技术或过滤器。模块可以通过json配置文件暴露或删除,从现有的ParaView过滤器创建新的模块是很简单的。LightViz构建UI所需的所有组件以及到ParaView服务器的WebSocket连接都是通过JavaScript库ParaViewWeb交付的。图7:(a)带有新默认用户界面的LightViz, (b)带有ArcticViewer界面的LightViz。

图7:(a)带有新默认用户界面的LightViz, (b)带有ArcticViewer界面的LightViz。

在图7 a和b中,我们演示了使用ParaViewWeb提供的新UI来重定义LightViz科学可视化应用程序是多么容易。

ArcticViewer (git/木卫一)

ArcticViewer科学可视化应用程序打破了这种模式,因为它不需要像VTK或ParaView这样的处理/渲染服务器。事实上,ArcticViewer依赖于被预处理的数据,从而允许Web客户端直接读取数据。在这个用例中,ParaViewWeb提供了各种数据处理程序、UI小部件、数据访问、呈现算法和查看器来驱动应用程序。图8:ArcticViewer (a)从图像合成不透明的可视化对象,(b)从图像合成透明对象,(c)使用两个渲染通道在从图像合成透明可视化对象中暴露出一个神奇的洞。

图8:ArcticViewer (a)从图像合成不透明的可视化对象,(b)从图像合成透明对象,(c)使用两个渲染通道在从图像合成透明可视化对象中暴露出一个神奇的洞。

与Visualizer一样,ArcticViewer可以直接从命令行运行进行科学可视化。通过json文件可以隐式地理解各种类型的数据,并且根据特定类型的数据实例化适当的组件。如果没有一组用于数据类型的组件,可以简单地创建它们并将其添加到ParaViewWeb JavaScript库中。ArcticViewer允许终端用户浏览已在现场或批处理模式生成的数据产品,以产生交互式科学可视化,其中包括ParaView生成的数据118bet网娱乐 电影格式。它提供了图像的查看方法,从图像中合成不透明和透明的可视化对象,可视化对象作为几何体,以及完整的3D体。

数据查看器

在最近的一个项目中,我们创建了正在进行中的DataViewer,它允许终端用户通过ParaViewWeb的信息可视化组件和UI小部件与BigData进行交互。图9:显示直方图、互信息弦图、选择编辑器、工作台布局编辑器和平行坐标的DataViewer。

图9:显示直方图、互信息弦图、选择编辑器、工作台布局编辑器和平行坐标的DataViewer。

SimPut (git/(io)

与前面介绍的应用程序不同,SimPut不提供科学可视化(它使用了一些图表)。SimPut提供了一个环境,用于动态生成具有各种输入形式的UI,以便为模拟代码生成模板化的输出文件。SimPut利用ParaViewWeb的基础设施来构建UI小部件。此外,还可以在Visualizer中使用SimPut UI的部分来创建代理编辑器面板。图10:SimPut设置PyFR模拟器的输入参数。

图10:SimPut设置PyFR模拟器的输入参数。

HPCCloud (git/(io)

HPCCloud是一个基于web的仿真环境,利用web技术提供一个创新的软件即服务(SaaS)高级建模和仿真环境。该平台允许用户使用设计用于在高性能计算(HPC)资源上运行的现有计算代码,并开发从输入生成到后处理的端到端仿真工作流。HPCCloud通过一个简单、直观的用户界面(UI)展示了工作流,它为用户屏蔽了在HPC资源上运行模拟代码所带来的许多复杂性。HPCCloud使用了几个嵌入式Kitware, Inc.框架。对于一个包含三个阶段的PyFR工作流示例,HPCCloud使用:1)输入的一代Simput,将为模拟生成一个输入平台。2)模拟–模拟代码将在基于云的HPC或传统HPC集群上运行。3)可视化-基于ParaViewWeb的Visualizer将提供科学可视化基础设施。图11:在HPCCloud应用程序中使用Visualizer可视化的结果。

图11:在HPCCloud应用程序中使用Visualizer可视化的结果。