Node based editor for TSL

Showcase
,
1

Hey everyone! With Three.js moving toward WebGPU, TSL is becoming the standard. However, writing TSL by hand can feel like a step back if you’re used to visual tools like Blender Nodes or Unreal’s Material Editor. I’ve been working on TSL Graph to bridge that gap. It’s a visual graph that lets you build shaders with nodes.

It’s in public beta and I’d love for this community to try and break it. What nodes are missing? How’s the UX?

Try it here: http://tsl-graph.xyz/

5 Likes
2

Enjoy:

image
image1101×781 28.2 KB

Don’t panic. It is not a bug in the editor. It is just my Firefox hates r182 (but works fine with r181).

If, Loop, Fn?

1 Like
3

Yeah, kinda panicked tbh when I saw the notification.

Yeah, I’m trying to figure out if and loop next. It’s kinda hard to fit them in nodes editor model (or at least I am struggling). I’d love to discuss if you have any ideas for it. Also isn’t Fn is just a function to structure or wrapper reuse logic? I use it internally for subgraphs and code nodes. Have you tried them?

1 Like
4

Just pinging @trusktr

1 Like
5

I handled the if like this

You basically plug in the value for false, true, and a Boolean for the condition. If the Boolean is true it returns the value for true if it’s false it returns the value for false.

1 Like
6

actually i did a “switch” and for some reason did a < = > with an if

btw what are you using to render the graph?

1 Like
7

I’m handling switch in same way as you. I kinda liked your approach for “if” block. I need to dig a little more though.

I’m using react flow for rendering graph.

8

It would be great if it were open source.

1 Like
9

Yeah, it will be open source for sure.

1 Like
10

Great editor, there is just one bug:

the preview model doesn’t have tangents, so we can’t use the “Tangent Local” node as it throws an error (maybe just need to call geometry.computeTangents()).

Apart from that is working great, really handy.

1 Like
11

Hi! Very useful tool. Any timeline for how long the public beta will go and if/when open source release is planned? Would be great to be able to integrate it with other existing tools / editors / etc.

1 Like
12

Thanks! No timeline is planned tbh. The only reason I haven’t open sourced it yet is because I am unable to decide the direction I wanna go in with this tool. For integration we have already experimenting with iframe and post message api and integrated within three js’ insepector.

If you wanna integrate in some other application maybe we can discuss what you will need and collaborate. here is editor api example GitHub - bhushan6/editor-integration-example · GitHub

if you need anything, feel free to DM me here. :slight_smile:

1 Like
13

This is out of control. Really, really nice work! So many of the rough edges I expected are just absent. It’s very pretty, but also runs really nice too. Too many other awesome little details to fawn over here, but I really appreciate the level of polish you’ve put in. Congrats and keep it up!

image
image1348×1268 171 KB

Only missing feature I expected was drag-drop directly in from nodes menu. This was quickly replaced by dragging new nodes directly from connections, so not a biggie. Just a UX bump.

I only found a few significant bugs:

  • it can be finicky to enter a negative number. With 2, select all and type -, 3. Expected -3 but get 03.
  • post graph (!!! are you kidding me!?!!!) seems like it will be awesome but doesn’t seem to work or do anything. I assume it’s just unfinished.

Couple of other suggestions:

  • Show datatypes (connection colors) as “what they currently are” with their existing inputs, even if the node can theoretically accept “any”.
    • e.g. all the connections when adding two vec3s should be cyan.
    • this will give better feedback about what datatypes are flowing, and good visibility on behavior when there’s casting/swizzling going on (e.g. multiply a vec3 with a float)
    • line shape, color code, and gradients are all stunning
  • Lovely to be able to drag numeric fields. A common type of number is a ratio (0..1) and I find the 0.1 steps too coarse for this use.
    • A finer step (even 0.01), at least at magnitudes < 10, would be fabulous.
    • Better yet, custom settings for fields (range, step, curve/mapping, etc) although metadata may be a problem here.
    • You may also want to consider modulating mouse sensitivity with magnitude. For example, the move from 1.0 to 1.1 oughta feel similar to 100 to 110. (Just be careful to keep a minimum effect to allow crossing zero.)
  • Thumbnails for each connection, or at least a “debug peek” when you hover. This would vastly improve the debugability of graphs.
  • Multi-select to move and create groups and subgraphs.
  • Alt-drag to duplicate nodes (though copy-paste works great)
  • Insert a new or existing node “onto” a connection, “intercepting” the connection. This might be a ux challenge…
  • “Under the hood”, temporarily implement the disconnected properties of the selected node as uniforms to allow fast, smooth feedback when adjusting them (avoid recompiling shader).
    • I notice when I add a uniform, that gives much better feedback.
    • Obviously adding secret uniforms for all disconnected nodes could be a performance disaster. Not sure.

This is all probably on your list, so I’ll stop here. Let me know if you want me to submit any/all of this with your feedback form.

Amazing stuff. Very impressive

1 Like
15

Thank you so much!! This means a lot tbh. : )

  • Yeah, I agree number inputs are not great at current state, but I haven’t able to figure out the solution.

  • Post graph is in working condition, can you please explain what exactly didn’t work for you? here are some examples with post graphs:
    https://www.tsl-graph.xyz/share/jn7bqazjr7zpt52qjgkr5ssdhx81e6hr
    https://www.tsl-graph.xyz/share/jn7brq0t708avnhned8rwxbt3s81fpyx
    https://www.tsl-graph.xyz/share/jn7ex3vawq4ggbmrptzhc09bc180hd94

  • Yeah, I wanna add type inference for node ports, I was just not sure if it was worth it. Actually I had also done some small POC for it but at that time didn’t get time to create a full fledge feature and then I kinda forgot about it. But yeah surely will look into it

  • Numeric scrubber can be improved, I agree.

  • Thumbnail, as in debug view of each node? If thats what you mean, it exists. Just go to bottom toolbar and look for debug mode (third from right side) and turn it on and you should be able to see debug view of selected node in properties panel on right side.

  • Multi select does exists, use ctrl + click or go to select mode (second option from left side in toolbar) to drag and select multiple nodes. And then you can move, delete, copy, create group and subgraph for your selection.

  • Yeah, I also wanted to implement this, all the other shader graphs has this, but couldn’t figure out how they do it. Only creating hidden uniform seems like possible solution. Also I am not sure about performance implication tbh, need to try it.

    Thanks for trying the tool and giving such detailed feedback!!

1 Like