基于游戲引擎的圖形用戶界面集群渲染系統設計與實現

宋輝，姜忠鼎

基于游戲引擎的圖形用戶界面集群渲染系統設計與實現

宋輝，姜忠鼎

圖形用戶界面是圖形顯示系統重要的信息呈現和交互方式。現有分布式圖形顯示系統對圖形用戶界面集群渲染技術討論不足。深入分析Unity引擎圖形用戶界面系統，圍繞面向LCD拼接屏的圖形用戶界面多屏顯示技術以及基于游戲對象的界面控件同步機制等關鍵技術點展開討論，設計并實現了基于游戲引擎的圖形用戶界面集群渲染系統。實驗結果表明，系統支持二維和三維圖形用戶界面開發，具有較強的實用性；系統對游戲引擎影響較小，具有良好的系統性能。

圖形用戶界面；游戲引擎；集群渲染

0 引言

隨著圖形算法和圖形硬件的不斷發展，計算機圖形應用已經廣泛應用于教育、仿真、娛樂和科學數據可視化等重要領域。普通圖形顯示系統使用單臺PC和單顯示器的系統配置，顯示尺寸小，視角窄，分辨率低，顯示能力非常有限，無法滿足大數據時代海量數據高效可視化的需求以及人們對娛樂體驗日益增長的需求。相比之下，分布式圖形顯示系統使用集群驅動的大規模顯示環境，呈現大尺寸、廣視角、高分辨率的連貫畫面。無論是顯示海量的科學數據還是呈現高度沉浸的虛擬場景，分布式圖形顯示系統都是一種有效的解決方案。

分布式圖形顯示系統的關鍵技術包括虛擬場景和圖形用戶界面集群渲染、高分辨率大規模顯示等。其中圖形用戶界面是系統重要的信息呈現和交互方式。MiddleVR for Unity[1]是一款基于Unity引擎分布式圖形系統開發中間件。MiddleVR使用HTML開發圖形用戶界面，并使用Chromium瀏覽器引擎開發網頁視圖（WebView）插件，將網頁渲染到虛擬場景中。MiddleVR網頁視圖不支持鼠標輸入和彈出窗口，應用場景有限；使用同步圖像的方式同步用戶界面，當用戶界面分辨率高時同步開銷大。CaveUDK[2]是基于UDK引擎的沉浸式虛擬現實框架。CaveUDK使用引擎的異步不可靠遠程調用同步數據。不可靠網絡協議只適用于系統同步幀率高、丟失少量數據不影響系統正確性的情景。對于圖形用戶界面同步，鼠標點擊事件丟失將使集群節點執行不同邏輯，導致界面狀態不同步。

游戲引擎是互動圖形應用開發的集成開發工具。游戲引擎提供豐富的功能，高性能的基礎系統和高效的開發流程，應用越來越廣泛。Unity游戲引擎[3]是目前主流的商業游戲引擎之一。在圖形用戶界面開發方面， Unity UI系統[4]提供界面編輯器設計UI控件和布局，使用腳本處理界面事件，執行功能邏輯。盡管引擎UI系統功能強大且開發效率高，但引擎本身對分布式圖形顯示系統開發支持不足，不支持多屏UI畫面生成和顯示，不支持UI控件同步， UI系統不能直接用于分布式圖形顯示系統。

本文工作 基于現有分布式圖形顯示系統在圖形用戶界面開發和集群同步方面的問題，本文結合Unity技術文檔和UI系統源代碼，分析了Unity引擎UI系統，設計并實現了基于游戲引擎的圖形用戶界面集群渲染系統。本文系統使用游戲引擎實現圖形用戶界面集群渲染，利用引擎UI系統和UI設計工具提升界面開發效率，保證界面渲染性能和畫面質量；系統支持開發高分辨、可交互的二維和三維圖形用戶界面，適用于數據可視化和虛擬現實等多種應用類型；系統實現LCD多屏顯示，提供大尺寸、廣視角的連貫畫面，能同時呈現大量數據，具有良好的信息呈現能力。

1 系統架構

本文分布式圖形顯示系統的體系結構如圖1所示：

圖1 分布式圖形顯示系統體系結構

系統包括3個核心子系統，包括虛擬場景、集群渲染系統和多屏顯示系統。

虛擬場景是系統的基本組成部分。虛擬場景內容根據應用具體需求開發，例如虛擬場景可以呈現二維圖形，用于播放視頻、閱讀文本，以及顯示二維圖形用戶界面；虛擬場景也可以呈現三維圖形，用于三維數據可視化和沉浸式虛擬現實游戲。圖形用戶界面是虛擬場景的重要組成部分，用戶通過界面獲取系統呈現的信息，并通過界面和虛擬場景做交互。

集群渲染系統采用Master-Slave架構，集群由一個主節點和多個顯示節點組成，其中主節點完成虛擬場景的主要邏輯計算，并把場景狀態同步到從節點；從節點負責場景渲染，并使用連接到節點的顯示設備把畫面輸出到屏幕上。集群渲染采用lock-step的集群同步機制，使用心跳信息標識場景完成狀態同步, 使用幀交換同步柵欄使顯示節點同時更新畫面[5]。為保證狀態同步和事件同步的可靠性，本文使用文獻[6]中面向并行繪制游戲系統的可靠同步傳輸協議，協議同步流程如圖2所示：

圖2 同步數據傳遞流程

多屏顯示系統使用LCD拼接屏作為顯示設備，系統根據物理屏幕的擺放分配集群節點的顯示區域，根據顯示器邊框減小顯示區域，使用離軸投影的虛擬相機渲染場景，最后使用引擎Multi-display多屏顯示技術[7]，將渲染結果顯示到對應LCD顯示器上，呈現連貫畫面。

系統基于Unity引擎提供的新UI系統設計并實現。新UI系統功能豐富，支持2D界面和3D界面開發，且容易集成動畫系統等引擎核心子系統。引擎提供UI設計工具，用于高效編輯UI控件和界面布局。新UI系統包含幾個核心概念，即畫布、布局、可視化控件和交互控件。實現UI集群渲染需要考慮兩個關鍵問題，即如何將畫布顯示到多個顯示器上以及如何在集群節點間同步UI控件狀態。下文將圍繞畫布多屏顯示技術和UI控件同步兩個關鍵問題展開討論。

2 畫布多屏顯示技術

畫布是圖形用戶界面的容器，包含布局元素和控件元素等所有界面元素。UI系統基于游戲對象實現，畫布對象本質是游戲對象。畫布具有空間變換（Transform），可以像操作其它游戲對象一樣控制畫布在場景中的位置、朝向和縮放比例。引擎提供屏幕覆蓋模式（Overlay Screen Space）、相機綁定模式（Camera-based World Space）以及世界坐標模式（World Space）等畫布渲染模式，支持二維/三維界面渲染。其中屏幕覆蓋和相機綁定模式能有效地實現二維界面，充分保留界面的功能性，提供用戶和虛擬世界的信息傳輸接口；世界空間渲染模式則能實現三維用戶界面，將界面融入虛擬場景，設計敘事性界面，能有效地增加應用沉浸感[8]。

分布式圖形系統的顯示屏幕由多個顯示節點共同顯示，單個節點只顯示屏幕的一部分區域。使用引擎UI系統，需要考慮畫布顯示區域分配問題[9]。本文基于節點連接的LCD顯示器排列，分配節點顯示區域，適用于使用世界空間模式的三維界面開發和使用相機綁定模式的二維界面開發如圖3所示：

圖3 三維顯示區域分配

圖3a顯示了集群驅動的圖形顯示系統俯視圖，其特點為多顯示節點、單個節點多屏顯示；每個節點負責屏幕部分區域的畫面生成和顯示，所有節點顯示畫面拼接在一起，呈現完整連貫的畫面。

首先，對于世界坐標模式下的三維界面開發，本文系統采用以下步驟生成和顯示畫面：

步驟一、根據物理屏幕配置，對每個LCD顯示器在虛擬場景中放置虛擬平面。LCD顯示器存在邊框，虛擬平面需要相應減小尺寸；

步驟二、為每個虛擬平面，在觀察位置創建一個虛擬相機，使用虛擬平面作為虛擬相機的成像平面，計算相機離軸投影；

步驟三、虛擬相機渲染場景后，使用引擎Multi-display多屏顯示技術[4]，將渲染結果顯示到LCD顯示器上。

其次，對于相機綁定模式下的二維用戶界面開發，本文采用和上文三維界面開發一樣的流程。但為了將畫布覆蓋在屏幕上，需要修改上文步驟一中虛擬平面的擺放方式。把屏幕展開到二維平面，映射到畫布上，如圖4所示：

圖4 二維顯示區域分配

3 UI控件同步機制

UI系統使用畫布作為容器包含控件，控件則是組成用戶界面的基本單元?？丶饕梢暬丶徒换タ丶?.1 可視化控件同步

可視化控件[3]用于信息呈現，主要包括文本和圖像等。文本的主要屬性包括文字內容、字體、字體大小、對齊方式和文本顏色等。圖像的主要屬性包括紋理資源（顯示的圖片）、紋理坐標等?？梢暬丶褂糜螒驅ο髮崿F，引擎腳本能直接讀取和更新控件狀態，這是可視化控件集群同步的基礎。本文采用同步控件屬性的同步機制，即主節點讀取控件屬性發送給從節點，從節點使用同步數據更新控件屬性。

以文本同步為例，文本同步示意代碼如圖5所示：

圖5 文本同步示意代碼

同步的屬性包括文本內容、字體、字體大小和文本顏色等。同步字體時，主節點發送字體標識符，從節點使用字體標識符獲得字體對象，如使用引擎提供的CreateDynmaic

FontFromOSFont 方法動態創建操作系統已安裝的字體。圖像同步采用相同的方式實現，圖像同步的屬性包括圖像內容和紋理坐標。其中圖像內容使用引擎二維紋理表示，二維紋理使用EncodeToJPG方式編碼成JPG格式的二進制數據，使用LoadImage方法加載數據進行更新。

3.2 交互控件同步

交互控件[3]主要用于處理用戶輸入，包括按鈕、單選框、滑塊、滾動條、下拉框、輸入框、滾動視圖等。交互控件基于鼠標輸入更新控件狀態，觸發界面事件，這是交互控件集群同步的基礎。本文采用同步鼠標狀態和事件相機狀態的同步機制，保證鼠標相關的控件狀態和控件觸發的界面事件保持同步。

（1）交互控件狀態

交互控件狀態包括正常狀態、高亮狀態,、按下狀態和未激活狀態。不同狀態下控件具有不同屬性，例如不同顏色或者不同空間變換等。鼠標輸入能觸發控件發生狀態變化。

除了在正常狀態、高亮狀態等四個狀態間過渡，一些交互控件還維護其它狀態。包括：

1）基于鼠標輸入更新的狀態，如滑塊、滾動條和滾動視圖可以被拖動，其狀態根據鼠標位置計算得到；下拉菜單可以展開下拉框，狀態變化由鼠標點擊事件觸發；

2）其它方式更新的狀態或屬性，如輸入框的光標位置，根據鍵盤輸入和鼠標輸入計算得到；滑塊的最大最小值等控件屬性，創建控件時初始化，使用腳本直接修改。

交互控件狀態變化后，能觸發相應的界面事件，并調用引擎腳本處理界面事件。如按鈕觸發OnClick事件，單選框、滑塊、滾動條、下拉框、輸入框觸發OnValueChanged事件等。

（2）鼠標同步

鼠標是常用的界面交互設備，鼠標輸入處理流程如圖6所示：

圖6 使用鼠標位置計算目標控件示意圖

步驟一、UI系統獲得鼠標屏幕空間位置和滾輪變量，以及鼠標按下、釋放等按鍵狀態；

步驟二、根據鼠標位置計算鼠標指針下的控件：

a）系統使用事件相機，將鼠標映射到場景射線；

b）使用射線和畫布上控件求交得到相交控件列表；

c）取距離事件相機最近的控件作為目標控件；

步驟三、根據鼠標按鍵狀態處理鼠標按下、釋放以及拖動事件，將鼠標輸入傳遞給目標控件，交互控件更新控件狀態。

集群系統下使用鼠標進行交互的關鍵是，區別對待事件相機和渲染相機。如圖6中主節點步驟A.1和從節點步驟B.2所示，事件相機使用鼠標窗口坐標，和畫布求交，得到當前鼠標指針下的控件。系統使用相機函數ScreenPoint ToRay實現鼠標窗口坐標到三維射線的映射，為了使主節點和顯示節點映射到相同的射線，首先，由于主節點和顯示節點的窗口分辨率不同，鼠標坐標使用窗口分辨率進行歸一化；如圖7所示（15-18行）：

圖7 鼠標同步示意代碼

其次，需要同步事件相機的空間變換和投影矩陣，事件相機本身不渲染畫布，畫布渲染由渲染相機完成。根據2節畫布多屏顯示技術的顯示區域分配機制，每個顯示節點負責渲染畫布的部分區域，渲染結果輸出到顯示器上。從節點顯示的鼠標是一個三維游戲對象，其位置為射線和畫布的交點。系統中，事件相機和渲染相機相互獨立，如圖6所示，從節點渲染相機覆蓋區域小于事件相機區域。

（3）輸入框同步

對于不隨鼠標輸入更新的控件屬性，如滑塊的最大最小值等屬性，以及由鍵盤更新的輸入框的文本等，本文直接在主節點獲取這些屬性值，并同步到從節點。輸入框同步的屬性包括輸入框文本和文本類型等（代碼參見圖5文本同步示意代碼）。主節點獲取輸入框的文本發送到從節點，從節點更新文本，觸發OnValueChanged事件。

4 應用實例及實驗結果

4.1 實驗環境

本文系統硬件配置如下：Intel? Core i5-2320 3.00GHz四核處理器，4GB DDR3內存，NVIDIA? GeForce? GTX 670圖形顯示卡，千兆局域網網絡連接，全高清液晶顯示器；系統的開發和運行軟件環境如下：Microsoft Windows 7 Service Pack 1 32位操作系統，Microsoft Visual Studio 2013旗艦版， Microsoft .Net Framework 3.5，Unity Personal 5.3.1f游戲引擎。用于實驗的系統由四個節點組成，其中包括一個主節點，顯示完整畫布，并連接鼠標用戶交互；三個從節點從左往右并排排列，并依次顯示畫布的部分區域，呈現完整畫面。

4.2 實驗結果

本節從系統運行機制、系統性能、系統功能等3個方面進行實驗。

（1）系統運行機制實驗

本文系統使用游戲引擎實現圖形用戶界面集群渲染，在同步按鈕和單選框等交互控件時，系統同步鼠標狀態和事件相機狀態，并在顯示節點運行相同的鼠標輸入處理邏輯。實驗如圖8所示：

圖8 顯示節點渲染不同數量的按鈕

畫布上擺放3組按鈕，按鈕個數分別為50、150和300，主節點顯示完整畫布，每個顯示顯示節點分別顯示一個組按鈕。系統更新一幀內界面同步相關的時間如表1所示：

表1 系統更新幀內界面同步相關時間

可以看到，輸入處理時間為1.67ms左右，符合不同節點執行相同處理邏輯的機制（主要開銷用于控件求交運算）。主節點和三個從節點幀同步時間差異相對較大，但總時間都是5.03ms左右，符合幀同步使不同節點同時結束一幀的機制。

（2）系統性能實驗

本實驗用于測試系統隨控件數量增加時的性能變化。畫布上擺放3組按鈕，每組按鈕數量相同。主節點顯示完整畫布，顯示節點顯示一組按鈕。此外，系統每一幀都模擬觸發點擊事件。實驗結果如圖9所示：

如圖9a所示，隨著按鈕數量的增減，單機系統和集群系統每一幀耗時線性增加?？傮w上看，集群系統耗時比單機系統平均高2.31ms。圖9b顯示了集群系統幀同步耗時占集群系統額外耗時的比例，可以看到，隨按鈕數量增加，幀同步比例維持在98.6%左右，說明本實驗中幀同步是造成性能差異的主要因素。但從圖9c幀同步開銷占總時間的比例來看，隨按鈕數增加，幀同步占總時間比例減小，說明隨著系統趨于復雜，系統渲染、事件處理等其它方面開銷高于幀同步。

圖9 性能測試實驗結果

（3）系統功能實驗

本實驗用于說明本文系統功能，實驗中畫布上擺放大量各種類型的UI控件，如圖10所示：

圖10 功能測試實驗結果框

圖10a為主節點顯示畫面，圖10b為顯示節點畫面。使用鼠標在主節點操作界面，從節點的界面狀態更新如圖10c中展開的下拉框以及圖10d文本框內的文字。系統運行穩定，平均幀率為102幀/秒。實驗表明，本文系統支持復雜的圖形用戶界面開發，且系統性能良好。

此外，本文系統已成功應用到文獻[9]中的第一人稱射擊游戲，使用本文UI集群渲染技術在游戲場景中增加圖形用戶界面，包括三維的游戲菜單等如圖11所示：

圖11 第一人稱射擊游戲

5 總結

基于對Unity引擎UI系統架構的分析，本文使用Unity引擎設計并實現了圖形用戶界面集群渲染系統。系統面向LCD拼接屏，按照顯示器排列分配顯示節點的畫布渲染區域，實現圖形界面多屏顯示。系統基于游戲對象的UI控件同步機制，使用同步腳本讀取和更新可視化控件屬性，同步可視化控件；通過同步鼠標狀態和事件相機狀態，同步交互控件狀態。實驗結果表明，本文基于游戲引擎的圖形用戶界面集群渲染系統支持復雜的二維和三維圖形用戶界面開發，具有較好的實用性；系統對Unity引擎性能開銷影響較小，具有良好的系統性能。未來系統將集成體感交互設備，探究圖形用戶界面的自然人機交互技術，提升系統交互性和沉浸感。

[1] Graphical User Interfaces[OL]. [2016-04-15]. http:// www.middlevr.com/doc/current/# GUI.

[2] Lugrin J, Charles F, Cavazza M. CaveUDK: a VR game engine middleware[J]. Virtual Reality Software and Technology, 2012.

[3] Unity Game Engine[OL]. [2016-04-15]. http://www.unity 3d.com/.

[4] UI[OL].[2016-04-15].http://docs.unity3d.com/Manual/UIS ystem.html.

[5] 羅璇, 馮一洲, 姜忠鼎. 一種面向網絡游戲的沉浸式顯示框架[J]. 計算機應用與軟件, 2011, 28(12):1-4.

[6] 謝文斌. 基于游戲引擎的沉浸式立體顯示游戲框架設計與實現[D]. 復旦大學, 2013.

[7] Multi-display[OL]. [2016-04-15].http://docs.unity3d.com/ Manual/MultiDisplay.html.

[8] Yokoyama S, Ishikawa H. Parallel distributed rendering of HTML5 canvas elements[J]. International Conference on Web Engineering, 2011.

[9] Game UI Discoveries: What Players Want [OL]. [2016-04 -15].http://www.gamasutra.com/view/feature/4286/game_ ui_discoveries_what_players_.php?print=1,

Design And Implementation of Cluster GUI Rendering System Based on Game Engine

Song Hui, Jiang Zhongding
(School of Software, Fudan University, Shanghai 201203, China)

Graphical user interface is an important way of presenting information and interaction for graphical application. The current distributed graphical display system hasn’t fully discussed about cluster rendering of graphical user interface. We present a cluster GUI rendering system based on game engine. We analyze Unity’s UI system, and present key design of the system, including cluster rendering of graphical user interface for LCD array display and UI control synchronization based on game object. Experimental results show that the cluster GUI rendering system is applicable that it can be used to develop both 2D and 3D user interfaces, and has small impact on game engine so that it can provide high performance.

Graphical User Interface; Game Engine; Cluster Rendering

TP311

A

1007-757X(2016)010-0005-05

2016.04.21）

國家自然科學基金項目（60803064）

宋 輝（1990-），男，復旦大學，軟件學院，碩士研究生，研究方向：計算機圖形學，上海 201203姜忠鼎（1976-），男，復旦大學，軟件學院，副教授，研究方向：計算機圖形學，上海 201203