虞嘉龍，高子卓，姚建華，李 攀，2*

（1.防災(zāi)科技學(xué)院 信息工程學(xué)院，河北 三河 065201；2.河北省地震災(zāi)害防御與風(fēng)險評價重點實驗室，河北 三河 065201）

隨著科技和互聯(lián)網(wǎng)的飛速發(fā)展，5G時代到來的今天，互聯(lián)網(wǎng)技術(shù)已成為人們?nèi)粘Ｉ钪胁豢苫蛉钡牟糠?。在線教育，網(wǎng)上辦公等等也應(yīng)運而生，我們就開始設(shè)想是否防震減災(zāi)科普也可以通過互聯(lián)網(wǎng)的形式進(jìn)行展現(xiàn)呢。再加上目前人們對于災(zāi)害的認(rèn)知不足以及近幾年的自然災(zāi)害頻發(fā)，為了使人們能夠有效主動地去認(rèn)識災(zāi)害的危害，學(xué)習(xí)災(zāi)難來臨時的應(yīng)對措施，我們團(tuán)隊決定以Unity3D虛擬引擎技術(shù)為核心制作一款災(zāi)害科普平臺。通過該防震減災(zāi)虛擬仿真科普平臺讓人們可以隨時隨地獲取科學(xué)、準(zhǔn)確、權(quán)威的海量災(zāi)害科普知識。

防震減災(zāi)虛擬仿真科普平臺，在這個平臺中我們決定引入地震、臺風(fēng)、火災(zāi)、洪澇等災(zāi)害的相關(guān)知識，同時加入一些關(guān)于災(zāi)害科普活動的新聞，以及面對災(zāi)害我們應(yīng)該如何做的文章。我們計劃通過AR災(zāi)害體驗的形式搭建三維模型來實現(xiàn)人機(jī)交互操作，強(qiáng)化用戶參與度的興趣體驗、鼓勵用戶探索性的創(chuàng)新體驗、給予用戶親密感的互動體驗、提升用戶滿意度的情感體驗。在內(nèi)容上參考了中國地震局的網(wǎng)站內(nèi)容和《地震避險與自救互救案例與指南》等書本的內(nèi)容資料，在網(wǎng)站和APP中進(jìn)行地震自救互救、地震的原理、震級的分類、地震目錄等資料的展示與分享，旨在提升人們對于災(zāi)害的認(rèn)識與自救互救的意識。

1 技術(shù)介紹

防震減災(zāi)虛擬仿真科普平臺，包括網(wǎng)頁端、手機(jī)APP和基于安卓系統(tǒng)開發(fā)的AR災(zāi)害體驗館3個模塊。手機(jī)APP以C#為基礎(chǔ)語言，基于Unity3D為開發(fā)平臺，以AR技術(shù)為拓展技術(shù)，利用Unity提供的Playerprefs進(jìn)行數(shù)據(jù)的保存和讀取，發(fā)布于安卓系統(tǒng)；AR災(zāi)害體驗館，基于Unity3D和Vuforia進(jìn)行開發(fā)，以C#開發(fā)語言為核心，制作應(yīng)用于安卓平臺的地震、火災(zāi)和洪水場景的災(zāi)害體驗游戲。

本項目使用了Unity3D游戲引擎和Vuforia AR制作平臺提供的插件。其中Unity3D是Unity Technologies公司制作的一個讓玩家輕松創(chuàng)建諸如三維視頻游戲、建筑可視化、實時三維動畫等類型互動內(nèi)容的多平臺的綜合型游戲開發(fā)工具。Vuforia是實現(xiàn)增強(qiáng)現(xiàn)實技術(shù)的平臺，開發(fā)者可以使用它提供的平面識別、空間識別、圖片識別等完成AR產(chǎn)品制作，本項目主要通過使用Vuforia為Unity3D專供的插件，完成了平面識別，圖片識別展示AR。網(wǎng)頁端則主要使用HTML+CSS+JavaScript進(jìn)行頁面制作與展示，同時使用Unity提供的webgl平臺進(jìn)行網(wǎng)頁上的地震科普游戲制作；手機(jī)端則主要使用Unity3D和C#語言進(jìn)行手機(jī)APP的邏輯處理，同時加入了AR災(zāi)害體驗館的功能，讓用戶在體驗圖文信息的同時，可以聲臨其境地感受災(zāi)害。

2 防震減災(zāi)虛擬仿真科普平臺總體設(shè)計

在防震減災(zāi)虛擬仿真科普平臺中，分別制作了便于使用電腦的用戶訪問的網(wǎng)頁端和方便安卓用戶使用的手機(jī)APP形式的科普平臺，在網(wǎng)頁端中增加了地震知識科普游戲，通過游戲的形式加深用戶對地震來臨時的處理辦法的印象，還普及了歷史上的自然災(zāi)害事件，以及自然災(zāi)害發(fā)生的原理等科普知識。在安卓手機(jī)APP中，加入了AR災(zāi)害模擬館，以強(qiáng)化用戶的操作體驗和對災(zāi)害的真實認(rèn)知。

2.1 整體策劃

防震減災(zāi)虛擬仿真科普平臺，在最初的設(shè)計理念中，就是一個集網(wǎng)頁端、手機(jī)端、AR于一體的科普展示平臺，我們團(tuán)隊準(zhǔn)備在這個平臺中加入災(zāi)害科普知識展示、AR災(zāi)害體驗館、，地震科普游戲、日常醫(yī)療視頻、地震科普知識、自然災(zāi)害新聞以及地震目錄各個功能點。

2.2 功能設(shè)計

防震減災(zāi)虛擬仿真科普平臺在網(wǎng)頁端使用了HTML+CSS+JavaScript的組合，在APP上使用了Unity3D、Microsfot Visual Studio Code、Vuforia、PhotoShop等軟件，也使用了NGUI和UGUI等插件。在APP端方面進(jìn)行的頁面設(shè)計和頁面跳轉(zhuǎn)邏輯，不同功能的實現(xiàn)，內(nèi)容的展示，以及AR災(zāi)害體驗館，主要使用Unity3D中的UI部件和C#語言進(jìn)行邏輯實現(xiàn)和制作完成。其中使用Microsfot Visual Studio Code進(jìn)行C#代碼的編寫，通過Vuforia制作AR游戲的部分內(nèi)容，在科普平臺上出現(xiàn)的圖片則主要使用PhotoShop進(jìn)行處理加工。

2.3 算法實現(xiàn)

2.3.1 視頻播放器

視頻播放器實現(xiàn)邏輯如圖1所示。

圖1 視頻播放器實現(xiàn)邏輯

在Unity中利用Slider UI組件創(chuàng)建2個Slider，通過獲取用戶點擊到的Slider位置，在Unity中響應(yīng)Slider值的變化將視頻同步到對應(yīng)位置上進(jìn)行播放，同時在播放過程中實時同步Preview Slider的位置，讓用戶看到進(jìn)度條隨播放進(jìn)度移動的效果。

2.3.2 APP展示邏輯

APP頁面跳轉(zhuǎn)邏輯實現(xiàn)如圖2所示。

圖2 APP頁面跳轉(zhuǎn)邏輯實現(xiàn)

在Unity中通過檢測運行平臺，和獲取用戶點擊return和home鍵的操作，通過相應(yīng)的展示界面跳轉(zhuǎn)實現(xiàn)展示類手機(jī)APP的返回退出功能，同時通過在訪問其他頁面時，復(fù)原當(dāng)前頁面Slider初值的方式，完成APP展示功能的實現(xiàn)。

2.3.3 AR圖像識別

ARCamera綁定手機(jī)陀螺儀移動如圖3所示。

圖3 ARCamera綁定手機(jī)陀螺儀移動

在AR游戲中通過獲取手機(jī)陀螺儀移動參數(shù)的方式，綁定ARCamera的移動陀螺儀可以對轉(zhuǎn)動、偏轉(zhuǎn)的動作做很好的測量，這樣就可以精確分析判斷出使用者的實際動作以實現(xiàn)在游戲中模擬真實人物的移動，以將虛擬現(xiàn)實中的物體同步于現(xiàn)實世界的坐標(biāo)中，方便玩家進(jìn)行不止固定于一處的AR模擬。

3 防震減災(zāi)虛擬仿真科普平臺詳細(xì)設(shè)計

3.1 防震減災(zāi)虛擬仿真科普平臺網(wǎng)頁端

科普平臺信息架構(gòu)圖如圖4所示。

圖4 科普平臺信息架構(gòu)圖

3.1.1 網(wǎng)頁內(nèi)容

防震減災(zāi)虛擬仿真科普平臺網(wǎng)頁端主要使用了SpringBoot框架和semantic-ui進(jìn)行布局設(shè)計，主要介紹地質(zhì)災(zāi)害、氣象災(zāi)害、海洋災(zāi)害的種類，危險與避震措施。還介紹了歷史上幾次的重大災(zāi)害事件和近期的一些實事熱點。

3.1.2 地震科普游戲

在網(wǎng)頁端加入了一個用Unity進(jìn)行開發(fā)，以webgl3D繪圖協(xié)議為支撐的網(wǎng)頁游戲，玩家可以通過控制小人在洗漱間、客廳、臥室、學(xué)校4個場景進(jìn)行游覽，在場景中還設(shè)置了提示點，當(dāng)人物移動到對應(yīng)點位上時，會相應(yīng)地觸發(fā)對應(yīng)的災(zāi)害事件，通過查看這些事件帶來的提示可以知道在地震時哪些地方是安全可靠的，哪些地方是充滿危險，需要遠(yuǎn)離的。當(dāng)玩家充分了解到這些防震自救知識后，就可以選擇進(jìn)入下一個場景繼續(xù)游玩。

3.2 防震減災(zāi)虛擬仿真科普平臺APP

防震減災(zāi)虛擬仿真科普平臺APP主要使用了藍(lán)白簡潔風(fēng)格的界面設(shè)計，它包括首頁的導(dǎo)航欄，新聞?wù)故緳?，和虛擬、主頁、個人賬號3個分區(qū)。每個區(qū)域都有自己的展示內(nèi)容和功能。

3.2.1 引導(dǎo)界面

打開APP后，首先會進(jìn)入一個引導(dǎo)界面，主要介紹各種自然災(zāi)害的概述，在用戶查看這些信息后可以點擊“點擊進(jìn)入”正式進(jìn)入APP首頁。

3.2.2 首頁界面

首頁主要包括一些關(guān)于自然災(zāi)害的實事新聞，地震的原理介紹以及一些關(guān)于自然災(zāi)害救援的相關(guān)知識。其中實事新聞中的內(nèi)容是由中國地震局和中國地震臺網(wǎng)上發(fā)布的最新消息。災(zāi)害科普相關(guān)則是本團(tuán)隊通過查詢?yōu)暮ο嚓P(guān)的各類資料進(jìn)行統(tǒng)籌整合，加入到首頁中進(jìn)行展示。首頁界面如圖5所示。

圖5 首頁界面

3.2.3 個人界面

個人界面是加強(qiáng)用戶體驗的一環(huán)，用戶可以通過注冊產(chǎn)生自己的個人賬號，在登錄過后個人頁面會根據(jù)用戶的訪問習(xí)慣在個人主頁上推薦感興趣的分區(qū)。這個界面中的登錄注冊管理的腳本代碼都是通過C#語言在VSCode編輯器中進(jìn)行編寫的，其中用戶的個人信息通過Unity提供的PlayerPref進(jìn)行存儲和讀取，進(jìn)行用戶資料的管理。

3.2.4 科普界面

科普界面是平臺的主要展示內(nèi)容，通過收錄不同期刊、新聞、科普文章中的內(nèi)容進(jìn)行整理收錄，給用戶提供便捷的信息查看方式。在該板塊中還實現(xiàn)了一邊播放視頻一邊在下面的內(nèi)容中瀏覽視頻中介紹相關(guān)知識點的功能。大震目錄，通過將數(shù)據(jù)存放在txt文檔中，通過相對的讀取形式，將每一年的地震信息展示在表格和地圖上，用戶可以通過點按地圖上對應(yīng)的點位，查看在那個點發(fā)生的地震信息（如：震級、深度、地理位置等）。

3.2.5 AR災(zāi)害體驗館

在科普平臺的虛擬界面分欄中，我們制作了AR災(zāi)害體驗館和一個視頻播放器，分別以常見的自然災(zāi)害：火災(zāi)、地震以及洪水為主題，通過AR的形式來讓用戶真實地感受到自然災(zāi)害的危險，來讓用戶學(xué)習(xí)正確的應(yīng)對災(zāi)害措施。在火災(zāi)、洪水小游戲中，玩家扮演施救者，抵御災(zāi)害并將npc從火災(zāi)、洪水中救出，游戲難度會隨著游戲時間的增加而加大；在地震游戲中，玩家扮演逃脫者，躲避重重障礙，順利逃離到安全地點。在視頻播放器中，主要展示日常醫(yī)療中的2種緊急救援法，來讓用戶學(xué)習(xí)到海姆利克急救法和CPR心肺復(fù)蘇術(shù)，希望用戶可以了解一些關(guān)于緊急情況下?lián)尵确ǖ倪\用。

4 結(jié)束語

自然災(zāi)害自古以來就是困擾人們生存和發(fā)展的一大難題，但是普通人群對自然災(zāi)害的認(rèn)知普遍不足，對于災(zāi)害的危害與風(fēng)險認(rèn)知還不到位，對于災(zāi)害的應(yīng)急處理方法還不夠了解。隨著現(xiàn)代科技水平的提高，災(zāi)害科普已經(jīng)可以不再局限于書本和百度上得來的內(nèi)容，而是可以通過多種多樣的形式給人們進(jìn)行全方位的科普引導(dǎo)。防震減災(zāi)科普平臺巧妙地將用戶與知識連接在一起，為人們提供了更快捷、更有效的學(xué)習(xí)途徑，傳播了防震減災(zāi)知識和應(yīng)急避災(zāi)自救的常識，更加全面地、多維地向用戶進(jìn)行防震減災(zāi)方面的知識介紹。在體驗豐富內(nèi)容的同時，也可以激發(fā)用戶對自然災(zāi)害知識的學(xué)習(xí)興趣，掌握災(zāi)害發(fā)展的規(guī)律和對于災(zāi)害下的自救方法與手段。

本項目對科普平臺設(shè)計中的用戶體驗要素及設(shè)計要點進(jìn)行了創(chuàng)新性的嘗試，提出了網(wǎng)頁端、Android端聯(lián)動的科普平臺設(shè)計框架，在科普教育中加入了游戲和AR體驗的嘗試，對防震減災(zāi)科普平臺的設(shè)計提供了新的思路。