基于ImGui 的跨平台可视化用户界面设计与研究

戴锦程

（西北民族大学数学与计算机科学学院 甘肃 兰州 730030）

0 引言

随着数字化转型的快速发展，软件行业成为了当今经济中最具活力和潜力的领域之一。 在这个充满机遇和挑战的领域，优秀的用户体验是一个至关重要的环节，因为它可以直接影响软件产品的市场竞争力和商业价值。 而实现优秀用户体验的过程中，用户界面设计则是其中最关键的方面之一。 一个简洁、易用、美观的用户界面能够让用户更轻松地理解和使用软件，提高效率和便捷性。 然而，在实际开发过程中，设计出符合用户需求和预期的用户界面却不是一件容易的事情。

为了解决这些问题，本文提出了一种基于即时模式图形用户界面（immediate mode graphical user interface，ImGui）的跨平台可视化用户界面设计方法。 ImGui 是一种高效、轻量级的用户界面设计库，适用于多种编程语言和操作系统平台。 它采用即时模式绘图技术，使用户界面渲染速度更快且更容易实现。 该方法可以帮助开发者更轻松、高效地设计出优秀的用户界面。 通过使用图形化界面设计工具，开发人员可以快速创建和编辑用户界面，并在不同的操作系统和平台上运行。 这种方法还允许开发者通用一套代码库，在跨多个平台时实现一致性，从而提高代码的可维护性和可扩展性。

1 ImGui 框架的介绍

ImGui 又称Dear ImGui，相比于传统的应用程序开发框架（QtToolkit， Qt） 等图形用户界面（graphical user interface， GUI）设计工具，它是一种轻量级的开发框架，是不依赖于外部库的即时模式GUI 图形开发工具。

1.1 ImGui 框架的优点

（1）易于使用：ImGui 使用C++编写，且核心代码量较少，设计简单，易于学习和使用。 用户不需要专业的图形设计知识，只需基本的图形学知识即可轻松上手。

（2）跨平台：ImGui 被设计为与任何图形应用程序编程接口（application programming interface， API）集成，使它能够在各种不同的平台之间进行移植，包括Windows、Linux、MacOS X、iOS、Android 等操作系统。

（3）轻量级高效：ImGui 专注于提供高效简洁的用户界面（user interface， UI）设计，不需要一些其他的庞大的GUI 库。

（4）低开销：ImGui 是一种“即时模式”GUI 框架，它并不创建和保存应用程序中的GUI 对象。 它只是在每一帧中生成必要的内容，使它具有非常低的开销。

（5）可定制性强：ImGui 框架提供了大量的自定义选项和插件式的扩展功能，使用户可以完全控制GUI 的外观和功能，从而创造出独特的用户体验。

（6）易于调试：ImGui 为用户提供了完整的调试工具，使用户可以更轻松地调试UI 的实现，并最终得到非常高效的可执行文件。

1.2 ImGui 框架的缺点

使用者必须编写大量代码来管理GUI 对象的创建和销毁［1］，例如开发一个项目，经常需要创建许多个GUI 小部件，如果数据非常大，GUI 对象的创建和销毁速度慢会导致UI 响应缓慢；除此之外，与其他UI 库相比，ImGui 的功能相对简单，只提供了一些基本控件和图形绘制功能，不能满足所有的UI 需求，需要在应用中进行二次开发，由于ImGui 的设计思路适用于需要快速创建原型或小型项目，因此不适合用于大型、复杂的工程项目。

2 ImGui 在不同场景下的应用

ImGui 在游戏开发中有着广泛的应用，可以作为游戏引擎的默认UI 框架，例如Unity3D、Unreal Engine 等都支持集成ImGui，极低的渲染消耗使ImGui 只需要一次性渲染整个UI，这种方式比传统GUI 所需的大量事件处理和重复渲染要少得多，从而减少了开放式图形库（open graphics library， OpenGL）和DirectX API 的调用次数。 同时ImGui 提供了极大的绘图控制，包括对布局、对鼠标、键盘事件的全控制、Texture Pack、样式、语言等。 这些都使得ImGui 可以根据游戏引擎的特定需求提高性能和渲染效率；ImGui 可以轻松实现动态布局，能够根据分辨率、显示比例和其他变化因素自动适应UI 布局，从而更好地适应各种屏幕大小。 此外，与传统的图形界面库不同，ImGui很容易定制。 用户可以轻松地编写定制功能，使其满足程序的特定需求。

由于其超低的UI 开销和省时省力的特点，ImGui 在快速开发用户界面方面非常有优势。 另外，ImGui 的易于定制和跨平台支持也使其成为开发人员的不二之选，能够快速创建自定义UI 元素，以适应各种特定的应用程序需求。 此外，ImGui 的安全性和社区支持度高，也使得开发人员更加信任它。 总之，ImGui 是一个十分优秀的用户界面框架，也是开发人员完成各种领域的应用程序所欣赏的工具。

2.1 Web 项目中实现ImGui 界面

Web Assembly 是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C／C++／rust／go 等语言提供一个编译目标，以便它们可以在Web 浏览器上运行［2］。 它被设计为可以与JavaScript 共存，允许两者一起工作，而ImGui 是一个用于创建用户界面的工具库，它可以用于创建图形化用户界面和各种控件，通过将C++编写的Dear ImGui 项目编译为Web Assembly（WASM）二进制文件，并使用Emscripten 将其部署到Web 上，可以在浏览器中运行ImGui 界面，同时利用GLES 3.0 实现图形渲染。 此组合的优势在于无需安装任何本地软件，在Web 上可以实现包括用户交互界面、数据监测、数据可视化等功能，且在不同平台上都能够获得不错的性能表现［3］，见图1。 传统的基于JavaScript 的Vue.js框架，用于构建现代Web 应用程序，具有易用性、可扩展性和可重用性等优点，它可以帮助设计者快速构建出美观的用户界面。 然而，Vue. js 的一个明显劣势是它的性能，Vue.js 需要在浏览器中解析和执行大量的JavaScript 代码，这可能会导致较慢的加载速度和响应时间［4］，相比之下Dear ImGui+Web Assembly+GLES 3.0 在实现Web 的一些类似数据监测系统用户界面时，可以提供更快的加载速度、响应时间和渲染性能，为其实现方案提出了另一种思路。

图1 Web 界面展示

2.2 在游戏调试中使用ImGui

ImGui 库允许在游戏运行时直接调试和修改游戏状态和变量，其原理是通过在游戏循环中实时创建、更新和渲染用户界面，使用户能够在游戏运行时查看和修改游戏状态和变量。

ImGui 的工作原理可以归纳为以下几个步骤：

（1）在游戏的初始化函数中创建ImGui 上下文。

（2）在每帧更新之前调用ImGui 函数以更新界面状态。

（3）在游戏的渲染循环中调用ImGui 函数，以显示调试信息。

（4）在游戏结束时清除ImGui 上下文。

在游戏运行时，ImGui 库通过创建、更新和渲染界面来实时显示和修改游戏状态和变量。 ImGui 的界面是通过在每帧更新时动态生成的，因此可以随时添加或删除组件。 ImGui 提供了各种不同的组件，如文本框、按钮、滑块、下拉菜单等，可以方便用于游戏调试。 在ImGui 库中，所有的UI 元素都是立即模式，意味着每帧都必须重新创建并渲染。 ImGui 库使用GPU 加速来渲染UI 元素，因此其性能较高。

此外，由于ImGui 库的代码量很小，所以它可以轻松地集成到游戏引擎中，在主流的开发引擎Unity 和Unreal Engile 中可以使用ImGui 插件或第三方插件来添加ImGui界面。 可以轻松地将ImGui 界面集成到游戏中。 见图2。同时，ImGui 插件还支持与编辑器进行交互，并在运行时实时查看和修改游戏状态和变量，以帮助开发者更轻松地调试和开发游戏，而不会影响游戏的性能和稳定性。 总之，ImGui 库是一种快速、灵活且易于使用的调试工具，从而加快开发进程和提高游戏质量，部分示例代码如下：

图2 调用ImGui 调试游戏

2.3 使用ImGui 开发登录器

在应用程序开发中，登录器是一个必不可少的组件。传统的登录器通常使用传统的GUI 库（如Windows Forms、WPF、Qt 等）来实现。 这种方式需要编写大量的代码，同时还需要花费很长的时间来创建和调试GUI 界面，增加了开发时间和开发成本［5-6］。 相比之下，使用ImGui 开发登录器具有以下优点：

（1）易于实现和快速迭代：使用ImGui 可以快速构建简单而美观的GUI 界面。 ImGui 的API 简单易用，使用者只需几行代码就可以创建和修改GUI 元素。 此外，ImGui提供了实时预览功能，可以让开发者快速看到所做的更改，加快了迭代速度。

（2）跨平台支持：传统的GUI 库通常是为特定平台设计的，这意味着在不同平台上使用时需要进行适配和调试。 相比之下，ImGui 是一个跨平台的GUI 库，可以在各种平台上使用，包括Windows、MacOS、Linux 等。

（3）更少的开发成本：传统的GUI 库需要编写大量的代码来创建和修改GUI 界面。 相比之下，ImGui 的API 简单易用，减少了编写代码的时间和工作量。 此外，ImGui还提供了各种自定义主题和控件，可以快速创建独特的GUI 界面，从而减少了开发成本。

（4）更好的性能表现：传统的GUI 库通常需要在渲染时重新计算并绘制所有GUI 元素，这可能会影响性能。相比之下，ImGui 使用了高效的渲染机制和基于GPU 的即时渲染技术，可以提高渲染性能和绘制效率，从而提高了应用程序的运行速度和用户体验［7］。

总之，相比传统的GUI 库，使用ImGui 开发应用程序登录器具有更低的开发成本、更好的性能表现、更快的迭代速度和跨平台支持等优点。 图3 为使用ImGui 制作的登录器。

图3 使用ImGui 制作的登录器

3 结语

综上所述，基于ImGui 的跨平台可视化用户界面设计具有高度的灵活性和可定制性，能够大大提高开发效率和用户体验，通过不断的实践和探索，可以深入理解其内部原理和实现方式。 在未来，ImGui 框架将会在更多的领域中得到广泛应用，并且持续为用户界面设计和开发领域带来新的革新和突破。