【OpenGL】Eclipse CDT＋GLFW＋ImGuiをやってみた。

# Visual Studio？いいえEclipseです

しゃーないやん。インスコ禁止なPC上でどうにかしたいんだから。
というわけで、統合環境はEclipseを選択。

# ググって探してさぁ大変

うん。VSでの環境構築や、Macでの準備記事はあるけど、Eclipseはないのね。
Eclipse CDTってそんなにみんな使わないのか？

# そうは言っても

今ある環境でどうにかするしかないので、やらなくてはね。

# それで環境は？

　OS　：　Windows 64bit
　Eclipse　：　Pleiades All in One 2019 C/C++ Windows 64bit Full Edition ( [https://mergedoc.osdn.jp/](https://mergedoc.osdn.jp/, "Pleiades All in One Eclipse") )
　
# まずは、下準備だよね。

　Eclipseのダウンロードとか解凍とかもろもろは、世に溢れ返ってるので割愛。
　とりあえず、テキトーにプロジェクトを作成。選ぶのはC++管理ビルド。
　CMake？ナニソレオイシイノ？

　ソースフォルダを追加し、フォルダ構成をこんな感じに。（この辺は個人の自由）
![ソースフォルダ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/57fbf8bf-4e20-b119-74ab-75c673eeec80.png)

　とりあえず下準備はここまで。

# GLFWを準備しよう

　[ここ](https://www.glfw.org/download.html) からダウンロード。選ぶのは 64-bit Windows binaries。 
![GLFWダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/2800594b-635b-0777-4840-5660fcb7911a.png)
　解凍後、include 内の GLFW フォルダを eclipse&yen;mingw&yen;x86_64-w64-mingw32&yen;inclue 内にまるっとコピー。
![GLFWコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/67191ff8-4c7a-774e-cc28-e6b81e5326f4.png)

　lib-mingw-w64 フォルダの glfw3.dll を eclipse&yen;mingw&yen;x86_64-w64-mingw32&yen;bin にコピー。libglfw3.a、libglfw3dll.a を eclipse&yen;mingw&yen;x86_64-w64-mingw32&yen;lib にコピー

![GLFWコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/c313ac97-6fa1-4581-ceaa-4eef45807ead.png)

# ImGuiを準備しよう

 ImGuiは [GitHub](https://github.com/ocornut/imgui) からダウンロード。
　解凍後、プロジェクト上に作ったフォルダに各ファイルをコピー。
　imgui-master直下の選択してるファイル(画像参照)をプロジェクトのimguiフォルダにコピー
![imguiコピー１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/e548303c-0555-5324-41b4-df3e5544d843.png)

　backendsフォルダの選択しているファイル(画像参照)をプロジェクトのimguiフォルダにコピー
![imguiコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/2e6615c9-f356-6aef-97a2-12ae387e0c54.png)

　exsamples&yen;libs&yen;gl3w&yen;GLの各ファイル(画像参照)をプロジェクトのgl3wフォルダにコピー
![imguiコピー3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/d1097666-4ede-a89b-86ac-1ee3bd57fa89.png)

　最終的にプロジェクトのファイルがこんな感じになればオーケー。
![プロジェクトコピー後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/c37b15c6-4309-1c51-de1e-d6513a5a0f14.png)

　ここでちょっと手入れ。
　このままだと、gl3w.cのコンパイル時にエラーがでるので、includeのパスを修正する。

```cpp:gl3w.cpp
//#include <GL/gl3w.h>
#include "gl3w.h"
```

```cpp:gl3w.h
//#include <GL/glcorearb.h>
#include "glcorearb.h"
```

# プロジェクトの設定って大事だよね

　さて、下準備は完了。さぁ。コードを書くぞー！

　の前に
　
　もう一つ、大事な作業。
　そう、プロジェクトの設定。プリプロセッサやリンク設定をしておかないと、コンパイラさんやリンカさんに怒られちゃいます。なので、いろいろと設定を。

　まずは、gl3wを使うためにプリプロセッサを設定。
　IMGUI_IMPL_OPENGL_LOADER_GL3W を追加。
![プリプロセッサ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/6c9bb88b-f920-6492-fb2d-c55bc56b335a.png)

　つぎに、ライブラリを追加。
![ライブラリ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/dddf9eea-6705-b114-d14a-7c435de7e972.png)
　このライブラリは、ImGuiのサンプルプログラム example_glfw_opengl3 フォルダ内のMakeファイルに記載されているものを追加。

```:Makefile
ifeq ($(findstring MINGW,$(UNAME_S)),MINGW)
	ECHO_MESSAGE = "MinGW"
	LIBS += -lglfw3 -lgdi32 -lopengl32 -limm32

	CXXFLAGS += `pkg-config --cflags glfw3`
	CFLAGS = $(CXXFLAGS)

```

　これでプロジェクト設定も完了。

# そして伝説...ゲフンゲフン。 テストへ

　ここまで来れば、使えるはず。
　ということで、テストコード。

```cpp:main.cpp
#include <GL/gl3w.h>
#include <GLFW/glfw3.h>
#include "imgui/imgui.h"
#include "imgui/imgui_impl_glfw.h"
#include "imgui/imgui_impl_opengl3.h"

//
// エントリーポイント
//
GLint main( GLint argc, GLchar** argv )
{

    if ( !glfwInit() )
    {
        return -1;
    }

    const char* glsl_version = "#version 400";
    glfwWindowHint( GLFW_CONTEXT_VERSION_MAJOR, 4 );
    glfwWindowHint( GLFW_CONTEXT_VERSION_MINOR, 0 );

    GLFWwindow* window = glfwCreateWindow( 640, 480, "test", NULL, NULL );

    if( !window )
    {

        glfwTerminate();
        return -1;

    }

    glfwMakeContextCurrent( window );
    glfwSwapInterval( 1 );
    gl3wInit();

    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO(); ( void )io;

    ImGui::StyleColorsDark();

    ImGui_ImplGlfw_InitForOpenGL( window, true );
    ImGui_ImplOpenGL3_Init( glsl_version );

    while( !glfwWindowShouldClose( window ) )
    {

        glfwPollEvents();

        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        ImGui::Begin( "Hello, world!" );

        ImGui::Text( "This is some useful text." );

        ImGui::End();

        ImGui::Render();
        int display_w, display_h;
        glfwGetFramebufferSize( window, &display_w, &display_h );
        glClearColor( 0.8f, 0.8f, 0.8f, 0.0f );
        glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );
        glViewport( 0, 0, display_w, display_h );

        ImGui_ImplOpenGL3_RenderDrawData( ImGui::GetDrawData() );

        glfwSwapBuffers( window );

    }

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

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

}
```

　実行結果。
![結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195280/c254cef6-38db-4051-4b3e-844248221a4f.png)

　はい。完了です。

# 終わってみての所感

　最初はエラー出まくりでどーしたもんかなーと思ったけど、Makefile見ればどう設定すればいいか、あらかた書いてあったのですね。　
　とりあえず環境構築はできたので、これからいろいろと遊んでいきたいと思います。

# 最後に

　今回、参考にさせていただいたサイトを。

　　・OpenGLやDirectXなGUIにimguiが最強すぎる　[https://qiita.com/Ushio/items/446d78c881334919e156](https://qiita.com/Ushio/items/446d78c881334919e156)
　　・Visual StadioでOpenGLとImGuiを使ってみる [https://qiita.com/maaiikanji/items/46df315e09a47743bb36](https://qiita.com/maaiikanji/items/46df315e09a47743bb36)