💭회고
오늘은 언리얼 엔진에서 비주얼 이펙트(VFX) 중 하나인 “디졸브(Dissolve) 이펙트”를 집중적으로 학습했다. 디졸브는 오브젝트 표면이 특정 패턴으로 서서히 사라지는 효과를 구현할 때 활용도가 높으며, 트랜지션(장면 전환)이나 파티클 이펙트 등 다양한 분야에서 쓰인다! (캐릭터나 몬스터가 죽었을 때 구현해도 좋을듯)
이번 학습에서는 Step 노드와 SmoothStep 노드를 이용해 디졸브를 구현하는 과정을 살펴보았으며, 블렌드 모드와 경계면 처리 방법, 대비 조정(Contrast) 같은 디테일한 부분까지 다뤘다.
추가로 공부하면 좋을 내용으로는 나이아가라(Niagara)와 머티리얼 인스턴스 파라미터 연동, 블루프린트에서 동적으로 이펙트를 제어하는 방법, 그리고 어드밴스드 셰이더 기법(예: Fresnel, Emissive 등)을 병합하는 방법 등도 알아보면 좋을 거 같다.
🗺️마인드맵
📒학습 내용
1. 디졸브(Dissolve) 이펙트 이해하기
“디졸브(Dissolve)”는 단어 그대로 녹아 사라지는 듯한 시각적 효과를 의미한다. 흔히 영상 편집에서 장면 전환(트랜지션)으로 “페이드 인/아웃”과 유사하게 쓰이지만, 게임 내에서는 오브젝트 표면의 일부가 패턴을 따라 점진적으로 소멸되는 효과로 활용한다.
"디졸브를 제대로 구현하기 위해서는 표면의 어느 부분부터, 어떤 패턴으로, 얼마나 빠르게 사라질지를 통제할 수 있어야 한다"
이를 위해 Noise Texture를 사용하거나, Step, SmoothStep 같은 노드를 활용해 특정 임계값을 기준으로 픽셀을 투명하게 만든다.
✨참고로 디졸브를 만드는 방법은 다양하다!
2. Step 노드를 활용한 디졸브 기초
2.1 Step 노드란?
Step 노드는 입력 X가 기준 Y보다 작은지(Y>X) 혹은 크거나 같은지(Y<=X)에 따라 0 또는 1을 반환해준다.
예를 들어, Step(0.5, 0.3)은 0을, Step(0.5, 0.7)은 1을 반환한다.
➡️ 이를 디졸브에 적용하면, 노이즈 텍스처가 가진 픽셀 값을 임계값(Threshold)과 비교해 어느 순간 0으로(투명), 1로(보이기) 명확하게 나눈다.
2.2 필요한 기본 노드
필요한 노드를 알아보기 전에,
디버그 하는 법부터...!
DebugScalarValues 노드로 아래처럼 어떤 값이 나오는지 알 수 있다!
노드 | 용도 |
Step | 두 값(X, Y)을 비교해 0 또는 1을 반환한다. |
Time(Frac, Sine) | 시간에 따라 변하는 값을 출력하여 에니메이션 효과를 만든다. |
ConstantBiasScale | Bias(+), Scale(×) 연산을 간단히 처리한다. |
2.3 디졸브 머티리얼 제작 과정 (Step 방식)
1. 블렌드 모드(Blend Mode)를 Translucent로 설정한다.
2. Noise Texture를 준비한다. 검은색 부분은 투명해질 부분, 흰색 부분은 남길 부분이다.
3. Time 노드(Sine, Frac)를 활용해 시간 흐름에 따라 임계값을 변화시킨다.
4. Step 노드를 이용해 임계값보다 낮은 픽셀은 0, 높은 픽셀은 1로 처리한다.
5. 오파시티(Opacity) 또는 오파시티 마스크(Opacity Mask)에 연결해 사라지는 효과를 만든다.
3. SmoothStep 노드를 활용한 디졸브
SmoothStep의 특징
SmoothStep은 0과 1 사이의 값을 곡선 형태로 매끄럽게 변화시킨다.
Min 값, Max 값을 지정해, 0~1 범위 내에서 그라데이션 형태로 디졸브되는 과정을 표현할 수 있다.
"Step이 딱딱하게 사라진다면, SmoothStep은 부드러운 페이드 효과를 준다"
4. 머티리얼 블렌드 모드와 경계면 처리
4.1 블렌드 모드 선택
1) Masked: 오파시티 마스크를 사용해 픽셀을 완전히 보이거나(1) 사라지게(0) 만든다.
2) Translucent: 투명도를 연산해 중간 값도 허용한다.
용도에 따라 조합해서 사용하면 된다. 단, Masked는 중간값이 잘리지 않아 퍼포먼스가 좋을 수 있고, Translucent는 자연스러운 반투명 처리가 가능하다.
4.2 경계면 강조 기법
디졸브 시 가장 시선을 끄는 부분은 사라지는 “테두리”다.
이 경계면에 불이 타오르듯 색상과 이펙트를 주려면, 1 - x 연산으로 반전시켜야 한다.
4.3 대비 조정, CheapContrast, Power
1) 대비(Contrast) 조절
디졸브가 시작되는 임계값 주변을 더 도드라지게 하려면 대비를 높여줄 수 있다. 대비가 높아지면 흰색과 검은색의 구분이 선명해져 경계면이 뚜렷해진다.
2) CheapContrast
"CheapContrast는 포토샵의 Levels Adjustment처럼 픽셀 분포를 늘려서 대비를 증폭시키는 함수다"
입력 히스토그램의 상·하단 구간을 재매핑해 전체적으로 어두운 픽셀은 더욱 어둡게, 밝은 픽셀은 더 밝게 만든다.
흑백 이미지를 다룰 때 특히 효과적이며, 간단한 파라미터로 대비를 조정할 수 있다.
3) Power 노드와 차이점
Power 노드는 지수 함수를 이용해 픽셀 값을 부드럽게 굴곡시킨다.
CheapContrast는 훨씬 직관적으로 대비를 올려주는 선형(Linear) 리매핑 방식에 가깝다.
💡대비를 높이면 디졸브 경계가 강렬해진다.
Power는 그라디언트 조절용, CheapContrast는 선명한 대비 조절용으로 구분해 쓰면 좋다.
5. 머티리얼 함수(MF_BasicDissolve)로 제작하기
반복해서 쓰는 디졸브 로직을 머티리얼 함수로 만들면, 여러 머티리얼에서 재사용하기 편리하다.
1. 노이즈 입력(Texture) 파라미터
2. Threshold 파라미터
3. Contrast 파라미터
4. EdgeRange 파라미터 (경계면)
위와 같은 입력을 가진 MF_BasicDissolve 함수로 만들어두면, 다른 머티리얼에서도 쉽게 끌어와 연결할 수 있다.
6. UI 요소와 연계⭐
UMG(언리얼 모션 그래픽) 위젯 등에 이미지 브러시로 머티리얼을 연결할 수 있다.
체력 게이지나 경험치 게이지가 디졸브되며 사라지는 등 UI 특수 효과에도 응용이 가능하다!.
나는 오늘 이것을 구현하고 싶었다!!
7. 실무 관점 팁
💠나이아가라 이펙트와 Blueprint를 연동해, 캐릭터 사망 시 디졸브 효과를 서서히 주는 기법이 많이 쓰인다.
💠 멀티플레이 환경에서는 디졸브 트리거(Trigger)를 서버 이벤트로 처리해, 모든 클라이언트에 동기화해야 시각적 오류가 없다.
💠 디졸브가 잘 안 보이거나 Aliasing 문제가 발생하면, 노이즈 텍스처 해상도나 블렌드 모드 설정을 재검토해야 한다.
🔗참고링크 : https://www.youtube.com/watch?v=ixSBycbQay8
🟣오늘의 옵시디언 현황
'Dev. > UE 언리얼 엔진' 카테고리의 다른 글
[TIL_250225] 언리얼 엔진으로 구현하는 표면 기반 발소리 & 3D 사운드 시스템 (0) | 2025.02.25 |
---|---|
[TIL_250224] 언리얼 엔진 탄약 UI 연동, 크로스헤어(조준점) 줌인 구현 (0) | 2025.02.24 |
[TIL_250219] FPS(TPS) 게임 개발 :: 메인 메뉴 UI 및 HUD 구현 (0) | 2025.02.19 |
[TIL_250214] UI 위젯 설계와 실시간 데이터 연동하기 (0) | 2025.02.14 |
[TIL_250213_3] 게임 루프 설계를 통한 게임 흐름 제어 (0) | 2025.02.13 |