태크놀로지

[Material] Electronic Fence Effect (Opacity Mask, 이미시브 컬러) (2) 본문

고급 그래픽스 효과

[Material] Electronic Fence Effect (Opacity Mask, 이미시브 컬러) (2)

원택 2020. 6. 28. 15:52

오늘목표

이미시브컬러에 Gen Pattern, Noise Pattern 추가


실습

우선 여러개의 대각선을 만들어 봅시다. u,v좌표를 더하면 대각선이 만들어집니다.

 

다음으로 시간변수를 더하여 여러개의 대각선 대각선 방향으로 움직이도록 합니다. 

*곱하게 될시 대각선들이 엄청나게 많이 생기니 주의!

 

다음으로 울타리 모양에 따라 발생하는 노이즈를 추가해봅시다. 이전에 만들었던 울타리 패턴을 복사해 가져옵니다.

Glitch효과를 구현할때 만들었던 노이즈 패턴과 비슷하게 제작합니다.

우선 노이즈 텍스쳐샘플링을 불러와 타임값을 적용하여 움직이도록 해봅시다.

*Append로 중간과정을 확인할수 있습니다.

 

노이즈 패턴을 복사해왔던 울타리패턴에 더해서 적용해줍니다. 하지만 현재 너무 노이즈 크기가 커 어색하니, 크기를 줄이도록 합시다.

 

텍스쳐 샘플에 power를 사용하여 거듭제곱한 결과를 연결해줍니다.

 

너무 노이즈가 보이지 않네요, multiply를 하여 노이즈 빈도를 늘려줍시다. 이렇게 노이즈 패턴까지 완성시켰습니다.

 

이제 만들었던 각 패턴들을 적용해봅시다. 대각선 움직이는 패턴은 lerp를 사용하여 a채널은 검은색, b채널(노이즈패턴이 적용될때의 색)은 밝은색을 적용해줍니다.

그리고 두개의 텍스쳐를 블랜딩하기 위해 노이즈 패턴과 대각선 움직이는 패턴을 곱해줍니다.

 

하지만 대각선 영역이외에도 노이즈값이 적용되고 있습니다. 이는 sine함수의 음수값이 넘어와서 이를 clamp로 양수만 출력하도록 합시다.

 

마지막으로 블랜딩된 값을 이미시브 컬러에 적용해주면 대각선으로 움직이는 노이즈 패턴이 적용된것을 볼수 있습니다.

 

하지만 울타리의 검은색부분이 뚫려있도록 표현하고 싶습니다. 울타리패턴을 오파시티 마스크에 연결해줍니다.

 

최종결과


출처

한국산업기술대학교 게임공학과 이택희 교수님 고급그래픽스효과 강의 - Opacity mask, normal, electronic fence