Tutorial OpenGL uso de ImGui

Construcción de interfaces gráficas de usuario con la biblioteca externa IMGUI para aplicaciones gráficas 3D creadas con la API OpenGL Moderna, aunque IMGUI es compatible con otras APIs gráficas como DirectX o Vulkan.

Esta biblioteca cuenta con un gran número de controles, ventanas y menús que podemos utilizar de una manera sencilla y muy eficiente, es posible utilizar fuente TTF y además es posible cambiar el diseño de las ventanas y los controles.

En tutoriales anteriores vimos la biblioteca AntTeweakBar que es otra alternativa a la hora de crear GUI en aplicaciones gráficas.

ImGui OpenGL 3.2

Para agregar ImGUI a nuestro proyecto solo debemos incluir los siguientes archivos:

  • imgui.cpp
  • imgui.h
  • imgui_demo.cpp
  • imgui_draw.cpp
  • imgui_internal.h
  • imconfig.h (empty by default, user-editable)
  • stb_rect_pack.h
  • stb_textedit.h
  • stb_truetype.h

Esta biblioteca genera una lista de comandos de dibujo, es nuestra responsabilidad implementar el código que dibujará cada uno de estos comandos, en la carpeta /imgui/examples encontrarás varios ejemplos del uso de IMGUI para diferentes APIs dentro de cada proyecto de ejemplo verás el archivo imgui_impl_*.cpp este archivo contiene el código encargado de renderizar los comandos de dibujo producidos por IMGUI.

En este tutorial usaremos el archivo imgui_impl_glfw_gl3.cpp modificado para utilizar glad y lo llamaremos imgui_impl_glfw_glad.cpp.

ImGui_ImplGlfwGlad_Init(window, true);

ImFontConfig config;
config.OversampleH = 3;
config.OversampleV = 1;

ImGuiIO& io = ImGui::GetIO(); 
io.Fonts->AddFontFromFileTTF(PROJECT_SOURCE_DIR "../resources/font.ttf", 15.0f, &config)

Este fragmento de código inicializa la biblioteca y carga una fuente TTF, lo segundo no es obligatorio ya que contamos con una fuente integrada en la biblioteca.

while (!glfwWindowShouldClose(window))
{
    glfwPollEvents();

    ImGui_ImplGlfwGlad_NewFrame();

    const ImVec2 size(300, 200);
    bool open = true;
    float alpha = 0.90f;
    ImGuiWindowFlags windowFlags = ImGuiWindowFlags_NoCollapse | ImGuiWindowFlags_ShowBorders ;
    std::string textBtn = "(" + std::to_string(click_count) + ") Clicks";

    ImGui::Begin("Primera ventana", &open, size, alpha, windowFlags);
        ImGui::Text("Muestra un texto en la ventana.");
        if (ImGui::Button(textBtn.c_str())) click_count++;
    ImGui::End();

    int display_w, display_h;
    glfwGetFramebufferSize(window, &display_w, &display_h);
    glViewport(0, 0, display_w, display_h);
    glClear(GL_COLOR_BUFFER_BIT);

    ImGui::Render();
    
    glfwSwapBuffers(window);
}

Llamamos a ImGui_ImplGlfwGlad_NewFrame() en cada frame que dibujamos, para crear una ventana usamos ImGui::Begin podemos indicar los parámetros iniciales de la ventana, con ImGui::End terminamos, dentro de estas dos funciones ubicamos las llamadas para la creación de controles, nosotros agregaremos un texto y un botón, para dibujar la gui debemos llamar a ImGui::Render.  

En la llamada a ImGui::Begin indicamos el nombre de la ventana y si la misma esta abierta, el tamaño, el nivel de opacidad y las banderas de configuración de la ventana, si lo deseamos podemos indicar solo el nombre, la variable open se establece a false al hacer clic sobre el botón de cerrar ubicado en la parte superior derecha, en este caso podemos no dibujar la ventana lograr el efecto de cierre.

imgui opengl moderno

Comprobamos si el usuario hizo clic de manera muy simple, if (ImGui::Button(textBtn.c_str())) click_count++; nuestro ejemplo lleva un conteo de la cantidad de clics.

ImGui::ShowTestWindow() muestra una ventana con todos los controles, configuraciones, ventanas, fuentes y todo lo que podemos hacer con IMGUI, solo debemos ver el ejemplo en funcionamiento y su código correspondiente “/imgui/imgui_demo.cpp” para aprender a utilizar esta potente herramienta.  

imgui demo gl

if (show_test_window)
{
    ImGui::SetNextWindowPos(ImVec2(650, 20), ImGuiSetCond_FirstUseEver);
    ImGui::ShowTestWindow(&show_test_window);
}

Proyecto en GitHub: Tutorial ImGui OpenGL

Comentarios

Temas relacionados

Entradas populares de este blog

tkinter Grid

tkinter Canvas

Histogramas OpenCV Python

Python Binance API