基于HTML5和增強現實的三維思維導圖研究

汪升華

（瓊臺師范學院 信息技術系，海南 海口 571127）

現如今智能手機和平板電腦已經層出不窮，移動應用逐漸呈上升趨勢，任何一項技術的開發都離不開移動端。移動端的發展形式早已不僅限于屏幕上，谷歌公司為了打破蘋果公司在移動市場上的領先地位，大規模的谷歌眼鏡正在開發，將虛擬的世界與現實世界相融合，讓人們從虛擬世界中逃離。HTML5技術從根本上改變了開發應用方式，將僅僅用手才能感受到的需求轉變成模擬真實情景的方式，與現實世界產生共鳴[1]。移動端、輕量級、增強現實，這些特征的結合，未來的發展不可估量。基于HTML5和增強現實的三維思維導圖研究，希望能實現跨平臺、多終端的互聯網模式。

增強現實（Augmented Reality，AR）技術在1990年被提出，也被叫作混合現實。其通過一些電腦處理技術，將虛擬的部分信息結合到真實的世界，虛擬物體和真實環境實時地完美疊加到同一個空間或畫面，可以一同存在。增強現實的一般情況下提供了不同于人類能夠感知的信息，它不僅僅展現出了真實世界的全部信息，并且將虛擬的信息一起顯示出來了，兩種信息彼此疊加、補充。在視覺化現實增強中，用戶可以利用頭盔顯示器，使真實世界與電腦圖形多重合成在一起，便可以看到真實的世界。HTML5的設計目的是為了在移動設備上支持多媒體。一個HTML5文檔到另一個文檔間的拖放功能、離線編輯、信息傳遞的增強、詳細的解析規則、多用途互聯網郵件擴展（Multipurpose Internet Mail Extensions，MIME）和協議處理程序注冊，是SQL數據庫中存儲數據的通用標準（Web SQL）[2]。AR技術不止有與VR技術類似的試用領域，例如先進武器、飛行器的開發與研制、數據模型的虛擬訓練、娛樂與藝術、可視化等方面具有廣泛的實際應用，其具有對真實環境進行增強輸出顯示的特性，并且在解剖訓練、醫療研究、軍用飛機導航、工程設計、精密儀器制造和維修和遠程機器人操控等領域上，它具有比VR技術明顯的優勢。

1 基于HTML5和增強現實的三維思維導圖方法設計

HTML5目的是將互聯網語義化，從而更好地被人類和機器閱讀，同時更好地支持各種媒體的嵌入。AR是一種實時地計算出攝影機影像的位置及角度并加上相應圖像的技術，這種技術的目標是在屏幕上把虛擬世界套在現實世界并進行互動[3]。通過運用HTML5和增強現實的三維思維導圖效果，可以給人更加直觀的體驗。AR是虛擬與現實的連接入口，與oculus等設備主張的虛擬世界沉浸不同，AR注重虛擬與現實的連接，是為了達到更震撼的現實增強體驗。

手勢識別方法是在技術上借助HTML5去實現核心功能，在算法上涉及增強現實領域里的手勢識別來完成。就是對空間點進行歸類，再將該類與其他類區別開成為特定子集的過程。通常業界將其分為靜態手勢識別和動態手勢識別。靜態手勢識別就是將手形識別出來，動態手勢識別側重于對時間或者空間中的手勢所表達的意思進行推測和判斷。業界對靜態手勢識別都是采取聚類技術，通過聚類將手勢圖像特征提取出來與已有手勢數據訓練庫進行對比和歸類。如弗里曼通過設計一種可操控的濾波器求像素點的移動方向，諾德教授通過Boosting算法進行手勢分類，通過LDA和PCA方法進行手勢識別，還有一些專家嘗試過橢圓擬合來和手勢進行對比，這些方法都各有利弊，需要酌情選擇。

增強現實需要借助可視化技術和計算機圖形技術出現現實環境中并不存在的虛擬對象，通過傳感技術準確地將虛擬對象“放置”在真實的環境中，其通過顯示設備將虛擬的對象與真實的環境融為一體，給使用者呈現出一個感官效果真實的新環境效果。所以增強現實系統擁有虛實結合、實時交互、三維注冊的新特點。AR的定義很廣泛，技術種類眾多，目前主流的AR是指通過設備識別判斷（二維、三維、GPS、體感、面部等識別物）將虛擬信息疊加在以識別物為基準的某個位置，并顯示在設備屏幕上，可實時交互虛擬信息。總結起來即識別、虛實結合、實時交互。與三維思維導圖能夠有效地完成相關工作。

2 試驗

基于HTML5和增強現實技術的三維四維導圖建立過程為：首先可以對目標進行跟蹤定位，能夠制作立體圖形并且識別圖形，通過HTML5可將圖形轉化為標識，此外增強現實技術能夠將視頻和音頻資源進行整合，設置交互，實現虛擬信息與真實景象的匹配與結合，完成三維思維導圖的構建，并在Android移動平臺上發布。

Web GL（Web Graphics Library）是于2011年2月發布的一種新的Web三維思維導圖標準，屬于HTML5標準的一項，可以為HTML5和增強現實的思維導圖提供硬件3D加速渲染效果。不同模型大小的載入響應時間如表1所示。

表1 不同模型大小的載入響應時間（ms）

試驗方法如下：

（1）初始化Web三維思維導圖使用的環境。

試驗結果得出，利用該方法可以將HTML5和增強現實技術完美結合，達到更好的視覺效果，為客戶帶來更好的視覺體驗。

3 結語

本文對基于HTML5和增強現實的三維思維導圖方法設計及試驗進行分析，依托HTML5與增強現實結合機制，根據三維思維導圖分析數據，實現本文設計。試驗結果表明，本文設計的方法具備極高的有效性。希望本文的研究能夠為HTML5和增強現實的三維思維導圖的方法提供理論依據。

[1]劉華星，楊庚.HTML5的開發標準研究.計算機技術與發展[J].2017（9）：25-26.

[2]李燁民.基于HTML5的前端本地化存儲技術[J].成都大學學報，2017（7）：15-16.

[3]孔祥.基于移動平臺增強現實系統的研究[J].2017（11）：35.