1.
버텍스 셰이더로 하는
머리카락 애니메이션
Gregory Dongseok Kim
2016-04-25

2.
2
차례
■ 머리카락을 위한 좋은 셰이딩 모델
■ 머리카락의 구조
■ 접근법
■ 셰이더

3.
3
Good Shading models for Hair
■ Scheuermann's hair shading model1
을 사용하세요!

4.
4
예, 농담입니다. 그렇지만...
■ 머리카락의 Specular를 실시간으로 표현하는, 매우 싸고 효과적인
방법입니다.
■ 더구나, 두개의 Specular중 하나를 사용하여 Front Scattering을 표현
할 수 있습니다.
■ 이 말은, Rim light와 투과 효과만 추가하면, 손쉽게 퀄리티를 향상 시
킬 수 있다는 거죠.

5.
5
솔직히 말하자면,
그냥 언리얼에 있는 머리카락 셰이더 쓰세요

6.
6
머리카락의 구조
■ 머리카락은 크게 4개로 나눌 수 있습니다.
– 앞 머리
– 가운데 머리
– 뒷 머리
– 꾸밈 머리
■ 각 부분은 각각의 흐름을 갖고 있습니다.
– 그 흐름을 통해 움직임을 유추 할 수 있겠죠.
○
가장 중요한 점은 머리카락 뿌리의 위치 입니다.

7.
7
잠깐, 이게 앞 머리라구요? 가운데 머리가 아니라?

8.
8
예, 움직임이라는 측면에서 본다면...
■ 당연히 가운데 머리나 꾸밈 머리로 취급 할 수도 있습니다만
■ 저 부분은 몸통 위에 놓여, 양 옆보다 앞뒤로 움직입니다.
– 실제에서는, 전후좌우로 다 움직입니다. 특히 좌우로 움직일 땐 몸통을 따라
퍼지면서 움직이죠.
– 불행하게도, 제 방식으로는 이것까지 표현하지는 못합니다.
– 그래서 저는 저 부분의 움직임을 앞뒤로 제한하고자 했습니다. 왜냐하
면...

9.
9
접근법
■ 각 버텍스의 움직임 정보를 버텍스 컬러의 각 채널에 저장 합니다.
– R: 움직이는 양
– G: 좌/우 충돌 정보
– B: 클럼핑 그룹
– A: 앞/뒤 충돌 정보
■ 이 말은 머리카락을 이렇게 나눴다는 소리죠

10.
10

11.
11
움직이는 양 설정법
■ 머리카락의 끝부분이 뿌리 부분보다
더 움직인다고 가정했습니다.
■ 그래서, 각 버텍스를 이렇게 설정했습
니다.
– 뿌리 부분: 0.0
– 끝부분: 1.0
– 나머지 부분
○
UV상의 상대적 위치에 따라 점진적으로
값을 변경해서 설정합니다.
– V 포지션을 기준으로 했습니다.

12.
12
위치 구분 값 설정법 (1)
■ 좌/우 구분하기
– 기준 Plane을 설치합니다.
– 머리카락 Vertex의 X 좌표가 Plane의
X 좌표보다 왼쪽이면
○
1.0으로 설정
○
나머지는 0.0

13.
13
위치 구분 값 설정법 (2)
■ 앞/뒤 구분하기
– 좌/우 구분법과 같은 방법을 씁니다.
– 기준 Plane 설치
– 머리카락 Vertex의 Y좌표가 Plane의 Y
좌표보다 앞쪽이면
○
0.0으로 설정
○
나머지는 1.0

14.
14
■ 당연히 이렇게 간단하게 값을 설정하진 않습니다.
– 기준면의 normal 양방향으로 Ray casting을 합니다.
– 그 선들이 버텍스와의 충돌 여부를 판단합니다.
– 어떤 normal에서 쏘아진 선과 충돌했는지에 따라 위치를 정합니다.
■ 그렇지만 컨셉은 앞에 언급한 것에서부터 출발합니다.
■ 어쨌건, 이 값이 Collision 값과 합쳐 집니다.

15.
15
충돌값 설정하는 법
■ 머리카락 Vertex가 충돌 메쉬와 충돌하는지 검사합니다.
– 만약 충돌 한다면, 충돌 메쉬의 면과 Vertex와의 거리를 측정합니다.
– 이 값을 충돌값으로 저장합니다.
■ 이 값을 위치 구분값과 합쳐 줍니다.
– 충돌값이 없으면: 값을 0.5로 설정합니다.
– 충돌값이 있다면: {0.5 * (Distance Value/Average Distance)}를 더해줍니다.

16.
16
충돌 데이타 결과 (1)
■ 최종 충돌 메쉬
– 노랑색: 충돌 메쉬
– Planes: 위치 구분 Plane

17.
17
충돌 데이타 결과 (2)

18.
18
충돌 데이타 사용법 (1)
■ 충돌 데이타가 의미하는 것은
– 노말라이징 된 가속 벡터와 더해지는 값입니다.

19.
19
충돌 데이타 사용법 (2)
■ 충돌 데이터를 디코딩 합니다:(0.0 ~ 1.0)을 (-1.0 ~ 1.0)으로
■ 모든 연산은 머리카락의 Local space에서 이루어집니다.
■
World space의 가속 벡터를 Local space로 변환
– Acceleration = Wind + Head movement
– 가속 벡터는 노말라이징 후 사용합니다.
■ 충돌값을 가속 벡터의 각 축과 더합니다.
– 좌/우 값을 X 축과 더합니다.
– 앞/뒤 값을 Y 축과 더합니다.
■ 최종 결과값을 (-1.0 ~ 1.0)으로 Clamping 해줍니다.
■ 여기에 가속 벡터의 강도를 곱해줍니다.

20.
20
셰이더

21.
21
셰이더 - 세부사항 (1)
Decoding Collision data

22.
22
셰이더 - 세부사항 (2)
Adding Acceleration vector

23.
23
셰이더 - 세부사항 (3)
Multiplying Acceleration strength

24.
24
셰이더 - 세부사항 (4)
Multiplying
Movement amount
with the result

25.
25
한계
■ 좌/우, 앞/뒤로만 움직입니다.
– 위/아래로는 못움직입니다.
○
버텍스 컬러 채널이 모자랍니다.(T.T)
■ 포니테일 처럼 기~인 머리카락용이 아닙니다.
– 최대한 스타일을 유지하면서 찰랑거리는 움직임을 위해 만들었습니
다.
■ 기본 스키닝 포즈에서 많이 움직일 수 없습니다.
– 버텍스 컬러 값에 따라 원래 위치에서 오프셋을 주는 방식

26.
26
결론
■ 움직임 데이터는 버텍스 컬러로 저장 합니다.
– R: 움직이는 양
– G: 좌/우 충돌
– B: 클럼핑 그룹
– A: 앞/뒤 충돌
■ 충돌 데이타를 가속 벡터와 합칩니다.
– 노말라이즈된 가속 벡터를
– 머리카락의 Local space에서
– 가속 벡터의 세기를 곱해주고
– 움직이는 양으로 마지막 움직임을 조절 해 줍니다.

27.
27
Bibliography
■ Page 3
– Citation 1: Scheuermann, Thorsten. "Practical real-time hair
rendering and shading." ACM SIGGRAPH 2004 Sketches. ACM,
2004.