{"author_link":"\/users\/maxime-catel","author_name":"Maxime Catel","author_uid":"maxime-catel","comments":[],"epoch":1543928923,"event":"LD43","format":"md","ldjam_node_id":135198,"likes":13,"metadata":{"p_key":"125874","p_author":"Maxime Catel","p_authorkey":"1056229","p_urlkey":"341989","p_title":"VFX breakdown ! How to make a waterfall ? ~ Particles & Nodal Shaders","p_cat":"LDJam ","p_event":"LD43","p_time":"1543928923","p_likes":"13","p_comments":"0","p_status":"WAYBACK","us_key":"1056229","us_name":"Maxime Catel","us_username":"maxime-catel","event_start":"1543536000","event_key":"71","event_name":"LD 43"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD43","removed_author":false},"_superparent":120415,"_trust":1,"author":56229,"body":"## Hello there !\n\nDo you like **VFX**, **particles** and **animated materials** ? Well, you are in the right place !\n\nHere is a little breakdown of this tremendous bloody (water)fall that I did for our game [**Abortion Boy**](https:\/\/ldjam.com\/events\/ludum-dare\/43\/abortion-boy) !\nIt's a really gore game, so I had to make blood and flesh VFX, enjoy~\n\n\n##### Look at this cutie\n![BloodWaterfall.gif](\/\/\/raw\/5ab\/d\/z\/1ea7b.gif)\n\n\n## So, shader first !\n\n\nFirst of all, I started from a 3D plane and made this really simple mesh with the soft selection tool in 3DS Max.\n![Mesh.PNG](\/\/\/raw\/5ab\/d\/z\/1ea83.png)\n\nThe most important part when you're making your waterfall mesh is to **tweak your UVs** like on this screenshot, because we'll have our waterfall texture that will be **panning** on our mesh, and because the UVs are less stretched at the bottom of the mesh, this will give us the feeling that the texture **accelerates over time** (we can see it on the next gif).\n\n![MeshUV.PNG](\/\/\/raw\/5ab\/d\/z\/1ea89.png)\n\n![BloodWaterfall02.gif](\/\/\/raw\/5ab\/d\/z\/1ea8a.gif)\n\nWell, we have our mesh ! Now, as you can see on the gif, we have a **panning texture**. I took some water texture, painted it in red, and made it tileable with photoshop offset and the stamp tool : \n\n![Texture.PNG](\/\/\/raw\/5ab\/d\/z\/1ea8d.png)\n\nBut from now, how to use this texture in Unity ?\n\n### That's the Shader magic !\n\nI'm not a HLSL\/CG language user, so I use a node based shader editor called **Amplify** to make my shaders.\n\nFirst of all, I'll need to **distort** my texture to make it more realistic. For this I use 2 **normal maps** that I will blend together : \n\n![Screen01.PNG](\/\/\/raw\/5ab\/d\/z\/1ea9a.png)\n\nNext, I make the normal maps pan, by using a float2 to control the panning on both X and Y axis : \n\n![Screen02.gif](\/\/\/raw\/5ab\/d\/z\/1eaa1.gif)\n\nAfter that, I need to blend them together, by using a linear interpolation node : \n\n![Screen03.gif](\/\/\/raw\/5ab\/d\/z\/1eaa3.gif)\n\nFinally, I lerp this new texture with the UVs of my main texture !\n\n![Screen05.gif](\/\/\/raw\/5ab\/d\/z\/1eaa7.gif)\n\nWith this shader, I'm now able to tweak and modify values & properties and texture through the Unity inspector : \n\n![Screen07.PNG](\/\/\/raw\/5ab\/d\/z\/1eaae.png)\n\n\n\n### Noice ! \nI have the base of my (water)fall ! Let's add some **particles** !!\n\n![BloodWaterfall03.gif](\/\/\/raw\/5ab\/d\/z\/1eabc.gif) ![BloodWaterfall04.gif](\/\/\/raw\/5ab\/d\/z\/1eabd.gif)\n\nSo, my main particles are affected by a really simple **dissolve** shader.\n\nFirst, I need to substract my texture with the opacity of the **particle system** (in the shader, we can access the particles properties with the node **Vertex Color**)Here, the opacity of the particles are saved in the alpha channel of the Vertex Colors.\nThen, I'm also creating a **greyscale mask**, to define the borders of my texture.\n\n![ScreenNext_01.PNG](\/\/\/raw\/5ab\/d\/z\/1eab4.png)\n\nAfter that, I multiply my texture with a color, so I can tint it if necessary; and also by the Vertex Colors RGB properties, to tint them directly in the particle editor.\n\n![ScreenNext_02.PNG](\/\/\/raw\/5ab\/d\/z\/1eab6.png)\n\nBack to my mask, I create a float to adjust the global opacity of my particles. The softness parameter is really useful : it will let me create a binary black & white mask (0, black; 1, white), that I will use to dissolve my texture : If I tweak the opacity parameter in my particles, this will adjust the limit between black and white values, instead of acting like a standard fade out.\n\n![ScreenNext_03.PNG](\/\/\/raw\/5ab\/d\/z\/1eab7.png)\n\n### Here it is ! My shader is complete !\n\nAnd now, I need to configure my particles to act like they do on the gif !\n\nThe most important properties are the **starting properties** (like lifetime, starting size, rotation, gravity..), and also the **color over life** (to make them fade), **rotation and size over life**.\nTry to always make some kind of **randomness** in your properties (for example, give a range of start size\/lifetime, and not a fixed constant)\n\n![ScreenNext_04.PNG](\/\/\/raw\/5ab\/d\/z\/1eaf5.png)\n\nWith my shader that is linked to my **vertex colors**, and the mask that I made in **Amplify**, the opacity of my particles will **dissolve** my texture.\n\n\n## That's all folks !\n\nI really hope you liked this little **breakdown**, and I'm really sorry because it's a bit long !\nDon't hesitate to **ask me any questions** if you want, or if you didn't understood something !\n\nAnd if you want, you can **test our game** here (but care, it's really gore and tortured) : \n\n# [Abortion Boy !](https:\/\/ldjam.com\/events\/ludum-dare\/43\/abortion-boy)","comments":5,"comments-timestamp":"2018-12-04T17:11:37Z","created":"2018-12-04T12:09:14Z","files":[],"files-timestamp":0,"id":135198,"love":13,"love-timestamp":"2018-12-18T13:21:39Z","meta":[],"modified":"2018-12-18T13:21:39Z","name":"VFX breakdown ! How to make a waterfall ? ~ Particles & Nodal Shaders","node-timestamp":"2018-12-04T22:14:11Z","parent":128523,"parents":[1,5,9,120415,128523],"path":"\/events\/ludum-dare\/43\/abortion-boy\/vfx-breakdown-how-to-make-a-waterfall-particles-nodal-shaders","published":"2018-12-04T13:08:43Z","scope":"public","slug":"vfx-breakdown-how-to-make-a-waterfall-particles-nodal-shaders","subsubtype":"","subtype":"","type":"post","version":405835},"node_metadata":{"n_key":"135198","n_urlkey":"341989","n_parent":"128523","n_path":"\/events\/ludum-dare\/43\/abortion-boy\/vfx-breakdown-how-to-make-a-waterfall-particles-nodal-shaders","n_slug":"vfx-breakdown-how-to-make-a-wate","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"56229","n_created":"1543925354","n_modified":"1545139299","n_version":"405835","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/43\/abortion-boy\/vfx-breakdown-how-to-make-a-waterfall-particles-nodal-shaders","text":"## Hello there !\n\nDo you like **VFX**, **particles** and **animated materials** ? Well, you are in the right place !\n\nHere is a little breakdown of this tremendous bloody (water)fall that I did for our game [**Abortion Boy**](https:\/\/ldjam.com\/events\/ludum-dare\/43\/abortion-boy) !\nIt's a really gore game, so I had to make blood and flesh VFX, enjoy~\n\n\n##### Look at this cutie\n![BloodWaterfall.gif](\/\/\/raw\/5ab\/d\/z\/1ea7b.gif)\n\n\n## So, shader first !\n\n\nFirst of all, I started from a 3D plane and made this really simple mesh with the soft selection tool in 3DS Max.\n![Mesh.PNG](\/\/\/raw\/5ab\/d\/z\/1ea83.png)\n\nThe most important part when you're making your waterfall mesh is to **tweak your UVs** like on this screenshot, because we'll have our waterfall texture that will be **panning** on our mesh, and because the UVs are less stretched at the bottom of the mesh, this will give us the feeling that the texture **accelerates over time** (we can see it on the next gif).\n\n![MeshUV.PNG](\/\/\/raw\/5ab\/d\/z\/1ea89.png)\n\n![BloodWaterfall02.gif](\/\/\/raw\/5ab\/d\/z\/1ea8a.gif)\n\nWell, we have our mesh ! Now, as you can see on the gif, we have a **panning texture**. I took some water texture, painted it in red, and made it tileable with photoshop offset and the stamp tool : \n\n![Texture.PNG](\/\/\/raw\/5ab\/d\/z\/1ea8d.png)\n\nBut from now, how to use this texture in Unity ?\n\n### That's the Shader magic !\n\nI'm not a HLSL\/CG language user, so I use a node based shader editor called **Amplify** to make my shaders.\n\nFirst of all, I'll need to **distort** my texture to make it more realistic. For this I use 2 **normal maps** that I will blend together : \n\n![Screen01.PNG](\/\/\/raw\/5ab\/d\/z\/1ea9a.png)\n\nNext, I make the normal maps pan, by using a float2 to control the panning on both X and Y axis : \n\n![Screen02.gif](\/\/\/raw\/5ab\/d\/z\/1eaa1.gif)\n\nAfter that, I need to blend them together, by using a linear interpolation node : \n\n![Screen03.gif](\/\/\/raw\/5ab\/d\/z\/1eaa3.gif)\n\nFinally, I lerp this new texture with the UVs of my main texture !\n\n![Screen05.gif](\/\/\/raw\/5ab\/d\/z\/1eaa7.gif)\n\nWith this shader, I'm now able to tweak and modify values & properties and texture through the Unity inspector : \n\n![Screen07.PNG](\/\/\/raw\/5ab\/d\/z\/1eaae.png)\n\n\n\n### Noice ! \nI have the base of my (water)fall ! Let's add some **particles** !!\n\n![BloodWaterfall03.gif](\/\/\/raw\/5ab\/d\/z\/1eabc.gif) ![BloodWaterfall04.gif](\/\/\/raw\/5ab\/d\/z\/1eabd.gif)\n\nSo, my main particles are affected by a really simple **dissolve** shader.\n\nFirst, I need to substract my texture with the opacity of the **particle system** (in the shader, we can access the particles properties with the node **Vertex Color**)Here, the opacity of the particles are saved in the alpha channel of the Vertex Colors.\nThen, I'm also creating a **greyscale mask**, to define the borders of my texture.\n\n![ScreenNext_01.PNG](\/\/\/raw\/5ab\/d\/z\/1eab4.png)\n\nAfter that, I multiply my texture with a color, so I can tint it if necessary; and also by the Vertex Colors RGB properties, to tint them directly in the particle editor.\n\n![ScreenNext_02.PNG](\/\/\/raw\/5ab\/d\/z\/1eab6.png)\n\nBack to my mask, I create a float to adjust the global opacity of my particles. The softness parameter is really useful : it will let me create a binary black & white mask (0, black; 1, white), that I will use to dissolve my texture : If I tweak the opacity parameter in my particles, this will adjust the limit between black and white values, instead of acting like a standard fade out.\n\n![ScreenNext_03.PNG](\/\/\/raw\/5ab\/d\/z\/1eab7.png)\n\n### Here it is ! My shader is complete !\n\nAnd now, I need to configure my particles to act like they do on the gif !\n\nThe most important properties are the **starting properties** (like lifetime, starting size, rotation, gravity..), and also the **color over life** (to make them fade), **rotation and size over life**.\nTry to always make some kind of **randomness** in your properties (for example, give a range of start size\/lifetime, and not a fixed constant)\n\n![ScreenNext_04.PNG](\/\/\/raw\/5ab\/d\/z\/1eaf5.png)\n\nWith my shader that is linked to my **vertex colors**, and the mask that I made in **Amplify**, the opacity of my particles will **dissolve** my texture.\n\n\n## That's all folks !\n\nI really hope you liked this little **breakdown**, and I'm really sorry because it's a bit long !\nDon't hesitate to **ask me any questions** if you want, or if you didn't understood something !\n\nAnd if you want, you can **test our game** here (but care, it's really gore and tortured) : \n\n# [Abortion Boy !](https:\/\/ldjam.com\/events\/ludum-dare\/43\/abortion-boy)","title":"VFX breakdown ! How to make a waterfall ? ~ Particles & Nodal Shaders","wayback_source":[]}