언리얼4 VFX Basics - Creating the scrolling texture with mask setup



언리얼4 VFX Basics - Creating the scrolling texture with mask setup

금별 0 5,583 2019.10.31 21:23

Hey guys, since we seem to get a lot of new VFX artist traffic on here. I thought I would write up a few tutorials on some of the basic stuff us VFX artists use day to day.

 

In this first tutorial I will be covering scrolling noise, covered by a mask technique(I am not quite sure what to call it). Also known as “that technique from the Diablo 3 presentation”

undefinedundefined

 


Above I have supplied the two textures we will be using in this tutorial. Feel free to experiment and create your own textures! The image on the left will be used as a mask and the other I will be referring to as the “noise” texture. It’s just an image with different photoshop render clouds in each channel. We will be using this as the scrolling texture that will be multiplied over itself.

 

 

Lets start!

 

undefined

 


First we need to create two textures samples with two panners. Next we need to create a texture coordinate with the default 1,1 settings and plug it into one of our panners. For the second texture sample, we want to multiply the coordinates by 0.5. Once you have multiplied your coordinates, plug the output into your second panner. Plug the panners into the texture samples. Now plug 1 channel from each of the texture samples into a multiply node. For the above image, I chose to use the green channel. You will notice that when we combine both texture samples with a multiply, the resulting outcome is a little dark. Simply plug the output of the two samples plugged into one another into another multiply node. Then multiply that nodes by two. The outcome should now be much more visible!


undefined

 


Next we need a third texture sample of the same texture, with its uvs multiplied by 2. We will then multiply this with the last images final result then multiply the outcome by 2 again.

 

undefined


Quick tip: Create a time node and plug its output into a multiplier. Plug the output of the multiplier into the time of all your panners. This is an easy way to speed up and slow down the scroll speed of all your panners at once. (I apologize for the inconsistent texture coordinate set up in the images, they all do the same thing. I just had a few crashes in unreal and had to recreate the material a few times)

 

undefined

 


Next we need to multiply this scrolling noise texture with a mask to give the chaos some shape. For this, we will use the cloud mask I provided. All you need to do is multiply the end result of your panning clouds with the cloud mask texture sample, then multiply the end result by two.

You are now done… almost!

 

 

You will notice when you emit this cloud material as particles, that all the noise pans from the same point in the texture, in sync. This can give your particles a tiled look. In the next example I will explain a simple way to fix this.

 

undefined

 


I have broken the example above back down to two noise textures - panning and multiplied together for this demonstration.
We are going to be using a Dynamic Parameter node to randomly offset our noise per particle spawned at the start of their lifetime. We use dynamic parameters as a way to add or change values in our particle materials while in the particle editor. In this instance we are going to be using it to offset the texture by a number between one and zero per particle.

We will be adding a number to the uvs, as opposed to multiplying the uvs, because we want to push the uvs in a direction. Rather than scrunching them. See the example below.

undefined

undefined
The two images above are what it looks like when you add 0.5 to the uvs of a texture coordinate plugged into a texture sample. As you see it pans it halfway along the X axis and halfway along the y. A default texture coordinate in value terms is 0-1, 0-1. Our example on the left has had 0.5 added to it. So its value would be 0.5-1.5, 0.5-1.5. Below I will post a UV coordinate when it gets multiplied

undefined


The above texture coordinate has been MULTIPLIED by two. As you see it creates a different result to the images above. The uvs have been scrunched on both the x and y axis, as opposed to being shifted. The Value of the above texture coordinate would be 0-2, 0-2. As 0-1 has been MULTIPLIED by two, as opposed to added to.

Now that is out of the way. You should understand why we are using the dynamic parameter. We can control this parameter per particle just like any uniform input we use in the particle editor, such as size and lifetime. We are essentially going to set up a number between 0 and 1 for the dynamic parameter to choose between, per particle. This will offset our noise between 0-1 for each particle. Removing the obvious tiling we had before with our noisey smoke!

 

 

Setting up the dynamic parameter in Cascade


undefined
First we need to add a dynamic parameter to our particle system. To do that, right click on your particle emitter drop down. Navigate down to parameters and select Dynamic.


undefined
Next, right click on your newly added dynamic parameter and select refresh. This will update the dynamic parameter with the names you entered into your material dynamic parameter. In this instance, I named my red channel uv_offset


undefined
Next we need to look down to our dynamic parameters settings. Open up “0” under your dynamic parameters drop down list. “0” in the dynamic parameter is your red channel. 1,2,3 Will be your green, blue and alpha channels respectively.

Under “0” you will see whatever name you set as your dynamic parameters red channel and a bunch of other settings. Tick spawn time only. This will make it so when a particle spawns, it will pick a random value from the parameter below. Once it has that value, it will not change over the course of its lifetime. If you fail to enable this option, you will notice your particles will be flashing like a disco.

Last we need to change our Float Constant under Param Value to a Float Uniform. Once changed to a Float Uniform, set the min to 0 and the max to 1. Your particles should now be picking a different noise offset per particle! Yay, no more tiling!


undefined
Your final material setup should look like the image above

This technique isnt just for clouds. You can create all kinds of things with it!

 


Quick final notes

I recommend only using two texture samples for scrolling noise most of the time. Three is great for large smoke particles but can get too noisy for smaller shapes.

You do not always need two scrolling textures multiplied over the top of one another for this method. For example if you have 1 fire shaped mask and 1 tiled fire texture that you pan upwards multiplied together. This could be enough for a satisfying particle effect. I tend to just use 1, 1 and 0.5, 0.5 texture coordinates with various stretching and squashing

You can use this technique for colour too! Try multiplying two scrolling rgb texture samples together!

Try to always multiply the output of your two multiplied together textures by two. Otherwise you will end up with some very dark outputs!

Remember that certain elements tend to scroll in a certain direction. For example cold smoke would scroll and fall down, as fire scrolls and rises up!

Hope this was somewhat helpful to someone out there!

If you see anything that you think could do with some re phrasing, feel free to send me a pm

Comments


번호 포토 분류 제목 글쓴이 날짜 조회
1104 언리얼4 Simple Energy Beam in Unreal Engine 5 Niagara Tutorial ashif 02.06 47
1103 언리얼4 언리얼5+C4d - 나무 줄기 생성 효과 제작팁(한글자막) 금별 02.06 59
1102 언리얼4 Shield With Scene Texture in Unreal Engine 5 Material Tutorial ashif 02.05 68
1101 언리얼4 언리얼5 - 패럴랙스 형태 카드 효과 제작과정(한글자막) 금별 02.04 104
1100 유니티 유니티 셰이더 그래프 - 오디오 비주얼 스케일 효과 간단제작과정(한글자막) 금별 02.03 86
1099 언리얼4 언리얼 간단팁 - 웨이브 형태 움직임의 UV 제어방법 금별 02.03 150
1098 언리얼4 언리얼5 - 사용자 정의 LED 텍스트 제작과정(한글자막) 금별 02.03 112
1097 언리얼4 언리얼 - 플루이드 닌자를 활용한 연기느낌 디졸브 제작 금별 02.03 118
1096 언리얼4 언리얼5 - 스크래치 모듈이 작동하는 방식(한글자막) 금별 02.03 114
1095 2D 어도비 애니메이트 - 번개 시퀀스 텍스쳐 제작과정 금별 02.03 118
1094 언리얼4 언리얼 - 간단한 9분할 느낌의 글리치 효과 제작과정 금별 02.03 108
1093 유니티 유니티 - 원형 파동 패턴과 애니메이션 폴라코디네이트(한글자막) 금별 02.03 85
1092 유니티 유니티 셰이더 그래프 - 상호작용 조명 및 fake 볼류메트릭 연기 제작(한글자막) 금별 02.03 80
1091 유니티 유니티 앰플리파이 셰이더 - 페이크 뎁스를 사용한 VFX_Parallax Shader 활용과정(한글자막) 금별 02.03 81
1090 유니티 유니티 - 사용자 정의 라이팅 모델1,2 (한글자막) 금별 02.03 72
1089 언리얼4 언리얼 린반라이브 - 팹 애셋 버전지원 5.5관련/이펙트,캐릭 소팅문제/시퀀서 포스트프로세스 효과 주기 등 금별 02.03 83
1088 언리얼4 언리얼5 - 나이아가라 스타 트레일링 효과 제작과정(한글자막) 금별 02.03 88
1087 언리얼4 언리얼5 - 나이아가라_트레일 컨버전스 효과 제작과정(한글자막) 금별 01.23 173
1086 유니티 유니티 - 캐릭터 아웃라인 효과 제작예제(한글자막) 금별 01.23 158
1085 언리얼4 언리얼5 - translucent 스트로크 이펙트 머트리얼 간단예제(외곽라인) 금별 01.23 152
1084 언리얼4 언리얼5 - 라이트닝 버스트 제작과정(한글자막) 금별 01.23 135
1083 언리얼4 언리얼5 - 플립북 텍스처를 활용 물리 시뮬레이션 활용 및 GPU-CPU 간 데이터 전송 문제를 해결 금별 01.23 129

 

Banner
 
Facebook Twitter GooglePlus KakaoStory NaverBand