ImGuiを使ってみる

OpenGLでのGUI開発用ライブラリImGuiを使ってみる．正式にはDear ImGui (Immediate Mode Graphical User Interface) と呼ぶとのこと．今回は，ImGuiの”Im”たる所以を調べ，サンプルをビルドして実行することが目標です．

なぜImGui？

GUIを使いたいと思っていました．主にはOpenGLを使ったアプリケーション開発の諸所で必要になる以下の要望を満たしたかったのです．

• デバッグ用データをコマンドプロンプトに出したくない
  • 毎フレーム変更されるデータなどはどんどん流れて行ってしまう
• ファイルの入出力を楽にしたい
  • できれば，ダイアログを表示させてファイルの入出力を操作したい
  • テキストファイル等を使えばいいが，ハードコーディングになりがち
• オン／オフボタンを実装したい
  • キーバインドで実装できるが，どのキーだったか忘れがち
• Qtは使いたくない
  • デバッグ用とにしては巨大すぎるしIDEが別にあるしで億劫

Im (Immediate Mode)？

ImGuiの”Im”たる所以ですが，Immediate Modeという概念で実装されたGUIライブラリとのこと．よく分からないので，公式 (GitHub)のHow it worksやここの記事を読んでみました．

どうやら，各フレームであるウィジェットが指定された場合に即座に (Immediately) 描画されるGUIの実装方式ことのようです．つまり，ImGuiのGUI専用の頂点データなどが確保されており，描画させる際は普通のレンダリングのループ処理の中で他のOpenGLのと同様にレンダリングされる，ということ．

サンプルのビルド

開発環境

ここでは，以下の開発環境を想定しています．

• IDE：Visual Studio 2017
• ウィンドウ用ライブラリ：GLFW3
• OpenGLロード用ライブラリ：GLEW

ビルド手順

1. 公式のGitHubのReleaseから”Source code (zip)”をダウンロード
   • ここではv1.65を使います
2. ファイルを任意のフォルダに展開（例えばPATH/imgui-1.65に展開したとする）
3. PATH/imgui-1.65/examples/imgui_examples.slnを開く
4. 以下を設定
   • example_glfw_opengl3をスタートアッププロジェクトに設定
     • ソリューション エクスプローラ内でプロジェクト名を右クリック
     • 「スタートアップ プロジェクトに設定(A)」を選択
   • GLFW3とGLEWの設定
     • 過去記事を参照のこと：http://mugichoko.hatenablog.com/entry/2017/05/15/104104#Visual-Studio%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90
   • IMGUI_IMPL_OPENGL_LOADER_GLEWの定義を追加
     • プロパティ／C/C++／プリプロセッサ／プリプロセッサの定義に追記
5. プロジェクトをビルドして実行

結果

以下の様に，GLFWのウィンドウにImGuiのウィジェットが描画されました．もちろん，マウスでインタラクティブに動かせます．

残る課題（ダイアログの表示）

さて，最初に挙げた要望リストの内「ファイルの入出力を楽にしたい」だけは解決できていません．OpenやSaveといった項目がメニュー内にあるものの，ボタンがあるだけで中身は実装されていないのです．

ここでの議論を覗いてみると「ダイアログを用いたファイルの入出力はOS依存だし，ImGuiで実装されるべきところではない」と，いうことです．確かに...

同スレッドで挙げられていますが，別のライブラリを導入するのがよさそうです．例えば，未使用ですが以下のライブラリがよさそう．

github.com