IMGUI 系統 - Dear ImGUI

簡單介紹

因爲我在寫 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.htmlhttp://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 的興趣我將一些截圖放上來。
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章