Teo Profile picture
Jul 30, 2018 11 tweets 5 min read Twitter logo 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
 

Keep Current with Teo

Teo Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

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 two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

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

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(