distortion material (Fire)

apowell1_M_01 Distortion Material2.mp4

Using Distortion for... A Fire?!

I mean...if it's stylized it works, right? Right!? 😀 In this blog I'll show you how I created this stylized campfire using only a single material (the flames)! SAY WHAAH!?

Table of Contents

Reference Summary

Adding Colors

Making the distortion

Creating the "Flames"

Final Build

Feauture Demonstration

Conclusion

Resources

Reference Summary

When I first saw my instructor use this node, I immediately thought it could be useful to make a quick in-game fire without having to put too much though into. I used the two references here to get started and help brainstorm.
I knew I wanted some sort of "whimsical" look, so after getting in Unreal and playing around with the masking, I found the look I wanted! From there it was simply a matter of getting everything to work.

Source: https://blendermarket.com/products/dynamic-stylized-campfire

Source: https://medium.com/@brunolorenz98/unity-3d-creating-stylized-fire-vfx-260be1ddb36c

Adding Colors

When in doubt, LERP it out with a nice gradient moving from bottom to top, creating lighter values towards the bottom and reddish hues near the top. Just like a normal campfire would 🔥!

Making the distortion

At first a bit confusing to wrap my head around...I eventually found that layering two textures and then recombining was the best way to go for this material. It adds visual interest through variety and also gives options for mixing RGB outputs to create unique blends for masks and other cool things.

Creating the "Flames"

Following what my instructor had done by using an alpha to mask out certain portions of the texture, I quickly found again that this was certainly a solution for creating quick-moving, whip-like flames.

Final Build

Here is what everything should look like put together.

Feauture Demonstration

apowell1_M_01 Distortion Material.mp4

Conclusion

Overall, creating a flame, or campfire (whichever you prefer to call it) was a relatively straightforward process and I learned a lot while doing so. I had no idea materials could be used this way and I am excited to learn more!

apowell1_M_01 Distortion Material2.mp4

Resources

Textures: https://oneiricworlds.com/en/2019/01/cartoonish-foam-using-procedural-hand-made-textures/

Environment: https://www.fab.com/listings/b066de06-73b8-4fbe-b30c-468f5bcf7575

Page updated

Report abuse