[imgui] ImGui 튜토리얼과 프로젝트 구성

2023년 7월 17일

imgui

이전 튜토리얼에서 사용했던 CMakeLists를 사용하지 않고 프로젝트를 구성하는 방법을 작성할것이다. 백엔드는 동일하게 OpenGL과 GLFW이다.

참고링크 #

imgui 깃헙

ImGui 프로젝트에 추가 : https://youtu.be/VRwhNKoxUtk
GLFW 프로젝트에 추가하기 : https://inyongs.tistory.com/117

튜토리얼 공부 링크 #

GLFW 설정 #

1️⃣ GLFW 파일 다운로드 및 프로젝트 폴더에 옮기기 #

https://www.glfw.org/download.html

위 링크에서 glfw를 다운받고, 압축 푼다. (x64, x86 컴파일 아키텍쳐에 맞게 다운받아야함)
컴파일러에 맞는 라이브러리를 내 프로젝트의 lib 폴더에 옮긴다.
- visual studio 2022: vc2022/glfw3.lib
- mingw : mingw-w64/libglfw3.a
프로젝트의 include 폴더에는 glfw의 include/GLFW 폴더를 옮긴다.

glfw플젝구조

2️⃣ Visual Studio에서 include 경로, library 경로 설정 #

프로젝트의 속성 -> C/C++ -> 일반 -> 추가 포함 디렉터리 : $(SolutionDir)\include
프로젝트의 속성 -> 링커 -> 일반 -> 추가 라이브러리 디렉터리 : $(SolutionDir)\lib
프로젝트의 속성 -> 링커 -> 입력 -> 추가 종속성 : glfw3.lib;

3️⃣ 소스코드 작성 후 빌드 #

GLFW 라이브러리가 추가됐다면 아래의 코드가 실행돼야 한다.

소스코드 출처 : https://inyongs.tistory.com/117

 1#include <iostream>
 2#include <GLFW/glfw3.h>
 3
 4void render(GLFWwindow* window);
 5
 6int main()
 7{
 8	// glfw 초기화
 9	glfwInit(); 
10
11	// window 만들기 (width, height, title, monitor, share)
12	GLFWwindow* window = glfwCreateWindow(640, 480, "Inyong", 0, 0);
13
14	// context는 그리기 위한 내용을 담고 있음
15	// window가 두개이면 context가 두개일수도 있음
16	// 그러면 어떤 context로 그릴지 정해줘야 함
17	glfwMakeContextCurrent(window);
18
19	// 사용자가 window 창을 닫을 때까지
20	while (!glfwWindowShouldClose(window)) {
21		// window 그려주기
22		render(window);
23
24		// 마우스 움직이는 것. 이런것들 들고와서 필요한 window한테 보내주기
25		glfwPollEvents();
26	}
27
28	// window가 닫혔을 경우 끝내자
29	glfwDestroyWindow(window);
30	glfwTerminate();
31}
32
33void render(GLFWwindow* window) { }

OpenGL 설정 #

1️⃣ OpenGL 파일 다운로드 및 프로젝트 폴더에 옮기기 #

윈도우의 경우 VisualStudio에 포함되므로 추가로 설치할 필요가 없다.

2️⃣ 라이브러리 경로설정 #

GLFW를 참고하면 된다. 2-3에서 opengl32.lib; 를 추가한다.

3️⃣ 소스코드 실행 #

render 함수에 아래의 코드를 추가하면 된다. 그래픽 그리는건 OpenGL의 역할이기 때문에 OpenGL이 추가되어야만 실행할 수 있는 코드이다.

1void render(GLFWwindow* window) { 
2    // 지우는 색깔 (어떤 색으로 칠할건지)
3    glClearColor(0, 0, 1, 1);
4    glClear(GL_COLOR_BUFFER_BIT);
5 
6    // 깜빡거림 방지
7    glfwSwapBuffers(window);
8}

그럼 이제 파란창이 뜬다. BlueScreen

ImGui 세팅 #

1️⃣ ImGui 소스코드 다운로드 #

레파지토리에서 소스코드 다운로드 후 루트에 있는 ImGui 소스파일(.cpp, .h)들과 사용할 백엔드 파일을 가져온다.

폴더를 정리하려면 include/imgui 폴더를 만들고, 프로젝트 구성에서 include 경로를 설정해주면 된다.

.h 파일 리스트 #

imconfig.h
imgui.h
imgui_internal.h
imstb_rectpack.h
imstb_textedit.h
imstb_truetype.h
misc/cpp/imgui_stdlib.h
imgui_impl_glfw.h
imgui_impl_opengl3.h
imgui_impl_opengl3_loader.h

.cpp 파일 리스트 #

imgui.cpp
imgui_demo.cpp
imgui_draw.cpp
imgui_tables.cpp
imgui_widgets.cpp
misc/cpp/imgui_stdlib.cpp
imgui_impl_glfw.cpp
imgui_impl_opengl3.cpp

2️⃣ 프로젝트에 추가 소스코드 #

기존 그래픽 프로젝트에 추가할 수 있다.

이미 imgui 프로젝트에서 구현해둔 example 폴더에 있는 main.cpp를 참고해도 되지만, 간단하게 필요한 것들만 작성해보겠다.

 1#include "imgui.h"
 2#include "imgui_impl_glfw.h"
 3#include "imgui_impl_opengl3.h"
 4#include "imgui_impl_opengl3_loader.h"
 5
 6// ... 기존 include 파일 ...
 7// 다른 라이브러리는 imgui보다 먼저 include 할 수 있지만,
 8// GLFW 라이브러리 include는 imgui이후에 해야한다.
 9
10void start_cycle()
11{
12	ImGui_ImplOpenGL3_NewFrame();
13	ImGui_ImplGlfw_NewFrame();
14	ImGui::NewFrame();
15}
16
17void end_cycle(GLFWwindow* const window)
18{
19	ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
20	glfwSwapBuffers(window);    // 스왑버퍼는 한프레임 한번만 호출
21}
22
23int main() 
24{
25    // ... 기존 소스코드 ... 
26
27    // Setup Dear ImGui context
28    IMGUI_CHECKVERSION();
29    ImGui::CreateContext();
30    ImGui::StyleColorsDark();
31
32    // Setup Platform/Renderer backends
33    ImGui_ImplGlfw_InitForOpenGL(window, true);
34    ImGui_ImplOpenGL3_Init("#version 330");
35
36
37    while (!glfwWindowShouldClose(window))    // 기존 glfw의 while 루프
38    {
39        // ... 기존 소스코드 ...
40        start_cycle();
41
42        ImGui::Begin("My name is window, ImGUI window");
43        ImGui::Text("Hello there adventurer!");
44        ImGui::End();
45
46        ImGui::Render();
47
48        end_cycle();
49
50        // ...
51    }
52
53    // Cleanup
54    ImGui_ImplOpenGL3_Shutdown();
55    ImGui_ImplGlfw_Shutdown();
56    ImGui::DestroyContext();
57
58    // ...
59}

세팅을 완료하면 이렇게 기존 파란배경을 그려주던 그래픽 프로젝트에 imgui를 추가할 수 있다. 세팅완료

Makefile을 사용하기 #

하나의 Makefile을 작성해서 Windows / Mac 모두 컴파일이 가능하도록 하기위함 윈도우에서 작성한 코드인데, MinGW-W64를 기준으로 컴파일되도록 구현되어 있다. opengl32 라이브러리 대신 gdi32 라이브러리를 사용해야한다.

 1CXX = c++
 2# CXX = "C:\Program Files\Microsoft Visual Studio\2022\Community\VC\Tools\MSVC\14.36.32532\bin\HostX64\x64\cl.exe"
 3#CXX = cl
 4CXXFLAGS =
 5NAME = ft_irc_client.exe
 6RM = del /Q
 7
 8
 9#LIBS =	/link \
10		/LIBPATH:".\lib" \
11		glfw386.lib \
12		opengl32.lib \
13		/LIBPATH:"C:\Program Files\Microsoft Visual Studio\2022\Community\VC\Tools\MSVC\14.36.32532\lib\x64" \
14		/LIBPATH:"C:\Program Files (x86)\Windows Kits\10\Lib\10.0.22000.0\um\x64" \
15		/LIBPATH:"C:\Program Files (x86)\Windows Kits\10\lib\10.0.22000.0\ucrt\x64" \
16
17LIBS =	-L./lib \
18		-lglfw3 -lgdi32
19
20INCLUDES = -I./include -I./include/imgui
21
22SRCPATH = srcs
23
24SRCFILES = main.cpp
25
26IMGUI_SRCPATH = $(SRCPATH)/imgui
27
28IMGUI_SRCFILES = imgui.cpp \
29				imgui_draw.cpp \
30				imgui_impl_glfw.cpp \
31				imgui_impl_opengl3.cpp \
32				imGui_stdlib.cpp \
33				imgui_tables.cpp \
34				imgui_widgets.cpp
35
36OBJPATH = objs
37
38#OBJFILES = $(SRCFILES:.cpp=.obj) $(IMGUI_SRCFILES:.cpp=.obj)
39OBJFILES = $(SRCFILES:.cpp=.o) $(IMGUI_SRCFILES:.cpp=.o)
40
41SRCS = $(addprefix $(SRCPATH)/, $(SRCFILES)) $(addprefix $(IMGUI_SRCPATH)/, $(IMGUI_SRCFILES))
42
43OBJS = $(addprefix $(OBJPATH)/, $(OBJFILES))
44
45.PHONY: all clean fclean re init
46
47
48all: $(NAME)
49
50#$(OBJPATH)/%.obj: $(SRCPATH)/%.cpp init
51#	$(CXX) /c $(CXXFLAGS) $(INCLUDES) /Fo$@ $<
52
53#$(OBJPATH)/%.obj: $(IMGUI_SRCPATH)/%.cpp init
54#	$(CXX) /c $(CXXFLAGS) $(INCLUDES) /Fo$@ $<
55
56$(OBJPATH)/%.o: $(SRCPATH)/%.cpp init
57	$(CXX) -c $(CXXFLAGS) $(INCLUDES) $< -o $@
58
59$(OBJPATH)/%.o: $(IMGUI_SRCPATH)/%.cpp init
60	$(CXX) -c $(CXXFLAGS) $(INCLUDES) $< -o $@
61
62init:
63	-mkdir $(OBJPATH)
64
65#$(CXX) $^ $(LIBS) /Fe$@
66$(NAME): $(OBJS)
67	$(CXX) $^ $(LIBS) -o $@
68
69clean:
70	-$(RM) $(OBJPATH)
71
72fclean: clean
73	-$(RM) $(NAME)
74
75re: fclean all