目次

imguiを使ってみる(1)
imguiを使ってみる(2)
imguiを使ってみる(3)


参考1:ocornut/imgui - GitHub

参考2:OpenGLやDirectXなGUIにimguiが最強すぎる - Qiita

参考1が本家のサイトで、参考2はざっとまとまっていると思う。

正式な名前はdear imguiというようです。現時点のバージョンは1.52。


OpenGLでGUIを使いたいことがある。自分の場合はたまに数値シミュレーションでスライダーとテキスト表示をしたいというくらいであるが、この手のものはOS依存があるので悩みの種であった。

GTKなら一応MacでもLinuxでも動くので一時期は使っていたが、一般にGUIのプログラムというのは環境整備から面倒くさいのでやりたくないのでした。

最近はウィンドウはGLFW3、フォントはFreetypeを使ってテクスチャにしたもの、スライダーは自作したものを使っていてとりあえずなんとかなっていたが、どうもフォントを並べると画面がちらつくようなことがあって何か良いものがないかと探していて参考2の記事を発見した。

そのうちやってみようかなと思いつつしばらく経ってしまったが、ようやく少し時間がとれたのでやってみることにした。

以下ではGLFW3がすでにインストールされていると仮定する。それと基本的にLinuxかMacを仮定している。Windowsの人には参考程度にはなるかもしれない。

導入

とりあえずホームディレクトリにダウンロードしてサンプルコードを動かしてみたい。

$ git clone https://github.com/ocornut/imgui.git
$ cd imgui/examples/opengl3_example
$ make
$ ./opengl3_example

これで

imgui screenshot

こんなようなウィンドウが出れば成功。右側はGUIのパーツが網羅されている(全てかどうかわからないが)のでクリックして遊んでみると良いでしょう。

上のmakeの段階でエラーが出る場合はこの記事の範囲を越えます。

自分のプロジェクトに使う

少々強引に必要なファイルをすべて一箇所に集めてコンパイルしてしまうことにする。使うのは上のopengl3_exampleである。

今ホームディレクトリにいるとして、

$ mkdir imgui-test
$ cp imgui/*.{h,cpp} imgui-test
$ cp imgui/examples/libs/gl3w/GL/*.{c,h} imgui-test
$ cp imgui/examples/opegl3_examples/*.{h,cpp} imgui-test

この段階でls imgui-testすると

gl3w.c       imgui.cpp       imgui_impl_glfw_gl3.cpp  stb_rect_pack.h
gl3w.h       imgui.h         imgui_impl_glfw_gl3.h    stb_textedit.h
glcorearb.h  imgui_demo.cpp  imgui_internal.h         stb_truetype.h
imconfig.h   imgui_draw.cpp  main.cpp

のようになっているはずである。実は最後のcpでWindows用と思われるファイルは除外しているのでWindowsの人はそれらもコピーすると良いでしょう。

ここでいくつかのファイルを直接編集する。ディレクトリをimgui-testに移動して

gl3w.c:1行目 <GL/gl3w.h>"gl3w.h" に変更。

gl3w.h:4行目 <GL/glcorearb.h>"glcorearb.h" に変更。

imgui_impl_glfw_gl3.cpp:9行目 <imgui.h>"imgui.h" に変更。

同ファイルの13行目 <GL/gl3w.h>"gl3w.h" に変更。

main.cpp の 4行目から8行目をコメントアウトするか消してしまう。そして以下をコピーする。

#include "imgui.h"
#include "imgui.cpp"
#include "imgui_demo.cpp"
#include "imgui_draw.cpp"
#include "imgui_impl_glfw_gl3.h"
#include "imgui_impl_glfw_gl3.cpp"
#include "gl3w.h"
#include "gl3w.c"
#include <GLFW/glfw3.h>
#ifdef _WIN32
#undef APIENTRY
#define GLFW_EXPOSE_NATIVE_WIN32
#define GLFW_EXPOSE_NATIVE_WGL
#include <GLFW/glfw3native.h>
#endif

上の編集において行番号は若干違うかもしれない。

ターミナルでコンパイルする。コンパイラはclang++でも良い。

$ g++ main.cpp -o imgui-test `pkg-config --static --libs glfw3`

そして実行する(./imgui-test)と上のスクリーンショットと同じウィンドウが出るはず。

まとめ

imguiと一緒に配布されているgl3wを使ったが、glewをすでに使っていれば上のgl3wに関する作業は不要である。ただし<GL/glew.h>をインクルードしてmain関数内でgl3wInit()のかわりにglewInit()を呼びコンパイル時にglewをリンクする必要がある。自分はこの方法で使っているが経験者ならこのほうが速いかもしれない。

Macでのコンパイルも同じようにできるはずだが、もしうまくいかなければopengl3_exampleにあるMakefileを見て適宜リンクの指定などをすればいいと思う。

自分はWindowsがわからないのでWindowsの人は別サイトをあたって頂きたい。大体似たような作業でできるのではないだろうか。

imguiをライブラリ化してしまっても良さそうなものだけど、imgui.cppのコメントに

Add the Dear ImGui source files to your projects, using your preferred build system. It is recommended you build the .cpp files as part of your project and not as a library.

とあるので少々強引な方法をとったのでした。

それとmain.cppに他の.cppファイルもインクルードしてしまったが、これはターミナルでのコンパイルを簡単にするためである。.cppはインクルードせずにMakefileを書くとかコンパイルのほうでやってもいいと思う。IDEを使っていればこの辺はもっと簡単になるはず。

次回は自分のシーンをimguiの内部でレンダリングするところをやる予定。