Blogs

illustrations illustrations illustrations illustrations illustrations illustrations illustrations

I Can Go With The Flow

Published on Mar 18, 2019 by on

I Can Go With The Flow

Last year I tweeted this and it reached a quite large audience. I decided then to transform that thread in this post. This is basically a copy and paste with high quality gifs. Enjoy!



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.

Flowmap01



Let’s start with a simple flow map shader. You can use this (not mine) as starting point. 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.

Flowmap02



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.

Flowmap03



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

Flowmap04



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!

Flowmap05



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.

Flowmap06



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.

Flowmap07



Another example with different settings.

Flowmap08



You can also use a texture flow map. This one uses the flow map found here.

Flowmap09



And the final shader you can find here :)

Flowmap10



For the non-coders, I added the ShaderGraph version of the radial shader (you have to install ShaderGraph and SRP to use this).

Flowmap11


Bonus

My friend Bruno Croci created a version of this on ShaderToy.

Similar Stories

From Built-in to URP

From Built-in to URP

Unity’s Scriptable Render Pipeline represents a great advance on the way that unity deals with graphics, giving more power to the users to customize the pipeline the way they want....

Read More
Look up! The Cook-Torrance!

Look up! The Cook-Torrance!

Continuing the posts of stuff that I should have posted last year but for some reason didn’t. Here, some (not deep) thoughts on Cook-Torrance and lookup textures.

Read More