(Niagara) 나이아가라 Overview

나이아가라를 활용하여 이펙트를 제작할시에는 Niagara Emitter/Niagara System을 가장 많이 활용한다.

나이아가라는 어떻게 구성되어 있는가?

나이아가라 시스템에 나이아가라 이미터 여러개로 구성된 형태로 이펙트를 제작한다.

나이아가라 이미터에 대한 이해

나이아가라 이미터는 크게 7가지로 분류할 수 있다. 
* 오렌지는 이미터와 관련된 설정이며 초록색은 파티클 자체의 설정

1. 이미터 설정 : Local/World로 설정 여부, CPU/GPU
2. 이미터 스폰 : 이미터 스폰은 처음 한번만 출력되는 설정
3. 이미터 업데이트 : 프레임마다 업데이트되며 파티클이 출력되는 방식을 설정할 수 있다. 
4. 파티클 스폰★ : 생성된 모든 파티클의 초기 설정
5. 파티클 업데이트★ : 생성된 모든 파티클의 프레임별 설정
6. 이벤트 핸드 추가
7. 랜더 : 실제 화면상에 매치는 머티리얼 설정

fig01. Niagara Emitter

기본 노드의 기능 정리 - MathOperation

 *노드의 기능들을 공식처럼 바로 말 할 수 있도록 숙지가 필요함으로 다음과 같이 정리하도록 한다.

참고링크 : http://wiki.amplify.pt/index.php?title=Unity_Products:Amplify_Shader_Editor/Nodes

(다항연산)Saturate : 입력값을 범위를 0과 1사이로 제한한다. 0보다 작은 값은 0으로, 1보다 큰 값은 1로 출력한다. *Saturate 노드를 활용하여 0~1 범위 바깥의 의도치 않은 값들을 제거하여 라이트, 색상 연산 등에서 매우 자주 사용된다.

(백터연산) Dot 프로덕션 : Dot 프로덕션은 카메라가 물체를 바라보는 각도, 물체가 카메라를 바라보는 각도를 계산하여 0과 1의 값을 보낸다. ( 가운데 1, 외각 0 )

fig01. Dot Production Formula

Abs : 입력 값으이 절댓값을 출력하며 양수는 그대로 양수, 음수는 양수로 바꾸어 출력한다.

Add : 연결된 노드들의 값을 더한다. ( 색상은 더하면 밝아진다는 점을 유의하면서 사용한다. )

Ceil : 입력 값을 올림한 값을 출력한다. 예를 1.1은 2로 5는 5, -2.3은 -2이 된다.

Clamp : 값의 최솟값과 최대값 범위를 제한한다. ( Saturation과 Clamp(0,1)은 같은 기능을 구현한다.

DDX : 

ArtRayClass(5Week) : Depthfade, Dot Production, Vertex Normal, Noise Texture

*쉐이더를 제작할 시 어떤 기능이 필요한지 생각하고 해야 한다.

4주차에 제작된 쉐이더의 심화 과정

• 기능을 조절하고 싶은때 제작한 노드 뒤편에 Power, Multiply 노드를 추가 시키면 된다.
• Switch 기능은 제곱을 통한 연산을 하기에 3개 이상 쓰지 않도록 한다. 그럼으로 왠만하면 Switch와 비슷한 기능을 구현하는 Lerp 노드를 활용하길 권한다.
• 시퀸스와 디졸브 쉐이더를 병합하여 사용하길 권한다.
• 노드의 선을 더블 클릭하면 선의 형태를 변형할 수 있어 선 정리시 활용하면 좋다.
• Vertex Normal은 버택스가 바라보는 방향, Tangent Normal은 Face가 바라보는 방향이다.
• 바탕색이 빨간색인 노드는 Input Data로 Particle Emmitter에서 데이터를 가져오는 기능이다.

01. Depth Fade 추가 ( Alpha )

• Depth Face는 1이 기본 값이다, 기본 값으로 Saturate은 Off로 설정되어 있는데 이로 인해 너무 밝게 나타나는데 그래서 반드시 On으로 설정 해줘야한다.
• 만약 씬 뷰에서 Depth Fade가 적용이 됬으나 게임뷰 적용되지 않았다면 반드시 Project Setting에서 DepthFade 기능을 켜(fig02, fig03) 줘야 한다.
• DepthFade 기능이 맞닿는 부분에서 출력이 되도록 설정을 하고 싶다면 OneMinus 노드를 Depthfade 노드 뒤에 추가 시켜주면 된다.
• DepthFade는 무거운 기능임으로 기능 사용 여부를 선택할 수 있는 Static Switch를 연결주길 권한다.

fig01. Depth Fade Node

fig02. Depth Fade Setting 01

fig03. Depth Fade Setting 02

02. 외각 색상 노드 Fresnel ( Alpha )

• Frenel 노드는 Dot Production의 기능을 노드화 시킨 노드로 이해하면 좋다.
• Dot Production은 링크를 통해 간단한 기능 구현에 대한 설명을 보면 된다.

fig04. Fresnel Node

03. World Position Offset Node

• Vertex Offset은 Add로 좌표값의 위치를 수정한다고 생각하면 된다. ( 기본 값은 0이다. )
• Vertex Normal을 통해 다이다믹한 형태를 표현하고 싶다면 다음과 같은 노드들을 추가시켜준다. (LERP 노드)

fig05. World Position Offset Node

04. Grandient Color Node ( Color )

그라데이션 색을 주기 위해 다음과 같은 노드(Fresnel, UV/Component Mask)를 Color 값에 연결해준다.

fig06. Color Gradient Node

05. Master Node Final Result

fig07. Master Node Final Result

※ 노이즈 텍스쳐 그리는 방법론 ※

• 2021 버전 부터 패턴 미리보기 기능이 있어 노이즈/타일 텍스쳐를 그릴때 활용하면 좋다.
• 노이즈를 그릴때 흰색과 검정색의 비율이 중요하다. ( 흰색 비율이 많을 수록 바람/연기 계열, 횐색 비율이 적을수록 오로라 계열의 노이즈 텍스쳐 )
• 노이즈 텍스쳐는 UV 스크롤을 활용하기에 어느 방향으로 흐를지 생각하고 그리길 권한다.

1. 노이즈의 형태를 그려준다.

   

   fig08. Noise Shape

   
   
2. 손가락 툴을 활용하여 움직일 방향성에 맞춰 형태감을 수정해 준다.

   

   fig09. Noise Smudge

   
   
• *북미풍은 Blur한 텍스쳐를 선호하고 일본풍은 칼 같이 깔끔한 형태감을 선호한다.
3. Motion Blur 효과를 넣어준다.

   

   fig10. Noise Motion Blur

   
   
4. Glow 효과를 넣어준다.

   

   fig11. Noise Glow

ArtRayClass(2Week) : 라인 & 그라운드 스모크

라인 텍스쳐 제작 방법론

1개의 텍스쳐 사이즈 :  512/256 

1. 라인 텍스쳐를 그린다 ( 다이아몬드 형태 )
• 라인 텍스쳐를 그릴 경우에는 앞 머리를 기준으로 작업을 진행한다.(핵심)
2. 라인의 위/아래의 넓이만 줄인다.
• 타임 라인 줄이는 단축키 설정법
• KeyBoardShotCut ( Edit )
• Appilcation -> Pannel Menu
• TimeVideo -> Trim End at Playhead ( Move and Trim ) - Cntrl E로 단축키
3. 라인의 위/아래 넓이를 줄이고 라인의 꼬리부분의 길이를 줄여줍니다. ( 2 덩어리로 분할 )
4. 위/아래의 넓이를 조금 더 줄이고 각 부분을 조금식 더 지운다. ( 3 덩어리 )
5. 위/아래의 넓이를 조금 더 줄이고 4번에 제작한 2덩어리의 위치를 앞으로 살짝 움직인다. 
6. 위/아래의 넓이를 조금 더 줄이고 5번에 제작한 2덩어리의 위치를 앞으로 살짝 움직인다.
7. 6 프레임의 덩어리를 좀 지우고 2덩어리였던 부분을 1덩어리만 남기고 지운다.
8. 7 프레임의 덩어리를 좀 지우고 뒷 덩어리 앞으로 조금 이동 시킨다.

fig01. LineTexture Final Result

※ 텍스쳐 시트 제작 방법론 ※

1. 배경에 색 Layer를 깔아준다. 그러는 이유는 각 텍스쳐의 위치를 잡아줄 시 사이즈 맞게 이동 시키기 위함에 있다.
2. 만든 시퀸스들과 배경색 레이어를 한번에 잡고 그룹으로 묶어준다.
3. 필요한 크기의 새로운 캔버스를 생성해준다.
4. 2번에서 만든 그룹을 복사해서 넣어준다.
5. 배경 색 Layer를 기준으로 이미지들을 이동해준다.

※ 후반 Glow/그라데이션 작업 ※

1. 레이어들을 묶은 그룹레이어에 OuterGlow이펙트를 넣어준다.
• 마지막 결과물을 위한 세심한 Glow 효과를 내기 위해서는 전체적으로 Glow를 주기보다는 각각의 이미지에 맞는 Glow를 줘야한다.
2. 각 텍스쳐에 그라데이션의 효과를 넣기 위해 그라데이션 레이어를 생성하여 기존에 Glow를 줬던 그룹에 Clipping Mask 해준다.

※ 텍스쳐가 정사각형이야 되는 이유 ※

유니티는 자체적으로 이미지를 압축하는 방식이 있는데 그 방식은 다음과 같다. 가장 긴 길이를 기준으로 정사각형의 이미지로 변경해서 엔진에 넣는다. 예를 들어 1024X512 이미지가 있다는 가정하에 유니티에 넣었을 때 유니티에서 이미지를 1024X1024로 임의 변경하여 엔진에 넣는다. 그렇다보니 Unity가 자동으로 정사각형으로 수정하는 과정에서 이미지가 손상되기 때문에 이미지를 제작할 시 정사각형의 형태를 유지하면서 이미지를 제작해줘야 한다.

그라운드 스모크 제작 방법론 ( 1024 /171 )

* 그라운드 스모크 그리는 방식에는 형태를 스케치해서 그리는 방식과 면을 채우면서 그리는 방식이 있다.
* 그라운드 스모크를 그릴 시 뒤로 밀린다는 느낌을 내는 것이 중요하다.

※ 주의 사항 ※

• 가장 큰 방향성을 가지는 웨이브 간에는 어느 정도의 평행을 유지 해줘야 한다.
• 가장 밑의(1~4)의 라인을 어느 정도는 유지해줘야 한다. 왜 그런가 하면 밑의 라인을 유지함으로써 옆으로 쓸리는 느낌을 내기 위함에 있다.
• 형태를 겁 먹지 말고 앞으로 길게 뺀다는 느낌으로 작업을 한다.
• 큰 형태들을 생각하면서 작업을 진행한다.
• 하나, 둘, 셋 느낌으로 바람 형태를 잡는 것이 좋으며 반복 숙달하는 것이 중요하다.
• 만약 형태가 잘 안 잡히면 작업 중인 이미지를 수정하기보다는 이미지를 Hide 시키고 다시 그리는 걸 권장한다.
• 가운데를 가장 크게 그려주면 좋다. 왜 그런가 하면 사람들이 가장 눈이 많이 가는 부분이 중앙 부분이라 중앙을 잘 표현하면 효과가 좋다.
• 하단 부분을 최대한 간단하게 그리면 좋다.
• 너무 높은 각도를 가지는 웨이브는 지양한다. ( 적당한 각도 30~70 )
• 1번 이미지의 형태는 볼륨감(부피) 있게 그려줘야 한다.

1. 기초가 되는 스모크 텍스쳐를 그린다.
2. 앞을 기준으로 반을 잘라서 중앙이 넘어갈 정도로 오른쪽으로 당겨줍니다. 그리고 다시 그린다는 생각으로 뒤의 부분과 연결을 시켜준다.
3. 앞과 중간을 각각 뒤로 조금 밀어줍니다. 이때 오른쪽으로 이미지를 당기는 것 뿐만 아니라 Rotation 값도 조금 줍니다. 또한 가장 뒷부분을 분할해 줍니다. 
• * 3번이 가장 높이가 높은 단계임을 생각하면서 작업한다.
4. 맨 앞 부분을 짤라서 뒤로 조금 밀어주고 여러 부분으로 끊어주면서 형태감을 잡아준다. (HARD)
5. 앞 부분은 조금 옆으로 밀어주고 볼륨을 지워주면서 형태감를 만들어준다.
6. 큰 덩어리는 조금 더 뒤로 밀어주고 볼륨을 지워주면서 형태감을 만들어준다.

fig02. Ground Smoke Final

※ 텍스쳐 시트에 필요한 이미지 수 ※

대체적으로 필요한 이미지의 수 일뿐 반드시 동일한 이미지의 수일 필요는 없다.

• 그라운드 스모크 : 4 - 6
• 불 : 12/16
• 번개 : 12
• 링 : 4 6 9

※ 추후 작업 ※

실린더 제작 

• 윗면과 아랫면을 지운 다음에 아래 라인을 잡아줘서 스케일을 줄인다. 최종적인 형태는 깔때기 모양으로 제작해준다.

Tip. RandomSeed - 동일한 형태의 랜덤 값

Tip. 연기를 제작 할 시 앞면과 뒷면을 표현하기 위해 파티클 이미터를 복사해줍니다. - 안에 면에는 밝게, 밖에 면은 어두운 계열의 색상으로 표현. {CullMode - Front(쉐이더에서는 Back으로 설정)}

Tip. RenderCue의 숫자가 높을 수록 상단으로 랜더가 된다.

2주차 과제

• 오늘 작업한 바람 쉐이프, 라인 텍스쳐 추가
• 3초 유지되는 기 모으는 이펙트 제작

ArtRayClass(1Week) : 이펙트에 대한 이론& Circle 이펙트 제작

이펙트에 대한 이론

이펙트에 대한 피드백을 줄 때 정확하게 피드백을 주질 못하는 경우가 많다. 그래서 다음과 같은 단계로 이펙트를 나눠줌으로써 피드백에 대한 이해도를 높이기 위한 가이드로 사용하면 좋을 것이다.

총 5단계로 이펙트를 구성 - 다만 모든 이펙트가 다음의 단계는 아니라는 점을 유의

• 1 단계 - 차지
• 2 단계 - 발동
• 3 단계 - 유지
• 4 단계 - 폭발, 피격, Hit
• 5 단계 - 여운

시퀸스(Flipbook) : 연속으로 재생되는 이미지 

• 캐주얼 게임 기준에서 시퀸스는 4,9,10,12,16장으로 구성 / 다만 실사 이펙트는 예외의 경우가 있다.
• 16장 이상 쓰는 시퀸스의 경우 너무 부드럽게 재생이 되어 오히려 게임보다는 애니메이션 스러운 분위기를 만든다.

시퀸스의 종류

루프형  SQ

• 첫 프레임과 끝 프레임이 동일하다 
• ex) 환경 이펙트-모닥불, 스모크, 번개 

소멸형 SQ

• 가장 화려한 프레임(발현형 프레임으로 보면 중간 프레임)부터 시작하며 서서히 사라진다 
• ex) 히트 이펙트, 맞는 순간 터져야되기 때문에 히트 이펙트에서 자주 활용된다. - 가장 메인이 되는 이펙트 

발현형 SQ

• 기승전결이 있는 시퀸스

연출형 SQ

• 카메라에 붙는 이펙트
• ex) 안에서 밖으로 또는 밖에서 안으로 들어오는 이펙트, 초 근접 이펙트, 라이트 이펙트, 화면을 가르는 이펙트

유니티랑 언리얼의 가장 큰 차이점?

: 때깔의 차이가 있다

왜 그런가하면은 언리얼은 RGBA는 HDR컬러는 진작부터 사용을 할 수 있었다. - 하지만 현재의 유니티에서는 HDR을 활용할 수 있다.

유니티 프로젝트 종류

• 3D - 예전 게임
• HDRP - 고사양 랜더 파이프 라인
• URP - 유니버셜 랜더 파이프 라인

Tip. 포토샵의 교집합 기능 - 마법진을 제작할 때 사용된다

01. 링 이펙트 제작 방법론

1. 링을 하나를 생성한다.

   

   fig01. Create Ring

   
   
2. Circle이펙트의 형태를 잡을 때 가이드가 될 링 레이어를 하나 복사한다.

   

   fig02. Guide Layer

   
   
3. Window - timeline (Create video Timeline)을 만들어 준다.

   

   fig03. Video Timeline

   
   Tip. 하단의 산 마크는 타임라인 확대 기능
   Tip. Timeline을 활용할때는 Onion Skin 기능을 켜준다. ( Onion Skin setting -> Normal )
4. 브러쉬를 활용하여 기존의 Circle을 수정하여 Circle 이펙트를 그려준다. ( 사라지는 이펙트를 만들때 가장 외각에 있는 선들은 왠만해서는 건들지 않고 기준으로 잡아준다. )

   

   fig04. Circle SQ

Tip. 손의 방향에 맞게 Rotation을 돌리면서 작업을 진행한다.

※중요

• 4장 짜리를 그릴때는 프레임간의 변화를 과감하게 진행해야 한다.
• 4장 짜리를 그릴 때는 복잡한 쉐이프를 그리면 안된다.
• 가장 첫번째 프레임은 반드시 이쁘게 그린다.
• 이펙트 시퀸스를 그릴때는 찌꺼기가 남지 않도록 깔끔하게 그림을 그려야한다.
• 쉐이프는 확실하게 끊어줘야한다. ( Opacity를 남겨주면 안된다. 반드시 덩어리로 진행해야된다. )
• 시퀸스는 반드시 한번에 쭉쭉 그려/지워야 한다.

1주차 과제

• 링을 3세트 제작(엣지, 굵기)
• 엔진상에서 차지 이펙트 제작 (Glow에 오늘 배운 링을 섞어서) / 단. 본인 좀 더 초과해와도 된다. (Glow+링)

(2D Effect) AE를 활용한 Dissolve 이펙트 제작 ( Step Node와 동일 기능 )

 Node를 활용하지 않고 AE를 통해 Dissolve 이펙트를 제작하는 방법론

fig01. Dissolve Effect

1. 포토샵을 통해 피격 텍스쳐를 제작합니다.

   

   fig02. Texture 01

   
   
2. 피격 텍스쳐의 사라지는 순서를 조절할 그라데이션 텍스쳐를 제작해줍니다.

   

   fig03. Gradient Texture

   
   
3. AE에서 제작한 두가지의 텍스쳐를 불러옵니다.
4. 상단에는 피격 텍스쳐를, 하단에는 그라데이션 텍스쳐를 위치해줍니다.
5. 그라데이션 텍스쳐는 TrikMat를 피격 텍스쳐로 설정해줍니다. ( 설정시 피격텍스쳐가 꺼지나 꺼진 텍스쳐를 다시 켜줍니다.
6. 마지막으로 피격텍스쳐에 CC Image Wipe 이펙트를 넣어줍니다. CC image Wipe 기능을 통해 사라지는 효과를 조절해줍니다.

   

   fig04. CC Image Wipe

(Node) Fresnel Basic

• Amplify Shader를 활용한 기본적 노드를 정리하기 위한 포스트입니다.

Fresnel Node Basic 

- 외각에 색상을 입히는 이펙트

fig01. Fresnel Node