基于ImGui 的跨平臺可視化用戶界面設計與研究

戴錦程

（西北民族大學數(shù)學與計算機科學學院 甘肅 蘭州 730030）

0 引言

隨著數(shù)字化轉(zhuǎn)型的快速發(fā)展，軟件行業(yè)成為了當今經(jīng)濟中最具活力和潛力的領(lǐng)域之一。 在這個充滿機遇和挑戰(zhàn)的領(lǐng)域，優(yōu)秀的用戶體驗是一個至關(guān)重要的環(huán)節(jié)，因為它可以直接影響軟件產(chǎn)品的市場競爭力和商業(yè)價值。 而實現(xiàn)優(yōu)秀用戶體驗的過程中，用戶界面設計則是其中最關(guān)鍵的方面之一。 一個簡潔、易用、美觀的用戶界面能夠讓用戶更輕松地理解和使用軟件，提高效率和便捷性。 然而，在實際開發(fā)過程中，設計出符合用戶需求和預期的用戶界面卻不是一件容易的事情。

為了解決這些問題，本文提出了一種基于即時模式圖形用戶界面（immediate mode graphical user interface，ImGui）的跨平臺可視化用戶界面設計方法。 ImGui 是一種高效、輕量級的用戶界面設計庫，適用于多種編程語言和操作系統(tǒng)平臺。 它采用即時模式繪圖技術(shù)，使用戶界面渲染速度更快且更容易實現(xiàn)。 該方法可以幫助開發(fā)者更輕松、高效地設計出優(yōu)秀的用戶界面。 通過使用圖形化界面設計工具，開發(fā)人員可以快速創(chuàng)建和編輯用戶界面，并在不同的操作系統(tǒng)和平臺上運行。 這種方法還允許開發(fā)者通用一套代碼庫，在跨多個平臺時實現(xiàn)一致性，從而提高代碼的可維護性和可擴展性。

1 ImGui 框架的介紹

ImGui 又稱Dear ImGui，相比于傳統(tǒng)的應用程序開發(fā)框架（QtToolkit， Qt） 等圖形用戶界面（graphical user interface， GUI）設計工具，它是一種輕量級的開發(fā)框架，是不依賴于外部庫的即時模式GUI 圖形開發(fā)工具。

1.1 ImGui 框架的優(yōu)點

（1）易于使用：ImGui 使用C++編寫，且核心代碼量較少，設計簡單，易于學習和使用。 用戶不需要專業(yè)的圖形設計知識，只需基本的圖形學知識即可輕松上手。

（2）跨平臺：ImGui 被設計為與任何圖形應用程序編程接口（application programming interface， API）集成，使它能夠在各種不同的平臺之間進行移植，包括Windows、Linux、MacOS X、iOS、Android 等操作系統(tǒng)。

（3）輕量級高效：ImGui 專注于提供高效簡潔的用戶界面（user interface， UI）設計，不需要一些其他的龐大的GUI 庫。

（4）低開銷：ImGui 是一種“即時模式”GUI 框架，它并不創(chuàng)建和保存應用程序中的GUI 對象。 它只是在每一幀中生成必要的內(nèi)容，使它具有非常低的開銷。

（5）可定制性強：ImGui 框架提供了大量的自定義選項和插件式的擴展功能，使用戶可以完全控制GUI 的外觀和功能，從而創(chuàng)造出獨特的用戶體驗。

（6）易于調(diào)試：ImGui 為用戶提供了完整的調(diào)試工具，使用戶可以更輕松地調(diào)試UI 的實現(xiàn)，并最終得到非常高效的可執(zhí)行文件。

1.2 ImGui 框架的缺點

使用者必須編寫大量代碼來管理GUI 對象的創(chuàng)建和銷毀［1］，例如開發(fā)一個項目，經(jīng)常需要創(chuàng)建許多個GUI 小部件，如果數(shù)據(jù)非常大，GUI 對象的創(chuàng)建和銷毀速度慢會導致UI 響應緩慢；除此之外，與其他UI 庫相比，ImGui 的功能相對簡單，只提供了一些基本控件和圖形繪制功能，不能滿足所有的UI 需求，需要在應用中進行二次開發(fā)，由于ImGui 的設計思路適用于需要快速創(chuàng)建原型或小型項目，因此不適合用于大型、復雜的工程項目。

2 ImGui 在不同場景下的應用

ImGui 在游戲開發(fā)中有著廣泛的應用，可以作為游戲引擎的默認UI 框架，例如Unity3D、Unreal Engine 等都支持集成ImGui，極低的渲染消耗使ImGui 只需要一次性渲染整個UI，這種方式比傳統(tǒng)GUI 所需的大量事件處理和重復渲染要少得多，從而減少了開放式圖形庫（open graphics library， OpenGL）和DirectX API 的調(diào)用次數(shù)。 同時ImGui 提供了極大的繪圖控制，包括對布局、對鼠標、鍵盤事件的全控制、Texture Pack、樣式、語言等。 這些都使得ImGui 可以根據(jù)游戲引擎的特定需求提高性能和渲染效率；ImGui 可以輕松實現(xiàn)動態(tài)布局，能夠根據(jù)分辨率、顯示比例和其他變化因素自動適應UI 布局，從而更好地適應各種屏幕大小。 此外，與傳統(tǒng)的圖形界面庫不同，ImGui很容易定制。 用戶可以輕松地編寫定制功能，使其滿足程序的特定需求。

由于其超低的UI 開銷和省時省力的特點，ImGui 在快速開發(fā)用戶界面方面非常有優(yōu)勢。 另外，ImGui 的易于定制和跨平臺支持也使其成為開發(fā)人員的不二之選，能夠快速創(chuàng)建自定義UI 元素，以適應各種特定的應用程序需求。 此外，ImGui 的安全性和社區(qū)支持度高，也使得開發(fā)人員更加信任它。 總之，ImGui 是一個十分優(yōu)秀的用戶界面框架，也是開發(fā)人員完成各種領(lǐng)域的應用程序所欣賞的工具。

2.1 Web 項目中實現(xiàn)ImGui 界面

Web Assembly 是一種低級的類匯編語言，具有緊湊的二進制格式，可以接近原生的性能運行，并為諸如C／C++／rust／go 等語言提供一個編譯目標，以便它們可以在Web 瀏覽器上運行［2］。 它被設計為可以與JavaScript 共存，允許兩者一起工作，而ImGui 是一個用于創(chuàng)建用戶界面的工具庫，它可以用于創(chuàng)建圖形化用戶界面和各種控件，通過將C++編寫的Dear ImGui 項目編譯為Web Assembly（WASM）二進制文件，并使用Emscripten 將其部署到Web 上，可以在瀏覽器中運行ImGui 界面，同時利用GLES 3.0 實現(xiàn)圖形渲染。 此組合的優(yōu)勢在于無需安裝任何本地軟件，在Web 上可以實現(xiàn)包括用戶交互界面、數(shù)據(jù)監(jiān)測、數(shù)據(jù)可視化等功能，且在不同平臺上都能夠獲得不錯的性能表現(xiàn)［3］，見圖1。 傳統(tǒng)的基于JavaScript 的Vue.js框架，用于構(gòu)建現(xiàn)代Web 應用程序，具有易用性、可擴展性和可重用性等優(yōu)點，它可以幫助設計者快速構(gòu)建出美觀的用戶界面。 然而，Vue. js 的一個明顯劣勢是它的性能，Vue.js 需要在瀏覽器中解析和執(zhí)行大量的JavaScript 代碼，這可能會導致較慢的加載速度和響應時間［4］，相比之下Dear ImGui+Web Assembly+GLES 3.0 在實現(xiàn)Web 的一些類似數(shù)據(jù)監(jiān)測系統(tǒng)用戶界面時，可以提供更快的加載速度、響應時間和渲染性能，為其實現(xiàn)方案提出了另一種思路。

圖1 Web 界面展示

2.2 在游戲調(diào)試中使用ImGui

ImGui 庫允許在游戲運行時直接調(diào)試和修改游戲狀態(tài)和變量，其原理是通過在游戲循環(huán)中實時創(chuàng)建、更新和渲染用戶界面，使用戶能夠在游戲運行時查看和修改游戲狀態(tài)和變量。

ImGui 的工作原理可以歸納為以下幾個步驟：

（1）在游戲的初始化函數(shù)中創(chuàng)建ImGui 上下文。

（2）在每幀更新之前調(diào)用ImGui 函數(shù)以更新界面狀態(tài)。

（3）在游戲的渲染循環(huán)中調(diào)用ImGui 函數(shù)，以顯示調(diào)試信息。

（4）在游戲結(jié)束時清除ImGui 上下文。

在游戲運行時，ImGui 庫通過創(chuàng)建、更新和渲染界面來實時顯示和修改游戲狀態(tài)和變量。 ImGui 的界面是通過在每幀更新時動態(tài)生成的，因此可以隨時添加或刪除組件。 ImGui 提供了各種不同的組件，如文本框、按鈕、滑塊、下拉菜單等，可以方便用于游戲調(diào)試。 在ImGui 庫中，所有的UI 元素都是立即模式，意味著每幀都必須重新創(chuàng)建并渲染。 ImGui 庫使用GPU 加速來渲染UI 元素，因此其性能較高。

此外，由于ImGui 庫的代碼量很小，所以它可以輕松地集成到游戲引擎中，在主流的開發(fā)引擎Unity 和Unreal Engile 中可以使用ImGui 插件或第三方插件來添加ImGui界面。 可以輕松地將ImGui 界面集成到游戲中。 見圖2。同時，ImGui 插件還支持與編輯器進行交互，并在運行時實時查看和修改游戲狀態(tài)和變量，以幫助開發(fā)者更輕松地調(diào)試和開發(fā)游戲，而不會影響游戲的性能和穩(wěn)定性。 總之，ImGui 庫是一種快速、靈活且易于使用的調(diào)試工具，從而加快開發(fā)進程和提高游戲質(zhì)量，部分示例代碼如下：

圖2 調(diào)用ImGui 調(diào)試游戲

2.3 使用ImGui 開發(fā)登錄器

在應用程序開發(fā)中，登錄器是一個必不可少的組件。傳統(tǒng)的登錄器通常使用傳統(tǒng)的GUI 庫（如Windows Forms、WPF、Qt 等）來實現(xiàn)。 這種方式需要編寫大量的代碼，同時還需要花費很長的時間來創(chuàng)建和調(diào)試GUI 界面，增加了開發(fā)時間和開發(fā)成本［5-6］。 相比之下，使用ImGui 開發(fā)登錄器具有以下優(yōu)點：

（1）易于實現(xiàn)和快速迭代：使用ImGui 可以快速構(gòu)建簡單而美觀的GUI 界面。 ImGui 的API 簡單易用，使用者只需幾行代碼就可以創(chuàng)建和修改GUI 元素。 此外，ImGui提供了實時預覽功能，可以讓開發(fā)者快速看到所做的更改，加快了迭代速度。

（2）跨平臺支持：傳統(tǒng)的GUI 庫通常是為特定平臺設計的，這意味著在不同平臺上使用時需要進行適配和調(diào)試。 相比之下，ImGui 是一個跨平臺的GUI 庫，可以在各種平臺上使用，包括Windows、MacOS、Linux 等。

（3）更少的開發(fā)成本：傳統(tǒng)的GUI 庫需要編寫大量的代碼來創(chuàng)建和修改GUI 界面。 相比之下，ImGui 的API 簡單易用，減少了編寫代碼的時間和工作量。 此外，ImGui還提供了各種自定義主題和控件，可以快速創(chuàng)建獨特的GUI 界面，從而減少了開發(fā)成本。

（4）更好的性能表現(xiàn)：傳統(tǒng)的GUI 庫通常需要在渲染時重新計算并繪制所有GUI 元素，這可能會影響性能。相比之下，ImGui 使用了高效的渲染機制和基于GPU 的即時渲染技術(shù)，可以提高渲染性能和繪制效率，從而提高了應用程序的運行速度和用戶體驗［7］。

總之，相比傳統(tǒng)的GUI 庫，使用ImGui 開發(fā)應用程序登錄器具有更低的開發(fā)成本、更好的性能表現(xiàn)、更快的迭代速度和跨平臺支持等優(yōu)點。 圖3 為使用ImGui 制作的登錄器。

圖3 使用ImGui 制作的登錄器

3 結(jié)語

綜上所述，基于ImGui 的跨平臺可視化用戶界面設計具有高度的靈活性和可定制性，能夠大大提高開發(fā)效率和用戶體驗，通過不斷的實踐和探索，可以深入理解其內(nèi)部原理和實現(xiàn)方式。 在未來，ImGui 框架將會在更多的領(lǐng)域中得到廣泛應用，并且持續(xù)為用戶界面設計和開發(fā)領(lǐng)域帶來新的革新和突破。