친애하는 ImGui 라이브러리 소개

개발자로서 우리 중 많은 사람들이 프로그램에 그래픽 인터페이스를 도입하는 고통에 직면하고 있다.기존의 GUI 라이브러리는 디버깅과 같은 다양한 작업에 사용할 수 있는 도구를 만드는 경우 복잡성을 가중시킵니다.여기에는 빠르고 쉽게 만들 수 있는 라이브러리loggers, profilers, debuggers, 심지어 entire game making editor가 있습니다.여기에 소개된 전체example는 Github에서 얻을 수 있습니다.
Dear ImGui는 놀라운 C++ GUI 라이브러리로 주로 게임 개발에 사용된다.이 프로젝트는 소프트웨어를 개발하여 마성이공대학의 허가를 받았다.친애하는 임구는 소위 Immediate Mode GUI paradigm를 사용하여 단순성과 생산력에 전념한다.
온-디맨드 모드 GUI는 기존 보존 모드 인터페이스와 달리 각 프레임에 작은 위젯을 만들고 그리는 것이지 먼저 위젯을 만들고 리셋을 추가하는 일반적인 방법이 아닙니다.이런 모델의 일부 장점은 사용자 인터페이스가 당신의 데이터에 더욱 가깝고 빠른 원형화를 허용하는 것이다.
친애하는 ImGui는 주로 개발자를 위해 설계된 것으로 내용 창설과 디버깅 도구에 사용됩니다.렌더기는 렌더링 데이터를 제공하는 도구를 제공해야 하기 때문에, 서로 다른 창과 이벤트 처리 라이브러리 (예: GLFW, SDL2, GLUT) 의 귀속과 여러 렌더기 (예: OpenGL, DirectX, Vulkan 의 귀속을 쉽게 통합할 수 있습니다.
친애하는 ImGui는 창, 태그, 입력 상자, 진행률 표시줄, 버튼, 슬라이더, 트리 등 여러 작은 위젯을 포함합니다. 다음 그림에서 몇 가지 예를 볼 수 있습니다.

친애하는 ImGui를 애플리케이션에 통합

ImGui의 전형적인 용도는 콘텐츠 생성이나 게임 개발 도구 같은 3D 파이프를 지원하는 프로그램이 있으면 GUI를 추가하는 것입니다.우리 응용 프로그램에서 ImGui를 통합하는 것이 얼마나 쉬운지 봅시다.우리의 예제 응용 프로그램은 OpenGL3을 사용하여 삼각형을 렌더링합니다.GLFW를 사용하여 창 생성 및 이벤트 처리를 관리합니다.ImGui는 렌더링 시스템과 플랫폼에 독립되어 있기 때문에 렌더링 시스템에 귀속을 도입해야 합니다.다행히도 사랑하는 임구이의 리포에는 많은 예비 귀속이 있습니다.친애하는 ImGui v1을 사용할 것이기 때문입니다.69 이것들은 우리가 필요로 하는 것이다.

imgui_impl_opengl3.cpp

imgui_impl_opengl3.h

imgui_impl_glfw.cpp

imgui_impl_glfw.h

main.cpp에서 이 기능을 실현하는 최저 코드를 제공하였다.먼저 렌더링 창을 초기화하고 ImGui 컨텍스트와 지원 플랫폼 및 렌더링 바인딩을 초기화해야 합니다.필요한 경우 렌더링 스타일을 변경할 수도 있습니다.

// 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와 차별화되는 기본 애플리케이션 사이클에 들어갑니다.

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);
}

순환이 끝난 후, 우리는 반드시 약간의 정리를 진행해야 한다.

ImGui_ImplOpenGL3_Shutdown();
ImGui_ImplGlfw_Shutdown();
ImGui::DestroyContext();

이것이 바로 우리가 얻은 것이다.

예를 들어 우리는 삼각형의 위치/방향과 색깔을 바꾸고 싶다.슬라이더와 색상 선택기를 호출하고 셰이더를 통해 삼각형에 데이터를 전달하면 간단합니다.

// 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]);

그리고 몇 가지 기본적인 제도 도구도 있다.

다른 라이브러리 위젯과 옵션을 탐색하고 싶다면, 가장 좋은 방법은 ImGui::ShowDemoWindow() 에 전화해서 다른 예를 보는 것이다.

코난과 프로젝트를 세우다

코난과 ImGui를 사용하는 프로젝트를 세우는 데 몇 분밖에 걸리지 않는다.A Conan package for ImGui가 코난 중심에 생성되어 추가되었습니다.여기에 표시된 예는 Windows 및 Visual Studio 2017을 사용하지만 MacOS or Linux에서는 매우 유사합니다.
만약 당신이 한번 시도하고 싶다면, 코난 예시 라이브러리에서 모든 파일을 다운로드할 수 있습니다.

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

우선 CMake 프로젝트를 살펴보겠습니다.GLFW와 OpenGL3의 귀속과 OpenGL 착색기와 파일 읽기를 처리하는 두 개의 파일이 있습니다.응용 프로그램을 다시 컴파일할 때마다 렌더링된 삼각형 셰이더를 작업 디렉토리에 복사합니다.

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
# CMake doesn't search for modules in default 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이 필요합니다.우리가 이미 토론한 GLFW 라이브러리를 제외하고는 OpenGL 함수 불러오는 것을 처리하기 위해 GLEW 라이브러리가 필요합니다.우리는 cmake_multi를 사용하여 디버깅과 발표 설정을 생성할 것입니다.GLFW 및 OpenGL3 다운로드에 필요한 바인딩을 다운로드하는 가져오기 섹션도 추가되었습니다.

[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

이제 프로젝트를 구축하고 프로그램을 실행합시다.

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

결론

친애하는 ImGui는 3D 파이프를 지원하는 응용 프로그램에 거의 틈새 없이 집적할 수 있는 기능이 강한 라이브러리입니다.그것은 디버깅 소프트웨어 (예를 들어 분석기, 기록기, 또는 그 어떠한 종류의 대상 편집기) 를 만드는 데 아주 좋은 도구가 많다.이 밖에 현재 docking나multiple viewports 등 새로운 기능을 개발하고 있다.이제 이 라이브러리를 당신의 코드와 상호작용할 때가 되었습니다.