TSL Visual Node Editor - Alpha Release!

Discussion
, ,
1

Alpha release, hoping for othr developers to jump in and make more nodes so we can have this finished faster! This implementation outputs a javascript file that uses TSL to build materials. And the layout is stored as a comment in the js file so you can re-open a previously saved JS file to edit it again. Similar to how ComfyUI works when storing the node setup in the image’s metadata.

preview of how it looks / works:

6 Likes
2

Looking good!

3

Thanks Mr.Doob! I was thinking about adding some type of templates or pre-made node setup, because one user on X told me something it is the hard reality of today, which is, people are using AI now, it is part of the ecosystem… for example, why not just ask ChatGPT to write the TSL code?

I don’t have access to a chatGPT paid api, but one idea I can think of to add value is to find a way to make the AI translate TSL code into the node system, that way people could use the ai to generate the base, and use the node system to play around and prototype… but I can’t experiment on this to try.

4

Hi @bandinopla ,

I made a page to insert the output (layout) of your Editor.
I would like to know if this is the best method to include layout.js in the browser.

tsl_a2.zip (1.7 KB)

5

well you merged everything into one file… the ideal is to keep things isolated. So the real ideal is you use whatever skeleton you want and then…

If you use it in a js file…

import { $uniforms, materials } from "./your-nodes-exported-file.js"

const material1 = materials[0]

Or if you code everything in a single html…

<body>
    <!-- Your HTML content here -->

    <!-- Import the JavaScript module -->
    <script type="module">
        // Import the specific exports from your file
        import { $uniforms, materials } from './your-nodes-exported-file.js';

        // Now you can use $uniforms and materials in your code
        console.log($uniforms); // Example usage
        console.log(materials); // Example usage

        const material1 = materials[0]

        // Add your logic here using the imported variables
    </script>
</body>

It is never a good idea to mix stuff around…

1 Like
6

Thanks for the explanation @bandinopla .

@PavelBoytchev has an excellent work about TSL Textures here:
https://boytchev.github.io/tsl-textures/
It would be interesting if we could have combined this work with Yours.

1 Like
7

The editor I’m making will have a library of pre-made materials/node setups, so one will be able to start from a base and not from scratch everytime… something similar like that, which is the common way in which one works with 3d you usually have a library of materials and shaders like in software like substance painter.

That would be awesome If I manage to do it. That’s the goal!! Also, maybe even do something like shadertoy and let the users create and share their node setups.

Work in progress!

1 Like