基于AR的线上线下混合式教学App的设计与实现

刘清岗

(陕西学前师范学院 信息工程学院，陕西 西安 710100)

0 引言

近年来，云计算、5G网络、虚拟现实等计算机技术快速发展的时代背景，深刻影响牵引着教育领域的变革，现阶段传统的课堂教学当中，教师往往对一些抽象、晦涩难懂的知识点难以讲解清楚，一定程度影响了学生的理解和掌握。比如口腔解剖学中牙体的各部分结构及相互作用关系，地理课中地球自转公转夹角关系等知识点，传统的依靠PPT图片或其他多媒体手段呈现出的是物体或场景的2D平面结构，学生需要将2D平面图形处理完毕后，映射到大脑中，脑补建模形成3D立体效果，这对很多学习者无疑是比较大的障碍，同而也无法真正保证和实现自主学习。运用增强现实(Augmented Reality，AR)技术，将抽象复杂的内容可视化、形象化，教师运用线上AR技术，将虚拟模型叠加到现实世界中[1]，直接在模型上面有声地勾勒讲解，以更直观、全面的方式呈现给学习者，会极大提升学习者的存在感、感官直觉和专注度，虚拟信息高度融合于现实世界主要体现为几何一致性、光照一致性和时间一致性[2]。实证研究结果表明，增强现实的元素所产生的可视化效果，能够大大加强学生对抽象概念和不可见现象的感知[3]。

1 App总体思路与方案

本款App的宗旨实现线上线下混合式教学，打通从书本图形到学生大脑建模的壁垒，让教与学通过网络进入同一个情境中，教师直接操作实物的仿真模型进行讲解，由此系统分为教师与学生两类角色，不同角色软件的功能模块侧重点不同，教师端侧重模型讲解，学生端侧重离线的模型控制。软件设计采用分层设计的思路，便于后续迭代扩展开发[4]，使用云存储代替本地组建存储与管理服务器，节省数据的管理维护成本，使得软件部署更简捷轻便。

软件整体功能如图1所示。

图1 App整体功能

App系统架构分为数据服务层、应用支撑层和业务逻辑层，其中识别图像、教学房间的存储与管理采用软件即服务(SaaS)的Photon Cloud和Vuforia云技术；应用支撑层采用Unity3D、Vuforia处理图像及模型，采用Photon实现网络共享与同步；业务逻辑层实现云教室创建与管理、目标识别与现实叠加、画笔与语音讲解等功能，如图2所示。

图2 App系统架构图

2 软件模块设计

本App开发主要步骤包括：创建目标识别物模型，实现目标识别与模型的单机控制，实现模型控制的分布式同步，手指作笔进行讲解的图形生成与网络共享。文中取口腔医学中的牙体结构为例，进行软件模块的开发设计。

2.1 3D虚拟模型的创建

采用3D MAX、Blender等建模工具对牙体进行分体建模，绘制贴图制作材质，然后将模型保存为.FBX文件导入Unity3D AR工程项目中。

2.2 Unity 3D+Vuforia SDK 实现目标识别与模型控制

Vuforia使用计算机视觉技术来实时地识别和跟踪平面图像以及简单的3D物体[5]。创建一个基于AR的应用程序[6]如图3所示。

图3 AR创建和部署应用程序步骤

首先，使用 Unity 3D创建AR工程，导入从Vuforia 官网下载的目标识别物数据库。窗体中增加 AR Camera 和 Image Target 组件，删除原场景摄像机。在 Database 和 Image Target 中选择加载的目标识别图形，其中 Image Target 中添加要显示的3D模型预制体。改写目标识别成功与丢失的OnTrackingFound和OnTrackingLost函数，实现当教师识别后，不让模型丢失。

对手指触摸屏幕的形态进行分析判断：两根手指的移动距离是否超过预设阈值来决定模型的缩放，一根手指的滑动与轻触来决定旋转与单击。以实现模型围绕纵向Y轴旋转为例，当手指姿态确定为手指滑动时，控制模型沿Y轴，以手指滑动在X轴的分量为步长，以预设移动常量为因子，将模型的旋转过程在屏幕中逐帧显示。

if(Input.GetTouch(0).phase==TouchPhase.Moved)

transform.Rotate(Vector3.up*Input.GetAxis("MouseX")*(-Xspeed)*Time.deltaTime)

2.3 云教室的创建与管理

使用全托管服务Photon来实现云教室的管理，设置App客户端的版本并使用由PUN设置向导写入的配置文件，通过ConnectUsingSettings方法连接到PhotonServer;教师通过MasterServer创建云学校大厅Lobby，使用CreateRoom方法创建线上教室，并配置容纳人数、准入密钥等RoomOptions信息。学生可以在学校大厅Lobby中看到全部云教室，输入密钥通过JoinRoom方法进入云课堂。创建课堂及人员进出课堂的信息通过OnReceivedRoomListUpdate回调函数，及时处理云学校大厅更新时的逻辑，例如更新UI中显示的云教室列表。

2.4 Photon实现模型控制的网络同步

采用Photon Engine作为App的网络同步引擎，实现教师端与学生端的模型操作效果同步。本例中主要使用Photon中的RPC方法来实现所有客户端模型自身变化以外的同步。执行原理如图4所示。

图4 RPC函数执行流程图

在Vuforia 目标识别检测到的OnTrackingFound的函数中，用单例模式在网络中实例化生成牙齿3D模型，所有进入云教室的手机客户端会同步出现牙齿模型。使用Photon的Photon View网络同步组件将教师端的模型操作同步到学生端，方法是将牙齿3D模型的预制体添加Photon View 和Photon Transform View组件，在Photon View的观察条件(Observed Components)中添加Photon Transform View组件。如果模型中有动画，可以添加Photon Animator View组件，并注册到观察条件中，实现模型动画的网络同步。

2.5 画笔图形的绘制与同步

画图功能单机实现主要原理：在手指滑动时记录第一帧的手指触点平面坐标P1:vector(x1,y1),第二帧记录手指触点平面坐标P2:vector(x2，y2),根据P1与P2的距离是否超出预设阈值来断定是否滑动，如果判断滑动则根据设置的笔刷宽度和颜色生成一个矩形像素图块，宽度为笔刷宽度，长度为|P”2-P1|,P1、P2为矩形两边中心点坐标，如此就实现了手指屏幕连续画线。原理如图5所示。

图5 手指滑动画图原理

实现学生机屏幕同步需要在画线的方法中添加网络同步，如果判断教师端正在画线操作，则调用附有PhotonView组件的预制体的OnPhotonSerializeView网络同步函数，激活所有学生端的画图函数，将教师的笔迹坐标以及笔刷参数同步到所有客户端，实现图画的网络同步。

3 软件关键技术研究

3.1 3D模型注册实现

三维注册(也叫三维配准)要求计算机生成的虚拟3D模型与现实环境的三维位置、角度和大小要完美融合，实现原理：① 摄像头扫描生成3D模型并确定其世界坐标。② 模型通过刚体变换进入相机坐标系。③ 相机中模型通过透视投影进入到屏幕的物理图像坐标系。④ 根据感光芯片的像素大小，将模型连续的物理图像坐标转换成离散的图像像素坐标，实现3D模型的注册显示。在实现的过程中涉及到的世界坐标、相机坐标、图像像素坐标与物理图像坐标的相互关系[7]，如图6所示。

图6 坐标系的相互关系

图中，目标识别点P在世界坐标系中的坐标为(Xw，Yw，Zw)，在相机坐标系中的坐标为(Xc，Yc，Zc)，在像素图像坐标系中的坐标为(u，v)。Oc是摄像机模型的聚焦中心，作为相机坐标系的原点，以摄像机光轴为Zc轴建立三维直角坐标系。Xc,Yc一般与图像物理坐标系中的X、Y平行，且采取前投影模型。

相机坐标系与世界坐标系之间的关系[8]满足式(1)。

(1)

式中，R为3×3正交旋转矩阵；T为3×1平移矩阵；0为(0，0，0)，简化用Lw表示后为4×4矩阵。

像素平面坐标系与相机坐标系满足式(2)。

(2)

其中，f=|Oc-p|,是摄像机的焦距。

像素坐标系与图像物理坐标系的关系满足式(3)。

(3)

式中，dx、dy表示感光芯片上像素的实际大小，是连接像素坐标系和真实尺寸坐标系的；u0,v0表示图像平面中心。

综合上述坐标转换关系最终得出图像在屏幕上的显示为式(4)。

(4)

3.2 插值算法实现网络同步

本例中虚拟物体操作与画笔工具使用均涉及物体的位置与角度变化，如何在网络延迟环境中实现物体平滑位移是最大难题。在分析物体的移动规律中发现，将位移(含旋转)在时间轴极限分割后，位移可以用直线近似代替，误差值在允许区间，因此选择使用线性插值法解决位移问题。

线性插值是指插值函数为一次多项式的插值方式，其在插值节点上的插值误差为零。线性插值的几何意义即为利用过A点和B点的直线来近似表示原函数，如图7所示。

图7 一次多项式的插值原理

线性插值可以用来近似代替原函数[9]。

本例的网络同步使用PhotonTransformView同步位置时，每100毫秒发送一次对象位置信息[10]。在连续两个位置AB之间，使用内插(Interpolation)法将|B-A|逐帧计算位置信息，从而实现对象的平滑移动。由于网络环境存在延迟，本例采用根据运动轨迹预测未来位置的方法，实现在同一时间点物体在网络中位置与动作的同步，原理如图8所示。

图8 运动轨迹预测原理

图中，T1、T2、T3、T4代表了服务器校准时间刻度，当主客户端物体从A移动到B时，会将最新位置B、方向(B-A)及移动结束时间T2等信息广播到客户端,由于存在网络延迟ΔT，客户端需要预测确定延迟时间后的主客户端物体位置及方向。根据匀速直线运动公式，可以得到从客户端1的物体预测位置为：C=B+ΔT1*(B-A)/R，其中R为物体移动一次的间隔时间。随后利用Vector3.MoveTowards(A,C,(C-A)/R)实现物体从A平滑移动到C，物体的旋转同步与此实现原理类似。

4 App使用效果测试

App开发完毕进行了反复的灰盒测试，效果如图9所示。

图9 教师端App使用效果

发现将识别图像打印在普通纸张或者放置到手机、平板电脑与计算机中识别效果较好，但是当识别图像投影到幕布或者在光线较暗的环境下，生成的AR模型会有明显抖动，非常影响授课效果。主要原因是当图像变模糊或者光线变暗后图像的特征提取较为困难，在这种情况下Vuforia的图像识别算法SLAM(Simultaneous Localization And Mapping)计算效率会大打折扣，会出现不断识别或者间断识别的现象。解决办法是缓存生成模型的坐标数据，当前后识别的位置相差在预设的抖动阈值范围内时，不再更新模型位置，由此一定程度上解决了模型抖动的问题。

在某高校口腔解剖教学中进行了App的教学实践应用，随后对全班做了调查问卷，问卷内容包括是否接受在课堂中应用信息化手段、对AR技术是否感兴趣、AR技术讲解复杂模型是否有效和AR使用中的问题与建议等，如表1所示。

表1 AR技术在课堂教学中应用调查问卷分析

从调查问卷统计中发现：师生普遍认为本款基于AR的线上线下混合式教学App能够帮助学生更好理解和记忆复杂结构，是传统教学的有效补充手段。多数学生表示喜欢教师采用AR技术直接在仿真模型上讲解，但反映移动手机运行App受屏幕大小限制，视觉效果欠佳。解决办法主要有：一是将手机终端换作平板电脑；二是后续将App移植到混合现实头戴式显示器，如微软的HoloLens。

5 总结

本文旨在解决传统教学过程中复杂模型授课难的问题，提出了运用AR增强现实技术与传统道具施教相结合的思路和实现方案，重点实现了教师演示讲解仿真模型的线上教学功能，随后基于目前4G、5G网络环境，进行了联网效果测试，最终完成了将传统的AR单机学习软件到互动教学的网络App的升级，实现了AR在线上线下混合式教学中的应用。从课堂教学实践中发现，师生普遍对此类运用新技术讲解模型问题比较认可和感兴趣。笔者以后会持续聚焦AR技术在教学模式创新中的应用，加强学习交流，不断征求收集改进意见，继续升级拓展该App教学软件，更好服务一线教学，帮助学生提高学习效率。