Water Node Material Create

https://github.com/qkr7287/WaterTest => Sahder files or Model and Texture materials used by Unity.
Babylon.js Playground => The playground that I’m trying to apply.
https://nme.babylonjs.com/#3FU5FG#54 => NMENode Material that we’ve been implementing.
Hello! I’m a beginner developer who is developing using Babylon JS.
I want to develop a shader like the picture using Babylonjs Node Material Editor.
I’m not sure which part to touch more in the current development situation. Is there anyone who can help me?
(The picture is a ShaderGraph that was implemented in Unity.)

Hello!
I was playing with something like this, but didn’t finish it unfortunatelly :slight_smile:

NME:
https://nme.babylonjs.com/#6MCVHR#5

@qkrxotn7287 there are more version of it, I think up to version #10, so if you are interested look at them too.

Hey @Deltakosh! I told you that I like to write the shaders by hand now however here is a quite cool (for a beginner like me it looks cool :smiley: ) NME tree, another child of your cool NodeMaterial and NME your are proud of! :smiling_face_with_three_hearts:

:vulcan_salute:

3 Likes

@qkrxotn7287

you can tweak the values to get more ripples, change the colors, fresnel etc like this:

2 Likes

Thank you so much for giving me an answer!:blush::blush:
The material you made is also very cool!
But I need to touch it more to get closer to my target.
Thank you.
Should I use Parallax Mapping to make the actual position of Mesh not change as in the video below, but look curved?

https://nme.babylonjs.com/#6MCVHR#11 => I touched your artwork a little bit.:blush:
https://github.com/qkr7287/WaterTest/blob/main/녹화_2022_02_04_16_53_06_600.mp4 => Video

1 Like

What do you mean by not changing the actual position of the mesh?
You can achieve the effect you need by modifying the Vertex Output in the NME. I started to make a version of my node material with modifyin the vertices as well, but as I said, I had to drop the project due to lack of time :frowning:

@PirateJC created a cool video about it:

1 Like

Thank you so much for your answer!
But what I’m saying is the same as the picture.:grin:
If you watch the video above, you will understand better.
That’s right! And if you ask this question, but when the material implemented in NME was created and applied with a unique code,
Is Unique Code really permanent?

1 Like

You are welcome buddy :slight_smile:

I already saw the video. So you want a sphere with flowing water over it. Let me tweak the values in my node material and see whether I can get close to your example.

I’m sorry but I don’t understand the question here. Are you asking whether the material created in NME will be accessible forever? Yes and No :smiley: The best way is to download the material after you’ve finished it and put in your project. There are a couple of ways doing this. Do I get the question correctly?

Maybe you can use an animated bump texture to achieve the effect. If you give me time I’ll make a small example for you.

EDIT:
Here is a PG with animated textures, it looks quite good and should be a good starting point.

It uses this amazing stuff created by @carolhmj https://github.com/carolhmj/quick-demos
Thanks Carol!

4 Likes

I’m sorry but I don’t understand the question here. Are you asking whether the material created in NME will be accessible forever? Yes and No :smiley:


yes! That’s right! You understood my question well! I also know how to save data and put it into a project and run it, but… I asked because it was so cool and convenient to use Unique URL. :blush:


Oh! It’s also incredible to make it into bump textures! But I want it to flow in a random pattern, not a certain pattern. I’ll have to study more about that. Thank you so much for helping me and answering my questions.Haha :blush: :blush:

1 Like

You can use a different texture to make it more random or combine mutiple textures or you can draw directly to your textures random bumps using the technique often used by 2D scroller games. You display half of the texture and you draw into the the other half (the hidden one) then you start revealing the hidden half and you start to draw into the previously displayed half which becomes the hidden one because it has scrolled off. My english :smiley:

You can use two meshes to make look cooler as seen here. Tweak the values, change the texture, etc:

YAW!

r. :vulcan_salute:

1 Like

Here is another PG combining 3 spheres with different textures. The possibilities are endless!

3 Likes

hello tasu park,
I would like to tell you about additional information about this

Very occasionally, there was a time when the server call did not work in Asia, and I think it can be a big problem if you encounter this in any project.

Therefore, it is recommended to create an NME and download the file as JSON and apply it.
ex)

let nodeMaterial = new BABYLON.NodeMaterial('custom node material');
nodeMaterial.loadAsync("./assets/blueAlpha.json").then(()=>{        
    nodeMaterial.build(true);
})
2 Likes

Hello roland,
Oh, thank you so much.I think it’s very close to my goal.:heart_eyes::heart_eyes:

1 Like

hello11128,
Thank you so much for answering my question.It was a really good reference!:relaxed:

Hello, Roland. I made Mat that I’m most satisfied with.Thank you very much for your opinion and I referred to it a lot.Thank you for your help!

2 Likes

You are welcome buddy! I’m glad you made it to your satisfaction!

:vulcan_salute:

2 Likes