ImGui docking显示OpenGL画面(其一)

ImGui的基本设置以及docking的基本设置

ImGui的设置与一些基本操作

观前提示：此内容参照learnOpenGL的glfw库实现，需要引入部分头文件内容

这些文件的获取方式是https://github.com/ZephyrWolf/imgui-docking

将其目录文件下的十个文件以及backend/下的opengl3和glfw的文件，放入在你库文件目录下执行Cmake相关命令链接

如何使用ImGui

ImGui界面的显示，我们首先需要进行ImGui的初始化，以下内容就是一个初始化的内容

initIMGUI之中我们设置了ImGui的初始化

下面内容基本都是io的一个初始化

其中字体的一个部分是参照B站的这个视频

void initIMGUI() {
	ImGui::CreateContext();//创建imgui上下文
	ImGuiIO& io = ImGui::GetIO();
	(void)io;
	
	//这里是一些ImGui的拓展的设置
	io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;     // Enable Keyboard Controls
	io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;      // Enable Gamepad Controls
	io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;         // Enable Docking
	io.ConfigFlags |= ImGuiConfigFlags_ViewportsEnable;
  
  //中文的设置，记得将main.cpp的文件编码类型改为UTF-8
	io.Fonts->AddFontFromFileTTF("C:\\\\Windows\\\\Fonts\\\\msyh.ttc", 30.f, NULL, io.Fonts->GetGlyphRangesChineseSimplifiedCommon());
	ImGui::StyleColorsDark(); // 选择一个主题

	// 设置ImGui与GLFW和OpenGL的绑定
	ImGui_ImplGlfw_InitForOpenGL(glApp->getWindow(), true);
	ImGui_ImplOpenGL3_Init("#version 460");
}

【imgui 帮助 19】imgui设置中文_哔哩哔哩_bilibili

RenderImGui

 	//开启ImGui的渲染
	ImGui_ImplOpenGL3_NewFrame();
	ImGui_ImplGlfw_NewFrame();
	ImGui::NewFrame();
	
	//最简单的一个窗口的呈现
	ImGui::Begin("controls");
	ImGui::Text("%.3f ms/frame (%.1f FPS)", 1000.0f / ImGui::GetIO().Framerate, ImGui::GetIO().Framerate);
	ImGui::End();
	
	//执行ImGui的渲染
	ImGui::Render();
	
	//其他属性的设置
	ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
	
	//只需要渲染单页面内部ui不用以下设置，不过最好可以加上
	if (io.ConfigFlags & ImGuiConfigFlags_ViewportsEnable)
	{
		GLFWwindow* backup_current_context = glfwGetCurrentContext();
		ImGui::UpdatePlatformWindows();
		ImGui::RenderPlatformWindowsDefault();
		glfwMakeContextCurrent(backup_current_context);
	}

IMGUI的docking branch下载和设置

https://blog.csdn.net/qq_45651072/article/details/144264085#:~:text=只需要在 ImGui%3A%3AShowDemoWindow (%26show_demo_window)%3B 前面加上 ImGui%3A%3ADockSpaceOverViewport (0%2C,ImGui%3A%3AGetMainViewport ())%3B 就可以了，看一下具体的效果 ImGui%3A%3A ShowDemoWindow (%26show_demo_window)%3B 好然后，我们再创建一个图像窗口，然后将他们两个排列好。

OpenGL渲染结果移至ImGui窗口上_opengl imgui-CSDN博客

实现一个大概这么样的效果

在你新建的一个窗口的最上方加入这一行代码就行

ImGui::DockSpaceOverViewport( ImGui::GetMainViewport());

下一步，我们要实现的就是将openGL的渲染画面转移到ImGui上

帧缓冲 Framebuffer

关于帧缓冲，你所需要了解的都可以在这里找到

https://learnopengl-cn.github.io/04 Advanced OpenGL/05 Framebuffers/

你所需要进行的就是生成一个帧缓冲，生成rbo，生成Texture绑定颜色和深度缓冲附件，然后就可以用帧缓冲渲染画面做一些简单的屏幕后处理等相关操作，而且你对屏幕的操作回调都还是有效的，所以就相当于将之前渲染的内容放在一个面片再渲染到画面上，利用这一点能实现很多多画面操作

绘制过程：

第一遍：bindFramebuffer(fbo)//绘制到fbo上→draw()

第二遍：bindFramebuffer(0)//绘制到屏幕上→drawFramebuffer()

知道了以上内容，我们就可以尝试将framebuffer上的纹理绘制到ImGui上面

ImGui draw

	//show render scene
	ImGui::Begin("ViewPort");
	//获取ViewPort窗口的大小
	viewPortSize = ImGui::GetContentRegionAvail();
	//ViewPort窗口大小如果有改变，那么需要重置帧缓冲区
	if (viewPortSize.x * viewPortSize.y > 0 && (viewPortSize.x != framebuffer->mWidth || viewPortSize.y != framebuffer->mHeight)) {
		framebuffer->Resize(viewPortSize.x, viewPortSize.y);
		glViewport(0, 0, viewPortSize.x, viewPortSize.y);
	}
	//获取颜色纹理的ID,将framebuffer的颜色纹理绘制在Image上
	GLuint textureID = framebuffer->mColorAttachment->getTexture();
	ImGui::Image(reinterpret_cast<void*>(textureID), viewPortSize, { 0,1 }, { 1,0 });
	ImGui::End();

原理也很简单，把颜色附件的纹理绘制到ImGui上就行，不过要注意视口大小

了解原理后我们甚至可以加一个副视口来绘制第二画面