教程-使用Unity进行可视分析(4)

如果您是在简历中找到链接的：
由于页面加载效率问题，本页不会展示视频。我愿意在具体面试环节中播放演示视频。

目录

前    言：为什么、以及什么场景下要使用unity进行可视化？
第一章：现有的unity可视化工具包
第二章：自行设计与实现unity可视化视图
第三章：设计与实现一个可视分析系统（上）
第四章：设计与实现一个可视分析系统（下）
第五章：设计与实现一个可视分析系统（技术问题专题）

第三章：设计与实现一个可视化系统（上）

本章将会介绍如何设计、实现一个简单的可视分析系统。用我们在ChinaVis 2021的参赛作品，来说明有哪些因素需要考虑、制作工时开销、与可改进的部分。

建议阅读： P. Reipschlager, T. Flemisch, and R. Dachselt, “Personal augmented reality for information visualization on large interactive displays,” IEEE Trans. Vis. Comput. Graph., vol. 27, no. 2, pp. 1182–1192, 2021, doi: 10.1109/TVCG.2020.3030460.

准备工作

和上一章一样，需要对数据状况进行了解，并规定可视分析系统的适用场景与任务。

我们使用2013~2018年的空气质量再分析数据。
分析主题为污染分布时空态势感知。围绕这个主题，我们确定了四个任务：
T1. 感知全国地区污染程度空间分布情况，并分析其随时间的演变。
T2. 探究各地区污染程度与气象数据（如风向、风速）的关系，发现影响空气质量的气象因素。
T3. 发现污染物在不同时间尺度的变化趋势。
T4. 观察不同污染物的数值分布，分析不同污染物之间的相关性。

目标用户为空气污染管控治理相关行业从业者，及希望了解空气质量变化的用户。

概要设计

在这个环节，你至少需要给出一个原型系统，规定出系统的硬/软件组成、视图-任务-场景之间的关系、预期的用法或表现效果等。

——挑选合适的视图——

参考了

[1] Huamin Qu, Visual Analysis of the Air Pollution Problem in Hong Kong
[2] QI Mengxi, Temporal and spatial distribution
characteristics of PM2.5 pollution in Beijing from 2014 to 2016
[3] Jie Li, Visual analytics of smogs in China
[4] Xu Ran, Concentration Characteristics of PM2. 5 and the Causes of Heavy Air Pollution
Events in Beijing During Autumn and Winter
[5] Dang Ying, Evaluation of Air Pollution Characteristics and Air Quality Improvement Effect in
Beijing and Chengdu

为了反映全国范围大尺度空间信息，一个具有地理信息的视图是必要的；
为了描述时间变化，可以采用柱状图、折线图等视图，UI方面可采用可视化视图矩阵或动画视图播放。
为了探究空气数据各维度（属性）的关系，可以使用平行坐标图观察规律；也可计算相关性后绘制为力导向节点链接图，显式表达关系。

因此我们制作了四种视图：

1. 用于反映全局时空关系的地理聚合视图（包含污染分布情况、聚类情况等）；
2. 用于描述某地污染物随时间变化的柱状图；
3. 用于描绘风向与污染关系的极坐标图；
4. 用于探索属性关系的平行坐标图。
5. （未采用）描述城市间污染物传递输送关系的节点链接图；
6. （未采用）描述全国风向的二维流场线图；
7. （未实现）描述大气分层扩散的三维流场模拟图；
8. （未采用）描述属性间关系的六维图。

注1：实际操作中，是先设计了3D视图，再设计2D视图。

——挑选合适的数据分析算法——

数据分析后的结果也可以通过可视化描述。在空气质量可视化领域，常用的做法是聚类可视化，比如：

[3] Zhiguang Zhou et al, Visual Analytics for Spatial Clusters of
Air-Quality Data
[4] Jie Li et al, Visual analytics of smogs in China

在下一小节会继续说明算法部分。

——设计可视分析系统原型——

我们认为，在一个与地理信息（时空关系）相关的数据场景中，数据海量高维，在传统的平面屏幕上虽能同时展开多个视图（dashboard布局），但：
1）视图间会相互遮挡，需要额外交互切换到其他视图；
2）数据维度高，2D视图可能无法完全描绘全部信息；
3）为了描绘全部信息，需要使用更大的视图，这导致了进一步的交互困难，以及视野盲区（change blindness）问题。

据此，使用AR设备扩展平面屏幕，结合AR虚拟环境下的视图和平面设备视图，可能取得更好的效果。AR虚拟环境可以充分利用使用者身边的空间，而非局限在屏幕内；可以更好地支持三维视图；而交互手段也更丰富。

因此，我们设计并建造了一个沉浸式跨设备交互可视化系统。该系统结合增强现实设备与大型平面显示器，实现了平面内容与AR内容的联动，结合平面设备精确交互和AR高表现力的优势，综合多种交互手段，支持用户快速、灵活、多角度探索数据。

效果图，图片素材取自多篇论文

详细设计

在这个环节，需要具体地考虑如何实现整个系统。与上一章只绘制一个视图不同，一个系统（可能）需要考虑更多的情况，包括但不限于：

1. 是否需要数据分析算法以获取更高层的结论？
2. 如何设计视图细节（配色、形态等）？
3. 如何处理视图、设备、使用者间的联动？
4. 如何设计交互行为？

对于跨设备系统，还需要考虑：
5. 不同设备显示相同内容吗？还是不同内容？
6. 不同设备间的内容，是互补的？还是递进的？或者并列的？

——跨设备详细设计——

我们使用了C/S结构，以实现设备联动。位于主机的SERVER端负责向CLIENT端传递数据；CLIENT端接收需要绘制成视图的数据并显示；在某一CLIENT端发生的交互行为数据，将被发送到SERVER端，并由SERVER转发到其他client，以实现视图联动响应交互。

平面显示器和AR设备各自作为一个客户端，两者内容不相同。
AR设备上的三维视图是平面设备上二维视图的扩展（或增强）。

——可视化详细设计——

◆ 考虑形态

由于使用了跨设备设计，我们的每一种视图都应该具有平面版，及对应的AR版。平面显示器上只有2D视图，但AR显示器中可以显示2D或3D视图。视图尺寸受平面显示器尺寸控制，AR视图尺寸和平面视图尺寸应该相同，以避免错误的理解。

◆ 考虑颜色

尽管可以在adobe cc上获取配色建议，但空气质量AQI规定文件中给出了推荐颜色表，因此在所有使用AQI数据的视图中配色都按照推荐表填充。

◆ 考虑视图之间的关系

1. 同一设备间的不同视图：可以联动。例如说：我们选择并高亮了柱状图上代表某个对象的元素，那么这个对象如果出现在其他视图上时，应该被同样高亮。
2. 不同设备间同一任务视图的联动：需要联动，特别是当一个使用者同时操作多个设备时。这里涉及多用户的问题，但并不展开讲。
3. 可以没有主视图，但对于时空关系任务，我们选择地理聚合视图作为主视图。在地理视图上选择某一对象，会在其他图中高亮同样的对象。对于平行坐标图，表示其他对象的折线将被隐藏，以减少视觉遮挡的影响。

——交互详细设计——

◆ 平面设备上的交互

平面设备上的视图应该可被手势（手）操作，以完成放缩、查看细节、调整设置等操作。
一块触摸屏（一块2.4m * 1.5m的触摸屏，由实验室提供）足以满足平面设备交互的需求。

◆ AR环境的交互

得益于AR设备的丰富交互输入手段，我们使用了多种交互手段以应对不同场景需求。
手势交互被用于操作视图，注视输入被用来提供远程操作。

◆ 传递交互数据

如何令设备之间联动？联动的来源是使用者的交互行为，因此从交互的角度考虑。我们使用一个交互数据转发服务器来处理这个问题。
特别地，当使用AR设备时，如何将AR内容与其他设备配准（或对齐）？这里涉及AR设备的空间感知(spatial awareness)问题，将在下一节介绍。

——数据分析详细设计——

我们也可以使用算法分析原始数据，并可视化分析结果。

1.我尝试使用非线性统计方法，计算各个城市间的关系系数，以辅助判断污染物传递关系，但失败了，计算结果中表明每个城市间都有强相关性，即使在拉萨和上海间也是:-( ；

2.我们使用了聚类算法处理空气质量数据，以判断是否有：1）污染程度相似；2）污染成因相似；的区域。

3.我们也使用LSTM对短期气象数据变化进行了（很可能不准确的）预测，并以虚化的形式显示在视图中，以与真实数据区分开来。

实现与部署

本节仅做简要介绍。具体的制作教程考虑在下一篇博文更新。

可视化实现概述

我们设计并实现了以下视图。每个视图都有对应的平面端及AR端版本，且AR端视图是对平面视图的扩展与补充。

◆ 地理聚合视图

为了直观地编码同一时刻下不同区域的空气质量数据，我们在地图上绘制：(1)大气属性热力图；(2)聚类视图，以直观展示污染物的空间分布情况。该视图的 AR 增强视图设计为时空立方体和非线性切片。

非线性切片的灵感是源自德累斯顿工业大学IML DRESDEN的论文MARVIS

◆ 大气属性平行坐标图

使用平行坐标图以反映同一时刻上，不同区域的大气属性测量值间的关系。在 AR 视图中，除相同的平行坐标图外，将每个轴划分为等长的区间，统计每区间内数据的数量，通过柱状图反映统计数据。

◆ 风向-风速-污染程度极坐标图

使用极坐标视图，描述某一地区上，不同时刻的风向、风速以及空气污染指数（AQI），以分析经大气运动输送到该位置的污染物对空气质量的影响。在对应的 AR 视图中，我们统计了处于不同风向区间内点的数量，编码为柱形图的高度环绕在极坐标图周围。

◆ 时间-AQI指数柱状图

时间柱状图用于展示 AQI 数值随时间的变化。对应的AR视图设计为局部增强和整体增强两部分。局部增强为二维柱状图，显示某一天内，AQI 的变化，其横坐标表示以小时为单位的时间，纵坐标和颜色表示该数值；整体增强为三维柱状图，整合显示一个月内每天AQI数值的变化。

◆ （未使用）大气风向风速二维流场线图

根据风向和风速绘制流场线。
被批评为不好看，未使用。
实际上没有花太多时间修改美术效果，确实不好看。

流场线图unity截图。使用了粒子特效强化“风”的印象，但似乎并不好看。而且hololens性能不足以渲染整个动态风场。

流场线局部截图。流场线浮在地图顶部，用红色标记风向，白色表示风速。

流场线局部截图二.隐藏了地理柱状图。

◆ （未使用）城市间污染物输送关系视图

使用非线性格兰杰因果检验，计算城市间的污染物可能存在的关系。
选择了14个城市，包含拉萨和乌鲁木齐。但并未计算出有效的关系。

实际效果图。节点尺寸表示AQI数值，而连线颜色表示关系正负，粗细表示关系大小。

该图片来自论文 京津冀地区城市间大气污染的
非线性传导及其联动网络 。

◆ （未使用）大气属性相关性视图

计算大气属性的相关性（协方差），并绘制为节点链接图。
由于3D和2D端过于重复而没有使用。

和 Huamin Qu的香港空气污染可视化论文比较相似

◆ （未使用）空气质量六维图

由用户自定义属性，数据归一化后显示。
被认为可能误导用户，且视图结论不明显，未使用。

灵感来源自 Visual analytics of smogs in China 的fig 5

——平面显示器部分的实现——

在平面显示器上绘制的视图，使用pyECharts绘制。
这部分由于都是基础视图，可以参考官方文档，不再详细展开。

pyECharts的文档写的非常好，很清晰。

——AR部分的实现——

在AR虚拟环境绘制的视图，使用unity绘制。
在上一章，我们已经讨论了如何使用unity制作可交互视图。

——server的实现——

我们使用python制作了server。
使用python的另一个好处是可以更方便地与数据分析算法模块整合。
通过websocket管理服务器到平面显示器的连接。
通过TCP管理服务器到AR设备的连接。

websocket也可以管理AR设备，但部署后发现并不稳定

——交互同步的实现——

简单地说，这里我们为每个需要同步的行为设计了编码。交互行为发生后，从设备端发送到server，再由server广播到需要更新画面的其他服务器上。
平面端虽然使用pyecharts，websocket通信连接的部分是在python生成的html文件里手动加入的。

——关键问题：如何对齐AR内容与平面内容——

◆ 主动式对齐

这是指由AR设备进行图像识别，识别到平面显示器上的定位标记，将虚拟场景与真实环境对齐的方式。

可以参考论文：

T. Sun, Y. Ye, I. Fujishiro, and K. L. Ma, “Collaborative visual analysis with multi-level information sharing using a wall-size display and see-through HMDs,” IEEE Pacific Vis. Symp., vol. 2019-April, pp. 11–20, 2019, doi: 10.1109/PacificVis.2019.00010.

◆ 被动式对齐

这是指由额外设备（如红外摄像机）捕捉场景内所有设备的位置信息，由服务器计算AR视图正确位置，并控制AR设备对齐的方式。

可以参考论文：

P. Reipschlager, T. Flemisch, and R. Dachselt, “Personal augmented reality for information visualization on large interactive displays,” IEEE Trans. Vis. Comput. Graph., vol. 27, no. 2, pp. 1182–1192, 2021, doi: 10.1109/TVCG.2020.3030460.

◆ 我们的选择

我们指定了AR视图将出现的位置，并固定了位置参数。

——系统部署与测试——、

(移动到下一篇博文)
简单而言，每个视图应该分别测试AR版和平面版，然后再组合到一起检查联动情况，进而检查不同设备之间不同视图的联动。

小结

这一章节已经移动到下一篇博文。请移步：

——工时统计——

我们使用了大概两个月的时间完成这一系统的设计，并参加了ChinaVis 2021。

这个项目我每天贡献约八到十个小时。后期经历了约半个月的突击开发，每天大概贡献12小时以上。（几乎）所有的编码都是我完成的。

整个项目中主要的困难在于如何实现各类代码。
其次是演示环节的设计。

---

• ← Previous Post
• Next Post →

---

---