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/
Enjoy:
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?
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?
Just pinging @trusktr
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.
actually i did a “switch” and for some reason did a < = > with an if
btw what are you using to render the graph?
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.
It would be great if it were open source.
Yeah, it will be open source for sure.
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.
