526互联

在OpenGL中使用Dear ImGui

发布时间 2023-11-20 16:33:29作者: overxus

在众多GUI库中，Dear ImGui用起来最简单，它很容易集成到程序中，绘制的窗口看起来也还不错。可以用它画出非常炫酷的GUI界面：

图片来自官方Github仓库

而我则不同：无论使用哪个GUI库，画出来的窗口都惨不忍睹。下面简要介绍如何在OpenGL中使用Dear ImGui.

 

1. Dear ImGui简介

以下是Dear ImGui的相关链接：

截至目前(2023/11/20)，最新的Dear ImGui版本为1.89.9.  下载源代码后，主目录下的所有*.h、*.cpp文件都要添加到项目中；在目录backends内，根据使用的后端保留相应的文件。比如我这里的环境是Windows+OpenGL+GLFW, 因此保留了backends内的以下文件：

  • imgui_impl_glfw.cpp
  • imgui_impl_glfw.h
  • imgui_impl_opengl3.cpp
  • imgui_impl_opengl3.h
  • imgui_impl_opengl3_loader.h
  • imgui_impl_win32.cpp
  • imgui_impl_win32.h

这样就基本搞定了。

 

2. 配置和初始化

在目录examples内提供了不同平台下的使用示例。打开工程文件“imgui_examples.sln”，根据我的使用需求，我选择了example_win32_opengl3作为启动项目。打开其中的源文件main.cpp，就能看到示例代码：

可以看到，使用时，首先要包含以下头文件：

#include <imgui.h>
#include <backends/imgui_impl_glfw.h>
#include <backends/imgui_impl_opengl3.h>

我这里已经将Dear ImGui源代码的根目录添加到编译器include的搜索路径中，所以上面#include中用的是尖括号<>，大家可以根据各自的使用场景灵活设置。

 

接下来是一段初始化代码：

IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO(); (void)io;
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;
io.ConfigFlags |= ImGuiConfigFlags_NavEnableSetMousePos;

ImGui::StyleColorsDark();
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init();

上面的ImGui::StyleColorDark()表示设置窗口为暗黑模式，另外还有Light和Classic这两种模式，大家敲代码时能在IDE内看到提示。

 

3. 使用GUI控件

初始化完成后，就可以在窗口的主循环内一遍又一遍地绘制这个窗口啦：

wealth = 1000000  // 假如我现在有一百万元

while (!glfwWindowShouldClose(window)) {
    // ... 前面有其它代码
    
    ImGui_ImplOpenGL3_NewFrame();
    ImGui_ImplWin32_NewFrame();
    ImGui::NewFrame();
    
    {
        ImGui::Begin("ImGui Window");  // 创建一个窗口，设置窗口标题为“ImGui Window”
        
        ImGui::Text("Your wealth is %d yuan.", wealth);  // Text控件，显示一段文本
        
        if (ImGui::Button("Increase")) {  // Button控件，点击后将变量wealth加上一万
            wealth += 10000;
        }
        
        if (ImGui::Button("Decrease")) {  // Button控件，点击后将变量wealth减去一万
            wealth = wealth <= 10000 ? 0 : wealth - 10000;
        }
        
        ImGui::End();  // 有Begin就有End

        ImGui::Render();
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
    }
    
    // ... 后面还有其它代码
}

 运行程序后，就能看到以下窗口：

对于按钮这类GUI控件，在窗口内点击按钮后会使得ImGui::Button(...)返回true, 从而可以在用户点击按钮后编写响应的代码。文本控件Text就没有这样的效果，ImGui::Text(...)并没有返回值。

如果想把两个按钮画在同一行，可以在两个Button间添加一行ImGui::SameLine():

if (ImGui::Button("Increase")) {
    wealth += 10000;
}

ImGui::SameLine();

if (ImGui::Button("Decrease")) {
    wealth = wealth <= 10000 ? 0 : wealth - 10000;
}

修改后，窗口的效果如下：

对于常用的GUI控件，如Combo, Checkbox等等，Dear ImGui都提供了实现。使用前，看看代码中给的示例就好，注意每种控件接受的参数即可。另外，像窗口大小、窗口布局这类设置，也请大家根据自身需求参考代码给的示例，例子写得还是很详细的。

 

4. 显示中文

Dear ImGui在默认情况下只能显示英文，为了让窗口显示中文，还需要启用中文支持。

在之前下载的源代码中，在目录misc内有一个子目录freetype, 此目录下有以下三个文件：

  • imgui_freetype.cpp
  • imgui_freetype.h
  • README.md

其中，README.md文件中给出了启用中文支持的方法：

按照上述3个步骤操作即可：

  1. 安装FreeType, 我是用vcpkg安装的；
  2. 将文件imgui_freetype.h和imgui_freetype.cpp添加到项目中；
  3. 在imconfig.h中添加#define IMGUI_ENABLE_FREETYPE.

imconfig.h是一开始被我们添加到项目的文件之一，#define IMGUI_ENABLE_FREETYPE这一行默认被注释掉了，取消注释即可：

然后在初始化那部分代码的末尾（也就是ImGui_ImplOpenGL3_Init()这一行的后面）添加以下代码：

// 20.0f设置字体大小，可根据需要自行修改
io.Fonts->AddFontFromFileTTF("这里填入你使用的ttf字体文件所在的路径", 20.0f, NULL, io.Fonts->GetGlyphRangesChineseFull());

 将之前代码中的英文描述全部换成中文，然后运行程序，就能看到如下窗口：

 

5. 小结

Dear ImGui这个库非常轻量级，用起来也非常简单，简单但足够强大。总之，使用体验还是不错滴。