13 ms·
Visual Node Graph with ImGui
- samsquire 3y agoLooks really good, thank you for sharing. I enjoy graphs, you can think of the world wide web as a graph. When you click a link you get a different perspective of that vertice. My dream is to combine nodal rendering to animated field of view layout. In all the attempts I've seen to create an interactive 3D graph the problem was that moving around didn't change the perspective and paging in and out of the nodal elements. Navigating a graph where the graphs aren't moved relevantly while you walk around is not useful it's like manual labour of walking to the store, the nodes need to change perspective, animate into different variations as you move around and page in and out different edges and vertices. The algorithm you use to move/page nodes in and out and around has to be dependent on what you're doing.
- andybak 3y agoOff topic (and a bit "hijack someone's post") but I keep thinking about the inherent suckiness of visual programming and what needs to happen to improve it. I think the core problem is that - unlike text-based programming - the editor is intimitely tied to the rest of the authoring environment and runtime. Sometimes it is the entire authoring environment. Text coding benefits from standardised tools that are decoupled from the applications they serve and interoperability. You want to write your Rust in nano? Go right ahead? Want to write some lua that does bulk edits to your COBOL library. Fab. More importantly is that we learn the tools and keyboard shortcuts and those skills transfer to new languages and environments. The main issues would be mitigated by: a) some standardized UI conventions b) all visual programming tools offering lossless round-tripping to textual representation (it doesn't have to be tuned for human writability - it just needs to be sane) B also helps with the other big flaw with visual programming - the way it breaks version control workflows. I heard from an Unreal dev that even opening a blueprint and highlighting a different node will change the file. That must be fun when it comes time to merge... I could write reams on this topic. I want visual programming to be better - I think it has unique strengths. But currently it has two niches: 1. People that can't bring themselves to learn text-based coding. 2. Tasks where discoverability and immediacy trump all the disadvantages.
- devmor 3y agoEvery time someone tries to standardize UI, we end up with XML again. There's gotta be something else.
- hermitcrab 3y agoYou've go to store your graph in some structured form. Ideally text based. XML seems as good (or bad) a format for this as any other.
- TeMPOraL 3y agoCould be XML, could be SQLite tables, it really shouldn't matter - the format would not be meant for human consumption, much less editing by hand. It would best be diffable, yes, but not necessarily by diff(1).
- andybak 3y agoI disagree. Unless the Visual editor was incredibly sophisticated, then there's always thing that can be done better by manipulating text. The textual representation doesn't have to be the primary way of interacting with the program and it doesn't need to be optimal for everyday use - but it should be sane and visually comprehensible when the need arises.
- TeMPOraL 3y agoYes, but the benefits of textual representation you mention are UI too - the text you manipulate does not have to be the same as the serialization format/canonical representation.
- SanderNL 3y agoHow is this different from “drawing is better than writing a book”? Some people write, others draw. Each method has its own strength and problem spaces. Encoding a complex issue sometimes is just shitty with a visual metaphor. Other times writing code is a really bad idea. If you want to express “flow” or “connections”, filter or stream systems like modular synths, that’s when the visual metaphor shines. You use whatever metaphor works best at the moment. One cannot replace the other. The “problem” is that people want to push all of “programming” into the visual metaphor. That’s like pushing all of programming into only functional, only declarative, only imperative or only OOP (or whatever), but worse. That’s not going to work, but I guess people can try.
- catapart 3y agoYay! More work on, and thought put into, visual scripting systems! This looks really great! I'm not sure I agree with the conclusions, nor the need for a different system than what Blueprints or Geometry Nodes offer. Personally, I think both of those things are great save for the major (and infinitely complex) feature of "clean this board up". The nature of the graphs make it easy to see when code repeats or is doing too much, just so long as the graph, itself, is legible. So if you could have some smart snapping, to force devs to keep it tight, or if you could employ some kind of machine learning for cleaning it up into sensible data flows, I think most of the biggest complaints I've heard from people who actually use these systems, would be addressed. That aside, I'm always open to a new way! I, again, don't think what was demo'd is any cleaner than Blueprints (especially not fond of all of those connection points. Bottom and top connections don't look tidy), but that is definitely in the eye of the beholder, and this appears to be a well-delivered first attempt, but a first attempt nonetheless, so I'll assume that whatever visual issues I have with it, the underlying scheme works well. Because, honestly, it looks like it does! As presented, I think the system would definitely work great and it would certainly make a few things easier than how they're handled elsewhere. I'll admit, 'curry it to a specific data type and then operate on that' is how I code anyway, so I'm biased toward liking it. But I like that methodology because I think it works exceptionally well, especially for work like rendering. So great work on both the full app and this whole new way of scripting!
- hermitcrab 3y ago> or if you could employ some kind of machine learning I'm not sure machine learning is appropriate for graph layout. What a good graph looks like is already well known: no overlapping nodes, minimum line crosses, not too much 'white space'. But doing this layout automatically is very hard (NP complete?).
- catapart 3y agoSorry if I was unclear: I just meant that we could employ tensor-based learning methodology, like ChatGPT uses, to parse the graph representations and understand not only their visual layout (ex: no lines crossing), but also their contexts (ex: group functions that all emit events near each other on the graph). Having a machine be able to know what you're trying to do and then clean it up to based on that would be great. Even better, if it could learn how you tend to organize things and pick up "configurations" from that. Adding in "reroute nodes" and stuff when things start looking too loose for your personal liking, or whatever.
- terhechte 3y agoI've been searching for a GPU Node Graph library for some time. All my Github Fu failed me. I'd like to have something which offers: - Video - Images - Rich Text - Animations And a way to compose these blocks together into bigger structures with shader effects. Preferably in a compiled language such as C++, Rust or Swift. Does something like that exist?
- jcelerier 3y agohttps://ossia.io https://ossia.io does some of it, I've been working on a new release that also supports the whole QtQuick stack in the node graph items but you can already combine videos & shader effects. There are also text and image nodes but i want to redo them, they were quick and dirty prototypes for an exhibition and don't support some of the use cases artists using the software then came up with, e.g. sifting through gigabytes of images more or less instantly. The underlying C++ part of this is kiiinda independent of the rest of the app, at least the graph part : https://github.com/ossia/score/tree/master/src/plugins/score-plugin-gfx/Gfx/Graph https://github.com/ossia/score/tree/master/src/plugins/score... - I'm sure it wouldn't be too hard to extract this folder specifically. Shaders use the ISF specification (https://isf.video https://isf.video) and the backend is through Qt's RHI so things are then mapped to metal, vk, d3d or GL.
- hermitcrab 3y agoOssia looks very cool. I have also developed a node-based tool in Qt/C++ (https://www.easydatatransform.com/ https://www.easydatatransform.com/). Might be interesting to talk Qt-related stuff with you some time (Qt versions, deployment, OSs etc).
- pjmlp 3y agoThe ISF specification is kind of neat, I wasn't aware of it, thanks for the hint.
- s-macke 3y agoI have experimented with the new WebGPU API a lot and it seems this API is predistined for node graph type of programming. I am hoping that someone will build a website such as Shadertoy [1] and compute.toys [2], but with a node graph editor. [1] https://www.shadertoy.com/ https://www.shadertoy.com/ [2] https://compute.toys/ https://compute.toys/
- d--b 3y agoTo all Visual Node Graph editor developers, I have a request: Can you guys make nodes snap to a grid? This would make graphs a lot cleaner AND could be made browsable by keyboard.
- hoc 3y agoI'd think that also helps in a lot of pointer-based editing use cases: Creation, selection, grouping/clustering, sorting, transforms...
- VladimirGolovin 3y agoIn Ultraforge (https://filterforge.com/ultraforge/ https://filterforge.com/ultraforge/), all nodes will snap to grid, and the nodes are designed in such a way that connections between then will automatically go along the grid lines -- this greatly reduces the clutter. Could you explain, however, how could the grid make node graphs browsable by keyboard?
- d--b 3y agoLet’s say your grid is 8x8, you could make a pointer that’s 16x16 and that you can move around with the arrow keys. When it touches a node, then the node is selected. But then you can hold ctrl to jump from one node to another, if they’re aligned. Kind of like excel, how you browse multiple tables in the same grid.
- deleted 3y ago[deleted]
- Towaway69 3y agoNode-RED - nodered.org - has snap to grid but no auto alignment...
- mrblk 3y agoreminds me of werkkzeug which was used to produce demos by farbrausch back in the days https://www.pouet.net/prod.php?which=12511 https://www.pouet.net/prod.php?which=12511
- neoneye2 3y agoExplanations of how werkkzeug works https://youtu.be/P7MNvUz5yyU?si=N1zED81UlYfuAV8N https://youtu.be/P7MNvUz5yyU?si=N1zED81UlYfuAV8N https://www.youtube.com/watch?v=uUfV41HE_Dg https://www.youtube.com/watch?v=uUfV41HE_Dg
- pjmlp 3y agoLooks quite nice, thanks for sharing and the overview of the approach taken. As remark on the spaghetti coding, most visual programming languages do offer modules, and the ability to add some structure similar to digital circuit design, if anything they make it easier to visualize bad code when proper coding isn't followed upon.
- hermitcrab 3y agoIn my experience node-based tools work great: -If they are restricted to a suitable problem domain (e.g. image/audio/data processing). -If have the ability to do some scripting in a node, to cover specialzied cases the designer didn't allow for. (I'm working on a node based data wrangling tool)
- deleted 3y ago[deleted]
- Zetobal 3y agoI like the implementation of litegraph in comfyui they are basically just python classes with a bit of mapping.
- bluepanda1234 3y agoWhat library did you use to create the node graph? https://github.com/Nelarius/imnodes https://github.com/Nelarius/imnodes?
- joenot443 3y agoLooks more like https://github.com/thedmd/imgui-node-editor/ https://github.com/thedmd/imgui-node-editor/ to me - both are great libraries though.
- klaussilveira 3y agoimgui is such a breath of fresh air. I started using it for my game prototypes and engine work, but quickly spread to anywhere I might need a quick cross platform GUI. You can see it everywhere now in the game industry. Pretty much every screenshot that leaks from major studios has imgui on it. It just works. Kudos to Omar, the author of imgui: https://github.com/ocornut https://github.com/ocornut
- deleted 3y ago[deleted]
- _0ffh 3y agoI wish there was a nice, light-weight library like this for creating node-graph editors in Javascript.
- robterrell 3y agoHave you seen https://github.com/jagenjo/litegraph.js https://github.com/jagenjo/litegraph.js ?
- _0ffh 3y agoNot yet, but I'll have a look, thanks! I'd need it to work well with touch, for phone or pad users.
- smaddox 3y ago> This felt like a good solution; I could instantly see how most features could map to this setup and it most definitely wasn’t a visual programming system… Huh? I don't get this. The example right below seems a lot like coding with nodes to me. Perhaps they mean it's less procedural, more declarative? But that's the case with all of these visual programming interfaces. At least until you run into the limits of the declarative sub-language.
- pests 3y agoIt sounds like they wanted to avoid programming at the level of loops, if statements, functions, blocks, etc which many visual node editors do employ. I do agree though that his solution is similar to various shader graph editors.
- artemonster 3y agoOn the topic of this, hey HN, would you play a factorio-like game that ditches all belts and trains and just looks like UE blueprint from hell (i.e. like this https://blueprintsfromhell.tumblr.com/image/185614874046 https://blueprintsfromhell.tumblr.com/image/185614874046)? So abstract item-producing nodes that can be moved around freely and are connected via some logistic network? Thanks for feedback!
- yjftsjthsd-h 3y agoThat feels like something that removes part of the fun challenge IMO (placement and routing is a big deal in factorio)
- artemonster 3y agoI loathe this routing puzzle busywork that becomes very tedious. I think there are better challenges like logistics, dealing with byprodcuts, dealing with different recipes, etc
- two_handfuls 3y agoI’m intrigued, I really like those kinds of games. I would definitely take a look yes.
- 35mm 3y agoIs there something like this for the web? I have a Django app for building topical maps for content marketing, and I'd like to be able to visualise the topic maps in terms of interconnected nodes.
- artificial 3y agoSeveral out there. Pick your poison https://vueflow.dev/ https://vueflow.dev/ or https://reactflow.dev/ https://reactflow.dev/
- winrid 3y agoyou could compile this with imgui to the web: https://github.com/jnmaloney/WebGui https://github.com/jnmaloney/WebGui but you'd have to write communication to your django app. I would do that in JS and then pass events to the WASM layer. however there are react etc specific libraries as others have commented
- rossant 3y agoImGui is an amazing piece of software. Being able to quickly display interactive widgets and dynamic charts for your variables and objects is incredibly useful when working on GPU-based visualization applications. The variety of features it offers is truly impressive.
- MegaDeKay 3y agoNot to mention that it runs on a pile of different platforms. It gets used a lot in Sony Vita homebrew stuff, for example.
- seism 3y agoVery exciting thoughts here! I'm a more "traditional" coder and struggle with adapting to the metaphor of visual/node tools even though I acknowledge their power. I'm a fan of https://cables.gl https://cables.gl which is also used for a lot of beginner and advanced projects in the Demoscene. It's great to see so much thought put into usability and collaborative features which bring digital art engines forward.