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

imgui

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

참고링크

imgui 깃헙

튜토리얼 공부 링크

GLFW 설정

:one: GLFW 파일 다운로드 및 프로젝트 폴더에 옮기기

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

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

glfw플젝구조
glfw플젝구조

:two: Visual Studio에서 include 경로, library 경로 설정

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

:three: 소스코드 작성 후 빌드

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

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

#include <iostream>
#include <GLFW/glfw3.h>

void render(GLFWwindow* window);

int main()
{
	// glfw 초기화
	glfwInit(); 

	// window 만들기 (width, height, title, monitor, share)
	GLFWwindow* window = glfwCreateWindow(640, 480, "Inyong", 0, 0);

	// context는 그리기 위한 내용을 담고 있음
	// window가 두개이면 context가 두개일수도 있음
	// 그러면 어떤 context로 그릴지 정해줘야 함
	glfwMakeContextCurrent(window);

	// 사용자가 window 창을 닫을 때까지
	while (!glfwWindowShouldClose(window)) {
		// window 그려주기
		render(window);

		// 마우스 움직이는 것. 이런것들 들고와서 필요한 window한테 보내주기
		glfwPollEvents();
	}

	// window가 닫혔을 경우 끝내자
	glfwDestroyWindow(window);
	glfwTerminate();
}

void render(GLFWwindow* window) { }

OpenGL 설정

:one: OpenGL 파일 다운로드 및 프로젝트 폴더에 옮기기

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

:two: 라이브러리 경로설정

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

:three: 소스코드 실행

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

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

그럼 이제 파란창이 뜬다.

BlueScreen
BlueScreen

ImGui 세팅

:one: 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

:two: 프로젝트에 추가 소스코드

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

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

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

// ... 기존 include 파일 ...
// 다른 라이브러리는 imgui보다 먼저 include 할 수 있지만,
// GLFW 라이브러리 include는 imgui이후에 해야한다.

void start_cycle()
{
	ImGui_ImplOpenGL3_NewFrame();
	ImGui_ImplGlfw_NewFrame();
	ImGui::NewFrame();
}

void end_cycle(GLFWwindow* const window)
{
	ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
	glfwSwapBuffers(window);    // 스왑버퍼는 한프레임 한번만 호출
}

int main() 
{
    // ... 기존 소스코드 ... 

    // Setup Dear ImGui context
    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGui::StyleColorsDark();

    // Setup Platform/Renderer backends
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init("#version 330");


    while (!glfwWindowShouldClose(window))    // 기존 glfw의 while 루프
    {
        // ... 기존 소스코드 ...
        start_cycle();

        ImGui::Begin("My name is window, ImGUI window");
        ImGui::Text("Hello there adventurer!");
        ImGui::End();

        ImGui::Render();

        end_cycle();

        // ...
    }

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

    // ...
}

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

세팅완료
세팅완료

Makefile을 사용하기

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

CXX = c++
# CXX = "C:\Program Files\Microsoft Visual Studio\2022\Community\VC\Tools\MSVC\14.36.32532\bin\HostX64\x64\cl.exe"
#CXX = cl
CXXFLAGS =
NAME = ft_irc_client.exe
RM = del /Q


#LIBS =	/link \
		/LIBPATH:".\lib" \
		glfw386.lib \
		opengl32.lib \
		/LIBPATH:"C:\Program Files\Microsoft Visual Studio\2022\Community\VC\Tools\MSVC\14.36.32532\lib\x64" \
		/LIBPATH:"C:\Program Files (x86)\Windows Kits\10\Lib\10.0.22000.0\um\x64" \
		/LIBPATH:"C:\Program Files (x86)\Windows Kits\10\lib\10.0.22000.0\ucrt\x64" \

LIBS =	-L./lib \
		-lglfw3 -lgdi32

INCLUDES = -I./include -I./include/imgui

SRCPATH = srcs

SRCFILES = main.cpp

IMGUI_SRCPATH = $(SRCPATH)/imgui

IMGUI_SRCFILES = imgui.cpp \
				imgui_draw.cpp \
				imgui_impl_glfw.cpp \
				imgui_impl_opengl3.cpp \
				imGui_stdlib.cpp \
				imgui_tables.cpp \
				imgui_widgets.cpp

OBJPATH = objs

#OBJFILES = $(SRCFILES:.cpp=.obj) $(IMGUI_SRCFILES:.cpp=.obj)
OBJFILES = $(SRCFILES:.cpp=.o) $(IMGUI_SRCFILES:.cpp=.o)

SRCS = $(addprefix $(SRCPATH)/, $(SRCFILES)) $(addprefix $(IMGUI_SRCPATH)/, $(IMGUI_SRCFILES))

OBJS = $(addprefix $(OBJPATH)/, $(OBJFILES))

.PHONY: all clean fclean re init


all: $(NAME)

#$(OBJPATH)/%.obj: $(SRCPATH)/%.cpp init
#	$(CXX) /c $(CXXFLAGS) $(INCLUDES) /Fo$@ $<

#$(OBJPATH)/%.obj: $(IMGUI_SRCPATH)/%.cpp init
#	$(CXX) /c $(CXXFLAGS) $(INCLUDES) /Fo$@ $<

$(OBJPATH)/%.o: $(SRCPATH)/%.cpp init
	$(CXX) -c $(CXXFLAGS) $(INCLUDES) $< -o $@

$(OBJPATH)/%.o: $(IMGUI_SRCPATH)/%.cpp init
	$(CXX) -c $(CXXFLAGS) $(INCLUDES) $< -o $@

init:
	-mkdir $(OBJPATH)

#$(CXX) $^ $(LIBS) /Fe$@
$(NAME): $(OBJS)
	$(CXX) $^ $(LIBS) -o $@

clean:
	-$(RM) $(OBJPATH)

fclean: clean
	-$(RM) $(NAME)

re: fclean all

Comments

ESC
Type to search...