簡單介紹
因爲我在寫 LearnGL 系列筆記的時候,發現沒有 GUI 可以用,好蛋疼,然後在 GitHub 上找到一個叫:Dear ImGui,這個IMGUI系統對我來說,太太太完美了,它是用 C++ 編寫的一個 IMGUI 系統。
Unity 也有使用
看了下面的 案例截圖 你會發現,原來前幾年看到的一些大廠的各種 DEMO,或是一些軟件原來就是用 Dear ImGui 製作的,Vulkan、OpenGL的一些示例,還有如果你使用過 Unity 的舊版的 IMGUI 系統,你就會發現 Unity 的 IMGUI 接口與 Dear ImGui 的非常類似,因爲它們都是按 IMGUI 範例設計的,所以也就說,如果你用過 Unity 舊版 IMGUI 你肯定很容易接受 Dear ImGui 的接口。
現在庫名字的理解
Git Hub 上 Dear ImGui 的簡述:
Dear ImGui: Bloat-free Immediate Mode Graphical User interface for C++ with minimal dependencies
然後我去下載 master 分支,壓縮包也就 1.4 MB,基本都是純代碼,編譯後更小,難怪它用 Bloat-free 來形容,非常精簡的一個GUI 庫。
名字歷史
從 What is this library called? 中可得知,作者是從 2014 年開始編寫的庫,當時沒想好名字,就暫時用了 ImGui 的名字。但是 IMGUI 這個術語很早之前就有提出來,IMGUI == Immediate-Mode Graphical User Interface,即時模式的圖形用戶接口,它是 Casey Muratori 提出來的,如果你想了解 IMGUI 範例,可以查看:http://www.johno.se/book/imgui.html,http://mollyrocket.com/861 或是在下面提到的 FAQ 中的更多的鏈接,或是 wiki 中的 Paradigm。Unity 用它來使用了自己的 IMGUI 實現範例。所以作者爲了減少歧義,他在 2015.12 將庫名改爲 Dear ImGui(不是 ImGui,也不是IMGUI)。
入門步驟建議
- 先看 master 的 README.txt,先了解大概介紹
- 再看 example 下的 README.txt
- 再倒回看 master 下的 imgui.cpp 的代碼、註釋,作爲程序開發主要看:PROGRAMMER GUID 的部分
- 再看看 FAQ.md 部分,瞭解常見的問題
- 這時差不多可以開始將 Dear ImGui 引入你的項目了,先去 example 下找對應的 實現窗體 + 渲染平臺
- 找到適合你的窗體、渲染平臺的,點擊去查看 demo
- 例如,我使用的是 GLFW 窗體庫 + OpenGL 3+ 版本的:example_glfw_opengl3,參考工程使用即可
其他資料
後續更多功能的查閱,可以查看他的 git/wiki:https://github.com/ocornut/imgui/wiki
其中有一些不錯的小部件:useful-widgets–references
也一些不錯的文章:articles-about-dear-imgui
我自己粗略閱讀過,也不是每個都不錯,下面將一些我自己看過覺得不錯的博客都列出來:
英文的視頻:
英文的文章:
日語的 qiita 上的文章:
如果你想用 Dear ImGui 來製作軟件,或是遊戲引擎的GUI,可以使用他目前的 docking 分支的。
未來作者會合併到 master 分支,現在還在完善中。
值得一提的 Upcoming 內容:
- 而且他的 docking 和一般的 docking 還不一樣,可以跨窗體。
- 他的 multiple viewport 也不一般,可以將窗體內的內容繪製到窗體外,即:ImGuiWindow 可以繪製到 host window 外。
- 他的 table 也是做的強大又美觀
Dear ImGui docking,可以查看:
https://ruurdsdevlog.wordpress.com/2020/03/07/c-desktop-application-with-dear-imgui/
docking 的可以再查考 wiki 上的各個推薦的 blog 或是 video
後面如果要給圖片做一個資源管理,或是 材質系統管理,都需要了解如何加載圖片
當然這些內容現在還沒有引入到 master 分支,還在完善開發中,所以如果感興趣可以 watch 持續關注這位大神 git。
Showcase Screen Snapshot - 案例截圖
爲了提起你對 Dear ImGui 的興趣我將一些截圖放上來。