沉浸式图可视化的布局、渲染和交互的方法研究(A Study of Layout, Rendering, and Interaction Methods for Immersive Graph Visualization)

信息可视化传统上以2维的图形来展示。近些年3D显示器和沉浸式头戴设备(head-mounted displays)的普及,使得身临其境的立体可视化环境成为可能。这种沉浸式环境的技术已被广泛地用于科学可视化等领域,相比之下,很少有人将其应用到信息可视化领域。这篇工作[1]的作者关注了信息可视化中的一个重要部分:图可视化,介绍了他们对于3维图可视化的布局、渲染、以及在沉浸式环境中的交互方法。

布局

为了方便用户在三维沉浸式环境中的探索,作者把图中所有的点放在了一个球面上,把用户放在球面的中心,因此从用户的视角来看,所有的点到用户的距离是一样的(图1)。同时,在球面转动时,整个图的布局在用户的眼中也保持不变,这个优点区别于普通的将点散布在三维空间的布局方法。为了充分利用现有的图可视化布局算法(这些算法基本都是2维的),具体的实施方法是,首先按照2维的算法计算图的平面布局,然后采用不同的映射方法来将2维的图映射到一个球面上,具体映射方法有球心投影(Gnomonic Projection)、立体投影(Stereographic Projection)、球面坐标投影(Spherical Coordinates)、立方球体映射(Cubed Sphere Mapping)等。

spherelayout

图1. 沉浸式环境下的球面图布局,所有点位于一个球面上,用户视点位于球面的中心

 

对于图中的边,作者首先采用了用球面线性插值改进的de Boor算法(de Boor’s algorithm with spherical linear interpolation),使得所有的边以边绑定的方式呈现在球面的表面上,然而这样会使所有的边交叉在一起,在边的数量很多时造成视觉上的强烈遮挡。为了充分利用沉浸式环境下的3维空间,他们接下来使用了深度路由(Depth Routing)的方法(图2),将这些绑定的边按照一定算法“拉”出球面,使得边与边之间,边与点之间不会存在交叉和遮挡(图4(b))。

Depthrouting

图2. 同一条边在未深度路由(黄色的边)和深度路由后的效果(绿色的边),灰色的曲面为图布局里的点所在的球面

在这样的布局下,图的视角(Field of View, FOV)成为一个需要考虑的问题,即图布局应该覆盖一个球面部分的多少(图3)。在沉浸式环境下,影响FOV选择的因素主要有两个:用户颈部的转动角度和图布局的疏密程度,FOV过大使得用户颈部需要转动很大的角度来观察图的某些部分,而过小的FOV会使图的布局过密,影响用户的探索。在文中,作者根据之前相关的研究指出,合适的沉浸式球面图布局中,横向视角应该在160度左右,纵向视角应该在100-110度左右。

FOV

图3. 不同视角的图布局

渲染

对绑定的边的渲染方法在科学可视化领域中已经有很多的研究,有很多方法可以应用到这篇工作中,如LineAO、Halos、illuminated lines等。图4(c)展示了经过渲染后的图布局效果,整个图变得更加清晰。

effect

图4. 球面图布局的效果展示

交互

这篇工作主要讨论了球面图布局下的“高亮”交互操作。

第一个问题是如何在头戴式设备下展示指针的移动,这里有两个可以考虑的因素:传统的鼠标控制和用户头部的转动。通过试验研究,作者发现加入了“用户头部的转动”来控制指针位置的方法中,会造成很多不友好的用户体验,因此他们最终采用了“只通过鼠标的控制”的方法来展示指针的移动。

第二个问题是如何体现某个点或边被选中。为了充分利用在沉浸式环境下用户对物体的深浅位置感知能力,作者采用了以下的方法:初始状态时所有的点位于同一个球面上,当某个点被选中时,这个点沿着半径方向向用户(即球面的中心)移动,此时用户可以感知到这个点与用户的距离近了;同时与选中的点相邻的其他点也向球面中心处移动,但比选中的点移动距离略小。图5展示了不同视角下的这一操作的效果。

highlight

图5. 旁观者视角(第一行)和用户视角(第二行)下的交互操作前后效果图

 

 

在最后的用户调研中,作者通过比较3维沉浸式环境下,志愿者在传统的平面图布局和本文的球面图布局完成相应任务的情况来评估这篇工作的效率。最终的结果显示他们的球面图布局系统比传统的平面图布局表现要好;并且在球面图布局中,对边采用深度路由比不采用深度路由的方法要更有效。

 

Reference

[1] Oh-Hyun Kwon, et al. “A Study of Layout, Rendering, and Interaction Methods for Immersive Graph Visualization” IEEE Transactions on Visualization and Computer Graphics 22.7 (2016): 1802-1815.

发表评论?

0 条评论。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>