Distance field Water Foam

-
After completing work on the Gerstner wave. I remembered that there were water foams in the water system mentioned in Simon Trumpler's Blog. The foam uses 2  unique looking textures panning that uses a disk mesh however the Mesh UVs made the foam.









I've also been looking at other water foams other artists have made. I noticed that Alex Vinogradov also produced the same result using a similar technique as Simon's method but with traditional noise textures. It produced a uniform result with the noise texture he used.


You can see the full guide here:  https://www.artstation.com/artwork/20Kzy

I recalled that Vectortoradialvalue is a node in one of my older projects that force distorts the texture Coordinate into a circle. A bit like the Polar Coordinate filter from Photoshop. So I decided to experiment and try using noise texture and distorting it.
Vectortoradialvalue Node - Texture Coordinate
converted into Polar Coordinate like the Photoshop filter

After producing this, I thought I'd figure out what the logic is behind Vectortoradialvalue since it is a material function and the main node that is responsible is the atan2 node. Atan2 node is a custom node that uses HLSL. In recent versions of UE4, the node works exactly the same way as the Arctangent2 Node.
Atan2 Node on the left using HLSL code. The code is shown in the material expression custom panel on the far left.
 Arctangent2 Node on the Right. Both nodes produce similar results.

This is what I was able to make from the material using the Vectortoradialvalue node while combining the techniques used by Alex's and Simon's approach:

Foam applied to a plane mesh using Vectortoradialvalue node. 
Foam similar to Alex Vinogradov's approach but converted to radial coordinates along with radial masks


In Simon's video, he mentioned that there is a newer way to make foam using distance fields but he doesn't go over this himself. I thought I'd make foam for the water system I am making, so I've been doing some research on distance fields and what they do. From what I understand it gives off a gradient based on the distance.




Comments

Post a Comment

Popular posts from this blog

Environment Showcase Concepts

-
Image
I thought it's about time to start working on creating the environment to showcase the water in the best way possible. It was suggested that I create this really cool Skull Waterfall environment concept art by Andrey Egorov: However, I will be using this concept as my initial inspiration and will be making my own iteration to the environment so it will not look exactly the same as the concept. It takes a bit of time figuring out and creating some of the features for the water shader. While I do this, I can work on creating the environment so I will be working on the water shader in small increments.
Read more

Distance Field water foam

-
Image
Distance Field Foam Vectortoradialvalue, DistanceFieldGradient used for U channel and DistanceToNearestSurface used for V. I thought about how texture coordinates worked and how VectorToRadialValue worked. Both being gradients in R(U) and G(V), I had a theory about creating coordinates based on using Distancetonearestsurface node as G(V) channel and have VectorToRadialValue or Distancefieldgradient node as the R(U) channel. I was initially going to use the DistanceFieldGradient node that I learned about when making the distance field flow map. This is because the node had that Texture coordinate look to it but it adds a lot to the shader instructions so I went with VectorToRadialValue node. I extracted and used maths for the R channel from VectorToRadialValue and it produced the coordinates I wanted. I then added this coordinate to the noise based foam I made earlier using Alex Vinogradov's approach. I later decided to add Distancefieldgradient node just to see if it pro
Read more

World alignment (Tri-planar mapping)

-
Image
From reading the UE4 documentation, I found out that material functions are a bunch of nodes packed into one node. I figured out the Math behind how world alignment works by deconstructing and experimenting with the World Aligned Texture node. This node is one example of a material function. It is also widely known as Tri-planar mapping in substance painter. Material Function for Tri-planar mapping  This gave me the idea to make a block out material which can have grids, scale without texture stretching and change colours the way I want it to. I also wanted to add the functionality of animating the material. I did this by making some modifications to the World Aligned Texture material function. Modified Material function with comments to help understand which part is doing what. I found that substracting the WorldPosition from the Object Position will force the material to move along with the object and not have a weird scrolling effect whenever you move the object.
Read more