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

本系列教程将在2022年新年期间进行更新，敬请关注！欢迎批评指正！

目录

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

第二章：自行设计与实现unity可视化视图

本章将会介绍如何制作可视化视图。用一个简单的例子————空气质量地理分布柱状图（以下简称：示例），来说明有哪些因素需要考虑、制作工时开销、与可改进的部分。

准备工作

设计视图的两个主要问题是：

1. 使用什么类型的数据；
2. 完成什么样的任务。

   ————明确使用的数据————

   你需要明确你的数据类型：
3. 是数值型？文本型？混合型？数据精度如何？数据大小如何？是什么格式？存储在哪？通过何种接口使用？

对于示例而言，需要使用XLS格式的数值型数据文件12个，共1.1G。
有效属性包括：采样点经度、采样点纬度、六项大气成分浓度

————明确可视分析任务————

你也必须要明确你的视图将被用于何种场合、获取何种结论。

对于示例而言，需要：
描绘某一时间点上，不同区域的空气质量数据，以对比区域间空气质量差异，并寻找其时空分布规律，探索污染时空规律成因。

设计阶段

在设计中需要考虑的要素是：

1. 目标用户是什么人？
2. 可以使用什么视图？哪种是最适合这些人在某一环境下使用的？
3. 图表的颜色、形态如何设置？
   如果是AR可视化，那么还需要考虑：
4. 视图应该部署在哪个位置、如何与现实环境配合（in-situ visualization）？

————目标用户————

参考

Z. Chen, Y. Su, Y. Wang, Q. Wang, H. Qu, and Y. Wu, “MARVisT: Authoring Glyph-Based Visualization in Mobile Augmented Reality,” IEEE Trans. Vis. Comput. Graph., vol. 26, no. 8, pp. 2645–2658, 2020, doi: 10.1109/TVCG.2019.2892415.

不同用户需要不同学习难度、理解难度、使用难度的图表。

对于示例而言，目标用户为需要获取空气质量分布情况的分析人员或行业相关人士。

————视图总体设计————

对于示例而言：
我们使用一个柱状图以表达空气质量，每个采样点对应一个可视化柱。柱状图将与一幅地图配准，令可视化柱真实地分布在采样点处。空气质量数据（AQI）使用颜色和高度两个通道编码。
由于1）视图尺寸较大，类似沙盘；2）限制了采样点数量，并留出了间隙；3）视图可以被放缩、移动、旋转等交互，并不会导致三维柱状图的遮挡问题。

◆ 数据流向设计

对于示例而言，用于可视化的数据保存在本地。
用于跨设备交互响应的数据通过socket转发到服务器，再由服务器分发到对应设备。跨设备的技术细节将在后续章节介绍。

◆ 可视化视觉设计

基础设计见“总体设计”小节。

◆ 交互设计

对于示例而言，应该具备：1）视图可移动；2）视图可旋转、缩放；3）局部高亮；等交互功能。
交互功能应该通过手势操作实现，并用注视交互辅助（可能存在的远距离交互情况）。
在此之上，为了更好地描绘空气污染时空分布关系，探索一段时间上空气质量变化规律，我们设计了动态视图，通过进度条修改视图所在的时间点或播放动画，以观察其他时间上的变化。

实现阶段

本节需要一定的unity基础知识。详细代码会在审查后公布在我的github仓库，这里仅提供思路。

————总体思路与状态转换图————

黑色字体：系统状态及转移路径；
蓝色字体：用户行为；
红色字体：BUG或其他外部因素

SYS CLOSE表示可视化视图被关闭；
通过交互行为USER OPEN启动视图，进入初始化状态SYS INITAL；
通过交互行为USER VIEW浏览视图（包括manipulator/navigation等操作，如旋转、缩放、拖动视图、走动观看等），视图会对交互行为进行反应，这个状态标记为SYS ACTIVE；
通过交互行为USER HIDE，视图会被隐藏，从而不可见；USER SHOW使得视图恢复显示；
用户的初始化/刷新操作USER RE使得系统会带SYS INITAL状态；
完成使用后，通过USER CLOSE关闭系统。一些BUG和外部因素也可能导致可视化视图关闭，或回到初始化状态。

————绘制柱状图————

使用unity提供的cube图形作为柱状图体素，并对齐cube的底部。
根据六项污染物浓度计算AQI数值，归一化后映射到高度和颜色属性上。

但为了实现交互响应，推荐将交互响应方法绑定到物体上，制成prefab，通过
instantiate()生成可交互部件。

该视图没有设计图例。

————与真实地理坐标配准————

需要使用一张地图作为底图，并确定这张地图四角的经纬度坐标信息，以配准位置。柱状图是底图的子物体。
可以将地图图片导入到场景中。
但在导入前，需要在Unity中将图片texture type设置为Sprite (2D and UI).

根据简单校准公式：
相对坐标系位置（相对unity世界中底图的位置） = （采样点经纬度 - 地图边界经纬度）* 底图在unity中的长宽尺寸

求出相对位置。长宽尺寸可通过GameObject.GetComponent<Renderer>().bounds.size.x获取。

再通过：

世界坐标系位置（unity世界坐标系位置）= 相对坐标系位置 * 父物体放缩系数 + 底图在unity世界坐标系的位置

计算出每个可视化柱的位置。

————设置交互行为及响应————

本节使用了MRTK工具包。需要有hololens unity MRTK开发经验。

◆ 高亮的设置

当选中某个可视化柱时，高亮该柱（变为亮红色）。再次选择或选择其他柱时，取消高亮。

实现思路：
为可视化柱prefab添加自定义高亮方法；
为prefab添加脚本objectManipulator，将交互响应动作（如onManipulationEnded选项卡）设置为高亮方法。

◆ 注视的设置

当注视到某个可视化柱时，弹出指示条，显示其具体AQI数值。

实现思路：

1. 创建指示条prefab。指示条随着可视化柱一同创建，但默认为隐藏，通过响应函数调用显示/隐藏；
2. 为可视化柱prefab险些注视响应方法OnWitnessShowToolip，调用该方法时，显示指示条；
3. 为prefab添加脚本objectManipulator，在面板（Inspector）中向交互响应事件（如onManipulationEnded选项卡）添加高亮方法OnWitnessShowToolip。

再编写隐藏指示条的方法并绑定。

◆ 旋转/缩放的设置

可通过手势操作视图。

实现思路：

1. 为视图物体添加BoxCollidor objectManipulator 及 nearinteractable脚本，以进行操作。

◆ 进度条的设置

可通过进度条调整可视化视图。

实现思路：
0. 进图条prefab可以在MRTK示例场景handinteractionDemo中找到；

1. 编写进度条响应函数OnSliderUpdate(SliderEventData dat)。令该函数调用时，更新视图；SliderEventData参数需要特殊命名空间引用using Microsoft.MixedReality.Toolkit.UI;
2. 将响应函数绑定到进度条OnSliderUpdated事件。

关于如何更新视图：
1.1： 函数参数设置为进度条参数dat；
1.2： 根据dat数值切换视图使用的数据；
1.3： 根据数据修改对应可视化柱的高度；（不需要重新生成，因为位置是不变的）
1.4： 重新对齐可视化柱底面。

部署与检查

小结

工时开销统计

当思路成熟后，编码及设置参数大约需要4~32个工时，视操作者熟练程度而定。
笔者第一次设计制作该视图时，不计后续改进，使用了约五天的时间，其中每日花三到五个小时制作视图。
在上文的每个环节都会遇到一些问题。
明确分析任务、调整底图坐标系参数、调整可视化柱状图底面对齐花去了主要时间。
调整对齐的主要问题在于：当视图被翻转（不在水平面）时，如何重新校正对齐。

可改进的部分

1. 颜色与形态通道分离：两个通道可以分别编码一个属性，而非都用于AQI数值；
2. 颜色本身可以调整：这里使用了AQI规范颜色；
3. 受HOLOLENS存储空间限制，使用了下采样后的数据；
4. 改进地理坐标对齐算法的精度；

---

• ← Previous Post
• Next Post →

---

---