NodeCustomBuilder.com

haikalle · January 14, 2020, 6:17pm

Hi!

I have been coding this webpage. My goal is to make this a global nodetree library for everyone for free to use. There is a lot to be done still but giving access to users could give some ideas how to improve this web page. Also if you have a good nodetrees and you would like to share it with us then you can send it to me and I will add them into library.

Greetings

Kalle-Samuli Riihikoski

haikalle · January 16, 2020, 11:15am

Small update.

Now functionality of webpage should work.
Next task is to start to add some presets.

bartv · January 16, 2020, 11:16am

I don’t see any actual content there yet? It might be a bit too soon to start communicating about this…

haikalle · January 16, 2020, 11:18am

There is only 3 presets at the moment. And they are there just for developping purpose. Still long way to go

Rocksteady · January 16, 2020, 12:08pm

Oh my god, great idea man!

PS: You need a way to show how the result look like.
PS 2: We need a better zoom in, it’s barely readable on my side.

haikalle · January 16, 2020, 12:21pm

Thanks!

Option for Screenshot is not enough?

Zoom is coming

Momotron2000 · January 16, 2020, 12:47pm

I can’t read the nodes, they are too small.

maybe you can have a look at the nodes from Nodevember and ask the creators if they let you to add their nodes on your site.

In general this is a lovely idea, reminds me of https://www.hdbp.io/about.

Don’t forget particle nodes are in progress!

Rocksteady · January 16, 2020, 3:35pm

I don’t know what you have in mind but here’s some feedback:

UI/ UX is confusing and not going to scale very well with time and more nodes being added. I think the main window should be split, with the graph tree visible on one side and the final result on the other side (and not have to click on “screenshot” every time).
I think the materials should be in a drop down menu. Take this as an example (https://texturing.xyz/) where visual prevail, and it remains artist-friendly.
Make sure anyone can share their nodes easily (automatize the process of sharing node trees). If everything should be sent to you, you become the bottleneck and expect very few users to go through this process at all.

It’s not too late to fix these issues, and I’ve been looking a resource like that for a long time, it’s great someone is finally doing this!
Hope this helps.

EDIT: Another good example
https://www.shadertoy.com/

haikalle · January 16, 2020, 3:59pm

Great advises. I will surely take notes.

I agree that it will be annoing everytime to press screenshot button. I will change that the screenshot will be there right a way.

-I will change main materials selector (Materials-World-Composite) to drop down. I think that is visually a much better. Also I have an idea how make list easy to control without it becomes slow to use.

I try to make sharing nodes very easy, but I think that in the first stage it has some bottlenecks. I’m planning to add a option to send blend or json file to me and I will add it into list. I hope that as long I make sending process very easy it dosen’t turn off users. But this is area that I will keep working after initial release.

Thanks again. It’s so important to hear feedback in early stage as I am with this webpage.

Rocksteady · January 16, 2020, 4:19pm

Good to hear!

If you allow me to add more examples:

There’s nothing particular in the UI/UX here, but it’s efficient and more importantly: it’s visual. The user can see pictures on the same page rather than just names (that will eventually be redundant if different users upload their own takes of the same material), and select the ones of interest.

haikalle · January 17, 2020, 2:38pm

Todays update:

Main menu is drop down list.
Preset list works better.
Now you can doubleClick node tree area and it will zoom in/out.
You can click preview picture and it changes size.

Momotron2000 · January 17, 2020, 4:55pm

Cool, the nodes are still too small on my browser at the moment. How can I change the size?

haikalle · January 17, 2020, 5:06pm

dblClick nodetree area. That will zoom in. Is that zoom enough or should it be even more?

Momotron2000 · January 17, 2020, 5:54pm

it’s awesome, thank you! Maybe you need a description for that

haikalle · January 18, 2020, 10:27pm

First tests with Group node

rschuitema · January 18, 2020, 10:47pm

This looks like a great project!

I will make a couple of suggestions:

To allow the user to zoom in and out of the node tree, you can use a library such as https://github.com/anvaka/panzoom It should be very easy to include that library and allow user to zoom in and out with the mouse (or with pinch to zoom on a mobile).

Also, regarding the CSS, I see you are using bootstrap, but for this site, you really don’t need it. You only need a very small amount of CSS to acheive this sort of layout. Also you seem to be overrideing bootstrap styles in order to achieve the font sizes etc. You will probably find it easier to simply remove bootstrap and simply use flexbox with some basic styles for the text.

Good luck!

rschuitema · January 18, 2020, 10:50pm

btw If you would like any with the javascipt or CSS styling, I wouldn’t mind helping.

haikalle · January 19, 2020, 3:39pm

Thanks a lot. Panzoom is really the right way to go. I got basic pan/zoom to work, but zoom dosen’t work as it should. I red somewhere that default setting it should zoom into mouse, but right now it dosen’t. It a little bit hard to target into spot right now.

haikalle · January 19, 2020, 5:29pm

Got it work

Now pan/zoom works with mouse.

@rschuitema If you have ideas how to improve this webpage you can PM and I send source code for you.

rschuitema · January 19, 2020, 5:48pm

I sent a pm. Great work!