Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gallery: Post your screenshots / code here (PART 8) #2265

Open
ocornut opened this issue Jan 6, 2019 · 47 comments

Comments

Projects
None yet
@ocornut
Copy link
Owner

commented Jan 6, 2019

This is Part 8. I am splitting issues to reduce loading times and locked the old ones.
Screenshots Part 1 #123
Screenshots Part 2 #539
Screenshots Part 3 #772
Screenshots Part 4 #973
Screenshots Part 5 #1269
Screenshots Part 6 #1607
Screenshots Part 7 #1902
Screenshots Part 8 #2265
Screenshots Part 9 #2529
Also see: Software using dear imgui (you can help complete the list!)

You can post your screenshots here!

@ggerganov

This comment has been minimized.

Copy link

commented Jan 6, 2019

tool

Tool for analysing audio waveforms. Support for zoom in/out in the waveform plot. project

@BrutPitt

This comment has been minimized.

Copy link

commented Jan 7, 2019

glChAoS.P / glChAoSP Opengl Chaotic Attractors of Slight (dot) Particles
A multi platform (Windows / Linux / OS X) real time 3D strange attractor scout... and hypercompelx fractals.
On github from 2 weeks.

sshot_201917_6158

There is also a full functional Windows 64bit executable with ImGui viewports

untitled-3a

With configurable ImGui interface: 3 dark themes with dynamic tone variations (ImGui::ColorEdit) plus 6 static ... (and 3 of ImGui, of course).
Here there are all ImGuiStyle themes (dynamic and static):
https://github.com/BrutPitt/glChAoS.P/blob/master/src/src/ui/uiSettings.cpp

From today there is also a live/online WebGL 2 & WebAssembly lightened version, even with ImGui.

https://github.com/BrutPitt/glChAoS.P

Edit : I forgot... there is a web page with several: ImGui screenshots

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jan 9, 2019

@zmertens

This comment has been minimized.

Copy link

commented Jan 10, 2019

shade_slider_preview

This is a color picking game I made for mobile using imgui. The game is called Shade Slider

  • The goal is to make both boxes match
  • The phone vibrates when they match
  • live action gif
@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jan 11, 2019

Screenshot from Crossout (https://crossout.net) courtesy of @Vuhdo
crossout

@wtrsltnk

This comment has been minimized.

Copy link

commented Jan 12, 2019

zyn-lab
)

This is a pet-project of mine, a reworked ui for zynadsubfx

@ocornut ocornut added the gallery label Jan 15, 2019

@cosnxdx

This comment has been minimized.

Copy link

commented Jan 15, 2019

ft2
Tool was initially designed for a trading system, but now aimed at general purpose prototyping for event driven systems and streaming data. Each node of a graph is a parameterized functor that accepts input from any other node with matching signature. Node output can be visualized and layered by dragging a slot to the desired axis/layer. Still very rough but getting there.

Example shows a combining signals of different frequency and performing a fourier transform, visualizing the result as well as individual components and intermediate steps.

@jangalomph

This comment has been minimized.

Copy link

commented Jan 16, 2019

UI is a bit of a cluster right now, but cool stuff happening!

In this screenshot we've got a slice of a vector field being rendered as an exportable flowmap.
vrg_2019-01-15_21-11-03

This is our tool VecotrayGen: https://jangafx.com/software/vectoraygen

@encelo

This comment has been minimized.

Copy link

commented Jan 19, 2019

Some months ago I have integrated Dear ImGui in the nCine, my little 2D multi-platform engine.

  • ncParticleEditor is a particle editor based on my engine, Lua and ImGui (video)
    ncparticleeditor

  • I have rewritten the debug overlay to support ImGui (video)
    ncine_debug_overlay

More information about the particle editor and the debug overlay can be found in this article.

  • One of my engine examples is a simple benchmark tool for SIMD operations (article)
    apptest_simdbench
@ElonKou

This comment has been minimized.

Copy link

commented Jan 21, 2019

I create a Chinese interface, which is a genetic algorithm controller.
image

@drudru

This comment has been minimized.

Copy link

commented Jan 23, 2019

Saw Dear Imgui in a screenshot mentioned here:
Phoronix: Intel Is Working On A Vulkan Overlay Layer, Inspired By Gallium3D HUD

Screen Shot

Actual merge request is here.

@aiekick

This comment has been minimized.

Copy link
Contributor

commented Jan 27, 2019

NoodlesPlate
use ImGuizmo for manipulate Sdf Transform and light position on this Sub Surface Scattered Sdf
2019-01-27_16-49-12

@twse

This comment has been minimized.

Copy link

commented Jan 27, 2019

Bob's Game uses Dear ImGui according to the commented lines.

bobtypes.h line 123
//#include "imgui.h"

src/main.cpp line 22
//#include <imgui.h>

src/main.cpp line 23
//#include "imgui_impl_sdl.h"

Images are in the blog and videos are in the YouTube channel.

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jan 27, 2019

Bob's Game uses Dear ImGui according to the commented lines.

These are literally the only lines referring to ImGui in that repo you linked, it therefore does not use it.

@twse

This comment has been minimized.

Copy link

commented Jan 28, 2019

Bob's Game uses NanoGUI instead so I suggest creating a theme resembling the demo video for the old nD console uploaded in 2011.

@Unit2Ed

This comment has been minimized.

Copy link

commented Jan 31, 2019

We're using ImGui as the editor UI for our Unreal Engine 4-based game creation platform, Crayta.

advancedmode
editor

Lua/HTML script editor based on ImGuiColorTextEdit with some modifications, including support for multiplayer editing
collaborativecodeediting

Videos in our YouTube channel

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Feb 2, 2019

RemedyBG
https://remedybg.itch.io/remedybg
"RemedyBG is a 64-bit Windows debugger written from scratch with the goal of replacing the behemoth Visual Studio debugger. "

remedybg-01
(More screenshots on the homepage)

Also posting imgui_markdown.h a single-header file for Markdown rendering:
https://github.com/juliettef/imgui_markdown
imgui_markdown_avoyd_about_oss

@mikejsavage

This comment has been minimized.

Copy link
Contributor

commented Feb 9, 2019

We are using imgui in our game for the launcher/updater:

image

and also for the ingame menus and console (very plain still):

image

The engine was using librocket before and it took less time to rewrite the entire UI with imgui than it did to tweak the main menu with librocket. Build times are down from 5 minutes to 40 seconds, or an 87% reduction.

Imgui is cash and we all love it

@yumataesu

This comment has been minimized.

Copy link

commented Feb 10, 2019

VJ software based imgui & openFrameworks

output6

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Feb 12, 2019

Orbital (experimental PS4 emulator) https://github.com/AlexAltea/orbital
orbital

@Derydoca

This comment has been minimized.

Copy link

commented Feb 14, 2019

I have been implementing Dear Imgui into my engine (Derydoca Engine) recently and love it. I am using the docking branch of the code currently to reap all of its benefits.
image
image
image

@pthom

This comment has been minimized.

Copy link

commented Feb 16, 2019

(This is probably a bit out of the main ImGui scope)
I worked on an image analyse tool in python, which is not actually based on ImGui, but on pyimgui.

It provides easy way to display / analyze images and plots via ImGui and python (+ numpy and opencv)

image

image

@trfd

This comment has been minimized.

Copy link

commented Feb 18, 2019

Little GPU profiler for Unity3D made for indie game studio Endroad
gpuprofiler

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Feb 18, 2019

https://twitter.com/skaven_/status/1097318511997677568
"I'm replacing the default OS title bar with a custom imgui control. I can put some more infos there."
dzp1hbpu0aatpsl jpg large

@drudru

This comment has been minimized.

Copy link

commented Feb 19, 2019

https://magnum.graphics/ highlights Dear Imgui as a big feature in 2019.01 release.

Screen Shot

@haldean

This comment has been minimized.

Copy link
Contributor

commented Feb 20, 2019

I wrote a theme generator that generates color schemes off of two base colors and a few value parameters:

ezgif-5-9959d3284206

  static ImVec4 base = ImVec4(0.502f, 0.075f, 0.256f, 1.0f);
  static ImVec4 bg   = ImVec4(0.200f, 0.220f, 0.270f, 1.0f);
  static ImVec4 text = ImVec4(0.860f, 0.930f, 0.890f, 1.0f);
  static float high_val = 0.8f;
  static float mid_val = 0.5f;
  static float low_val = 0.3f;
  static float window_offset = -0.2f;

  inline ImVec4 make_high(float alpha) {
    ImVec4 res(0, 0, 0, alpha);
    ImGui::ColorConvertRGBtoHSV(base.x, base.y, base.z, res.x, res.y, res.z);
    res.z = high_val;
    ImGui::ColorConvertHSVtoRGB(res.x, res.y, res.z, res.x, res.y, res.z);
    return res;
  }

  inline ImVec4 make_mid(float alpha) {
    ImVec4 res(0, 0, 0, alpha);
    ImGui::ColorConvertRGBtoHSV(base.x, base.y, base.z, res.x, res.y, res.z);
    res.z = mid_val;
    ImGui::ColorConvertHSVtoRGB(res.x, res.y, res.z, res.x, res.y, res.z);
    return res;
  }

  inline ImVec4 make_low(float alpha) {
    ImVec4 res(0, 0, 0, alpha);
    ImGui::ColorConvertRGBtoHSV(base.x, base.y, base.z, res.x, res.y, res.z);
    res.z = low_val;
    ImGui::ColorConvertHSVtoRGB(res.x, res.y, res.z, res.x, res.y, res.z);
    return res;
  }

  inline ImVec4 make_bg(float alpha, float offset = 0.f) {
    ImVec4 res(0, 0, 0, alpha);
    ImGui::ColorConvertRGBtoHSV(bg.x, bg.y, bg.z, res.x, res.y, res.z);
    res.z += offset;
    ImGui::ColorConvertHSVtoRGB(res.x, res.y, res.z, res.x, res.y, res.z);
    return res;
  }

  inline ImVec4 make_text(float alpha) {
    return ImVec4(text.x, text.y, text.z, alpha);
  }

  void theme_generator() {
    ImGui::Begin("Theme generator");
    ImGui::ColorEdit3("base", (float*) &base, ImGuiColorEditFlags_PickerHueWheel);
    ImGui::ColorEdit3("bg", (float*) &bg, ImGuiColorEditFlags_PickerHueWheel);
    ImGui::ColorEdit3("text", (float*) &text, ImGuiColorEditFlags_PickerHueWheel);
    ImGui::SliderFloat("high", &high_val, 0, 1);
    ImGui::SliderFloat("mid", &mid_val, 0, 1);
    ImGui::SliderFloat("low", &low_val, 0, 1);
    ImGui::SliderFloat("window", &window_offset, -0.4f, 0.4f);

    ImGuiStyle &style = ImGui::GetStyle();

    style.Colors[ImGuiCol_Text]                  = make_text(0.78f);
    style.Colors[ImGuiCol_TextDisabled]          = make_text(0.28f);
    style.Colors[ImGuiCol_WindowBg]              = make_bg(1.00f, window_offset);
    style.Colors[ImGuiCol_ChildBg]               = make_bg(0.58f);
    style.Colors[ImGuiCol_PopupBg]               = make_bg(0.9f);
    style.Colors[ImGuiCol_Border]                = make_bg(0.6f, -0.05f);
    style.Colors[ImGuiCol_BorderShadow]          = make_bg(0.0f, 0.0f);
    style.Colors[ImGuiCol_FrameBg]               = make_bg(1.00f);
    style.Colors[ImGuiCol_FrameBgHovered]        = make_mid(0.78f);
    style.Colors[ImGuiCol_FrameBgActive]         = make_mid(1.00f);
    style.Colors[ImGuiCol_TitleBg]               = make_low(1.00f);
    style.Colors[ImGuiCol_TitleBgActive]         = make_high(1.00f);
    style.Colors[ImGuiCol_TitleBgCollapsed]      = make_bg(0.75f);
    style.Colors[ImGuiCol_MenuBarBg]             = make_bg(0.47f);
    style.Colors[ImGuiCol_ScrollbarBg]           = make_bg(1.00f);
    style.Colors[ImGuiCol_ScrollbarGrab]         = make_low(1.00f);
    style.Colors[ImGuiCol_ScrollbarGrabHovered]  = make_mid(0.78f);
    style.Colors[ImGuiCol_ScrollbarGrabActive]   = make_mid(1.00f);
    style.Colors[ImGuiCol_CheckMark]             = make_high(1.00f);
    style.Colors[ImGuiCol_SliderGrab]            = make_bg(1.0f, .1f);
    style.Colors[ImGuiCol_SliderGrabActive]      = make_high(1.0f);
    style.Colors[ImGuiCol_Button]                = make_bg(1.0f, .2f);
    style.Colors[ImGuiCol_ButtonHovered]         = make_mid(1.00f);
    style.Colors[ImGuiCol_ButtonActive]          = make_high(1.00f);
    style.Colors[ImGuiCol_Header]                = make_mid(0.76f);
    style.Colors[ImGuiCol_HeaderHovered]         = make_mid(0.86f);
    style.Colors[ImGuiCol_HeaderActive]          = make_high(1.00f);
    style.Colors[ImGuiCol_ResizeGrip]            = ImVec4(0.47f, 0.77f, 0.83f, 0.04f);
    style.Colors[ImGuiCol_ResizeGripHovered]     = make_mid(0.78f);
    style.Colors[ImGuiCol_ResizeGripActive]      = make_mid(1.00f);
    style.Colors[ImGuiCol_PlotLines]             = make_text(0.63f);
    style.Colors[ImGuiCol_PlotLinesHovered]      = make_mid(1.00f);
    style.Colors[ImGuiCol_PlotHistogram]         = make_text(0.63f);
    style.Colors[ImGuiCol_PlotHistogramHovered]  = make_mid(1.00f);
    style.Colors[ImGuiCol_TextSelectedBg]        = make_mid(0.43f);
    style.Colors[ImGuiCol_ModalWindowDimBg]      = make_bg(0.73f);
    style.Colors[ImGuiCol_Tab]                   = make_bg(0.40f);
    style.Colors[ImGuiCol_TabHovered]            = make_high(1.00f);
    style.Colors[ImGuiCol_TabActive]             = make_mid(1.00f);
    style.Colors[ImGuiCol_TabUnfocused]          = make_bg(0.40f);
    style.Colors[ImGuiCol_TabUnfocusedActive]    = make_bg(0.70f);
    style.Colors[ImGuiCol_DockingPreview]        = make_high(0.30f);

    if (ImGui::Button("Export")) {
      ImGui::LogToTTY();
      ImGui::LogText("ImVec4* colors = ImGui::GetStyle().Colors;\n");
      for (int i = 0; i < ImGuiCol_COUNT; i++) {
        const ImVec4& col = style.Colors[i];
        const char* name = ImGui::GetStyleColorName(i);
        ImGui::LogText("colors[ImGuiCol_%s]%*s= ImVec4(%.2ff, %.2ff, %.2ff, %.2ff);\n",
                       name, 23 - (int)strlen(name), "", col.x, col.y, col.z, col.w);
      }
      ImGui::LogFinish();
    }
    ImGui::End();
  }
@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Feb 22, 2019

Euclideon Vault appears to be using dear imgui.
For a company versed in "unlimited details" they sure like to publish a bunch of 280*150 pixels screenshots:

vault-image-1
vault-image-2

The video shows some more https://www.youtube.com/watch?v=iJ2pUpnGbsQ
capture

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Mar 14, 2019

ImHotKey by @CedricGuillemet, "Single Header Hotkey editor for dear imgui / Edit and handle HotKeys"
https://github.com/CedricGuillemet/ImHotKey

ImHotKey

(It currently has an OS dependent component, ifdef-ing and assuming a type of key in the io.Keys[] array, which could be lifted if we populated the ImGuiKey_ enum. The main reason I haven't done so yet (in spite of various requests) if I am not sure I understand how to handle the localization of shortcuts (see #456 and the linked glfw thread too, digging further I think there might be an issue in GFLW that SDL/Win32 don't suffer from.. will dig.)

@BrunoLevy

This comment has been minimized.

Copy link

commented Mar 17, 2019

graphite3-1 6 11

A simple N-Body simulation in Graphite3-1.6.11 with ImGui 1.69

@ArnCarveris

This comment has been minimized.

Copy link

commented Mar 17, 2019

@BrunoLevy source code will be public?

@BrunoLevy

This comment has been minimized.

Copy link

commented Mar 17, 2019

@ArnCarveris yes, it is public (GPL)
Documentation
Download

@Per-Morten

This comment has been minimized.

Copy link

commented Mar 18, 2019

Not super advanced, but I have used dear imgui to create some simple OpenGL introspection tools in a graphics course I am a teaching assistant in. Using dear imgui means that I can easily create this tool without affecting the architecture of the students to a large degree :).
GFX

@aiekick

This comment has been minimized.

Copy link
Contributor

commented Mar 31, 2019

SdfFontDesigner

ezgif com-resize

@drudru

This comment has been minimized.

Copy link

commented Apr 1, 2019

Dolphin Emu, a notable Nintendo Emulator project, is now using Dear Imgui...

Screenshot

Fixing Feature Inequalities Between Backends. Scroll to next paragraph.

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Apr 5, 2019

VRMONLINE-NX (Virtual Railroad Models System [NX])
vrmNX1214_cr
http://www.imagic.co.jp/hobby/index.html

Picture on twitter courtesy of Carlos Fuentes
D2sAevIWkAE8Igl jpg orig

Note that @r-lyeh Bezier widget has been recently updated, here:
#786 (comment)

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Apr 12, 2019

From "Making of ASTRO BOT Rescue Mission" GDC 2019 talk:
https://www.gdcvault.com/play/1025746/Making-of-ASTRO-BOT-Rescue

Around 45:00
Astro Bot

It is quite difficult to see what's on the right screen, but I believe this horrible choice of blue and red shades can only be Dear ImGui (1.53 or earlier).

@TomasArce

This comment has been minimized.

Copy link

commented Apr 17, 2019

Digipen Singapore 2019 End of Spring.

All custom engines are done from scratch for 2 semesters of 13 weeks each. Plus of course an additional 5 other modules per semester. ImGui is one of the few libraries that they are allowed to use.

Please check the Game Gallery if you wish to play some of these games. Click Here

Year 2 (GAM200/250)

These two modules are about creating 2D Games. Teams are usually 5 to 6 people.

GAM250-CipherGames
GAM250-Cognito
GAM250-FrozenAnvil
GAM250-Penduhs
GAM250-Regulus
GAM250-SientEditor
GAM250-Spookat2
GAM250-SunshineStudios
GAM250-TapStudios
GAM250-WorkPlaySleepStudios

Year 3 (GAM300/350)

Here students do 3D Games. These teams are about 8 to 10 people. Here we restrict which libraries they can use even more. Linear Color pipelines, Shadows, HDR, PBR, etc for graphics.

GAM350-Abloominations
GAM350-TeamITCHY
GAM350-CarrotMesh
GAM350-HybridStudios
GAM350-Intensity
GAM350-KreiaxionStudios
GAM350-Unkown
GAM350-Rubrics-
GAM350-Sludger

@TomasArce

This comment has been minimized.

Copy link

commented Apr 17, 2019

LIONant's Property System

Do you wish you could have a simple property system for your C++ projects? Well worry no more, the LIONant property system is (--HERE--).

Super easy to use and pretty fast too.

This is a screenshot of the ImGui example. The example will continue to update/mature for a while longer.

Properties

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Apr 17, 2019

@TomasArce Amazing work from all the students! Welcome to the new generation of engine and game programmers :)
And thank you for gathering and posting those shots, and your work on LIONant as well.
I'll be happy to use some screenshots in the next release note, will post the link to games too.

@aiekick

This comment has been minimized.

Copy link
Contributor

commented Apr 18, 2019

SdfFontDesigner : Github / Itch.io / Twitter

On this gif, you can see the use of a GrayScott Pattern used with a sdf font map :
the GrayScott Sample is here : GrayScott Sample

ezgif com-optimize

@aiekick

This comment has been minimized.

Copy link
Contributor

commented Apr 20, 2019

A plot control for my fvec4 structs. here used for debug rgba values and rgba evolution values under mouse, in NoodlesPlate. will be available in the next release
demo

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Apr 25, 2019

imgui control to inspect image pixels
https://github.com/CedricGuillemet/imgInspect

inspectPicture
InspectNormalMap

@HasKha

This comment has been minimized.

Copy link

commented Apr 26, 2019

Fork of ImGui designed to look more like Adobe's Spectrum
repo: https://github.com/adobe/imgui
design document: https://github.com/adobe/imgui/blob/master/docs/Spectrum.md

example

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Apr 26, 2019

Fork of ImGui designed to look more like Adobe's Spectrum
repo: https://github.com/adobe/imgui

Very nice! I'll be working on a redesign of the styling system this year and one of the important change will be to include text color, border color and border size for each widget state (normal/hovered/active).

I am curious, who are the expected users for this?

@HasKha

This comment has been minimized.

Copy link

commented Apr 26, 2019

Very nice! I'll be working on a redesign of the styling system this year and one of the important change will be to include text color, border color and border size for each widget state (normal/hovered/active).

Thanks! That's great to hear! You can check Spectrum.md and Spectrum.cpp/h for some info on how I implemented this, but I often had to add extra code into the implementation of the widgets. I'm happy to go into more details if that is useful.

I am curious, who are the expected users for this?

Researchers, developers and interns writing prototypes within Adobe. Honestly, I don't expect others outside of Adobe to use it, but we open sourced it to make it easier for interns to use after their internship is over.
As for the general idea behind the project, there is value in having a UI that looks a bit more like the flagship products. At the same time, this will never ship, so it doesn't have to match perfectly.

Edit: I used an early version of this work on a prototype, you can see some UI interactions here: https://youtu.be/QT4UWL7pQiY?t=107

@Jabilax

This comment has been minimized.

Copy link

commented Apr 29, 2019

Another student game editor. This one was made by junior students at DigiPen Bilbao.
Looking forward to the redesign of the styling system. Keep up the good work!

editor
nodes
paint

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented May 2, 2019

Some shots from Monster Boy and the Cursed Kingdom by Game Atelier.
(Looks like it is on 1.5x)
mb_imgui3
mb_imgui4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.