OpenGL和Imgui整合入门2

辛琪

2022-02-15 2022-02-15 约 793 字预计阅读 2 分钟次阅读

基于OpenGL的简单渲染器实现

上次讲到配置完环境，这次先从ImGui开始简单介绍

由于我们使用了GLFW作为窗口管理的库，所以ImGui也是与GLFW相辅相成的

ImGui的使用流程大致如下：

1
2
3
4
5
6
7
8
9


ImGui_ImplOpenGL3_NewFrame();
ImGui_ImplGlfw_NewFrame();
ImGui::NewFrame();
{
    ImGui::Begin("Edit");                          // Create a window called "Hello, world!" and append into it.
    //自定义内容
    ImGui::End();
}
ImGui::Render();

在了解创建窗口和GUI之前，我们需要先了解一下渲染器的整体流程，这里有所简化

（实例化GLFW窗口，创建窗口对象 -> 初始化GLAD -> 开始渲染循环 -> 资源回收）

我们需要在创建GLFW窗口后，进行ImGui的绘制，所以在main函数中大概是这么一个流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


int main()
{
    //一些准备工作
    InitGLFW();
    Create_glfw_Window();
    ...
    //---------------------render loop--------------------------------------
    while (!glfwWindowShouldClose(window))
    {
        //------------绘制Imgui-----------------
        RenderImGui();
        //------------渲染工作------------------
        ......
        glfwSwapBuffers(window);//双缓冲绘制
        glfwPollEvents();
    }
    //一些资源释放等收尾工作
    return 0;
}

为了让main函数内的流程更加清晰，我们把绘制GUI和创建窗口的环节单独拎出来，写一个叫GameFrame的头文件来进行管理

 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
34
35
36


namespace GameFrame 
{
    //-------------------------glfw window creation-------------------------------------
    GLFWwindow* Create_glfw_Window()
    {
        GLFWwindow* window = glfwCreateWindow(1200, 800, "OpenGLTest", NULL, NULL);
        if (window == NULL)
        {
            std::cout << "Failed to create GLFW window" << std::endl;
            glfwTerminate();
            //return -1;
        }
        glfwMakeContextCurrent(window);
        glfwSwapInterval(1);
        glfwSetScrollCallback(window, InputManager::scroll_callback);
        glfwSetCursorPosCallback(window, InputManager::mouse_callback);
        glfwSetInputMode(window, GLFW_CURSOR, GLFW_CURSOR_DISABLED);
        return window;
    }
    //-------------------------imgui creation-------------------------------------
    void RenderMainImGui()
    {
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();
        {
            ImGui::Begin("Edit");                          // Create a window called "Hello, world!" and append into it.
            ImGui::Text("Use 'Left Alter' to focus on window");
            //自定义GUI内容
            ImGui::End();
        }

        ImGui::Render();
    }

}

此时就可以很清晰的把main函数的流程表示为

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


InitGLFW();
GLFWwindow* window = GameFrame::Create_glfw_Window();
InitImGui(window);
 while (!glfwWindowShouldClose(window))
 {
        RenderMainImGui()；
        glClearColor();
        ...
 }
 //一些收尾工作

了解大致的流程后就可以开始正式开始编写渲染器了

这里推荐learnOpenGl网站，可以根据上面进行渲染的学习，后续还会介绍一些可能会踩到的坑和一些解决方式

LearOpenGL：https://learnopengl-cn.github.io/

目录

OpenGL和Imgui整合入门2

基于OpenGL的简单渲染器实现