C++轻量级界面开发框架ImGUI介绍

  如果从事过C++ Windows客户端开发，大家对MFC、Qt、DuiLib等各种DirectUI应该有了解，本篇给大家介绍一个超级轻量级的C++开源跨平台图形界面框架ImGUI.

ImGUI简介

  ImGUI主要用于游戏行业，所有的控件都需要手绘，直接用dx/opengl来实现。
  ImGUI仓库：https://github.com/ocornut/imgui
  ImGUI（立即模式图形用户界面）是一个流行的C++界面库，特别受到游戏开发者和实时应用程序开发者的欢迎。与传统的 retained mode GUI（保留模式GUI）不同，ImGUI采用的是立即模式（immediate mode）的方法来构建GUI。

  以下是ImGUI的核心实现原理：

1. 立即模式 vs. 保留模式:

   • 保留模式: 在这种模式下，用户首先创建并设置GUI小部件（如按钮、标签、滑块等），然后GUI库会处理渲染和事件。这些小部件在内存中通常会长时间存在，直到明确被销毁。
   • 立即模式: 用户在每一帧中描述要显示的GUI元素，并直接获取交互反馈，比如按钮是否被点击。不存在明确的小部件对象；只是函数调用和它们的返回值。

2. 简化的API:

   if (ImGui::Button("Click Me")) {
       // handle button click
   }
   1
   2
   3

   如上述代码所示，Button函数既负责渲染按钮，也负责检查按钮是否被点击。这大大简化了编码过程。

3. 无状态: 因为GUI元素没有持久的对象表示，所以GUI的状态通常由应用程序的变量维护。这样，你不需要查询GUI小部件的状态，只需查看你自己的变量。

4. 渲染:

   • ImGUI并不直接负责渲染，而是生成一个渲染指令列表。这些指令可以被转换为具体图形API的命令，例如OpenGL或DirectX。
   • 这种方式使得ImGUI可以在各种图形API上轻松地进行端到端的渲染。

5. 输入处理: ImGUI不直接从操作系统获取输入。相反，应用程序在每一帧中提供当前的输入状态，如鼠标位置、按键状态等。

6. 灵活性: 因为ImGUI生成的是渲染指令，并不与特定的渲染技术或图形API紧密绑定，所以它可以被轻松地集成到各种应用中，无论是使用OpenGL、DirectX还是其他的图形API。

  总结：ImGUI的实现原理主要基于立即模式的设计思路，它简化了GUI的构建过程，使得开发者可以更加直观、快速地编写界面代码，而不需要管理复杂的状态和对象生命周期。此外，由于其与特定的渲染技术和图形API解耦，这也增加了其跨平台和集成的灵活性。

  ImGUI又称为Dear ImGui，它是与平台无关的C++轻量级跨平台图形界面库，没有任何第三方依赖，可以将ImGUI的源码直接加到项目中使用，也可以编译成dll, ImGUI使用DX或者OpenGL进行界面渲染，对于画面质量要求较高，例如客户端游戏，4k/8k视频播放时，用ImGUI是很好的选择，当然，你得非常熟悉DirectX或者OpenGL，不然就是宝剑在手，屠龙无力。相对于Qt、MFC、DuiLib、SOUI等，ImGUI的拓展性更好，也更轻量级，当然对于开发者的要求也更高.

  下载ImGUI代码后，用vs2019可以直接打开，编译，运行，sln路径如下：

  sln路径：imgui/examples/imgui_examples.sln

  运行win32_dx12界面如下：

  ImGUI没有类似于Qt/MFC这种，可以拖拽控件进行搭建界面，ImGUI的所有控件都必须手写实现。ImGUI的demo基本提供了所有控件、图表等的实现，源码也有，可以对照的学习。
  关于ImGUI的详细介绍，可以参考github.

  注意这段话
  This library is available under a free and permissive license, but needs financial support to sustain its continued improvements. In addition to maintenance and stability there are many desirable features yet to be added. If your company is using Dear ImGui, please consider reaching out.

ImGUI的界面实现

  基本控件：label、text、checkbox、slider

  窗体控件：树形控件、图片控件、ComboBox、列表控件、菜单栏等

  根据官方提供的demo来看，基本满足开发要求。

实现登录窗口

  使用ImGUI创建一个简单的登录窗口相对容易。以下是一个基本示例，展示如何用ImGUI创建一个包含用户名和密码输入框以及登录按钮的登录窗口：

  首先确保你已经正确设置了ImGUI。下面是一个使用ImGUI创建的登录窗口示例代码：

#include "imgui.h"

// 假设这是你的应用程序或游戏循环内的代码

// 声明一些变量用于存储输入
static char username[32] = "";
static char password[32] = "";
static bool show_login_window = true;

void ShowLoginWindow()
{
    if (!show_login_window)
        return;

    ImGui::Begin("Login Window", &show_login_window); // 开始一个新窗口

    // 添加输入框
    ImGui::InputText("Username", username, IM_ARRAYSIZE(username));
    ImGui::InputText("Password", password, IM_ARRAYSIZE(password), ImGuiInputTextFlags_Password);

    // 添加登录按钮
    if (ImGui::Button("Login"))
    {
        // 这里你可以添加登录验证的代码
        if (/*验证 username 和 password*/)
        {
            show_login_window = false;
            // 登录成功后的操作...
        }
        else
        {
            // 登录失败，例如显示一个错误消息...
        }
    }

    ImGui::End(); // 结束窗口
}

void Render()
{
    // 其他的渲染代码...

    ShowLoginWindow();
    ImGui::Render();
}

int main()
{
    // 初始化你的应用或游戏...

    while (!/*退出条件*/)
    {
        // ... 其他的更新代码

        Render();
    }

    return 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

  这个示例为你创建了一个包含用户名、密码输入框和登录按钮的窗口。当用户填写信息并点击“登录”按钮时，你可以在后台进行验证。如果验证成功，你可以关闭登录窗口或者进行其他操作。

  请注意，这个例子只是一个简单的展示，并没有真正的验证机制。在实际应用中，你需要添加适当的验证代码，并确保密码等敏感信息的安全性。

技术选型

  在PC端技术选型时，如果公司有音视频、图形图像、4k/8k视频业务，可以考虑一下使用ImGUI，毕竟是直接使用DX/OpenGL来进行绘制渲染，其它功能就直接使用C++来实现。

如何使用ImGUI

  参考imgui的示例代码，如下所示：

imgui github也有一些简单的介绍，可以参考，例如:
集成
  在大多数平台上，当使用c++时，你应该能够使用imgui_impl_xxxx后端的组合而不需要修改(例如imgui_impl_win32.cpp + imgui_impl_dx11.cpp)。如果你的引擎支持多个平台，考虑使用更多的imgui_impl_xxxx文件，而不是重写它们:这将为你减少工作，你可以让亲爱的ImGui立即运行。如果您愿意，可以稍后决定使用自定义引擎函数重写自定义后端。
  将ImGui整合到你的自定义引擎中需要1)连接鼠标/键盘/手柄输入2)将纹理上传到你的GPU/渲染引擎3)提供能够绑定纹理并渲染纹理三角形的渲染功能。示例/文件夹中填充的应用程序就是这样做的。如果你是熟练掌握这些概念的资深程序员，那么将Dear ImGui集成到定制引擎中应该不需要2个小时。请务必花时间阅读FAQ、评论和一些示例/应用程序!

官方维护的后端/绑定(在存储库中):

• 渲染器:DirectX9, DirectX10, DirectX11, DirectX12, Metal, OpenGL/ES/ES2, SDL_Renderer, Vulkan, WebGPU。
• 平台:GLFW, SDL2, Win32, Glut, OSX, Android。
• 框架:Emscripten, Allegro5, Marmalade。

第三方后端/绑定wiki页面:

• 语言:C, c#和:Beef, ChaiScript, Crystal, D, Go, Haskell, Haxe/hxcpp, Java, JavaScript, Julia, Kotlin, Lobster, Lua, Odin, Pascal, PureBasic, Python, Ruby, Rust, Swift…
• 框架:AGS/Adventure Game Studio, Amethyst, Blender, bsf, Cinder, Cocos2d-x，勤奋引擎，Flexium, GML/Game Maker studi2, GLEQ, Godot, GTK3+OpenGL3, Irrlicht引擎，LÖVE+LUA, Magnum, Monogame, NanoRT, cine, niine Game Lib，任天堂3DS & Switch (homebrew)， Ogre, openFrameworks, OSG/OpenSceneGraph, Orx, Photoshop, px_render, Qt/QtDirect3D，SDL_Renderer, sml, Sokol, Unity，虚幻引擎4,vtk, VulkanHpp, VulkanSceneGraph, Win32 GDI, WxWidgets。
• 注意，C绑定(cimgui)是自动生成的，你可以使用它的json/lua输出来生成其他语言的绑定。