토네이도와 폭발효과 만들기



토네이도와 폭발효과 만들기

금별 0 147 08.18 17:38

원문 : https://halisavakis.com/write-up-tornado-explosion/

 

Tornado & Explosion

 

 

997D23505D590CF201817B

 

 

Recently I started experimenting with VFX and my 2 first entries on the field were 2 pretty standard concepts: a tornado and an explosion. Actually the whole idea of getting into VFX dawned on me after watching an awesome VFX tornado by Spyro. So I tried approaching VFX my own way, with my existing assets/shaders and knowledge, and started with these 2 simple concepts, with a style I had in mind which was similar to the waterfall shader I covered before.

 

Tornado

 


In case you missed it, the tornado turned out something like this:

 

 

 

 

By now, you’ve probably figured out that it’s all about layering stuff, and this effect was no exception. It’s a combination of 3 distinct effects (4 if you include the clouds, which I won’t cover here): the tornado core (which consists of 4 meshes using the same shader), the top and bottom spiraling planes (can’t think of a better description) and the particle system on the bottom.

 

Tornado core


The only custom mesh I used, looks something like this:

 

 

99376E4F5D590E9D323B2B

 

 

It’s nothing special, I did however make sure the UVs cover the whole square, so that the noise texture tiles as it pans on it.

I made a custom shader for the tornado which does the following effects:

Takes a noise texture and pans it in both axes according to a given speed.
Takes 2 HDR colors and, after rounding the texture’s values (like in the waterfall), lerps between them based on the banded value.
Displaces the vertices of the model based on the noise texture (white = outwards, black = inwards).
Uses a cutoff value to clip the pixels according to the texture’s grayscale value (without the rounding, for more values).
To get a better idea, each of the 4 layers of the core look like this:

 

 

 

 

Each layer has a different material with different colors, amount of clipping, scaling and vertex displacement power.

An important factor to get this look was the noise texture, created in substance designer:

 

 

998E2A4F5D590EA630F66C

 

 

 

Since I pan the texture in both axes, having a noise texture that was tilted 45 degrees like that was imperative to having the tornado swirling look.

 

Spiraling planes

 


The planes on the top and bottom of the tornado, while not fitting without a context (and the sky is not really fitting to the scene), contribute significantly to the impression of the sucking power of the tornado. They use a shader which is more or less the exact same as the tornado core, but with one big difference: they sample the noise texture in polar coordinates. That way, they give the impression of the texture being sucked towards the center, like a portal. That’s obviously why using polar coordinates is common to portal effects.

 

 

 

 

 

The particles
 

The more keen-eyed of you might have seen the shader before; it’s the one from that waterfall shader I mentioned above. The shader for them is explained and written in the second part of the tutorial so you can check it there!

 

 

 

 

Explosion


Following the same style as the tornado, I wanted to make an explosion effect, as it’d probably be way more commonly used than the tornado. Because I was following the same style and the principles were more or less the same, I ended up using pretty much the same exact shaders with different parameters. The end result was something like this:

 

 

 

 

Just to see it a bit better, here’s the effect without the animations:

 

 

 

 

You probably guessed it already: it’s a bunch of layers. No more than the tornado too. Here there are 3.5 distinct effects (3.5 because there are just 3 different shaders but one is used differently and on a separate mesh): The inner core of the explosion, the outer layers, the bottom spiraling plane and the outer air layers.

 

Inner core

 


While this was a separate shader, the principle was the same: Noise texture that pans with some speed, used for both coloring by lerping between 2 HDR colors (no banding here though) and for displacing the vertices.

Without the extra layers, it looks like this:

 

 

 

 

With a noise texture that looked like this:

 

 

99F8BA4F5D590EAF251F55

 

 

 

Outer layers


There are 2 outer layers, using the exact same shader and setup as the tornado layers. Easy to figure out when you see them away from each other:

 

 

via GIPHY

 

 

Having them pan the opposite way really contributes to the chaos of the explosion, at least for me.

FYI, all these meshes are spheres, they just have a plane hiding the rest of the mesh.

 

Bottom spiraling plane


No surprises here, it’s the exact same thing as before.

 

 

via GIPHY

 

 

Air layers


Just for this one, I’ll remove the ground plane to see what’s going on:

 

 

via GIPHY

 

 

Yes, it’s the tornado mesh with the same shader. I’m that lazy.

 

The animation


Clearly most of the work went into animating the thing, to have a somewhat nice feeling on the impact and the timing. Lucky for me, I have a custom tool I made that takes care of simple “programmer” animations, using coroutines and such.

With that tool I can move, scale, rotate transforms, but I can also change the color of sprites/UI elements and (the more underutilized feature which I loved for this effect) change the property of a material. I can also sequence the aforementioned animations, delay them and make them use specific easing curves (or custom ones). It’s a handy tool, but right now it needs a massive refactoring and major UI/UX improvement cause this is an editor that only I can love:

 

 

994F294F5D590EB22ABECA

 

 

The good thing is that all the aforementioned shaders have a “_Cutoff” property, so it was easy to dissolve the effect over time, while also scaling it.

 

Radial blur


To give more of an impact during the explosion, I used a custom shader for radial blur, for which I also happen to have a tutorial with the code right here. Lucky you! I do have to note that I’ve added a slight chromatic aberration effect on the existing shader though.

Here’s a comparison of a screenshot with and without the radial blur:

 

 

994E084F5D590EB42AC7DB

 

 

Without radial blur

 

 

9988CD4F5D590EB602392B

 

 

Conclusion


And that’s it! Hopefully this breakdown gives you a good idea about how to achieve similar effects! For me these little experiments are super fun and I want to explore what else I can do with these simple techniques and shaders. Until then, see you in the next one!


These posts will never go behind a paywall. But if you really really super enjoyed this post, consider buying me a coffee, or becoming my patron to get exciting benefits!

 

Comments


번호 포토 분류 제목 글쓴이 날짜 조회
공지 외국 교육 이펙트 튜토리얼 모음(사이트/유튜브/비메오등등..) 댓글+4 금별 2018.05.12 1132
공지 이펙트 추천 사이트/블로그 댓글+5 금별 2018.05.12 1317
89 유니티 유니티 이펙트 팁 - 포털제작 금별 10.19 30
88 언리얼4 언리얼4 이펙트 팁 - Rift to R’lyeh FX 금별 10.15 59
87 언리얼4 언리얼4 - 버텍스 옵셋 예제와 노드 금별 09.16 155
86 유니티 유니티 - 포탈이펙트 예제와 제작과정 금별 09.09 138
85 유니티 유니티 - Stylized 폭포 제작하기 금별 09.07 116
84 유니티 유니티 - 원통형 메쉬에 토네이도형 uv 흐름제어 금별 08.30 132
83 유니티 유니티 이펙트 제작과정 - 사슬로 감싼 폭발형태 제작 금별 08.30 158
82 유니티 마법적 구슬형태 제작 금별 08.30 124
81 유니티 유니티 버텍스 옵셋 효과 예제 Juane Gray 금별 08.20 99
80 유니티 Skeleton Mage Summon With Shaders and Textures 금별 08.20 107
79 언리얼4 언리얼4 - 버블쉐이더 금별 08.20 125
78 유니티 유니티 쉐이더 - 쉐이더그래프/앰플리파이 쉐이더에서의 커스터 버택스 스트림 사용 금별 08.20 78
열람중 언리얼4 토네이도와 폭발효과 만들기 금별 08.18 148
76 언리얼4 언리얼4 머터리얼 팁 - 텍스쳐없이 만드는 머터리얼 패턴 금별 08.13 126
75 유니티 유니티 쉐이더 그래프 - Weaving Ring Tutorial 2 댓글+1 금별 08.12 121
74 유니티 유니티 쉐이더 그래프 - Weaving Ring Tutorial 1 댓글+1 금별 08.12 147
73 유니티 유니티 쉐이더 팁 - 유령 트레일효과 SIN WAVE TRAIL 금별 08.02 132
72 유니티 유니티 쉐이더 팁 - RzFX//Radar Scan World Grid 금별 07.24 118
71 유니티 [NDC 2018] 게임 이펙트를 시작하는 법 금별 07.18 104
70 언리얼4 [NDC] 〈드래곤하운드〉 비주얼이펙트 연출 (언리얼4) 댓글+1 금별 07.18 154
69 유니티 유니티 쉐이더 팁 - 버블 쉐이더 만들기 금별 07.14 258
68 유니티 유니티 쉐이더 팁 - 스크린스페이스 맵핑을 객체의 월드포지션에 고정시키는 방법을 찾기 위한 사소한 팁 금별 07.14 81


Banner
Facebook Twitter GooglePlus KakaoStory NaverBand