Node Graph Editors with ImGui

[emoon]

Hi,

So I'm thinking of using ImGui for doing a basic node graph that can be used to edit materials. There are lots of programs that does this but for example:

http://keenleveldesign.com/pimp/protools/shaderfusion/ShaderFusionReleasePromo/shaderfusion01.jpg

I wonder how one would go about doing something similar with ImGui. Having separate windows for each box is likely (?) the best approach as it would allow the user to move them around and what not.

I guess adding some custom stuff for doing the connections + lines as well shouldn't be too hard but I just wanted your thoughts about it.

Cheers!

[ocornut]

EDITED 2019

GENERALLY SPEAKING YOU CAN HEAD TO THE WIKI FOR LISTINGS
https://github.com/ocornut/imgui/wiki/Useful-Extensions

Listing relevant links posted the thread. Dig in the thread for details!

https://github.com/thedmd/imgui-node-editor
https://github.com/rokups/ImNodes
https://github.com/Nelarius/imnodes
https://github.com/Flix01/imgui/tree/imgui_with_addons
https://github.com/DCubix/Twist
http://carlivan.com/engine-tools/visual-scripting
http://carlivan.com/engine-tools/blueprints/
https://gist.github.com/ChemistAion/0cd64b71711d81661344af040c142c1c
https://gist.github.com/spacechase0/e2ff2c4820726d62074ec0d3708d61c3
https://github.com/CedricGuillemet/Imogen
https://galloscript.itch.io/texgraph

---

(Original 2015 answer)

You can start with actual ImGui Windows but as you dig into connections and more features they will likely get in your way? It may be more awkward to restrict them within a given spot, etc. One benefit is that they will handle overlapping for you.

Creating your own mini-window not too hard:

• do your drawing via the drawlist API
• perhaps push a clipping rectangle
• use InvisibleButton() + IsItemActive() (or MouseClickedPos and GetMouseDragDelta) to handle moving.

If you can avoid overlapping it'll be simpler. If you can't the next easiest thing would probably be to handle ordering/sorting them yourself.

[emoon]

Thanks for the reply. That seems reasonable. I think I will just go for non-overlapping as this is mostly for a prototype so that should be fine.

[ocornut]

Here's a proof of concept demo. It's quite incomplete but shows that it is possible.
You'll need to update to latest because I have fixed a bug with the ImDrawList / channel API. Drawing channels are very convenient to allow out-of-order rendering (here we draw the node background after the nodes are filled with contents).

I'm declaring some ImVec2 operators to make the code simpler. If you have your own math types with conversions via IM_VEC2_CLASS_EXTRA you are probably better off using them.

Sort of work but I'm not very happy with it because it wasn't that trivial to pull off (3 hours including bugfix) and I had to dodge a few non-obvious trap. I'll probably keep massaging that code.

I'll move the hermite curve rendering to new drawing API. Do you know of a good non-stupid reference for API that handle various types of curves? (bezier, hermite, catmull rom. etc.). They are easy to implement but I wonder if there's a way of ordering parameters that's more standard or obvious. An API to handle multiple points should be available so that thick splines can have their end connecting nicely.

Code
https://gist.github.com/ocornut/7e9b3ec566a333d725d4

[emoon]

👍 thanks! :)

[emoon]

Yeah I have been thinking about what curves to actually use for the lines. I thought about just using b-spline or something similar but I have no idea what "real" editors are using.

[NocturnDragon]

Hi,
Rectangular links could also be a (simpler) possibility.
i.e. https://youtu.be/KvExDzISYUc?t=9s

[MrSapps]

@ocornut nice!! 👍 @NocturnDragon what algorithm does the rect layouts use? I notice it somehow seems to avoid overlapping itself?

[ocornut]

I'm not sure those node/graph should or will be a concept of core ImGui by the way. It's more of an example code.

My intuition is the real value will be to keep massaging and improving the lower-level stuff so that it becomes more easier and natural to create this sort of thing from scratch.

[dumblob]

Do you know of a good non-stupid reference for API that handle various types of curves? (bezier, hermite, catmull rom. etc.).

I asked the creator of Fog framework who has a lot of experience with vector libraries (Cairo, AGG, etc.) and he told me, that in Fog (and also it's successor Blend 2D) he supports only quad and cubic Bezier curves, because it's enough (and it's much easier to translate these into any other curve needed e.g. by the rendering engine). He also told me, that e.g. Cairo supports only cubic curves.

So, in the name of simplicity, feel free to take a look at the API of Bezier curves in Fog.

[emoon]

#306 (comment)

Fully agree that this shouldn't be part of core ImGui but an interesting use-case to support with the API itself as you say.

[emoon]

Small comment. I tested your prototype and when dragging the color values it seems to always reset back to default. I haven't investigated yet but just wanted to let you know.

[ocornut]

Yeah they are just dummy values, didn't want to clutter the example with too much things.

ImGui::SliderFloat("##value", &node->Value, 0.0f, 1.0f, "Alpha %.2f");
float dummy_color[3] = { node->Pos.x / ImGui::GetWindowWidth(), node->Pos.y / ImGui::GetWindowHeight(), fmodf((float)node->ID * 0.5f, 1.0f) };
ImGui::ColorEdit3("##color", &dummy_color[0]);

If you aren't in a hurry I'll keep working on that in the future, add the linkage, move curves rendering to the main api and generally simplify / clean up / clarify where I can.

[emoon]

Not in a major hurry no so great stuff here :) I also think it's good in general to have a example that "bends" the regular use-case a bit.

[emoon]

Add yeah I agree that general curve rendering would fit good in the API, and getting linkage in the example would be great of course.