D4项目中ImGui的引入与使用

下载

选择了docking标签的版本，然后解压zip文件

解压后打开文件夹，将imgui\imgui-docking目录下的一系列.h,.cpp文件移动到VCXPROJ文件的这个目录下。

然后打开backends文件夹，根据项目选择所需要的文件，当前项目示例：

也将其移动至同样的目录下（我在这里新建了一个文件夹来存放以上所有文件，但注意这个文件夹也要在和VCXPROJ文件相同的目录下）

将该文件夹包括在项目中后，在项目属性中的 c++----常规----附加包含目录中添加“imgui”,之后即可在文件中引入

#include"imgui.h"
#include"imgui_impl_glfw.h"
#include"imgui_impl_opengl3.h";

然后初始化

// glfw window creation
//  GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "JUST Map", NULL, NULL);
//  if (window == NULL) {
//      std::cout << "Failed to create GLFW window" << std::endl;
//      glfwTerminate();
//      return -1;
//  }
//  glfwMakeContextCurrent(window);
    //imgui初始化
    IMGUI_CHECKVERSION();
    ImGui::CreateContext(NULL);
    ImGuiIO& io = ImGui::GetIO(); (void)io;

    ImGui::StyleColorsDark();
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init("#version 330"); 

然后再渲染循环中：

 while (!glfwWindowShouldClose(window))
        {
            ImGui_ImplOpenGL3_NewFrame();
            ImGui_ImplGlfw_NewFrame();
            ImGui::NewFrame();
            ...
            ...
            ...
            ImGui::Render();
            ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
            glfwSwapBuffers(window);
            glfwPollEvents();
        }

 即可。

此处发现在之前的函数设置中，由于使用回调函数来捕捉鼠标用来控制视角移动，如果不禁用这个函数，将会导致鼠标不能正常对Imgui绘制的demo窗口进行操作。暂时先禁用了这个回调函数。

试一试

于是我在基于OpenGL330的规范下，写了一个渲染循环，并

        // render loop
        while (!glfwWindowShouldClose(window))
        {
            ImGui_ImplOpenGL3_NewFrame();
            ImGui_ImplGlfw_NewFrame();
            ImGui::NewFrame();

           
            glViewport(0, 0, SCR_WIDTH, SCR_HEIGHT);	
            ProcessInput(window);                                                                               
            glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
            renderer.Clear();
            //imgui绘制--------------------------------------------
            ImGui::Begin("o.0");
            if (ImGui::Button("0.o")) {
                fontDraw = true;
            }
            if (ImGui::Button("=.=")) {
                fontDraw = false;
            }

            ImGui::End();
            
            ImGui::ShowDemoWindow();

            //OpenGL文本绘制----------------------------------
            if (fontDraw) {
                绘制一些字体
            }
            //OpenGL物体绘制--------------------------------------------------------------
                绘制一些物体
            renderer.DrawArrays(planeVa, 6, planeShader);
            //----------------------------------------------------------
            ImGui::Render();
            ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

            glfwSwapBuffers(window);
            glfwPollEvents();
        }

实现这样的效果

bingo！

接下来就是接触了一些控件的绘制函数，并实现了这样的效果。

 这样一来，程序就更加简便且高效了。

接下来，我将学习如何制作一个类似搜索框的控件，并学习怎样更改imgui窗口的设置，做一些更完美的效果，明天我会去完成这些，然后完善函数，并将主函数整理的更加简洁。