LoginSignup
0
1

More than 3 years have passed since last update.

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

Posted at

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/ )
 

まずは、下準備だよね。

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

 ソースフォルダを追加し、フォルダ構成をこんな感じに。(この辺は個人の自由)
ソースフォルダ.png

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

GLFWを準備しよう

 ここ からダウンロード。選ぶのは 64-bit Windows binaries。
GLFWダウンロード.png
 解凍後、include 内の GLFW フォルダを eclipse¥mingw¥x86_64-w64-mingw32¥inclue 内にまるっとコピー。
GLFWコピー.png

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

GLFWコピー2.png

ImGuiを準備しよう

ImGuiは GitHub からダウンロード。
 解凍後、プロジェクト上に作ったフォルダに各ファイルをコピー。
 imgui-master直下の選択してるファイル(画像参照)をプロジェクトのimguiフォルダにコピー
imguiコピー1.png

 backendsフォルダの選択しているファイル(画像参照)をプロジェクトのimguiフォルダにコピー
imguiコピー2.png

 exsamples¥libs¥gl3w¥GLの各ファイル(画像参照)をプロジェクトのgl3wフォルダにコピー
imguiコピー3.png

 最終的にプロジェクトのファイルがこんな感じになればオーケー。
プロジェクトコピー後.png

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

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

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

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

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

 まずは、gl3wを使うためにプリプロセッサを設定。
 IMGUI_IMPL_OPENGL_LOADER_GL3W を追加。
プリプロセッサ.png

 つぎに、ライブラリを追加。
ライブラリ.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)

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

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

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

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

 はい。完了です。

終わってみての所感

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

最後に

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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1