I hope to find some time to make a video soon to better show how things work.. I'll try to explain it in text here: the statemachine definition is shown on the left. The states are the boxes with only a border and the current state is the blue box. The event/messages to trigger a state transition are defined by the boxes with a grey background. The flows on the right side use this statemachine: the flow on the top right handles storing the current state in a cookie but also initialises the statemachine with the stored state when the flow is loaded. A special node "OnStateChange" responds to statemachine changes... you can define the state that a OnStateChange node reponds to and trigger the output flow. In this example the statemachine shows the behavior of a lightswitch which can have 3 states: off, on and max.. the lightswitch can be put in "max-mode" only when the lightswitch is on. This is visualized by the image in the form-node. The buttons in the form-node also respond to the currentstate. Currently there's only support for 1 statemachine per flow, which is far too limiting offcourse, so I am going to change that soon.

Is this correct? The two graph views on the right are editable, and the state machine view on the left is derived from them. Good luck reworking the rendering. Using pure webgl or svg sounds like it could burn a lot of time though, is there some reason you don’t want to use a higher level library?

All is editable and nodes can be placed anywhere, it's a 2d infinite canvas. I have put the different graphs into sections to make the functionality more clear (hopefully). The different node-types can have constraints so that for example you cannot connect a State-node to something that is not meaningful. Currently I use react and react-konva as higher-level libraries, but I have to connect to the direct DOM-elements and konva-canvas elements to gain performance. I know that react and react-three-fiber can be very fast (also from pure development perspective not just performance). But I also want to try to and minimize the dependencies, so that would be my main reason for not using higher level libraries. Although loosing react would be painful I think. Something like tldraw uses react as well. I'll first start to do some experiments anyway before I ditch my current rendering solution and start using a different rendering solution.

OK, I misunderstood the graphs. Nice that it’s bidirectional. Hope you find a comfortable balance with the rendering.

Started rendering a flow using webgl and webassemembly this friday/weekend, using my own visual webassembly compiler (it can already render basic data using pure webgl). I've made a new node type which converts a json flow to webassembly memory so that it can be used to generate a 3d view of the flow. This approach serves multiple purposes.. since I am dogfooding my own editor, I use my own feedback to hopefully improve it and the custom programming language. Another goal is to build a webgl node and wire editor which has the least amount of dependencies (hopefully only javascript and webassembly manipulating the dom and webgl without the help of libraries). It will be a great learning experience for sure (whether I succeed or not). Hopefully I can show some screenshots later this week/next weekend of the progress.

Admirable dogfooding!

Spend some time again on the flow-based editor part of my project instead of the new renderer, because thanks to a colleague I've gotten an idea on how to render complex forms automatically based on a flow.. I'll provide more details in the thread.

The shadows are a little stark but a more moderate use can help orient people in the scene.

Yes, the shadows can be softened quite a bit. also the camera system needs a lot of work.. currently you can move around freely but that can result in angles that are not practical as you can see in that screenshot😊

You need ambient occlusion

Ah yes, good suggestion! I am rather new to shader-coding, so that will take a while before I have figured out how to do it. Although I'll focus on other tasks on my todo list first

Not saying I know myself, in Vulkan one simply copies code from Sascha Willems! Or for fonts I copied from https://github.com/kocsis1david/font-demo 😁👍

Thanks for that tip, I am going to take a look😀

Well, it's Vulkan so maybe not for you? Just empathising with you!

Yeah I know, but the shader code might be easy converted to webgl-glsl

I don't think "minimising dependencies" is necessarily a good reason to give up React, btw? It's a compact library really, or was last time I used it

I am still using react but not for the webgl part.

Cool. Happy hacking! 😊

Thanks! i'll keep posting my progress here and hopefully I can share a 2 minute video soon😅

I'll be following along 🤓