一步一步跟我学ImGui.第一讲.配置OpenGl2+ImGui环境

2022-05-10 13:23:51 浏览数 (1)

目录

  • 搭建ImGui例子中的第一个OpenGl2环境
    • 一丶搭建OpenGL2环境
      • 1.下载GLFW库
      • 2.解压GLFW库.
      • 3.将GLFW库拷贝到你的工程文件下.
      • 4.配置到Vs2013中.
        • 4.1配置属性中的附加包含目录
        • 4.2配置属性中的连接器常规属性的附加库目录
        • 4.3配置属性中的输入中的附加依赖项.
      • 5.测试OpenGl是否搭建成功
    • 二丶OpenGL2 跟ImGui相结合.
      • 2.1下载ImGui
      • 2.2.配置ImGui到OpenGl2中.

搭建ImGui例子中的第一个OpenGl2环境

一丶搭建OpenGL2环境

我们学习ImGui.可以看到.有几个例子 分别是:

OpenGl2 OpenGl3 Directx11 Directx10 Directx9 因为要学习例子或者什么.最好移植到自己的工程中进行学习.

所以先把第一个OpenGl2的移植写一下.后面会将5个例子都会移植过来.然后进行学习.

首先下载 OpenGl需要的库. 也就是说GLFW.

1.下载GLFW库

官网下载: https://www.glfw.org/download.html 如下图:

根据你当前项目的选择.下载32位或者64位.

2.解压GLFW库.

下载之后解压. 如下图:

里面我们需要关注的是 include 头文件 以及 lib-vcxxxx 其中跟你你VS的环境.进行选择. 比如我们的是VS2013. 我就选择vs2013.

3.将GLFW库拷贝到你的工程文件下.

这一步就重要了. 首先我们需要的是 include目录 以及 lib-vcxxx目录. 我们拷贝到我们的目录下.

这里我新建一个文件夹.名字就叫做GLFW. 我们里面就是存放的我们拷贝的文件.

4.配置到Vs2013中.

4.1配置属性中的附加包含目录

这一步很重要了.

首先打开工程项目属性.找到C/C 一栏.看到附加包含目录. 设置为我们刚刚的 文件夹下的include

这一步重要的地方就在于.我们的文件是放在哪里.如果你放在跟我一样的目录下.直接这样引用. 但是上面还有一层目录. 如果你放在了上一层目录. 你这里就要写成 ..GLFWinclude 总的来说就是路径配置问题.

4.2配置属性中的连接器常规属性的附加库目录

这一个跟我们一样.设置lib所在的目录即可.

如下

4.3配置属性中的输入中的附加依赖项.

配置的命令行为:

代码语言:javascript复制
opengl32.lib;glfw3.lib;%(AdditionalDependencies)

如下:

此时我们的OpenGl就搭建好了.使用我们的代码进行测试.

5.测试OpenGl是否搭建成功

代码语言:javascript复制
#include <stdio.h>
#include <Windows.h>
#include <tchar.h>

#ifdef __APPLE__
#define GL_SILENCE_DEPRECATION
#endif
#include <GLFW/glfw3.h>   //注意这个位置.你设置了目录直接这样引用就行.GLFW不是我们建立的文件夹.而是include里面的GLFW


static void glfw_error_callback(int error, const char* description)
{
	fprintf(stderr, "Glfw Error %d: %sn", error, description);
}

int WINAPI _tWinMain(
	HINSTANCE hInstance,
	HINSTANCE hPrevInstance,
	LPTSTR lpCmdLine,
	int nCmdShow)
//int main()
{
	// Setup window
	//glfwSetErrorCallback(glfw_error_callback);
	//初始化OpenGl

	if (!glfwInit())
		return 1;

	//创建OpenGl窗口

	GLFWwindow* window = glfwCreateWindow(1280, 720, "IBinary", NULL, NULL);
	if (window == NULL)
		return 1;

	//设置上下文.以及进行交换.
	glfwMakeContextCurrent(window);
	glfwSwapInterval(1); // Enable vsync


	

	
	//开始进行循环.判断gl窗口是否关闭.不关闭一直循环.
	while (!glfwWindowShouldClose(window))
	{
		glfwPollEvents();            //创建接收事件,相当于消息循环.如果不加则不响应消息.


		
		
		//这些代码可以省略.加了这些代码是设置Open内部的窗口颜色什么的
			int display_w, display_h;
			glfwGetFramebufferSize(window, &display_w, &display_h);
			glViewport(0, 0, display_w, display_h);
			glClearColor(0.45f, 0.55f, 0.60f, 1.00f);
			glClear(GL_COLOR_BUFFER_BIT);

			glfwMakeContextCurrent(window);
			glfwSwapBuffers(window);
		

		// Cleanup

		
		

		
	}
	glfwDestroyWindow(window);
	glfwTerminate();
	return 0;
}

运行:

这样我们的一个OpenGl2的窗口就已经搭建好了.

但是我们说了.是要配合ImGui.所以我们继续进行配置ImGui.

二丶OpenGL2 跟ImGui相结合.

2.1下载ImGui

Imgui是一个很简单的库.如果想使用.我们需要去Github进行下载. https://github.com/ocornut/imgui 上面也有使用说明

如下:

他告诉了我们ImGui需要的CPP以及头文件. 以及Imgui如何编写绘制代码啊

代码语言:javascript复制
ImGui::Text("HelloWorld");

这样我们就在窗口上绘制了一段话.

2.2.配置ImGui到OpenGl2中.

首先,先把你解压的Imgui下的需要的头文件都拷贝到我们工程下面.当然你可以配置文件夹. 跟上面一样.配置我们的目录.

如下:

然后将.h文件跟.cpp文件加载到我们工程中.

查看Imgui OpenGui2的例子.看看还需要哪些头文件.

可以看到.还需要4个支持OpenGl2的额外文件.我们也拷贝过来加载到工程中.

拷贝到工程之后可以拷贝ImGui例子代码进行测试了

代码如下:

代码语言:javascript复制
#include "imgui.h"
#include "imgui_impl_glfw.h"
#include "imgui_impl_opengl2.h"
#include <stdio.h>
#include <Windows.h>
#include <tchar.h>
#ifdef __APPLE__
#define GL_SILENCE_DEPRECATION
#endif
#include <GLFW/glfw3.h>

#if defined(_MSC_VER) && (_MSC_VER >= 1900) && !defined(IMGUI_DISABLE_WIN32_FUNCTIONS)
#pragma comment(lib, "legacy_stdio_definitions")
#endif



int WINAPI _tWinMain(
	HINSTANCE hInstance,
	HINSTANCE hPrevInstance,
	LPTSTR lpCmdLine,
	int nCmdShow)
{
	
	if (!glfwInit())   //初始化OpenGl
		return 1;

	//创建OpenGl窗口

	GLFWwindow* window = glfwCreateWindow(1280, 720, "Dear ImGui GLFW OpenGL2 example", NULL, NULL);
	if (window == NULL)
		return 1;

	//设置OpenGl山下文
	glfwMakeContextCurrent(window);
	glfwSwapInterval(1); // Enable vsync

	// 设置ImGui舌下文.
	IMGUI_CHECKVERSION();
	ImGui::CreateContext();
	ImGuiIO& io = ImGui::GetIO(); (void)io;
	

	//设置颜色风格
	ImGui::StyleColorsDark();
	

	// Setup Platform/Renderer bindings
	ImGui_ImplGlfw_InitForOpenGL(window, true);
	ImGui_ImplOpenGL2_Init();

	ImVec4 clear_color = ImVec4(0.45f, 0.55f, 0.60f, 1.00f);

	// Main loop
	while (!glfwWindowShouldClose(window))
	{
		
		glfwPollEvents();

		// Start the Dear ImGui frame 启动IMgui Frame框架.
		ImGui_ImplOpenGL2_NewFrame();
		ImGui_ImplGlfw_NewFrame();
		ImGui::NewFrame();

		
		{
			//开始绘制ImGui
			
			ImGui::Begin("IBinary Windows");                          // Create a window called "Hello, world!" and append into it.
			ImGui::Text("IBinary Blog");
			//ImGui::SameLine();
			ImGui::Indent(); //另起一行制表符开始绘制Button
			ImGui::Button("2222", ImVec2(100, 50));
		
			ImGui::End();
		}

		// 3. Show another simple window.
		
		// Rendering
		ImGui::Render();

		
		int display_w, display_h;
		glfwGetFramebufferSize(window, &display_w, &display_h);
		glViewport(0, 0, display_w, display_h);
		glClearColor(clear_color.x, clear_color.y, clear_color.z, clear_color.w);
		glClear(GL_COLOR_BUFFER_BIT);
		
		
		ImGui_ImplOpenGL2_RenderDrawData(ImGui::GetDrawData()); //必须在绘制完Open之后接着绘制Imgui
		//glUseProgram(last_program);

		glfwMakeContextCurrent(window);
		glfwSwapBuffers(window);
	}

	// Cleanup
	ImGui_ImplOpenGL2_Shutdown();
	ImGui_ImplGlfw_Shutdown();
	ImGui::DestroyContext();

	glfwDestroyWindow(window);
	glfwTerminate();

	return 0;
}

启动之后

如果你启动ImGui的例子.会发现一直有个控制台窗口.原因就是它是以main启动.我们改成窗口程序启动即可.

0 人点赞