適用于低齡兒童的Web3D教育平臺開發研究

包東輝

（北海職業學院電子信息工程系 廣西壯族自治區北海市 536000）

在基礎教育領域中，主要采取以學生為中心的教學模式，在這種模式下學生尤其是6‐12 歲低齡兒童的學習積極性能否被有效調動、創造性思維能否被合理開發將會直接影響教學效果，因此，對教師的教學提出了更高的要求。在此背景下，對教學課件的設計與制作提出了更高的要求。優秀的教學課件要能夠充分調動學生的學習積極性，讓學生更好的參與教學，但是在實際教學過程中，一些用圖片和文字不能夠很好表達的教學內容，例如小學數學中的空間與圖形、小學語文中的動物認知、小學英語中的場景對話等，這些抽象的知識，如果能以沉浸式、交互式的多媒體課件進行教學展示，一定會起到更好的教學效果。

目前，教師常用的多媒體課件制作工具主要包括PPT、希沃白板、Flash 等，這些工具在表達如幾何構造、動植物認知、角色扮演對話等教學場景時，不能夠形成立體感效果。三維課件在這些應用場景下明顯優于文本、圖像、音視頻、動畫制作的二維課件，對低齡兒童的吸引力更勝一籌。

三維課件具備較強的交互能力、真實的沉浸式體驗、生動的三維表現力，符合低齡兒童的認知規律，符合情景式教學要求，可以更好的提高學生的學習積極性，是一種適合低齡兒童的教學展示平臺。但目前很多三維引擎，大多數依賴于插件或是依附于一個巨大的支持環境，這些外部條件很大的限制了三維課件的發展。

歐美國家最早將三維技術應用到基礎教育領域，由于三維技術具有的直觀教學環境，讓學生擁有了更好的教學體驗,為基礎教育發展改革提供了新模式。近年來,我國也加速基礎教育領域內的3D技術應用研究。為促進我國3D 教育的發展,教育部與國內相關企業合作，建立了三維教育研究中心，為中小學教師提供了大量三維教學課件,這些資源給傳統教學模式提供了改革樣本，增加了教學的互動性和創新性[1]。國內的研究主要集中在以下幾個領域[2,3]：

（1）3D 課件，例如，基于Flash 與Papervision3D 技術的小學英語課件的設計與研究；

（2）虛擬現實、增強現實應用，例如，基于X3D 探究式虛擬學習環境的設計與開發、基于增強現實的小學英語教學資源設計與應用研究、沉浸式虛擬現實在小學科學課的應用研究、增強現實技術在小學美術教學中的實踐研究；

（3）3D 教育游戲，例如，基于Cocos2d‐X 引擎的小學數學教育游戲《巧玩形狀》設計與開發、STEM 理念下基于Unity3D 的游戲化學習環境設計與開發。

1 Web3D技術

Web3D 技術的出現為3D 教育注入了新的活力，為三維交互領域提供了新的研究思路。Web3D 是將Web 技術與3D 技術相融合的一種新技術，是將三維技術的網絡化擴展，其主要特征為實時渲染、無限的交互性、虛擬現實性、網絡優化壓縮等。基于此本文將使用一種應用于Web 端的無需依賴任何瀏覽器插件支持的WebGL三維世界構建技術[4,5]，用以構建適用于低齡兒童的Web3D教育平臺。

目前國內外Web3D 的主流技術主要有VRML、X3D、Viewpoint、Flash Player、Shockwave3D、GoogleO3D、Java Applet等。但是，早期的技術并不成熟。2014年萬維網聯盟制定了新的HTML5 標準，WebGL 作為HTML5 標準中的重要技術，為我們解決了兩個難題：

（1）在無需任何Web 瀏覽器插件的支持下，它可以通過JavaScript 腳本程序實現Web 交互式三維動畫的制作；

（2）它可以通過OpenGLES2.0 圖形渲染庫實現圖形渲染。基于此，本文主要采用WebGL 構建技術，搭建適用于低齡兒童的Web3D教育平臺。

2 Web3D教育平臺搭建

生動的3D 模型對于6‐12 歲的低齡兒童的認知刺激具有先天優勢。同時，相對目前普遍使用的二維課件，基于三維的沉浸式虛擬交互情景，可以提高學生的學習積極性，開發學生的創造性思維。在選擇搭建教學場景時，主要針對二維課件不能夠很好表達的教學內容，例如學生在現實生活中很難接觸到的動植物認知類教學以及基于此的交互式問答。首先，根據Web3D 教學場景內展示的不同動植物種類，生成與之對應的三維模型進行教學演示，其次，生成各種難以程度的測試題目，根據題目內容來匹配動植物三維模型，利用Web3D 教學場景中呈現的各種生動的三維虛擬模型，彌補學生想象力和理解力方面的偏差。

Web3D教育平臺的搭建主要分為兩個部分：

（1）搭建供學生使用的沉浸式3D 虛擬教學環境；

（2）搭建供學生使用的3D 答題環境。

系統整體實現流程如圖1所示。選取Three.js 作為研究所使用WebGL 框架，通過THREE.js 提供的模型裝載程序，將三維模型引入到場景界面，呈現三維動畫效果。通過對頁面場景的燈光調控、渲染器設置以及調用模型加載函數，最終在Web 端構造一個三維虛擬場景。通過構造能夠復用的組件，將虛擬課堂的功能模塊化。系統的整體實現方案如圖2所示。

圖1：系統整體實現流程

圖2：系統整體實驗方案

3 Web3D教育平臺中基于表情識別的自然人機交互

為實現教育過程中情感分析的快速檢測和實時分析，本文基于深度學習提出了一種情感分析模型，該模型的核心內容為表情檢測和表情識別。

3.1 構建課題所使用的面向教育場景的表情數據集

制作的人臉表情數據集中，人臉表情樣本集需要多樣化，在基于常見的7 種表情數據（目前選擇的數據集是 fer2013，后期會采用更全面的emotionet 數據集）中需要進行更加細化的分類，初步將表情分類為積極、非積極、中性這三個大類，除了常見的表情之外，還需要定義符合教育情景的表情樣本。基于對現存數據庫錄制流程的研究，指定詳細的表情數據庫構建方案，并基于該方案分類錄制一套較為完整的表情數據庫進行驗證，該數據庫包含二維RGB 圖片序列，還包括對應幀的深度圖像，以及整個臉部的三維特征點數據，該數據庫的構建可以為后續表情檢測識別提供數據支撐。

3.2 算法相關

在深入理解深度學習理論架構的基礎上，學習并研究基于深度學習的人臉表情識別方法，將自制的人臉表情訓練樣本放入由深度學習框架搭建的卷積神經網絡(CNN)中提取圖像的深層特征，然后通過softmax 分類器進行表情特征分類，最終通過Web 端與服務器之間的socket 接口完成面部表情信息的實時傳送，針對與不同的表情分類，需要定義不同的符合教育場景的人機互動模式。

3.3 交互行為

Web3D 交互引擎與人臉表情識別算法的結合，應用較為熟悉的Web 圖形引擎開發知識，搭建出一個簡單的教育平臺，并在該界面中加入基于深度學習的人臉表情識別算法，用于提取特征并分析當前學生的心理特質并及時做出符合教育場景的自然交互行為。

3.4 實現過程

（1）制作適用于教育場景的多樣化人臉表情數據集；

（2）將制作好的訓練集放入設計好的CNN 網絡進行訓練，初步神經網絡結構包括兩個卷積層，兩個池化層，兩個全連接層，并提高算法的識別準確率；卷積運算是CNN 模型構建的基礎，在CNN 圖像處理過程中，卷積核依次與圖像的不同位置塊做卷積運算得到輸出。卷積運算（二維）的基本定義為：

其中W 為我們的卷積核，X 為我們的輸入。總的來說，CNN本質上是多層感知機(MLP)的一個變種：在全連接的基礎上，結合稀疏連接的獨特優勢，通過在鄰接層（卷積層、池化層）的神經元之間使用局部連接方式來發現輸入特征在不同層級之間的相互關聯，同時借助權值共享減少需要學習的參數數量。

（3）將訓練好的基于深度學習的人臉表情識別算法應用到Web3D 端，實現利用人臉表情識別算法來控制頁端與用戶進行交互的WebGL 多媒體智能交互引擎。

（4）在Web 端調用tensorflow.js 降低Web 端與服務器之間的傳輸時延。

Web3D教育平臺中基于表情識別的自然人機交互技術路線如圖3所示。

圖3：Web3D教育平臺中基于表情識別的自然人機交互技術路線圖

4 Web3D教育平臺中基于動作識別的人機交互

將基于深度學習的人體動作識別算法應用到基于WebGL 的Web3D 智能教育教學交互平臺，摒棄以往鼠標加鍵盤的僵化人機交互方式，轉而使用人體姿態估計來實現人機交互，通過GRU（門控循環單元）訓練及開源人體骨骼庫OpenPose 等相關的技術，實現人的軀干和四肢的識別跟蹤，從而達到在教學過程中不需要手動輸入指令的自然人機交互，使學習者感受到智能交互帶來的參與感和沉浸感，增加學習樂趣。

（1）深度動作識別：通過利用GRU 門控循環單元模型，使用TensorFlow 框架，訓練出自己的深度神經網絡，之后，基于開源人體骨骼庫OpenPose 實現人體姿態識別。

（2）Web3D 交互引擎與動作識別算法的結合：應用動作識別，實時控制Web 端的3D 模型與場景，實現人機智能交互。將整個研究內容和系統應用到Web3D教育平臺中，使學生在虛擬教學環境中直接進行交互學習，感受智能交互帶來的沉浸感和參與感。

（3）實現過程：

1.制作適用于教育場景的數據集。

2.將制作好的訓練集放入GRU 深度神經網絡進行訓練。

3.將訓練好的基于深度學習的動作識別算法應用到Web3D端，實現利用動作識別算法來控制前端與用戶進行交互的Web3D 智能教育教學交互平臺。

Web3D教育平臺中基于動作識別的人機交互技術路線如圖4所示。

圖4：Web3D教育平臺中基于動作識別的人機交互技術路線圖

最終學生交互界面三維場景呈現如圖5所示。其中主要包括教學場景、問答場景。教學場景界面涉及相關模型介紹，這些內容同時也作為后續答題場景的知識鋪墊，整個答題場景除了答題框之外，其余全部由3D 模型構成，學生可以通過鼠標單擊及鍵盤錄入與機器進行交互過程，也可以利用動作識別，直接控制Web 端3D 場景和模型，實現人機交互。人臉表情識別算法準確的分析學習者的心理情緒變化，并做出對應措施，實現智能人機交互教學。

圖5：學生交互界面三維場景

5 總結

本文實現了一種基于3D 的課程教學模式應用，擺脫了二維視圖教學模式在呈現信息時的單一性，將教育場景搭建在基于Three.js 的WebGL 框架上，構建Web3D教育平臺，實現教學場景三維化。同時將重點放在現有平臺中融入基于人臉表情識別、動作識別的自然交互技術，實時捕捉學習者的學習狀態，分析學生心理情緒變化，并作出對應干預調整，實現智能人機交互功能，有效調動學生的學習積極性，開發學生的創造性思維。