基于AR的線上線下混合式教學(xué)App的設(shè)計(jì)與實(shí)現(xiàn)

劉清崗

(陜西學(xué)前師范學(xué)院 信息工程學(xué)院，陜西 西安 710100)

0 引言

近年來(lái)，云計(jì)算、5G網(wǎng)絡(luò)、虛擬現(xiàn)實(shí)等計(jì)算機(jī)技術(shù)快速發(fā)展的時(shí)代背景，深刻影響牽引著教育領(lǐng)域的變革，現(xiàn)階段傳統(tǒng)的課堂教學(xué)當(dāng)中，教師往往對(duì)一些抽象、晦澀難懂的知識(shí)點(diǎn)難以講解清楚，一定程度影響了學(xué)生的理解和掌握。比如口腔解剖學(xué)中牙體的各部分結(jié)構(gòu)及相互作用關(guān)系，地理課中地球自轉(zhuǎn)公轉(zhuǎn)夾角關(guān)系等知識(shí)點(diǎn)，傳統(tǒng)的依靠PPT圖片或其他多媒體手段呈現(xiàn)出的是物體或場(chǎng)景的2D平面結(jié)構(gòu)，學(xué)生需要將2D平面圖形處理完畢后，映射到大腦中，腦補(bǔ)建模形成3D立體效果，這對(duì)很多學(xué)習(xí)者無(wú)疑是比較大的障礙，同而也無(wú)法真正保證和實(shí)現(xiàn)自主學(xué)習(xí)。運(yùn)用增強(qiáng)現(xiàn)實(shí)(Augmented Reality，AR)技術(shù)，將抽象復(fù)雜的內(nèi)容可視化、形象化，教師運(yùn)用線上AR技術(shù)，將虛擬模型疊加到現(xiàn)實(shí)世界中[1]，直接在模型上面有聲地勾勒講解，以更直觀、全面的方式呈現(xiàn)給學(xué)習(xí)者，會(huì)極大提升學(xué)習(xí)者的存在感、感官直覺(jué)和專注度，虛擬信息高度融合于現(xiàn)實(shí)世界主要體現(xiàn)為幾何一致性、光照一致性和時(shí)間一致性[2]。實(shí)證研究結(jié)果表明，增強(qiáng)現(xiàn)實(shí)的元素所產(chǎn)生的可視化效果，能夠大大加強(qiáng)學(xué)生對(duì)抽象概念和不可見(jiàn)現(xiàn)象的感知[3]。

1 App總體思路與方案

本款A(yù)pp的宗旨實(shí)現(xiàn)線上線下混合式教學(xué)，打通從書(shū)本圖形到學(xué)生大腦建模的壁壘，讓教與學(xué)通過(guò)網(wǎng)絡(luò)進(jìn)入同一個(gè)情境中，教師直接操作實(shí)物的仿真模型進(jìn)行講解，由此系統(tǒng)分為教師與學(xué)生兩類角色，不同角色軟件的功能模塊側(cè)重點(diǎn)不同，教師端側(cè)重模型講解，學(xué)生端側(cè)重離線的模型控制。軟件設(shè)計(jì)采用分層設(shè)計(jì)的思路，便于后續(xù)迭代擴(kuò)展開(kāi)發(fā)[4]，使用云存儲(chǔ)代替本地組建存儲(chǔ)與管理服務(wù)器，節(jié)省數(shù)據(jù)的管理維護(hù)成本，使得軟件部署更簡(jiǎn)捷輕便。

軟件整體功能如圖1所示。

圖1 App整體功能

App系統(tǒng)架構(gòu)分為數(shù)據(jù)服務(wù)層、應(yīng)用支撐層和業(yè)務(wù)邏輯層，其中識(shí)別圖像、教學(xué)房間的存儲(chǔ)與管理采用軟件即服務(wù)(SaaS)的Photon Cloud和Vuforia云技術(shù)；應(yīng)用支撐層采用Unity3D、Vuforia處理圖像及模型，采用Photon實(shí)現(xiàn)網(wǎng)絡(luò)共享與同步；業(yè)務(wù)邏輯層實(shí)現(xiàn)云教室創(chuàng)建與管理、目標(biāo)識(shí)別與現(xiàn)實(shí)疊加、畫(huà)筆與語(yǔ)音講解等功能，如圖2所示。

圖2 App系統(tǒng)架構(gòu)圖

2 軟件模塊設(shè)計(jì)

本App開(kāi)發(fā)主要步驟包括：創(chuàng)建目標(biāo)識(shí)別物模型，實(shí)現(xiàn)目標(biāo)識(shí)別與模型的單機(jī)控制，實(shí)現(xiàn)模型控制的分布式同步，手指作筆進(jìn)行講解的圖形生成與網(wǎng)絡(luò)共享。文中取口腔醫(yī)學(xué)中的牙體結(jié)構(gòu)為例，進(jìn)行軟件模塊的開(kāi)發(fā)設(shè)計(jì)。

2.1 3D虛擬模型的創(chuàng)建

采用3D MAX、Blender等建模工具對(duì)牙體進(jìn)行分體建模，繪制貼圖制作材質(zhì)，然后將模型保存為.FBX文件導(dǎo)入U(xiǎn)nity3D AR工程項(xiàng)目中。

2.2 Unity 3D+Vuforia SDK 實(shí)現(xiàn)目標(biāo)識(shí)別與模型控制

Vuforia使用計(jì)算機(jī)視覺(jué)技術(shù)來(lái)實(shí)時(shí)地識(shí)別和跟蹤平面圖像以及簡(jiǎn)單的3D物體[5]。創(chuàng)建一個(gè)基于AR的應(yīng)用程序[6]如圖3所示。

圖3 AR創(chuàng)建和部署應(yīng)用程序步驟

首先，使用 Unity 3D創(chuàng)建AR工程，導(dǎo)入從Vuforia 官網(wǎng)下載的目標(biāo)識(shí)別物數(shù)據(jù)庫(kù)。窗體中增加 AR Camera 和 Image Target 組件，刪除原場(chǎng)景攝像機(jī)。在 Database 和 Image Target 中選擇加載的目標(biāo)識(shí)別圖形，其中 Image Target 中添加要顯示的3D模型預(yù)制體。改寫目標(biāo)識(shí)別成功與丟失的OnTrackingFound和OnTrackingLost函數(shù)，實(shí)現(xiàn)當(dāng)教師識(shí)別后，不讓模型丟失。

對(duì)手指觸摸屏幕的形態(tài)進(jìn)行分析判斷：兩根手指的移動(dòng)距離是否超過(guò)預(yù)設(shè)閾值來(lái)決定模型的縮放，一根手指的滑動(dòng)與輕觸來(lái)決定旋轉(zhuǎn)與單擊。以實(shí)現(xiàn)模型圍繞縱向Y軸旋轉(zhuǎn)為例，當(dāng)手指姿態(tài)確定為手指滑動(dòng)時(shí)，控制模型沿Y軸，以手指滑動(dòng)在X軸的分量為步長(zhǎng)，以預(yù)設(shè)移動(dòng)常量為因子，將模型的旋轉(zhuǎn)過(guò)程在屏幕中逐幀顯示。

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

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

2.3 云教室的創(chuàng)建與管理

使用全托管服務(wù)Photon來(lái)實(shí)現(xiàn)云教室的管理，設(shè)置App客戶端的版本并使用由PUN設(shè)置向?qū)懭氲呐渲梦募?，通過(guò)ConnectUsingSettings方法連接到PhotonServer;教師通過(guò)MasterServer創(chuàng)建云學(xué)校大廳Lobby，使用CreateRoom方法創(chuàng)建線上教室，并配置容納人數(shù)、準(zhǔn)入密鑰等RoomOptions信息。學(xué)生可以在學(xué)校大廳Lobby中看到全部云教室，輸入密鑰通過(guò)JoinRoom方法進(jìn)入云課堂。創(chuàng)建課堂及人員進(jìn)出課堂的信息通過(guò)OnReceivedRoomListUpdate回調(diào)函數(shù)，及時(shí)處理云學(xué)校大廳更新時(shí)的邏輯，例如更新UI中顯示的云教室列表。

2.4 Photon實(shí)現(xiàn)模型控制的網(wǎng)絡(luò)同步

采用Photon Engine作為App的網(wǎng)絡(luò)同步引擎，實(shí)現(xiàn)教師端與學(xué)生端的模型操作效果同步。本例中主要使用Photon中的RPC方法來(lái)實(shí)現(xiàn)所有客戶端模型自身變化以外的同步。執(zhí)行原理如圖4所示。

圖4 RPC函數(shù)執(zhí)行流程圖

在Vuforia 目標(biāo)識(shí)別檢測(cè)到的OnTrackingFound的函數(shù)中，用單例模式在網(wǎng)絡(luò)中實(shí)例化生成牙齒3D模型，所有進(jìn)入云教室的手機(jī)客戶端會(huì)同步出現(xiàn)牙齒模型。使用Photon的Photon View網(wǎng)絡(luò)同步組件將教師端的模型操作同步到學(xué)生端，方法是將牙齒3D模型的預(yù)制體添加Photon View 和Photon Transform View組件，在Photon View的觀察條件(Observed Components)中添加Photon Transform View組件。如果模型中有動(dòng)畫(huà)，可以添加Photon Animator View組件，并注冊(cè)到觀察條件中，實(shí)現(xiàn)模型動(dòng)畫(huà)的網(wǎng)絡(luò)同步。

2.5 畫(huà)筆圖形的繪制與同步

畫(huà)圖功能單機(jī)實(shí)現(xiàn)主要原理：在手指滑動(dòng)時(shí)記錄第一幀的手指觸點(diǎn)平面坐標(biāo)P1:vector(x1,y1),第二幀記錄手指觸點(diǎn)平面坐標(biāo)P2:vector(x2，y2),根據(jù)P1與P2的距離是否超出預(yù)設(shè)閾值來(lái)斷定是否滑動(dòng)，如果判斷滑動(dòng)則根據(jù)設(shè)置的筆刷寬度和顏色生成一個(gè)矩形像素圖塊，寬度為筆刷寬度，長(zhǎng)度為|P”2-P1|,P1、P2為矩形兩邊中心點(diǎn)坐標(biāo)，如此就實(shí)現(xiàn)了手指屏幕連續(xù)畫(huà)線。原理如圖5所示。

圖5 手指滑動(dòng)畫(huà)圖原理

實(shí)現(xiàn)學(xué)生機(jī)屏幕同步需要在畫(huà)線的方法中添加網(wǎng)絡(luò)同步，如果判斷教師端正在畫(huà)線操作，則調(diào)用附有PhotonView組件的預(yù)制體的OnPhotonSerializeView網(wǎng)絡(luò)同步函數(shù)，激活所有學(xué)生端的畫(huà)圖函數(shù)，將教師的筆跡坐標(biāo)以及筆刷參數(shù)同步到所有客戶端，實(shí)現(xiàn)圖畫(huà)的網(wǎng)絡(luò)同步。

3 軟件關(guān)鍵技術(shù)研究

3.1 3D模型注冊(cè)實(shí)現(xiàn)

三維注冊(cè)(也叫三維配準(zhǔn))要求計(jì)算機(jī)生成的虛擬3D模型與現(xiàn)實(shí)環(huán)境的三維位置、角度和大小要完美融合，實(shí)現(xiàn)原理：① 攝像頭掃描生成3D模型并確定其世界坐標(biāo)。② 模型通過(guò)剛體變換進(jìn)入相機(jī)坐標(biāo)系。③ 相機(jī)中模型通過(guò)透視投影進(jìn)入到屏幕的物理圖像坐標(biāo)系。④ 根據(jù)感光芯片的像素大小，將模型連續(xù)的物理圖像坐標(biāo)轉(zhuǎn)換成離散的圖像像素坐標(biāo)，實(shí)現(xiàn)3D模型的注冊(cè)顯示。在實(shí)現(xiàn)的過(guò)程中涉及到的世界坐標(biāo)、相機(jī)坐標(biāo)、圖像像素坐標(biāo)與物理圖像坐標(biāo)的相互關(guān)系[7]，如圖6所示。

圖6 坐標(biāo)系的相互關(guān)系

圖中，目標(biāo)識(shí)別點(diǎn)P在世界坐標(biāo)系中的坐標(biāo)為(Xw，Yw，Zw)，在相機(jī)坐標(biāo)系中的坐標(biāo)為(Xc，Yc，Zc)，在像素圖像坐標(biāo)系中的坐標(biāo)為(u，v)。Oc是攝像機(jī)模型的聚焦中心，作為相機(jī)坐標(biāo)系的原點(diǎn)，以攝像機(jī)光軸為Zc軸建立三維直角坐標(biāo)系。Xc,Yc一般與圖像物理坐標(biāo)系中的X、Y平行，且采取前投影模型。

相機(jī)坐標(biāo)系與世界坐標(biāo)系之間的關(guān)系[8]滿足式(1)。

(1)

式中，R為3×3正交旋轉(zhuǎn)矩陣；T為3×1平移矩陣；0為(0，0，0)，簡(jiǎn)化用Lw表示后為4×4矩陣。

像素平面坐標(biāo)系與相機(jī)坐標(biāo)系滿足式(2)。

(2)

其中，f=|Oc-p|,是攝像機(jī)的焦距。

像素坐標(biāo)系與圖像物理坐標(biāo)系的關(guān)系滿足式(3)。

(3)

式中，dx、dy表示感光芯片上像素的實(shí)際大小，是連接像素坐標(biāo)系和真實(shí)尺寸坐標(biāo)系的；u0,v0表示圖像平面中心。

綜合上述坐標(biāo)轉(zhuǎn)換關(guān)系最終得出圖像在屏幕上的顯示為式(4)。

(4)

3.2 插值算法實(shí)現(xiàn)網(wǎng)絡(luò)同步

本例中虛擬物體操作與畫(huà)筆工具使用均涉及物體的位置與角度變化，如何在網(wǎng)絡(luò)延遲環(huán)境中實(shí)現(xiàn)物體平滑位移是最大難題。在分析物體的移動(dòng)規(guī)律中發(fā)現(xiàn)，將位移(含旋轉(zhuǎn))在時(shí)間軸極限分割后，位移可以用直線近似代替，誤差值在允許區(qū)間，因此選擇使用線性插值法解決位移問(wèn)題。

線性插值是指插值函數(shù)為一次多項(xiàng)式的插值方式，其在插值節(jié)點(diǎn)上的插值誤差為零。線性插值的幾何意義即為利用過(guò)A點(diǎn)和B點(diǎn)的直線來(lái)近似表示原函數(shù)，如圖7所示。

圖7 一次多項(xiàng)式的插值原理

線性插值可以用來(lái)近似代替原函數(shù)[9]。

本例的網(wǎng)絡(luò)同步使用PhotonTransformView同步位置時(shí)，每100毫秒發(fā)送一次對(duì)象位置信息[10]。在連續(xù)兩個(gè)位置AB之間，使用內(nèi)插(Interpolation)法將|B-A|逐幀計(jì)算位置信息，從而實(shí)現(xiàn)對(duì)象的平滑移動(dòng)。由于網(wǎng)絡(luò)環(huán)境存在延遲，本例采用根據(jù)運(yùn)動(dòng)軌跡預(yù)測(cè)未來(lái)位置的方法，實(shí)現(xiàn)在同一時(shí)間點(diǎn)物體在網(wǎng)絡(luò)中位置與動(dòng)作的同步，原理如圖8所示。

圖8 運(yùn)動(dòng)軌跡預(yù)測(cè)原理

圖中，T1、T2、T3、T4代表了服務(wù)器校準(zhǔn)時(shí)間刻度，當(dāng)主客戶端物體從A移動(dòng)到B時(shí)，會(huì)將最新位置B、方向(B-A)及移動(dòng)結(jié)束時(shí)間T2等信息廣播到客戶端,由于存在網(wǎng)絡(luò)延遲ΔT，客戶端需要預(yù)測(cè)確定延遲時(shí)間后的主客戶端物體位置及方向。根據(jù)勻速直線運(yùn)動(dòng)公式，可以得到從客戶端1的物體預(yù)測(cè)位置為：C=B+ΔT1*(B-A)/R，其中R為物體移動(dòng)一次的間隔時(shí)間。隨后利用Vector3.MoveTowards(A,C,(C-A)/R)實(shí)現(xiàn)物體從A平滑移動(dòng)到C，物體的旋轉(zhuǎn)同步與此實(shí)現(xiàn)原理類似。

4 App使用效果測(cè)試

App開(kāi)發(fā)完畢進(jìn)行了反復(fù)的灰盒測(cè)試，效果如圖9所示。

圖9 教師端App使用效果

發(fā)現(xiàn)將識(shí)別圖像打印在普通紙張或者放置到手機(jī)、平板電腦與計(jì)算機(jī)中識(shí)別效果較好，但是當(dāng)識(shí)別圖像投影到幕布或者在光線較暗的環(huán)境下，生成的AR模型會(huì)有明顯抖動(dòng)，非常影響授課效果。主要原因是當(dāng)圖像變模糊或者光線變暗后圖像的特征提取較為困難，在這種情況下Vuforia的圖像識(shí)別算法SLAM(Simultaneous Localization And Mapping)計(jì)算效率會(huì)大打折扣，會(huì)出現(xiàn)不斷識(shí)別或者間斷識(shí)別的現(xiàn)象。解決辦法是緩存生成模型的坐標(biāo)數(shù)據(jù)，當(dāng)前后識(shí)別的位置相差在預(yù)設(shè)的抖動(dòng)閾值范圍內(nèi)時(shí)，不再更新模型位置，由此一定程度上解決了模型抖動(dòng)的問(wèn)題。

在某高?？谇唤馄式虒W(xué)中進(jìn)行了App的教學(xué)實(shí)踐應(yīng)用，隨后對(duì)全班做了調(diào)查問(wèn)卷，問(wèn)卷內(nèi)容包括是否接受在課堂中應(yīng)用信息化手段、對(duì)AR技術(shù)是否感興趣、AR技術(shù)講解復(fù)雜模型是否有效和AR使用中的問(wèn)題與建議等，如表1所示。

表1 AR技術(shù)在課堂教學(xué)中應(yīng)用調(diào)查問(wèn)卷分析

從調(diào)查問(wèn)卷統(tǒng)計(jì)中發(fā)現(xiàn)：師生普遍認(rèn)為本款基于AR的線上線下混合式教學(xué)App能夠幫助學(xué)生更好理解和記憶復(fù)雜結(jié)構(gòu)，是傳統(tǒng)教學(xué)的有效補(bǔ)充手段。多數(shù)學(xué)生表示喜歡教師采用AR技術(shù)直接在仿真模型上講解，但反映移動(dòng)手機(jī)運(yùn)行App受屏幕大小限制，視覺(jué)效果欠佳。解決辦法主要有：一是將手機(jī)終端換作平板電腦；二是后續(xù)將App移植到混合現(xiàn)實(shí)頭戴式顯示器，如微軟的HoloLens。

5 總結(jié)

本文旨在解決傳統(tǒng)教學(xué)過(guò)程中復(fù)雜模型授課難的問(wèn)題，提出了運(yùn)用AR增強(qiáng)現(xiàn)實(shí)技術(shù)與傳統(tǒng)道具施教相結(jié)合的思路和實(shí)現(xiàn)方案，重點(diǎn)實(shí)現(xiàn)了教師演示講解仿真模型的線上教學(xué)功能，隨后基于目前4G、5G網(wǎng)絡(luò)環(huán)境，進(jìn)行了聯(lián)網(wǎng)效果測(cè)試，最終完成了將傳統(tǒng)的AR單機(jī)學(xué)習(xí)軟件到互動(dòng)教學(xué)的網(wǎng)絡(luò)App的升級(jí)，實(shí)現(xiàn)了AR在線上線下混合式教學(xué)中的應(yīng)用。從課堂教學(xué)實(shí)踐中發(fā)現(xiàn)，師生普遍對(duì)此類運(yùn)用新技術(shù)講解模型問(wèn)題比較認(rèn)可和感興趣。筆者以后會(huì)持續(xù)聚焦AR技術(shù)在教學(xué)模式創(chuàng)新中的應(yīng)用，加強(qiáng)學(xué)習(xí)交流，不斷征求收集改進(jìn)意見(jiàn)，繼續(xù)升級(jí)拓展該App教學(xué)軟件，更好服務(wù)一線教學(xué)，幫助學(xué)生提高學(xué)習(xí)效率。