校園三維可視化信息系統的設計與實現

胡 娟

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

0 引言

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

1 WebGL 技術概述

WebGL 是基于開放式圖形庫（open graphics library，OpenGL）的圖形渲染協議標準［3］。 其目的是將OpenGL 與JavaScript 進行綁定，再通過標準化的JavaScript API 實現Web 前端對底層圖形渲染硬件的直接調用，從而大大提高Web 頁面的圖形繪制與渲染效率。 其結構如圖1所示。

圖1 WebGL 應用開發結構

WebGL 技術優勢主要體現在以下三個方面：

（1）高效的圖形渲染。 通過OpenGL 與JavaScript 的綁定，實現了Web 應用程序對底層加速硬件的直接訪問。再通過標準化JavaScript API 實現了Web 頁面上圖形的直接繪制和渲染。 Web 頁面不需要借助任何第三方插件進行圖形渲染，同時也減少了中間件構建，簡化了圖形處理流程。

（2）強大的圖形處理功能。 OpenGL 是圖形加速硬件的標準（application programming interface，API），內置有350 個圖形處理函數，專用于二維和三維圖形的功能開發，WebGL 在此基礎上進行了功能集成與標準化接口構建，提供了基于Web 服務的復雜圖形解決方案，可以在Web 頁面中實現復雜結構的三維圖形處理和數據交互功能。

（3）良好的跨平臺性和易擴展性。 WebGL 以Web 頁面為載體，可以在各類平臺環境下流暢運行，例如移動端Android 與IOS 系統、PC 端Windows 與MacOS 系統等，同時WebGL 免費開源，也使得開發人員可以在其所提供的標準化JavaScript API 基礎上進行迭代開發和功能擴展，例如Three.js 就是在WebGL 基礎上擴展出來的JavaScript高度集成庫，Three.js 通過對WebGL 的二次封裝和集成，大幅提高了WebGL 的功能易用性和開發效率。

2 系統需求分析

2.1 功能需求

校園三維可視化信息系統在原有信息系統的功能基礎上結合三維可視化技術，主要用于滿足以下三個方面的需求：

（1）三維地理信息展示與導航需求。 高校的校區范圍一般都很大，生活區與各個教學區錯落分布，僅靠一般的手機導航App 很難準確定位校園內部的具體院系、行政處室等地點，通過校園的三維地理信息展示，對關鍵點信息進行標注，為用戶提供更加詳盡的導航信息，可以幫助用戶快速熟悉校園環境，為用戶的日常工作與學習提供便利。

（2）校園特色區域的演示與宣傳需求。 高校建設很重要的一項內容是文化建設與宣傳，結合三維可視化技術實現對校園一些特色區域的展示、交互和游覽，例如校展覽館、實驗室、圖書館、產學研基地等，有助于學院文化展示與宣傳，增加用戶對學院的了解與認同感。

（3）校園安防管理需求。 高校校園屬于實驗室設施放置最多、人員流動最密集的場所之一，因此校園安防也是高校管理工作的重中之重，利用三維可視化技術對發現隱患的安全場所進行立體定位和實時數據分析、預警，可以快速幫助安保人員鎖定目標、評估環境狀況，減少工作失誤，提高工作效率。

2.2 性能需求

三維技術相較于二維在數據處理方面需要消耗更多的算力，占用更多的網絡資源和存儲空間，為了確保三維數據的處理效率，在性能方面還應滿足以下需求：

（1）三維模型的計算量。 在三維場景構建時，需要合理設計三維模型的構建結構與面數，盡量采用規則的三角面構建模型，減少多邊面的應用，以降低模型計算量。

（2）三維文件請求的實時性。 采用WebGL 技術，需要由前端瀏覽器先請求三維文件，然后再對其進行實時渲染，三維文件過大則會影響三維文件處理的實時性，因此需要構建相應的優先機制避免此類情況的發生。

（3）三維數據的動態更新。 三維數據的動態更新是指用戶與三維場景交互時，場景需要按照用戶操作及時進行視角變化和場景更新，這需要三維數據的動態支持。

3 校園三維可視化系統設計

3.1 系統架構設計

校園三維可視化信息系統采用分層式架構設計，其結構如圖2 所示。

圖2 校園三維可視化信息系統架構

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

數據存儲層采用了MySQL 數據庫管理工具，主要負責靜態數據與表單數據的存儲管理，存儲的數據主要包括場景數據、建筑物數據及其他的二維數據。

數據預處理層用于實現數據存儲層與數據可視化層的數據格式轉換和交互，針對三維靜態類數據，采用標準的JSON 格式進行數據轉換和封裝，通過異步方式實現通信［5］；針對動態數據，數據預處理層直接由數據采集層獲取源數據，再以變量的形式存儲在內存當中，不需要通過數據存儲層進行數據管理，通信采用了WebSocket 協議標準，實現了數據的全雙工實時通信，大大提高了動態數據的傳輸效率。

數據可視化層負責前端瀏覽器與可視化數據服務端的功能實現，以組件方式集成了三維視圖顯示所必需的功能模塊，主要包括功能組件、業務組件、視圖組件三個模塊：

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

（2）業務組件用于實現場景交互、數據交互、業務邏輯控制等功能。 場景交互是指用戶與三維場景的虛擬交互，例如場景漫游、視角切換、場景切換等；數據交互則指的是針對三維場景的數據交互，例如用戶定位信息的獲取、場景特定對象的信息查閱、實驗室環境監測數據獲取等；業務邏輯控制是指在各類交互事件中的業務流程控制，包括用戶身份驗證、數據延時控制等。

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

其中功能組件與業務組件中的場景交互功能開發，是基于WebGL 的集成庫three. js 框架來實現的，three. js 提供了豐富的三維圖形處理函數，可用于實現各類復雜的三維圖形處理和功能交互，并且提供了相應的優化機制，能有效提高三維圖形的處理效率。

3.2 系統的主要功能設計

系統的主要功能設計如圖3 所示。

圖3 校園三維可視化信息系統功能設計

三維地理信息交互模塊包括用戶定位、地理信息查詢、地理信息標注三個子功能模塊，該模塊以WebGL 內置三維地理信息系統為核心，通過接口調用獲取到校園三維空間構建所需的平面地理坐標信息，將其實時繪制并在瀏覽器中更新，在此基礎上再通過調用用戶手機定位接口，獲取用戶在校園地圖上的位置，用戶可以通過該模塊進行地理位置的定點查詢，也可以自定義標注地標信息。

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

安保數據管理模塊主要用于校園安保信息的采集與管理，包括監控點定位、監控數據查詢、預警數據查詢等功能。 該模塊需要以校園安防系統作為底層數據支持，在此基礎上對安防數據的地理信息進行三維映射，以實現三維場景中的監控點定位和立體化的監控、預警數據查詢。

4 系統性能優化策略

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

圖4 金字塔瓦片模型

金字塔瓦片模型是一種多分辨率層次模型，不同層級所含瓦片數量不一樣，等級越低（0 級為最低），瓦片數據越少，分辨率越低，模型也就越粗糙，等級越高（4 級為最高），瓦片數量越多，分辨率越高，模型細節越清晰。 所謂瓦片就是將三維圖像按塊進行等大小的切分［6］，塊與塊通過拼接可以復原完整的三維圖像，這些瓦片互不重疊，并且可以通過疊加對圖像內容進行更多補充。 各層級之間的瓦片按照四叉樹數據結構建立映射關系，每一個低層級瓦片向高一級層級映射時會拓展為4 個瓦片，最終形成一個金字塔模型，為了能夠對瓦片快速檢索，金字塔模型還建立了一套三維的瓦片坐標系，通過瓦片坐標系對瓦片進行編碼，其中x 軸表示瓦片的行號，y 軸表示瓦片的列號，z軸表示瓦片的層級。 這種分層式渲染策略能夠大幅降低場景實時渲染的計算量，保證三維場景的顯示效果。

5 結語

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