[imgui] 0. 소개 및 튜토리얼 세팅

[imgui] 0. 소개 및 튜토리얼 세팅

2023년 7월 1일
imgui

ImGUI (임구이)? #

Qt, wxWidgets 과 같은 gui 라이브러리인데, 라이브러리 형태가 아니라 c++ 소스코드 형태로 제공되어 외부종속성 없이 사용가능하며, Qt와 다르게 오픈소스로 github에 공게되어있고 무료이다.

게임엔진(툴링 용), 실시간 3D 애니메이션, 임베디드 애플리케이션, 콘솔 플랫폼의 애플리케이션에서 많이 사용된다고 한다.
블리자드, 구글, 엔비디아, 유비소프트 등의 스폰서가 있고, 유니티 엔진 내장, 언리얼 plugin, 엔비디아 데모 툴, 사펑 모드 툴 등에서 사용된다.

화면에 그래픽을 표현할때 사용할 다양한 백엔드(OpenGL, DX12, DX9, Metal …)를 지원해서 응용프로그램에서 해당 백엔드 코드를 사용할 필요 없이 ImGUI코드만 사용해서 구현할 수 있다.

예쁘진 않지만 무료(상업용으로도 무료)이며, 유용하다.

관련링크 #

유데미 ImGUI 강의 repo : https://github.com/franneck94/UdemyCppGui

정보 #

  1. GLFW (Graphics Library Framework)
    GLFW는 그래픽 애플리케이션 개발에 필요한 윈도우 관리, 입력 이벤트 처리, OpenGL 컨텍스트 관리 등과 같은 기능을 제공하는 라이브러리입니다. 이를 통해 다양한 플랫폼에서 일관된 방식으로 그래픽 애플리케이션을 작성할 수 있습니다. GLFW는 OpenGL과 함께 사용되어 OpenGL 컨텍스트를 생성하고 그래픽 출력을 관리합니다.

  2. OpenGL (Open Graphics Library)
    OpenGL은 2D 및 3D 그래픽을 처리하는 데 사용되는 크로스 플랫폼 그래픽 라이브러리입니다. OpenGL은 저수준의 그래픽 렌더링 API로, 그래픽 하드웨어의 성능을 최대한 활용하면서 그래픽 애플리케이션을 개발할 수 있도록 합니다. OpenGL은 그래픽 파이프라인, 셰이딩 언어, 텍스처 매핑, 조명, 그리기 버퍼 등의 기능을 제공합니다.


중요 파일 분석 #

CMakeLists.txt #

CMake는 Makefile을 만들어내는 프로그램이다. CMakeLists.txt 를 작성해서 CMake를 실행하면 Makefile이 만들어진다.

vpkg.json #

vcpkg.json 에는 vcpkg가 어떤 패키지를 설치해야 하는지 정의되어있다.

render.cpp #

ImGUI가 백엔드를 이용해서 프레임마다 호출해 윈도우에 그려주는 작업을 하는 함수가 정의되어있다.
렌더링할 ImGUI 윈도우(Application Window가 아닌) 하나를 그리게 되는데,

ImGui::Begin #

그릴 윈도우의 초기화를 진행하고 그리기 스택에 추가한다.

  • 창의 상태와 속성을 초기화합니다.
  • 창의 크기와 위치를 설정하고, 스크롤 위치와 스크롤바 상태를 업데이트합니다.
  • 창의 데코레이션(타이틀 바, 스크롤바, 리사이즈 그립 등)을 그리고 입력 이벤트를 처리합니다.
  • 창의 내용 영역과 작업 영역을 설정하고, 클리핑 영역을 업데이트합니다.
  • 창의 레이아웃과 목록을 업데이트하고, 아이템의 크기와 위치를 계산합니다.
  • 창의 가시성과 입력 가능 여부를 설정합니다.

ImGui::End #

스택에서 객체를 가져와서 창에 대한 작업(크기,위치 조절, 상태변경, 키보드처리 등) 처리를 끝내고 스택에서 제거한다.

  • 현재 ImGui 컨텍스트와 창(window) 객체를 가져옵니다.
  • End() 함수를 많이 호출했는지, EndChild()가 아니라 End()를 호출했는지 에러처리
  • 열려 있는 마지막 작업을 닫습니다 (열려있는 열(columns) 종료, 클립 영역 팝, 포커스 범위 팝).
  • 커서 위치를 부모의 경계를 넘어 확장하여 사용하는 지 확인합니다.

EndFrame() or Render()에서 스택을 확인해서 호출되기 전까지 Begin()과 End() 쌍이 맞아야한다.

main.cpp #

imgui 레포에 있는 backends 폴더의 소스파일에서 필요한것만 긁어온 코드이다.
glfw, openGL의 초기화, 정리 코드가 있으며 이 반복문에서는 render 함수를 프레임단위로 호출한다.

start_cycle #

  • glfwPollEvents() : 현재 프레임의 이벤트 처리
  • ImGui_ImplOpenGL3_NewFrame() : OpenGL 렌더러 프레임초기화
  • ImGui_ImplGlfw_NewFrame() : GLFW 프레임워크 바인딩, 프레임초기화

ImGui::NewFrame #

프레임 시작 전 상태나 메모리의 초기화 함수

  • 시간, 프레임카운트 등 상태변수 업데이트
  • 키보드, 마우스 입력상태 업데이트
  • 메모리 정리, 창 테이블버 관리

ImGui::Render #

ImGui의 렌더링 정보를 모으는 함수. 실제 렌더링은 이후에 백엔드 렌더링함수를 호출하면서 진행한다.

  • Frame을 종료하며 Begin(), End() 짝이 맞는지 확인한다
  • viewport를 돌면서 렌더링할 데이터를 DrawData에 추가한다
  • 렌더링 카운트를 확인해서 첫렌더링은 검은 배경을 렌더링
  • window를 돌면서 활성화된 윈도우를 먼저 DrawData에 추가한다.
  • z축이 가장 위에있는 윈도우 순서대로 DrawData에 추가한다.
  • 각 viewport 마다 데이터를 flat해서 하나의 레이어로 합치고, 렌더링 데이터를 수집한다.

end_cycle #

  • ImGui_ImplOpenGL3_RenderDrawData() : 실제 렌더링하는 역할을 수행하는 함수 호출
  • glfwSwapBuffers() : 프레임버퍼를 화면에 표시
 1while (!glfwWindowShouldClose(window))
 2{
 3    start_cycle();
 4
 5    ImGui::NewFrame();        // 프레임별 ImGui 로직 시작 전 호출되는 함수
 6
 7    render(window_obj);
 8    ImGui::Render();          // 스택확인, 실제 렌더링
 9
10    end_cycle(window);
11}

imgui_demo.cpp #

데모 파일이다. 주석에 함수명을 인덱싱 해놔서 필요한거 있으면 여기서 찾아보는것도 나쁘지 않음
함수의 원형 파일이고, 실제 사용은 example 폴더의 main함수에서 사용된다.


설치 #

vcpkg #

프로젝트 폴더 0_STARTPROJECT 에서 아래 명령 실행
하나의 패키지설치 파일로 통합하기 위해 cmakelist 파일을 변경했다면 해당 위치에서 실행

1cd external
2git clone https://github.com/Microsoft/vcpkg.git
3.\vcpkg\bootstrap-vcpkg.bat # windows
4./vcpkg/bootstrap-vcpkg.sh # Unix

빌드도구 #

vscode 기준으로 C/C++ Extension Pack, Coding Tools Extionsion 을 설치
컴파일러 선택 후 완료되면 Build 버튼으로 프로젝트 빌드, 재생버튼으로 실행이 가능하다.
amd64가 64bit 컴파일러이며, x86_amd64는 x86 환경에서 개발했지만 64bit 환경에서 실행할 바이너리의 크로스컴파일러이다. init

comments powered by Disqus