胡 娟

（太原幼兒師范高等?？茖W(xué)校 山西 太原 030401）

0 引言

傳統(tǒng)高校信息化系統(tǒng)多以二維的信息化服務(wù)和數(shù)據(jù)管理為主，服務(wù)模式陳舊且功能單一［1］，因此結(jié)合Web 圖形庫（Web graphics library，WebGL）技術(shù)構(gòu)建一個(gè)基于Web 服務(wù)的校園三維可視化信息系統(tǒng)，通過數(shù)字信息的立體化展示和交互，為用戶提供更加直觀和便利的信息服務(wù)［2］，并有效提升高校信息化管理的服務(wù)水平是十分必要的。

1 WebGL 技術(shù)概述

WebGL 是基于開放式圖形庫（open graphics library，OpenGL）的圖形渲染協(xié)議標(biāo)準(zhǔn)［3］。 其目的是將OpenGL 與JavaScript 進(jìn)行綁定，再通過標(biāo)準(zhǔn)化的JavaScript API 實(shí)現(xiàn)Web 前端對(duì)底層圖形渲染硬件的直接調(diào)用，從而大大提高Web 頁面的圖形繪制與渲染效率。 其結(jié)構(gòu)如圖1所示。

圖1 WebGL 應(yīng)用開發(fā)結(jié)構(gòu)

WebGL 技術(shù)優(yōu)勢(shì)主要體現(xiàn)在以下三個(gè)方面：

（1）高效的圖形渲染。 通過OpenGL 與JavaScript 的綁定，實(shí)現(xiàn)了Web 應(yīng)用程序?qū)Φ讓蛹铀儆布闹苯釉L問。再通過標(biāo)準(zhǔn)化JavaScript API 實(shí)現(xiàn)了Web 頁面上圖形的直接繪制和渲染。 Web 頁面不需要借助任何第三方插件進(jìn)行圖形渲染，同時(shí)也減少了中間件構(gòu)建，簡(jiǎn)化了圖形處理流程。

（2）強(qiáng)大的圖形處理功能。 OpenGL 是圖形加速硬件的標(biāo)準(zhǔn)（application programming interface，API），內(nèi)置有350 個(gè)圖形處理函數(shù)，專用于二維和三維圖形的功能開發(fā)，WebGL 在此基礎(chǔ)上進(jìn)行了功能集成與標(biāo)準(zhǔn)化接口構(gòu)建，提供了基于Web 服務(wù)的復(fù)雜圖形解決方案，可以在Web 頁面中實(shí)現(xiàn)復(fù)雜結(jié)構(gòu)的三維圖形處理和數(shù)據(jù)交互功能。

（3）良好的跨平臺(tái)性和易擴(kuò)展性。 WebGL 以Web 頁面為載體，可以在各類平臺(tái)環(huán)境下流暢運(yùn)行，例如移動(dòng)端Android 與IOS 系統(tǒng)、PC 端Windows 與MacOS 系統(tǒng)等，同時(shí)WebGL 免費(fèi)開源，也使得開發(fā)人員可以在其所提供的標(biāo)準(zhǔn)化JavaScript API 基礎(chǔ)上進(jìn)行迭代開發(fā)和功能擴(kuò)展，例如Three.js 就是在WebGL 基礎(chǔ)上擴(kuò)展出來的JavaScript高度集成庫，Three.js 通過對(duì)WebGL 的二次封裝和集成，大幅提高了WebGL 的功能易用性和開發(fā)效率。

2 系統(tǒng)需求分析

2.1 功能需求

校園三維可視化信息系統(tǒng)在原有信息系統(tǒng)的功能基礎(chǔ)上結(jié)合三維可視化技術(shù)，主要用于滿足以下三個(gè)方面的需求：

（1）三維地理信息展示與導(dǎo)航需求。 高校的校區(qū)范圍一般都很大，生活區(qū)與各個(gè)教學(xué)區(qū)錯(cuò)落分布，僅靠一般的手機(jī)導(dǎo)航App 很難準(zhǔn)確定位校園內(nèi)部的具體院系、行政處室等地點(diǎn)，通過校園的三維地理信息展示，對(duì)關(guān)鍵點(diǎn)信息進(jìn)行標(biāo)注，為用戶提供更加詳盡的導(dǎo)航信息，可以幫助用戶快速熟悉校園環(huán)境，為用戶的日常工作與學(xué)習(xí)提供便利。

（2）校園特色區(qū)域的演示與宣傳需求。 高校建設(shè)很重要的一項(xiàng)內(nèi)容是文化建設(shè)與宣傳，結(jié)合三維可視化技術(shù)實(shí)現(xiàn)對(duì)校園一些特色區(qū)域的展示、交互和游覽，例如校展覽館、實(shí)驗(yàn)室、圖書館、產(chǎn)學(xué)研基地等，有助于學(xué)院文化展示與宣傳，增加用戶對(duì)學(xué)院的了解與認(rèn)同感。

（3）校園安防管理需求。 高校校園屬于實(shí)驗(yàn)室設(shè)施放置最多、人員流動(dòng)最密集的場(chǎng)所之一，因此校園安防也是高校管理工作的重中之重，利用三維可視化技術(shù)對(duì)發(fā)現(xiàn)隱患的安全場(chǎng)所進(jìn)行立體定位和實(shí)時(shí)數(shù)據(jù)分析、預(yù)警，可以快速幫助安保人員鎖定目標(biāo)、評(píng)估環(huán)境狀況，減少工作失誤，提高工作效率。

2.2 性能需求

三維技術(shù)相較于二維在數(shù)據(jù)處理方面需要消耗更多的算力，占用更多的網(wǎng)絡(luò)資源和存儲(chǔ)空間，為了確保三維數(shù)據(jù)的處理效率，在性能方面還應(yīng)滿足以下需求：

（1）三維模型的計(jì)算量。 在三維場(chǎng)景構(gòu)建時(shí)，需要合理設(shè)計(jì)三維模型的構(gòu)建結(jié)構(gòu)與面數(shù)，盡量采用規(guī)則的三角面構(gòu)建模型，減少多邊面的應(yīng)用，以降低模型計(jì)算量。

（2）三維文件請(qǐng)求的實(shí)時(shí)性。 采用WebGL 技術(shù)，需要由前端瀏覽器先請(qǐng)求三維文件，然后再對(duì)其進(jìn)行實(shí)時(shí)渲染，三維文件過大則會(huì)影響三維文件處理的實(shí)時(shí)性，因此需要構(gòu)建相應(yīng)的優(yōu)先機(jī)制避免此類情況的發(fā)生。

（3）三維數(shù)據(jù)的動(dòng)態(tài)更新。 三維數(shù)據(jù)的動(dòng)態(tài)更新是指用戶與三維場(chǎng)景交互時(shí)，場(chǎng)景需要按照用戶操作及時(shí)進(jìn)行視角變化和場(chǎng)景更新，這需要三維數(shù)據(jù)的動(dòng)態(tài)支持。

3 校園三維可視化系統(tǒng)設(shè)計(jì)

3.1 系統(tǒng)架構(gòu)設(shè)計(jì)

校園三維可視化信息系統(tǒng)采用分層式架構(gòu)設(shè)計(jì)，其結(jié)構(gòu)如圖2 所示。

圖2 校園三維可視化信息系統(tǒng)架構(gòu)

數(shù)據(jù)采集層用于實(shí)現(xiàn)數(shù)據(jù)源的輸入和采集，系統(tǒng)需處理的數(shù)據(jù)主要分為三類：靜態(tài)數(shù)據(jù)、動(dòng)態(tài)數(shù)據(jù)和表單數(shù)據(jù)。靜態(tài)數(shù)據(jù)是指三維場(chǎng)景中的靜態(tài)模型、材質(zhì)等數(shù)據(jù)，可以通過計(jì)算機(jī)輔助設(shè)計(jì)（computer aided design，CAD）源文件獲取，CAD 源文件可由常用的三維建模軟件生成，例如三維動(dòng)畫軟件、CAD、MAMY 等［4］；動(dòng)態(tài)數(shù)據(jù)是指在三維場(chǎng)景中需要被動(dòng)態(tài)更新的數(shù)據(jù)，例如實(shí)驗(yàn)室環(huán)境監(jiān)測(cè)數(shù)據(jù)、用戶定位信息等，不同的動(dòng)態(tài)信息采集需要通過相應(yīng)的第三方服務(wù)或系統(tǒng)平臺(tái)來獲取，例如用戶手機(jī)定位服務(wù)、實(shí)驗(yàn)室安防系統(tǒng)等；表單數(shù)據(jù)是指系統(tǒng)管理所涉及的常規(guī)二維數(shù)據(jù)，例如用戶信息、日志信息等。

數(shù)據(jù)存儲(chǔ)層采用了MySQL 數(shù)據(jù)庫管理工具，主要負(fù)責(zé)靜態(tài)數(shù)據(jù)與表單數(shù)據(jù)的存儲(chǔ)管理，存儲(chǔ)的數(shù)據(jù)主要包括場(chǎng)景數(shù)據(jù)、建筑物數(shù)據(jù)及其他的二維數(shù)據(jù)。

數(shù)據(jù)預(yù)處理層用于實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)層與數(shù)據(jù)可視化層的數(shù)據(jù)格式轉(zhuǎn)換和交互，針對(duì)三維靜態(tài)類數(shù)據(jù)，采用標(biāo)準(zhǔn)的JSON 格式進(jìn)行數(shù)據(jù)轉(zhuǎn)換和封裝，通過異步方式實(shí)現(xiàn)通信［5］；針對(duì)動(dòng)態(tài)數(shù)據(jù)，數(shù)據(jù)預(yù)處理層直接由數(shù)據(jù)采集層獲取源數(shù)據(jù)，再以變量的形式存儲(chǔ)在內(nèi)存當(dāng)中，不需要通過數(shù)據(jù)存儲(chǔ)層進(jìn)行數(shù)據(jù)管理，通信采用了WebSocket 協(xié)議標(biāo)準(zhǔn)，實(shí)現(xiàn)了數(shù)據(jù)的全雙工實(shí)時(shí)通信，大大提高了動(dòng)態(tài)數(shù)據(jù)的傳輸效率。

數(shù)據(jù)可視化層負(fù)責(zé)前端瀏覽器與可視化數(shù)據(jù)服務(wù)端的功能實(shí)現(xiàn)，以組件方式集成了三維視圖顯示所必需的功能模塊，主要包括功能組件、業(yè)務(wù)組件、視圖組件三個(gè)模塊：

（1）功能組件用于解決三維場(chǎng)景初始化、場(chǎng)景圖形渲染、場(chǎng)景資源銷毀等問題。

（2）業(yè)務(wù)組件用于實(shí)現(xiàn)場(chǎng)景交互、數(shù)據(jù)交互、業(yè)務(wù)邏輯控制等功能。 場(chǎng)景交互是指用戶與三維場(chǎng)景的虛擬交互，例如場(chǎng)景漫游、視角切換、場(chǎng)景切換等；數(shù)據(jù)交互則指的是針對(duì)三維場(chǎng)景的數(shù)據(jù)交互，例如用戶定位信息的獲取、場(chǎng)景特定對(duì)象的信息查閱、實(shí)驗(yàn)室環(huán)境監(jiān)測(cè)數(shù)據(jù)獲取等；業(yè)務(wù)邏輯控制是指在各類交互事件中的業(yè)務(wù)流程控制，包括用戶身份驗(yàn)證、數(shù)據(jù)延時(shí)控制等。

（3）視圖組件用于解決瀏覽器頁面中二維信息的正常顯示，常用組件包括UI 控件、HTML 標(biāo)簽、CSS 樣式等。

其中功能組件與業(yè)務(wù)組件中的場(chǎng)景交互功能開發(fā)，是基于WebGL 的集成庫three. js 框架來實(shí)現(xiàn)的，three. js 提供了豐富的三維圖形處理函數(shù)，可用于實(shí)現(xiàn)各類復(fù)雜的三維圖形處理和功能交互，并且提供了相應(yīng)的優(yōu)化機(jī)制，能有效提高三維圖形的處理效率。

3.2 系統(tǒng)的主要功能設(shè)計(jì)

系統(tǒng)的主要功能設(shè)計(jì)如圖3 所示。

圖3 校園三維可視化信息系統(tǒng)功能設(shè)計(jì)

三維地理信息交互模塊包括用戶定位、地理信息查詢、地理信息標(biāo)注三個(gè)子功能模塊，該模塊以WebGL 內(nèi)置三維地理信息系統(tǒng)為核心，通過接口調(diào)用獲取到校園三維空間構(gòu)建所需的平面地理坐標(biāo)信息，將其實(shí)時(shí)繪制并在瀏覽器中更新，在此基礎(chǔ)上再通過調(diào)用用戶手機(jī)定位接口，獲取用戶在校園地圖上的位置，用戶可以通過該模塊進(jìn)行地理位置的定點(diǎn)查詢，也可以自定義標(biāo)注地標(biāo)信息。

校園三維實(shí)景展示模塊基于校園實(shí)景建模，實(shí)現(xiàn)了三維校園場(chǎng)景的虛擬展示，并提供了三種交互方式：場(chǎng)景漫游、場(chǎng)景切換、視角切換。 場(chǎng)景漫游功能可以讓用戶基于攝像機(jī)視角在虛擬場(chǎng)景中進(jìn)行移動(dòng)、旋轉(zhuǎn)等交互。 場(chǎng)景切換是將校園分區(qū)域建立了不同的三維場(chǎng)景，用戶通過場(chǎng)景切換功能可以選擇不同的場(chǎng)景進(jìn)行瀏覽。 視角切換用于切換三維場(chǎng)景中的攝像機(jī)視角，該模塊提供了兩種交互視角：第一人稱視角與第三人稱視角。 用戶可以進(jìn)行個(gè)性化選擇。

安保數(shù)據(jù)管理模塊主要用于校園安保信息的采集與管理，包括監(jiān)控點(diǎn)定位、監(jiān)控?cái)?shù)據(jù)查詢、預(yù)警數(shù)據(jù)查詢等功能。 該模塊需要以校園安防系統(tǒng)作為底層數(shù)據(jù)支持，在此基礎(chǔ)上對(duì)安防數(shù)據(jù)的地理信息進(jìn)行三維映射，以實(shí)現(xiàn)三維場(chǎng)景中的監(jiān)控點(diǎn)定位和立體化的監(jiān)控、預(yù)警數(shù)據(jù)查詢。

4 系統(tǒng)性能優(yōu)化策略

為了解決WebGL 三維場(chǎng)景渲染的實(shí)時(shí)性和數(shù)據(jù)的動(dòng)態(tài)更新問題，首先三維場(chǎng)景實(shí)時(shí)性渲染可以通過分層渲染，以減少模型單次計(jì)算量的方式來提高渲染效率，所謂分層渲染就是以場(chǎng)景視角為中心，對(duì)其可視范圍進(jìn)行分級(jí)劃分，距離中心最近范圍內(nèi)的場(chǎng)景渲染等級(jí)為最高，模型加載也越完整，對(duì)模型的細(xì)節(jié)表達(dá)也更準(zhǔn)確；距離中心越遠(yuǎn)，渲染等級(jí)越低，模型加載也相對(duì)粗糙，超出視角設(shè)定的范圍閾值則不做渲染處理。 當(dāng)視點(diǎn)發(fā)生平移時(shí)，視點(diǎn)范圍的渲染等級(jí)也會(huì)動(dòng)態(tài)更新，并對(duì)靠近視點(diǎn)的模型進(jìn)行細(xì)節(jié)補(bǔ)充。 實(shí)現(xiàn)該策略的核心是要實(shí)現(xiàn)三維數(shù)據(jù)的動(dòng)態(tài)更新，當(dāng)視點(diǎn)的位置信息發(fā)生改變后，模型數(shù)據(jù)就需要依據(jù)新的渲染等級(jí)刪減或補(bǔ)充渲染細(xì)節(jié)，才能確保場(chǎng)景的實(shí)時(shí)渲染，針對(duì)這一問題，可以為每一個(gè)模型構(gòu)建金字塔瓦片模型，在渲染層級(jí)調(diào)用不同數(shù)據(jù)量，以4 級(jí)劃分為例，金字塔瓦片模型結(jié)構(gòu)如圖4 所示。

圖4 金字塔瓦片模型

金字塔瓦片模型是一種多分辨率層次模型，不同層級(jí)所含瓦片數(shù)量不一樣，等級(jí)越低（0 級(jí)為最低），瓦片數(shù)據(jù)越少，分辨率越低，模型也就越粗糙，等級(jí)越高（4 級(jí)為最高），瓦片數(shù)量越多，分辨率越高，模型細(xì)節(jié)越清晰。 所謂瓦片就是將三維圖像按塊進(jìn)行等大小的切分［6］，塊與塊通過拼接可以復(fù)原完整的三維圖像，這些瓦片互不重疊，并且可以通過疊加對(duì)圖像內(nèi)容進(jìn)行更多補(bǔ)充。 各層級(jí)之間的瓦片按照四叉樹數(shù)據(jù)結(jié)構(gòu)建立映射關(guān)系，每一個(gè)低層級(jí)瓦片向高一級(jí)層級(jí)映射時(shí)會(huì)拓展為4 個(gè)瓦片，最終形成一個(gè)金字塔模型，為了能夠?qū)ν咂焖贆z索，金字塔模型還建立了一套三維的瓦片坐標(biāo)系，通過瓦片坐標(biāo)系對(duì)瓦片進(jìn)行編碼，其中x 軸表示瓦片的行號(hào)，y 軸表示瓦片的列號(hào)，z軸表示瓦片的層級(jí)。 這種分層式渲染策略能夠大幅降低場(chǎng)景實(shí)時(shí)渲染的計(jì)算量，保證三維場(chǎng)景的顯示效果。

5 結(jié)語

綜上所述，隨著三維可視化信息技術(shù)的廣泛應(yīng)用，將三維技術(shù)與傳統(tǒng)的校園信息化系統(tǒng)進(jìn)行融合：一方面可以進(jìn)一步豐富系統(tǒng)功能，滿足用戶對(duì)信息的立體化展示和應(yīng)用需求；另一方面利用信息化平臺(tái)直觀展示校園風(fēng)貌，可以更好地服務(wù)于高校招生宣傳、校園文化建設(shè)等工作。 基于此，本研究采用WebGL 技術(shù)設(shè)計(jì)與實(shí)現(xiàn)了一個(gè)校園三維可視化信息系統(tǒng)，并針對(duì)三維場(chǎng)景的實(shí)時(shí)渲染與數(shù)據(jù)動(dòng)態(tài)更新問題提出了分層渲染的優(yōu)化機(jī)制，有效保障了系統(tǒng)的響應(yīng)效率和運(yùn)行可靠性。