Teo Profile picture
Teo
A frustrated researcher developing games. Doing graphics stuff @insideBBI

Jul 30, 2018, 11 tweets

I've been using flow maps a lot recently to get some cool vfx. In this thread, I'll talk about some things you can do with few math and some textures #unity #vfx #shader

Let's start with simple flow map shader. You can use this (not mine) as starting point gist.github.com/TarasOsiris/e0… We can set a vector directly to drive the flow. So, flowDir = float2(1,0) set the flow to the right. I created this texture with "difference clouds" filter in gimp.

If we expose that vector as a property we can control the flow direction. We can also expose properties to control the lerp speed and flow speed.

In this case, we know that the uv coordinates at center are (0.5,0.5). Well, we can then compute the difference between the uvs and the center and have a radial flow.

Let's make this additive. Let's also add a mask to drive the border opacity and another one to be added to the current color. By using Unity's default particle texture we get this kinda energy flow. That looks cool already!

Let's add some colors. I added two colors and I'm interpolating them according to the distance between the uv and the center position.

Could I rotate those vectors? Yes! In this case, I'm multiplying by the rotation matrix and by the distance to the center, so we have this smooth rotation instead of a simple texture rotation.

Another example with different settings

You can also use a texture flow map. This one uses the flow map found here catlikecoding.com/unity/tutorial…

And the final shader you can find here github.com/teofilobd/APIs… :)

For the non-coders, I added the ShaderGraph version of the radial shader (you have to install ShaderGraph and SRP to use this) github.com/teofilobd/APIs… #unity3d

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling