# Liquid shader/node material shenanigans, how to translate this to Babylonian?

**URL:** <https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447>\
**Category:** Questions\
**Tags:** shader, nodematerial, node-material, glass, liquid\
**Created:** [July 14, 2023, 11:17pm UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447 "2023-07-14T23:17:01Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\
**Post date:** [July 14, 2023, 11:17pm UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447/1 "2023-07-14T23:17:01Z")

</div>

Hi everyone! I hope you’ve all had a relaxing summer so far!

I have been studying shaders with mostly trying to recreate some cool Unity ones and trying to create some “plug n’ play” -functions for my game, so that Babylon stuff is separate from the main game logic.

Anyways, I have this cool liquid shader, that is encased in this so-to-be futuristic container. Take a look at the prototype here: [https://playground.babylonjs.com/#D1H1LY#17](https://playground.babylonjs.com/#D1H1LY#17)

As you can see, there are some liquid thing going in the container. I’ve been following this brilliant tutorial: [Liquid Shader Breakdown | Unity URP + Built-in - YouTube](https://www.youtube.com/watch?v=DKSpgFuKeb4) . The problem here is that I do not quite understand how the rotation part works in there. Meaning, that when the container flips all around the place as a physics object, the liquid should turn upside down.

The C# script that the tutorial uses to control the wobble and the fluid level are visible here: [https://pastebin.com/raw/tvCHyQ8M](https://pastebin.com/raw/tvCHyQ8M)  
I have not implemented the “UpdatePos” -function yet since I don’t really understand how that fits in everything.

The biggest problem I have right now with the shader, is the fact that the liquid stays unturned:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/7/f7630c5ea928b4e2ecdee94421fadfb8aea360b4.jpeg)

I wonder if this is because I use the mesh position directly without the world position? Anyways, I will continue banging my head on this problem, but I figured I’d ask if there are some Jedi Masters around to poke me into the right direction 🕶

---

<div class="post-metadata">

**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\
**Post date:** [July 15, 2023, 2:06pm UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447/2 "2023-07-15T14:06:55Z")

</div>

Yeah it is the world position I should be using, and then update the liquid level using some external function. Brb trying to do this…

---

<div class="post-metadata">

**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\
**Post date:** [July 15, 2023, 4:34pm UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447/3 "2023-07-15T16:34:10Z")

</div>

I have a question about relating to is this node setup equivalent to Unity’s?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/9/7934edbe0d400ab9cdd35bf4c6a295f978acff40.png)

Here I try to to subtract local position with world position, like the picture below:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/2/72bde3142cab179cef5fd17d8eb7f0612eaed346.png)

However, when I vector split the result and try to isolate the y-axis, I do get horizontal split and not vertical that I was looking for… Which seems odd to me 👀

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 16, 2023, 7:53am UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447/4 "2023-07-16T07:53:12Z")

</div>

I don’t think this is subtracting the local position of the mesh to its world position, that would make no sense to me. I think `Object.Position` is also a world position, for some other “Object” (maybe the container of the liquid, assuming the shader is for the liquid itself?).

---

<div class="post-metadata">

**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\
**Post date:** [July 18, 2023, 11:41am UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447/5 "2023-07-18T11:41:40Z")

</div>

I think this is done because we want to get somewhat “local relative world position”. It is explained like this in the tutorial:  
 ![worldpos](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/9/b983082b1e049c5cfabf2a5e7cc2965decae012b.gif)

But how to replicate this in Babylon?

Edit: Please open the image in new tab, so it is bigger.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 18, 2023, 1:36pm UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447/6 "2023-07-18T13:36:56Z")

</div>

For me, what this is doing is `liquid_vertex_pos_worldspace - liquid_container_worldspace`.

But if you really want to do `liquid_vertex_pos_worldspace - liquid_vertex_pos_localspace`, what you did is ok.

Note: if that’s what they wanted to do in Unity, they would have reused the same block they used for vertex world space and would have chosen “Local” instead of “World” for `Space`? Here they used a different node (“Object”). For me, this “Object” represents the container mesh, with its `Position` and `Scale` properties.

[…]

Given the doc: [Object Node | Shader Graph | 6.9.2](https://docs.unity3d.com/Packages/com.unity.shadergraph@6.9/manual/Object-Node.html)

I would say that “Object” is the position of the liquid mesh (and not the liquid container mesh as I first thought) instead =\> it’s the (world space) position of the mesh. In the NME, you will have to use a `Vector3` input to pass the value to your shader.

---

<div class="post-metadata">

**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\
**Post date:** [August 2, 2023, 9:45pm UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447/7 "2023-08-02T21:45:31Z")

</div>

Yeah, you were correct! It seems that in Unity, the Object position is a pre made node that is using the mesh transform as whole.

So updating the mesh position directly to the shader in Babylon works!

Here is the fixed effect, still work in progress though 🙂 [https://playground.babylonjs.com/#D1H1LY#28](https://playground.babylonjs.com/#D1H1LY#28)

---

<div class="post-metadata">

**Author:** ![Paul\_St\_Denis](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/paul_st_denis/32/39446_2.png) [@Paul\_St\_Denis](https://forum.babylonjs.com/u/Paul_St_Denis)\
**Post date:** [April 30, 2024, 6:11pm UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447/8 "2024-04-30T18:11:28Z")

</div>

This looks great! But they affect doesn’t seem to work in Babylon 7.  
Would you be able to make the playground example work in 7?

---

<div class="post-metadata">

**Author:** ![ryantrem](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ryantrem/32/34010_2.png) [@ryantrem](https://forum.babylonjs.com/u/ryantrem)\
**Post date:** [May 3, 2024, 12:00am UTC](https://forum.babylonjs.com/t/liquid-shader-node-material-shenanigans-how-to-translate-this-to-babylonian/42447/9 "2024-05-03T00:00:49Z")

</div>

Seems like it works in 7.0 ([Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/?version=7.0.0#D1H1LY#36)), but not in 7.1 ( [Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/?version=7.1.0#D1H1LY#36)). If that’s what @Paul_St_Denis means above, then this is due to a bug in NME, which should be fixed after this PR is merged: [Allow output type changes to propagate through the NME graph by ryantrem · Pull Request #15060 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/15060)
