Unity6.0v VFX Graph 샘플

Unity 6.0버전 HDRP / VFX Graph 17버전

패키지 매니저 VFX Graph 샘플 추가

총 32개의 VFX Graph 샘플

---

1.Context&Flow

 

 

 

위로 파티클들이 뿜어져 나오고 중력으로 인해 밑으로 떨어지는 단순한 형태

Initialize 단계에서 Sphere 영역에서 생성되고 Y축 방향으로 4.8~7.5의 스피드로 0.85로 지정된 각도로 발사되는 파티클

이후 Update 단계에서 -9.81(중력 가속도)의 Y축 값을 가지고 밑으로 떨어짐.

 

---

2.Spawn Context

1~8까지 숫자가 하나씩 늘어나면서 개수가 증가하는 형태

숫자는 1~8까지 나오지만 없는 상태(0)까지 총 9가지를 반복해서 표현한다.

Spawn 단계

Spawn Sate에서 LoopIndex의 값은 새로운 스폰 루프가 반복할 때마다 증가하며 이 값을 Module(나누기 해서 나온 나머지 값) B를 9로 지정해서 결과값이 0~8사이의 값(총9가지)가 반복해서 나오게 한다.

 

VFX에 사용하는 타일 텍스쳐

Output 단계에서 FlipBook으로 5x2로 설정해서 사용한다(그치만 결과적으로 9는 아예 쓰지 않고 0은 시각적으로 표현되지 않음)

 

---

3.Capacity Count

구조적으로는 매우 단순하게 Unlit Quad를 생성하는 형태

Capacity와 Memory 할당을 설명하기 위해 간단하게 넣은 샘플인듯.

---

4.Multiple Outputs

 

Initialize 단계에서 색상은 2개 중에 하나가 랜덤으로 설정되게 하고

Output 단계에서 Mesh Lit, Quad Unlit, Quad Lit 총 3개를 생성한다.

그저 단순하게 하나의 Initialize 값을 받아서 여러개를 생성할 수 있다는 것을 보여주기 위해 넣은 샘플인듯.

---

5.Bounds

 

이거도 단순한 VFX이지만 Bounds를 설명하기 위한 VFX Graph

보통 Bounds Mode는 Automatic으로 설정해서 자동으로 영역을 만들지만 Manual로 직접 영역을 지정할 수 있음

VFX가 생성되는 영역이 아니라, 이 영역이 카메라 Frustum에 들어와야지 렌더를 하게 됨.

y축으로 좀 위로 Bounds를 설정하고 카메라 Frustum 영역에 들어오면 VFX가 렌더 된다.

그러나 Bounds가 카메라 Frustum영역에 들어오지 않게 카메라 앵글을 낮추면 VFX는 렌더되지 않고 그림자만 보인다.

---

6.Orient Face Camera

VFX Graph에서 Body와 Eye로 나눠서 구조를 만들어 뒀음.

 

Body는 Mesh Lit을 사용했으며 이 Mesh가 약간씩 일렁이는 효과를 주기 위해서 별도의 Shader Graph를 지정하고

Shader Graph에서 Vertex 쉐이더로 Vertex가 움직이게 함.

 

눈도 Mesh Lit을 사용했으며 동공의 커지고 작아지는 부분은 Shader로 구현

그리고 카메라 각도에 따라서 눈이 계속 따라오게 하기 위해 Orient를 Face Camera Position으로 설정

---

7.Orient Fixed Axis

눈알을 감싸고 있는 깃털이 하나씩 퍼지는 이펙트

Body, Eye, Feather로 나눠진 VFX Graph 구조

 

Body는 이전과 같은 Mesh를 사용하였고

Eye의 경우 이전과 같은 Shader를 썼지만 Shader Graph에서 지정된 변수인 Eye_Dilate를 1로 고정해놔서 이전처럼 동공이 커지고 줄어드는 모션은 없음.

 

 

깃털은 Quad로 되어 있으며 Base Color Map과 Normal Map만 사용

FlipBook으로 4개 중에 1개를 랜덤으로 선택하게 해서 4종류 랜덤하게 사용

 

---

8.Orient Advanced

화살표들이 구 위로 떠다니며 일정한 방향으로 움직이는 효과

 

Update 단계에서 Attractor Shape Sphere(이전 버전에서 Force-Conform to Sphere)로 구 위에 인력으로 끌어당기는 역할과

Turbulence로 난류를 표현

그리고 Output 단계에서 현재 Velocity값을 반영해서 이동하는 방향대로 화살표 방향이 회전하게 설정

---

9.Rotation & Angle

회전하는 동전들

3개의 동전이 하나의 VFX Graph에서 각각 다른 회전 방향을 가질 수 있게 하기 위해서

Update 단계에서 Set Angle.XYZ 노드를 사용하고

Spawn Index를 받아와서 Switch노드에서 3개 Index가 서로 다른 xyz축 값을 가질 수 있게 해서 각각 Angle에 지정

---

10.Rotation & Angular Velocity

위에서 쏟아지는 동전들

Falling Coins, Sliding Coins, Coin's Pile, Pile's Body 4개 구조로 나눠짐.

Falling Coins에는 Collision을 사용해서 부딪히고 튕겨져 나가게 함.

 

---

11.TexIndex Attribute

Flipbook과 UV 예시를 보여주기 위한 VFX Graph 샘플

---

12.Flipbook Mode

Flipbook 애니메이션에서 Blend 모드와 비교해서 보여주는 VFX Graph 샘플

 

 

4x4인 16프레임 Flipbook을 30FPS로 재생한다.

하나는 Blend 옵션이 체크 되어있어서 2개를 비교해서 보여준다.

---

13.Flipbook Blending

둘다 Flipbook Blending을 하지만 Motion Vector를 사용한 블렌딩 방식과 비교해서 보여준다.

 

위 아래 둘다 6x6 36프레임 Flipbook 애니메이션이지만

위(파란색)는 Motion Vectors 옵션이 체크되어 있고 Vector Map을 받아서

블렌딩 될때 모션 벡터값을 사용해서 더 정교한 블렌딩 효과를 만들어낸다.

---

14.TexIndex Advanced

• Brush Strokes
• Background Pattern
• Unity Font
• Cubes
• Lightning
• Dot
• Floating Shapes

총 7개 구조로 나뉘어져 있다.

 

화려하고 복잡하고 많아보이지만 구조 하나하나 뜯어보면 거의다 Quad에 Texture 입혀서 띄우는 방식으로 단순함.

---

15.Pivot Attribute

중앙에 X표시를 Pivot으로 삼고 돌고 있는 Quad 나뭇잎

VFX Graph에서 Pivot을 설명하기 위한 샘플

---

16.Pivot Advanced

마찬가지로 Pivot 활용을 보여주기 위한 샘플

VFX Graph를 없애면 꽃병과 줄기만 있는 형태로 나머지 꽃잎, 녹색 이파리, 줄기 가시가 VFX Graph로 표현된 부분

Flower Blossom, Green Leaf, Spines 3개 구조

 

 

줄기 Mesh를 그대로 가져와서 Position 정보로 사용하고

줄기 따라 녹색 Triangle 생성

녹색 이파리도 같은 방식으로 생성

 

3개의 줄기 끝에서 꽃잎이 생성되는데 DCC툴에서 3개의 줄기끝이 첫번째가(Mesh 면 혹은 점의 순서인듯) 되도록 설정해 두었다는 설명이 있다.

---

17.Sample Mesh

VFX 연산을 시작하면 50000개의 파티클의 Lion 형태로 생성되고

잠시 뒤 위에서 부터 차례대로 흩뿌려지며 사라지는 Dissolve 효과가 되며

이 과정은 6초로 반복 된다.

 

위에서부터 사라지게 하기 위해서 Y축을 기준으로 파티클들의 Lifetime을 다르게 설정한다.

Sample Mesh노드로 Mesh의 Vertex 데이터를 가져오고 Distance(Plane) 노드로 평면을 기준으로 거리값을 받아온다.

그래서 지면으로 부터 파티클의 거리 즉, 파티클 높이에 따라 다른 값이 지정되고 이를 기반으로 Lifetime이 다르게 설정된다.

그래서 위에서부터 순차적으로 Dissolve 효과를 만들 수 있다.

---

18.Sample Texture2D

Unity 로고 형태로 파티클들이 나오고 중앙으로 뭉치는 효과

 

Sample Texture2D 노드로 텍스쳐를 불러온다.

불러온 텍스쳐는 R채널에는 유니티 로고, G채널에는 Unity 텍스트가 있다.

이 2개 값을 Sample Gradient에 넣어서 각각 푸른색과 노란색으로 만들고

Set Alive 노드는 0이면 해당 파티클은 생성하지 않고 1이면 해당 파티클을 생성하는 노드로

이 과정을 통해 R채널은 노란색, G채널은 파란색으로 해당 영역에만 파티클이 생성되게 된다.

---

19.Sample Signed Distance Field (SDF)

 

손 Mesh 표면으로 선들이 움직이며 생기는 효과

손 Mesh로 부터 계산된 SDF 데이터를 사용해서 손 표면에서 파티클 생성

 

Update 단계에서도 SDF를 사용해서 계속 손 표면으로 파티클들이 다니게 하고 Turbulence로 랜덤하게 흐르게 만든다.

Set Direction으로 방향도 가지게 만들고 Trigger Event를 사용해서 선 형태로 표현되게 한다.

이후 과정은 일반적인 Particle Strip

---

20.Sample Skinned Mesh

등에 깃털 부분만 VFX Graph

깃털은 대략 20~30개 정도로 보이는데 Spawn Count는 45000으로 매우 많다.

Initialize에 있는 Set Alive 노드를 Off하면 Mesh의 표면 전체에 깃털이 생성된다.

즉 Set Alive로 기존 등에 깃털이 있는 부분 외에 다른 영역의 값은 0으로 지정되어서 깃털이 생성되지 않게 한것.

 

Set Alive에 연결된 노드를 보면 Sample Texture 2D에서 w값을 받아서 쓰고 있다.

 

Sample Texture2D 노드에서 사용된 텍스쳐는 Color Map이지만

Alpha 채널만 확인해보면 등 영역에 해당하는 부분만 흰색(1)으로 되어 있다.

그래서 Alpha(A채널)에 해당하는 W값을 받아서 Set Alive에 적용했기 때문에

등에만 깃털이 생기고 그 외에 영역은 생기지 않는 것.

---

21.Collision Properties

단순히 기본 도형만을 가지고 충돌체를 구현한 샘플

---

22.Collision Simple

 

오리 인형으로 충돌을 구현한 간단한 샘플

---

23.Collision Advanced

손 SDF를 Collision으로 사용한 샘플

---

24.Trigger Event on Collide

다트

Flying Darts, Collide Spring Darts, Score UI System 3개로 이루어진 구조

 

날아가는 다트의 Update 단계에서 점수판에 닿으면 바로 사라지고 Trigger Event on Collide 노드 2개 이벤트 발생

이 2개 노드는 점수 VFX 생성과 점수판에 꽂힌 다트 생성으로 이어짐.

점수판에 닿은 위치에 고정된 다트로 교체되고 점수 표기

---

25.Decal Particles

움직이는 애니메이션이 있는 후드에 Decal 효과가 있는 VFX를 적용한 샘플

Update 단계에서 Set Posiiton Mesh Skinned Mesh노드로 지정된 Skinned Mesh위에 

Decal Output을 사용해서 텍스쳐를 입힐 수 있음.

---

26.Strip Properties

 

Particle Strip을 사용한 간단한 예시

다음 파티클 내용도 같은 Particle Strip 방식이라 생략

---

27.Strip Spawn Rate

 

---

28.Multi-Strip SpawnRate

 

---

29.Multi-Strip Single Burst

 

---

30.Multi-Strip Periodic Burst

 

---

31.Strip GPU-Event

 

---

32.Multi-Strips GPU-Event