科学可视化-从概念、方法到典型案例 课件 体交互

体交互系统界面及效果图二、方法概要一、知识点导读三、系统介绍与配置四、导图操作目录01PART一、知识点导读1.三维交互2.手势交互3.6DOF操作4.Focus+Context交互5.基于体数据的漫游6.体数据空间八叉树1.三维交互（3DInteraction）直接三维交互一般为光学交互。使用摄像头捕捉人体姿势，传递给系统。间接三维交互使用手持设备或者桌面点触技术。手持设备：操纵杆、手柄等桌面点触：智能手机、平板电脑、可穿戴设备等基于手柄交互使用操纵杆或手柄等外部设备，用户操作设备与虚拟空间的模型进行交互，产生用手直接操作模型的感觉。不存在遮挡问题，识别的精较高。裸手手势交互

使用摄像头拍下手部图像，通过特征提取跟踪手指、手掌位置，记录每一帧手指姿势变化，然后根据指令集操作模型。

2.手势交互（GestureInteraction）HTCVive手柄Phantom操纵杆基于手柄交互

HTCVive：通过激光定位将捕捉到的动作转换为数据输入，然后通过分析数据将动作在虚拟环境中再现。Phantom：用户通过操纵杆交互，操纵杆会反馈给用户一定力觉信息，使其产生触摸虚拟对象的感觉，并随时改变控制策略。通过两个扭动轴点，实现6自由度位置感应。基于光学的手势识别系统Kinect和LeapMotion，通过光学感测进行体感控制，根据红外测距原理，通过设备上的摄像头和红外设备对物体进行定位。Kinect：主要追踪中远距离（0.5~4m）的全身动作，在短距离检测时，对于手部动作，会产生相对误差，不能检测出细微手势的区别。裸手手势交互

Kinect设备Kinect使用情景LeapMotion侧重于识别精度高、低延迟的手指运动，其动作跟踪精度达到0.01mm，数据刷新频率高于一般显示器刷新频率，具有良好实时性；会有遮挡部位无法正确识别，识别的手势不稳定等问题。裸手手势交互

LeapMotion内部构造图红外发射器摄像机LeapMotion采用双目立体视觉技术，由左、中、右三个红外发射器和左、右两个摄像机采集手部数据；表面是一块黑色的红外滤光片，对可见光波段以及紫外光具有较强的屏蔽作用。裸手手势交互

LeapMotion内部构造图内部结构LeapMotion工作区LeapMotion双手识别过程:（1）双手自然摆放时，LeapMotion识别手的姿势裸手手势交互

（2）通过比较当前帧与前一个特殊帧的信息识别物体的运动裸手手势交互

LeapMotion识别存储静态数据（如手指各骨骼、手掌），动态数据自定义基本手势，包括方向、状态、持续时间等信息对模型进行切割、滤镜等操作LeapMotion内部构造图红外发射器摄像机6自由度操作3DOF（X、Y、Z三个轴）旋转3DOF（X、Y、Z三个方向）平移

平移矩阵旋转矩阵3.6DOF操作（6DOFManipulation）基本思想：让用户不仅看到感兴趣区域的重要信息，同时得到关联信息的整体印象。鱼眼相机4.Focus+Context交互卡尔加里的鸟瞰图放大后的地图鱼眼模型效果图[CarpendaleS,2004]显示模型被框选区域的线框放大框选区域的模型魔术透镜（MagicLens）桥模型中使用透镜根据交互方式不同，包括手动漫游：完全依赖于键盘、鼠标等外部输入设备的控制。固定路线漫游：沿预先设定的路径进行漫游，只能观察所设定路线的周边情况。自动漫游：用户设定起点、终点，借助漫游路径规划算法确定一条无碰撞路径，可沿该路径自动漫游到终点。5.基于体数据的漫游中心路径提取算法拓扑细化法：保证空间连通性、拓扑结构不变，逐层迭代剥离边界体素得到中心路径。距离变换法：计算边界距离场，将边界距离场看作加权图，通过基于图论的路径生成算法得到中心路径。势能场法：假设障碍物表面存在相同点电荷以产生静电场，计算虚拟环境空间中每点的受力情况形成势能场，连接势能场鞍点形成中心路径。算法优点缺点拓扑细化法完整保留空间的拓扑结构检测和剥离外层体素的过程非常耗时距离变换法对于高分辨率体数据，仍具有较快计算速度构建边界距离场的过程相对耗时，难以保持空间的拓扑结构势能场法所提取路径具有更好的光滑性和鲁棒性在高分辨率体数据上构建势能场将耗费大量时间，规划路径过程容易陷入局部最优八叉树（Octree）一种表示三维空间的树形层次数据结构，其中一个节点包括八个子节点，每个节点代表一个立方体所覆盖的空间。构建体数据空间八叉树的过程：

（1）定义根节点和深度。

（2）划分空间：递归地将每个立方体平均划分为八个子立方体，直到设定的分割深度。若立方体中不包含障碍物体素，可停止划分。

（3）标记叶节点：所覆盖区域与障碍物体素相交的叶节点被标记为障碍物节点，否则被标记为可行域节点。

（4）剪枝：自底向上地对八个叶子节点均为可行域节点进行剪枝，最终可行域八叉树表示。6.体数据空间八叉树

体数据

八叉树根节点八叉树数据结构（虚线框表示被剪枝部分）空间划分（0~7为八叉树节点编码）构建体数据空间八叉树的过程一个例子：02PART二、方法概要1.平面切割（1）只保留切平面（2）保留切平面一侧2.滤镜3.手势设计（1）坐标系的映射关系（2）设计原则（3）手势识别与处理4.漫游路径规划切割平面切割是观察内部数据的常用手段。1.平面切割橘子体模型切割平面一侧沿着某一条视线方向，绿色采样点表示遮挡观察需要剔除，黄色采样点表示落在切割面上，红色的则表示参与体绘制融合。绿色和红色采样点不参与颜色累加。

使用Phong光照模型进行光照增强

只保留切平面切割示意图

沿着某一条视线方向，绿色采样点表示遮挡观察需要剔除，黄色采样点表示落在切割面上，红色的则表示参与体绘制融合。绿色和红色采样点不参与颜色累加。只保留切平面切割示意图只保留切平面

保留切平面一侧绿色采样点不参与绘制，黄色和红色采样点按照光线投射体绘制进行颜色累加。切割示意图绿色采样点不参与绘制，黄色和红色采样点按照光线投射体绘制进行颜色累加。保留切平面一侧切割平面一侧切割示意图滤镜的作用

实现分层浏览模型内的不同组织，提高可视化交互性以及体数据集局部细节展现能力。2.滤镜真实环境光源位置转变后进一步简化后

传递函数传递函数示意图坐标系映射手部刚体坐标系为（绿色）、LeapMotion坐标系（黑色）、世界坐标系（橘红色）、体模型局部坐标系、屏幕坐标系。3.手势设计坐标系示意图（1）用户符合用户认知行为和常用习惯，如手掌平移代表模型平移，手掌旋转代表体模型旋转；（2）系统简化手势设计，一般单手完成交互；优先设计惯用手手势；组合手势减少基本动作数量；（3）过程连贯性和流畅性，方便一次性完成。手势设计原则（1）左手手势编码、定义及功能（2）右手手势编码、定义及功能手势识别与处理体模型交互状态转化关系体模型交互状态转化图体模型构建

4.漫游路径规划

用八叉树表示路径规划的可行域，即障碍物外部区域八叉树势场计算可行域八叉树的构建过程

八叉树势场计算势场计算示意图

八叉树邻接图构建构建八叉树邻接图示意图

路径搜索

基于A*算法的路径搜索搜索漫游路径示意图

邻接节点

基于A*算法的路径搜索

基于A*算法的路径搜索B-样条曲线拟合算法

基于B-样条平滑化路径平滑路径平滑示意图

路径平滑B-样条曲线拟合算法

基于B-样条平滑化路径平滑示意图03PART三、系统介绍1.系统架构2.系统界面（1）手势交互（2）路径规划交互3.手势交互设计（1）6DOF操作手势（2）平面切割手势（3）滤镜手势4.二维交互框架流程体交互系统主要包括手势交互功能和体漫游的路径规划功能。（1）手势交互功能：数据采集、单/双手判断、手势识别、三维交互1.系统架构手势交互功能（2）体漫游的路径规划功能：用户控制、路径规划、动态可视化框架流程体漫游的路径规划功能模块名功能手势交互平面切割只保留切平面切割平面一侧滤镜分层浏览

体漫游用户控制交互设定起点和终点、保存和读取漫游路径、开始和停止漫游、显示漫游路径路径规划由路径规划算法快速提取路径，并沿该路径自动漫游交互功能切割工具滤镜工具2.系统界面手势交互“手势交互”选项卡计算势场路径规划交互体漫游“体漫游”选项卡6DOF操作手势静止：左手握拳，保持不动3DOF平移：左手手掌自然撑开，沿X、Y、或Z轴移动3DOF旋转：左手手掌自然撑开，沿X、Y、或Z轴转动3.手势交互设计静止3DOF平移3DOF旋转虚拟切割：沿手掌平面法向移动改变切平面法向：右手掌沿任一方向转动平面切割手势沿手掌法线移动沿任一方向转动滤镜移动：右手食指沿LeapMotion的X、Y轴移动放缩滤镜：右手食指沿Z轴移动滤镜切换：右手食指画圈，顺时针（或逆时针）切换到上一层（或下一层）滤镜手势移动或缩放滤镜切换滤镜鼠标/键盘控制功能A/D绕Y轴旋转W/S绕Z轴旋转Shift+A/D沿X轴移动Shift+W/S沿Y轴移动Shift+Q/E沿Z轴移动左键旋转中键在XOY平面移动滚轮沿Z轴移动鼠标键盘交互

无法准确模拟三维空间内对体模型的6DOF操作。4.二维交互04PART四、导图操作1.软硬件环境2.测试数据3.操作步骤4.操作演示软件环境硬件配置操作系统：Windows10（64bit）开发工具：VisualStudio2019、CUDA11.2开发语言：C++第三方库：OpenGL4.6、NVIDIA驱动531.79CPU： Intel®CoreTMi9-10900K内存：

大小32GB显卡： GeForceRTX3090

显存24GB1.软硬件环境2.测试数据输入数据是一个人头采样CT数据“./data/VolumeData/head.raw”，大小为256x256x225，三个方向的采样间距依次为1.0mm。写入一个后缀为config的配置文件head.config，位于“./data/Config/”文件夹内。XML文件head.xml保存传递函数信息，位于“./data/TransferFuncXML/”文件夹内。具体如下：<TransferFunc>

<Classname="皮肤"R="253"G="197"B="2"controlPointB0="47"controlPointB1="52"controlPointB2="67"controlPointB3="79"alpha="1"/><Classname="肉与软骨"R="156"G="14"B="14"controlPointB0="75"controlPointB1="82"controlPointB2="90"controlPointB3="101"alpha="0"/><Classname="骨头"R="200"G="200"B="200"controlPointB0="95"controlPointB1="119"controlPointB2="184"controlPointB3="211"alpha="0.75"/></TransferFunc>

3.操作步骤打开体交互系统；选择工具栏最左侧打开文件按钮；在弹出对话框中选择head.raw文件并打开。（1）运行交互界面（2）二维交互——旋转/平移鼠标/键盘控制功能A/D绕Y轴旋转W/S绕Z轴旋转Shift+A/D沿X轴移动Shift+W/S沿Y轴移动Shift+Q/E沿Z轴移动左键旋转中键在XOY