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 3) #772

Open
ocornut opened this issue Aug 7, 2016 · 78 comments

Comments

Projects
None yet
@ocornut
Copy link
Owner

commented Aug 7, 2016

This is Part 3. 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!

@sylefeb

This comment has been minimized.

Copy link

commented Aug 7, 2016

Our online slicer for 3D printers (RepRaps, Ultimakers, Prusa, etc.), using the amazing ImGui! Try it here: http://shapeforge.loria.fr/slicecrafter/

slicecrafter-imgui

@eliasdaler

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2016

I'm making a game called Re:creation (more info here).
Here are some in-game dev tools I've made with ImGui!

Level editor:
leveleditor

Animation editor:
animationeditor


I've also made ImGui SFML binding and wrote two articles about ImGui (Part 1, Part 2)

@nem0

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2016

@r-lyeh-archived

This comment has been minimized.

Copy link

commented Aug 15, 2016

UI mockup for an asset library/manager I'm working on. Nothing functional as we speak :)
Built mostly by re-using code from omar (obviously), dougbinks, juliettef, itamago, simon geilfus, krys and flix01.

Exciting times indeed!

gif0

Edit: @ratzlaff: used http://blog.bahraniapps.com/gifcam/ to encode the gif :)
Edit: @Flix01: it's Google's MaterialDesignIcons actually! (fixed-size icons are much better to work with!)

@Flix01

This comment has been minimized.

Copy link

commented Aug 16, 2016

@r-lyeh Awesome main menu! And awesome icon font (or probably awesome usage of "Font Awesome" ?!?)
:)

Edit: @r-lyeh: good to know that Google's MaterialDesignIcons are fixed-size! "Font Awesome" is a bigger set AFAIK, but their size is not always the same, and this can result in visual problems (for example with check boxes where the width of the unchecked and checked icons is not the same).

@bkaradzic

This comment has been minimized.

Copy link
Contributor

commented Aug 19, 2016

animtool

@damqui

This comment has been minimized.

Copy link

commented Aug 22, 2016

@bkaradzic nice ! is this anim tool somewhere on your github repos ?

@bkaradzic

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2016

@damqui Nope, but all default settings for that UI are in bgfx repo.

@Flix01

This comment has been minimized.

Copy link

commented Aug 22, 2016

An unfinished (just the GUI ATM), very bad looking, Sudoku game for Dear ImGui:
imguisudokugame

@phoenixcatdog

This comment has been minimized.

Copy link

commented Aug 24, 2016

Testing Imgui with native cocoa(no external dependencies) and opengl3(Working on Metal version).

captura de pantalla 2016-08-24 a las 10 13 52

@edin-purkovic

This comment has been minimized.

Copy link

commented Aug 31, 2016

Working on my 3D Model Editor/Game Engine, currently fixing my docking code and some bugs, for the most part it works.. imgui makes it very easy and beautiful looking...
docking

@thedmd

This comment has been minimized.

Copy link
Contributor

commented Sep 2, 2016

This is sneek peak of node editor build on top of ImGui. It handle displaying and user interaction.
node_preview_4

ImGui can be bend to handle zooming while keeping crisp details.
image

@jarikomppa

This comment has been minimized.

Copy link

commented Sep 3, 2016

Squee! Please say the sources are/will be available?

On Sat, Sep 3, 2016 at 2:57 AM, Michał Cichoń notifications@github.com
wrote:

This is sneek peak of node editor build on top of ImGui. It handle
displaying and user interaction.
[image: node_preview_4]
https://cloud.githubusercontent.com/assets/1197433/18221085/52f4c0d4-7179-11e6-9853-7f821089d6a5.gif

ImGui can be bend to handle zooming while keeping crisp details.
[image: image]
https://cloud.githubusercontent.com/assets/1197433/18220992/e2bb2e8a-7177-11e6-918b-f2a08411d24a.png


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#772 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AEQ_R11WHpxJhvSFA-r-DAmZDTTyhcv3ks5qmLfzgaJpZM4Jed-X
.

@thedmd

This comment has been minimized.

Copy link
Contributor

commented Sep 3, 2016

@jarikomppa Right now source isn't out there. I will think about making it open source.

@Flix01

This comment has been minimized.

Copy link

commented Sep 3, 2016

@thedmd I knew you were making awesome stuff! :)

ImGui can be bend to handle zooming while keeping crisp details.

How?

[Edit:] Is this something related to your branch named: 2016-09-fringe-scale, and expecially this commit: thedmd@94dd233 ?
Is it easy to use ?

@DrJedikiah

This comment has been minimized.

Copy link

commented Sep 3, 2016

screenshot_2
I've edited ImGUI a lot, and i solve the AA issue thanks by the way it was about renderer. I changed my hook to Present[17] from EndScene. And this is dll file not exe.

I made this tab system with buttons, i swapped the system of active state. If tab is active, button stays active too.

@thedmd

This comment has been minimized.

Copy link
Contributor

commented Sep 3, 2016

@Flix01: You're correct. Branch 2016-09-fringe-scale is related to my solution. I'm scaling content of draw list vertex buffer. When zooming in finge is also magnified. To get rid of that I scale it by inverse of zoom factor. This is basic idea. I will post some code as an example when I get to my PC.

@Flix01

This comment has been minimized.

Copy link

commented Sep 4, 2016

@thedmd Thanks.

@thedmd

This comment has been minimized.

Copy link
Contributor

commented Sep 4, 2016

@Flix01: In more detail. To achieve scaling choose some scale factor, set fringe to 1 / scale factor and draw as normal. I'm drawing on multiple channels to achieve layering but this isn't necessary. After drawing is done call ImDrawList_TransformChannel_Inner and voilà, you are done. Almost.

This works but some problems arise around it. Working with global coordinate system (GCS) when scaling is involved isn't best experience. Treating your child window as canvas which works in local coordinate system (LCS) is much easier. (0, 0) is in top left corner of child window. I advise to use matrices to represent transformation from one space to another from the start.

First thing is transforming ImGuiIO::MousePos and ImGuiIO::MouseClickPos to LCS. This will allow ImGui to handle input correctly.

Second. Push new clip rectangle which cover visible part of your canvas. When scaling down canvas is larger than actual window, input is clipped to window size in GCS. Pushing larger clip rectangle enable ImGui to handle larger areas. Whole scaeled area isn't visible yet but since MousePos is transfomed ImGui is actually processing input over whole area.

Third. Be ready to restore ImGuiIO::MousePos and ImGuiIO::MouseClickPos to original values and bring them back to LCS. It is necessary if you want show popups correctly.

Last thing to be done is to transform window draw list to make content actually visible. You can use ImDrawList_TransformChannels for that. If you want to write similar function by yourself make sure one vertex is transformed only once. If everything inside window is scalled, good. You can just transform vertices. If only some channels are drawn in LCS things are more tricky. Include code handle former.

If something is unclear or language I use is odd, please point me that out and ask questions.

static void ImDrawList_TransformChannel_Inner(ImVector<ImDrawVert>& vtxBuffer, const ImVector<ImDrawIdx>& idxBuffer, const ImVector<ImDrawCmd>& cmdBuffer, const ImVec2& preOffset, const ImVec2& scale, const ImVec2& postOffset)
{
    auto idxRead = idxBuffer.Data;

    std::bitset<65536> indexMap;

    int minIndex    = 65536;
    int maxIndex    = 0;
    int indexOffset = 0;
    for (auto& cmd : cmdBuffer)
    {
        int idxCount = cmd.ElemCount;

        if (idxCount == 0) continue;

        for (int i = 0; i < idxCount; ++i)
        {
            int idx = idxRead[indexOffset + i];
            indexMap.set(idx);
            if (minIndex > idx) minIndex = idx;
            if (maxIndex < idx) maxIndex = idx;
        }

        indexOffset += idxCount;
    }

    ++maxIndex;
    for (int idx = minIndex; idx < maxIndex; ++idx)
    {
        if (!indexMap.test(idx))
            continue;

        auto& vtx = vtxBuffer.Data[idx];

        vtx.pos.x = (vtx.pos.x + preOffset.x) * scale.x + postOffset.x;
        vtx.pos.y = (vtx.pos.y + preOffset.y) * scale.y + postOffset.y;
    }
}

static void ImDrawList_TransformChannels(ImDrawList* drawList, int begin, int end, const ImVec2& preOffset, const ImVec2& scale, const ImVec2& postOffset)
{
    int lastCurrentChannel = drawList->_ChannelsCurrent;
    if (lastCurrentChannel != 0)
        drawList->ChannelsSetCurrent(0);

    auto& vtxBuffer = drawList->VtxBuffer;

    if (begin == 0 && begin != end)
    {
        ImDrawList_TransformChannel_Inner(vtxBuffer, drawList->IdxBuffer, drawList->CmdBuffer, preOffset, scale, postOffset);
        ++begin;
    }

    for (int channelIndex = begin; channelIndex < end; ++channelIndex)
    {
        auto& channel = drawList->_Channels[channelIndex];
        ImDrawList_TransformChannel_Inner(vtxBuffer, channel.IdxBuffer, channel.CmdBuffer, preOffset, scale, postOffset);
    }

    if (lastCurrentChannel != 0)
        drawList->ChannelsSetCurrent(lastCurrentChannel);
}
@Flix01

This comment has been minimized.

Copy link

commented Sep 5, 2016

@thedmd thanks again for your detailed explanation.
It's something I'll investigate further in the future... (I still have to find out how antialiasing works...).

P.S. I'd also like to manage the draw lists to see if sorting indices on a texture-id basis is worthy or not.

@ocornut : sorry for having asked questions in the "Screenshot" section.

@thedmd

This comment has been minimized.

Copy link
Contributor

commented Sep 9, 2016

This is from a weekend project ascii-renderer where ImGui is used to control how rendering works. Only grayscale now. Everything is rendered on CPU.

image

And yes, you can render ImGui to ASCII buffer. : )
image

@vassvik

This comment has been minimized.

Copy link

commented Sep 12, 2016

I'm using LumixEngine's docking extensions, as so many others are, to make an editor-ish thing to be mainly used for my simulations. I wanted to create a minimal project with just the essentials to have a decent looking docking example with as few dependencies as possible, so I removed all the things I didn't need from LumixEngine's docking files and replaced it with simpler things.

screenshot_docking

Current work-in-progress code

@darkf

This comment has been minimized.

Copy link

commented Sep 14, 2016

@thedmd Please release the source, I'm very interested in node based editors like this!

@lapinozz

This comment has been minimized.

Copy link

commented Sep 20, 2016

I made a Pixel Art Upscaler using Dear ImGui

https://github.com/lapinozz/ScalaPixel

demo

@ExtasyHosting

This comment has been minimized.

Copy link

commented Sep 21, 2016

Still a work in progress...

@bkaradzic

This comment has been minimized.

Copy link
Contributor

commented Sep 21, 2016

@ExtasyHosting Slick! :)

@paulsapps

This comment has been minimized.

Copy link

commented Nov 25, 2016

@ocornut that is AWESOME :D. Slightly off topic but do you mind if I ask how you handle collisions in your game? I assume you need per pixel accuracy? If so do you use the "render everything with a unique colour and read back a pixel" trick?

@v71

This comment has been minimized.

Copy link

commented Nov 25, 2016

May i ask you why you didn't use Unity, i do not have anything against it, but i really dislike it, do you think it would have been better ?? ( i really doubt it ).

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Nov 26, 2016

@paulsapps I do not WANT per pixel accuracy for a retro styled games. Bounding boxes are perfectly fines.
@v71 No specific reason, I like doing thing my own way.

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Nov 30, 2016

The Harfang 3D engine includes ImGui apparently
https://www.harfang3d.com/doc/0.9.9/man.EngineDebugger.html

Screenshot (I think it is rather old)
man scene_debugger

@edselmalasig

This comment has been minimized.

Copy link

commented Dec 5, 2016

can you make a twitter feed for screenshots that u approve like in khronos.org

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Dec 9, 2016

From https://twitter.com/hb3p8/status/806572629259943936
czgfbbywqaavxqm jpg orig

@edselmalasig good idea, may look into that.

@JWki

This comment has been minimized.

Copy link

commented Dec 11, 2016

Nothing too fancy, using imgui for a web based gcode debugging tool for my thesis:

gcodedebug

@edin-purkovic

This comment has been minimized.

Copy link

commented Dec 20, 2016

screen1

screen2

Working on UI.. Light and Dark theme. Would be nice if I could draw the borders for items in the current BeginChild without inheriting from the owner window but still looks nice :)

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Dec 20, 2016

Nice! Please post your theme in #707 when you are happy with them.

One of the remaining task for 1.50 is to make BorderSize a regular ImGuiStyle value. I have a stash somewhere but it is leading to some problems with preserving current beginchild/popup expectation and not adding too many entries in the style.

@ongamex

This comment has been minimized.

Copy link

commented Dec 20, 2016

@edin-p Please post the white theme ^_^

@spacepluk

This comment has been minimized.

Copy link

commented Dec 20, 2016

@edin-p that's beautiful :)

@Cthutu

This comment has been minimized.

Copy link

commented Dec 20, 2016

@edin-p Did you ever release your docking code?

@edin-purkovic

This comment has been minimized.

Copy link

commented Dec 20, 2016

I did, it is on my github... But I only worked for about 5 minutes - minor ui adjustments since I put it on github so its quite broken.. It works well enough for prototyping other stuff / just to test so that's what I did - continued writing the rest of the engine..

...as for the theme guys, please color pick it :)

@Cthutu

This comment has been minimized.

Copy link

commented Dec 20, 2016

@edin-p Which font do you use, if you don't mind me asking?

@edin-purkovic

This comment has been minimized.

Copy link

commented Dec 20, 2016

It's OpenSans - Bold

@jangalomph

This comment has been minimized.

Copy link

commented Dec 28, 2016

2016-12-28_12-28-51

Working on an advanced vector field generator (no 3d preview yet). UI still needs plenty of work, but the colors are quite nice i think!

@ongamex

This comment has been minimized.

Copy link

commented Dec 29, 2016

hostroy

Here is the source code for the style:
https://gist.github.com/ongamex/4ee36fb23d6c527939d0f4ba72144d29

@v71

This comment has been minimized.

Copy link

commented Dec 31, 2016

Aren't you the guy who posted this very image on gamedev ?

@ongamex

This comment has been minimized.

Copy link

commented Jan 1, 2017

@v71 Yep (ImoogiBG on gamedev)

@BrunoLevy

This comment has been minimized.

Copy link

commented Jan 6, 2017

geocod

GEOCOD: an environment for teaching programming to kids.
Uses ImGUI+LUA (+Emscripten for the web version)

Try it online: https://members.loria.fr/Bruno.Levy/GEOCOD/
It is part of GEOGRAM: http://alice.loria.fr/software/geogram/doc/html/index.html

@AndrewBelt

This comment has been minimized.

Copy link

commented Jan 10, 2017

This is kind of a meta suggestion, but you can simply link here on each screenshot thread so you don't have to update the description each time.

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jan 10, 2017

This is kind of a meta suggestion, but you can simply link here on each screenshot thread so you don't have to update the description each time.

Correct, but the direct links are 1 click away instead of 2 so it is more convenient for the user :)

@ocornut

This comment has been minimized.

Copy link
Owner Author

commented Jan 10, 2017

This is Part 3. 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!)

@ocornut ocornut closed this Jan 10, 2017

@ocornut ocornut reopened this Jan 10, 2017

Repository owner locked and limited conversation to collaborators Jan 10, 2017

@ocornut ocornut changed the title Post your screenshots / code here (PART 3) Gallery: Post your screenshots / code here (PART 3) Jun 2, 2017

@ocornut ocornut added the gallery label Aug 6, 2017

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