价值投资 长期主义 编程 美食 旅行 梦想 参禅 悟道

0%

Dear ImGui library简介及入门

发表于 更新于

Dear ImGui library 简介

作为开发人员，我们都面临着向程序引入图形界面的痛苦。传统的GUI库增加了一定程度的复杂性，如果您正在制作用于调试的工具，则可能不需要这些复杂性。在这里，我们提供了一个库，使创建记录器、配置文件器、调试器甚至整个游戏编辑器成为可能。这里介绍的整个示例可在Github上查阅。

Dear ImGui?

Dear ImGui 是一个令人惊叹的C++ UI 库，主要应用在游戏开发。该项目是开源软件，基于MIT license。Dear ImGui专注于简单性和生产力，使用的是Inmediate Mode GUI paradigm。

即时模式GUI不同于传统的保留模式界面，因为小部件是在每个帧上创建和绘制的，而传统的方法是首先创建小部件并向其添加回调。这种模式的一些好处是您的UI“更接近”您的数据，并且它允许快速原型化。

Dear ImGui主要设计用于开发人员在内容创建和调试工具中使用..它是渲染器不可知论的方式，您必须提供工具来呈现数据，但它非常容易集成到您自己的代码中，因为它有多个绑定的不同窗口和事件处理库（如GLFW，SDL2和GLUT）和多个渲染器（如OpenGL，DirectX和Vulkan）。

Dear ImGui配备了许多小部件，如窗口、标签、输入框、进度条、按钮、滑块、树等。你可以在下面的图片中看到一些例子。

![](Dear ImGui library简介及入门/conan-imgui-widgets.gif)

在应用中集成Dear ImGui

ImGui的典型用途是当您已经有了一个启用3D管道的应用程序，如内容创建或游戏开发工具，您希望在其中添加GUI。让我们看看在我们的应用程序中集成ImGui是多么容易。我们的示例应用程序使用OpenGL3呈现三角形。我们将使用GLFW管理窗口创建和事件处理。由于ImGui独立于渲染系统和平台，我们必须为我们的渲染系统引入一些绑定。幸运的是， Dear ImGui的设计中包含预先的绑定，比如我们在使用的Dear ImGui v1.69中我们包含以下头文件:

使此工作的最小代码在main.cpp中。首先，初始化用于呈现的窗口，然后必须初始化DearImGui上下文以及助手平台和Renderer绑定。如果您愿意，也可以更改渲染样式。

1
2
3
4
5
6
7
8
9
// Setup Dear ImGui context
IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO &io = ImGui::GetIO();
// Setup Platform/Renderer bindings
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init(glsl_version);
// Setup Dear ImGui style
ImGui::StyleColorsDark();

然后，您进入主应用程序循环，在那里您可以清楚地看到与经典保留模式GUI的区别。

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
while (!glfwWindowShouldClose(window))
{
    glfwPollEvents();
    glClearColor(0.45f, 0.55f, 0.60f, 1.00f);
    glClear(GL_COLOR_BUFFER_BIT);

    // feed inputs to dear imgui, start new frame
    ImGui_ImplOpenGL3_NewFrame();
    ImGui_ImplGlfw_NewFrame();
    ImGui::NewFrame();

    // rendering our geometries
    triangle_shader.use();
    glBindVertexArray(vao);
    glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_INT, 0);
    glBindVertexArray(0);

    // render your GUI
    ImGui::Begin("Demo window");
    ImGui::Button("Hello!");
    ImGui::End();

    // Render dear imgui into screen
    ImGui::Render();
    ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

    int display_w, display_h;
    glfwGetFramebufferSize(window, &display_w, &display_h);
    glViewport(0, 0, display_w, display_h);
    glfwSwapBuffers(window);
}

当然，当循环结束时，做一些清理。

1
2
3
ImGui_ImplOpenGL3_Shutdown();
ImGui_ImplGlfw_Shutdown();
ImGui::DestroyContext();

所以，这就是我们得到的：

例如，让我们说，我们想要改变三角形的位置/方向和颜色。这就像调用一些滑块和选色器，并通过着色器将数据传递给三角形一样简单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// render your GUI
ImGui::Begin("Triangle Position/Color");
static float rotation = 0.0;
ImGui::SliderFloat("rotation", &rotation, 0, 2 * PI);
static float translation[] = {0.0, 0.0};
ImGui::SliderFloat2("position", translation, -1.0, 1.0);
static float color[4] = { 1.0f,1.0f,1.0f,1.0f };
// pass the parameters to the shader
triangle_shader.setUniform("rotation", rotation);
triangle_shader.setUniform("translation", translation[0], translation[1]);
// color picker
ImGui::ColorEdit3("color", color);
// multiply triangle's color with this color
triangle_shader.setUniform("color", color[0], color[1], color[2]);

还有一些基本的绘图工具。

![](Dear ImGui library简介及入门/conan-imgui-logo.png)

如果您想探索不同的库小部件和选项，最好的方法是调用ImGui：ShowDemoWindow（）并查看不同的示例。

Setting up a project with Conan

使用Connan建立一个使用ImGui的项目是一个几分钟的问题。这里显示的示例是使用Windows和Visual Studio2017，但在MacOS或Linux中非常相似。

如果您想尝试一下，可以从Connan示例中下载所有文件：

1
2
git clone https://github.com/conan-io/examples.git
cd examples/libraries/dear-imgui/basic

首先，让我们检查CMake项目。它有GLFW和OpenGL3的绑定，还有两个文件来处理OpenGL阴影和文件读取。它还将复制每次重新编译应用程序时呈现三角形的着色器到工作目录。

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
cmake_minimum_required(VERSION 3.0)
project(dear-imgui-conan CXX)

set(CMAKE_PREFIX_PATH ${CMAKE_BINARY_DIR})
set(CMAKE_MODULE_PATH ${CMAKE_BINARY_DIR})

# CONFIG option is important so that CMake doesnt search for modules into the default modules directory
find_package(imgui CONFIG)
find_package(glfw CONFIG)
find_package(glew CONFIG)

add_executable( dear-imgui-conan 
                main.cpp 
                opengl_shader.cpp
                file_manager.cpp
                opengl_shader.h 
                file_manager.h 
                bindings/imgui_impl_glfw.cpp
                bindings/imgui_impl_opengl3.cpp
                bindings/imgui_impl_glfw.h
                bindings/imgui_impl_opengl3.h 
                assets/simple-shader.vs
                assets/simple-shader.fs )

add_custom_command(TARGET dear-imgui-conan
    POST_BUILD
    COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_SOURCE_DIR}/assets/simple-shader.vs ${PROJECT_BINARY_DIR}
    COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_SOURCE_DIR}/assets/simple-shader.fs ${PROJECT_BINARY_DIR}
)

target_compile_definitions(dear-imgui-conan PUBLIC IMGUI_IMPL_OPENGL_LOADER_GLEW)

target_link_libraries(dear-imgui-conan imgui::imgui glfw::glfw glew::glew)

我们还需要conanfile来声明它所依赖的库。除了GLF W库，我们还谈到了我们需要GLE W库来处理OpenGL函数加载。我们将使用cmake_multi为Debug和Release配置生成项目。还添加了一个导入部分，以下载GLFW和OpenGL3所需的绑定。

1
2
3
4
5
6
7
8
9
10
11
12
13
[requires]
imgui/1.69@bincrafters/stable
glfw/3.2.1@bincrafters/stable
glew/2.1.0@bincrafters/stable

[generators]
cmake_find_package_multi

[imports]
./misc/bindings, imgui_impl_glfw.cpp -> ../bindings
./misc/bindings, imgui_impl_opengl3.cpp -> ../bindings
./misc/bindings, imgui_impl_glfw.h -> ../bindings
./misc/bindings, imgui_impl_opengl3.h -> ../bindings

现在让我们构建项目并运行应用程序。

1
2
3
4
5
6
7
8
9
cd dear-imgui-conan-example
mkdir build
cd build
conan install .. -s build_type=Release
conan install .. -s build_type=Debug
cmake .. -G "Visual Studio 15 2017 Win64"
cmake --build . --config Release
cd Release
dear-imgui-conan

结论

Dear ImGui是一个强大的库，具有易于使用的API，它几乎无缝地集成到3D管道启用的应用程序中。它有很多小部件，可以成为一个很好的工具来制作调试软件，如分析器、记录器或任何类型的对象编辑器。此外，目前正在开发新的功能，如对接或多个视图端口。现在是时候体验Dear ImGUI了，并使它与您自己的代码交互了！

参考连接

  1. Using ImGui with modern C++ and STL for creating awesome game dev tools. Part 2. Some tips and tricks.
  2. https://github.com/ocornut/imgui
  3. An introduction to the Dear ImGui library

https://conan.io/

万水千山总是情，打赏一块行不行!