Profile picture
Teo @teodutra
, 11 tweets, 5 min read Read on Twitter
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
Missing some Tweet in this thread?
You can try to force a refresh.

Like this thread? Get email updates or save it to PDF!

Subscribe to Teo
Profile picture

Get real-time email alerts when new unrolls are available from this author!

This content may be removed anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member and get exclusive features!

Premium member ($3.00/month or $30.00/year)

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!