스키닝 애니메이션
(SKINNING ANIMATION)
발표자 : 서승석

목차
■ 애니메이션이란?
■ 오브젝트 애니메이션
■ 스키닝 애니메이션
■ 3ds Max에서 애니메이션 추출
■ DirectX로 만든 애니메이션 뷰어

애니메이션이란?
- 위키백과에서 정의된 애니메이션
애니메이션(영어:Animation)은 여러 장의 화면을 연속촬영 하고, 조작하여 화면이 움
직여 보이게 만든 영화의 한 일종이다. 이 용어는 "살아있는"을 뜻하는 라틴어 낱말
Anima에서 비롯하였다. 간단히 동화(動畵)라고도 부른다. '만화'나 '동화'는 그림의 의
미를 갖고 있으나, 각 장면은 그림이 아닐 수 있다. 3차원 모델링을 통해 컴퓨터 화면상
으로 재현된 영상의 경우도 애니메이션에 포함된다

애니메이션이란?
- 위키백과에서 정의된 컴퓨터애니메이션
■ 컴퓨터 애니메이션(영어: computer animation)은 컴퓨터를 사용하여 동영상을 만
들어내는 기술을 말한다. 이는 컴퓨터 그래픽스와 애니메이션의 하부 분야이다.
비록 2차원 컴퓨터 그래픽스가 낮은 대역폭의 빠른 실시간 렌더링의 요구에 충족
하기는 하지만, 더 넓게 보면, 3차원 컴퓨터 그래픽스의 수단으로 만들어진다. 이
를, 특히 영화에서 적용할 경우, CGI라고도 일컫는다.
■ 움직임을 나타내려면, 영상은 컴퓨터 화면에 표시되고 재빠르게 이전 그림과 비
슷한 새로운 그림으로 대체되어야 한다. 이 기술은 텔레비전과 영화에서 영상의
움직임을 나타내는 방도이다.

애니메이션이란?
- 학원에서 배운 정의
지정된 시간 혹은 프레임 진행동안 행렬의 정보가 달려져서 객체에 적용되는 것

애니메이션이란?
- 내가 내린 정의
지정된 시간 혹은 프레임 진행동안 행렬들의 정보가 달려져서
정점들에 적용되는 것

애니메이션이란?
- 3D 애니메이션에는 무엇이 필요한가?
오브젝트(메시)
행렬(본)
프레임

오브젝트 애니메이션
- 오브젝트 애니메이션이란?
지정된 시간 혹은 프레임 진행동안 행렬의 정보가 달려져서 객체에 적용되는 것

오브젝트 애니메이션
- 어떻게 구현되는가?
1. 해당 프레임에 맞게 애니메이션 행렬들을 계산한다.
2. 해당 오브젝트에 이 행렬을 곱해준다. (정확히는 해당 오브젝트의 정점들)
3. 이후 다른 오브젝트 처럼 월드, 뷰, 프로젝션 행렬을 곱해준다

오브젝트 애니메이션
- 어떻게 계산해야 할까?
필요한 행렬은 다음이 있다
Parent 행렬 : 해당 행렬의 부모가 되는 행렬
Local 행렬 : 부모행렬을 기준으로 어디에 위치해야할지 알려주는 행렬
Offset 행렬 : Local 기준으로 어떻게 배치되야하는지 알려주는 행렬
계산식 : LocalPos * Offset * Local * Parent

오브젝트 애니메이션
- Parent 와 Child
왜 Parent와 Child의 개념이 있을까?
mid
shoulder
Elbow
Hand
root

오브젝트 애니메이션
- Parent 와 Child
그러면 offset 행렬이 있는 이유는 무엇일까?
다음 졸라맨을 보도록 하자

오브젝트 애니메이션

오브젝트 애니메이션
- Parent 와 Child
Offset 행렬로 위치를 바꿔주면?

오브젝트 애니메이션
- 이걸로 충분한가?
정말 이것 만으로 캐릭터를 움직일 수 있는가?
기계나 문 같은 것은 이걸로 가능하지만, 피부가 있거나 천이 있다면?

스키닝 애니메이션
- 이러한 버그는 왜 생기는 걸까?

스키닝 애니메이션
-언리얼 엔진은 왜 이런게 가능할까?
before After

스키닝 애니메이션
-스키닝 애니메이션이란?
우리가 팔을 굽힐 때를 생각해보자

스키닝 애니메이션
-스키닝 애니메이션이란?
우리가 팔을 굽힐 때를 생각해보자
-> 근육이 펌핑되서 볼록 솟아 오른다

스키닝 애니메이션
-스키닝 애니메이션이란?
이걸 해내려면 어떻게 해야할까?
현재 컴퓨터로는 현실과 같은 물리 처리를 할 수 없다.
-> 다른 행렬들의 위치에 따라서 정점의 위치를 바꾸게 하면 어떨까?

스키닝 애니메이션
-스키닝 애니메이션에는 오브젝트 애니메이션에 다음과 같은 게 추가된다.
행렬 번호 : 해당 정점에 영향을 주는 행렬의 번호
가중치 : 해당 행렬이 정점에 얼마나 영향을 주는지
이 정보들을 이용하는 것을 정점 블렌딩이라고 한다

스키닝 애니메이션
- 정점 블렌딩
정점 블렌딩이란?
하나의 정점에 여러 행렬이 가중치 값에 따라 적용되는 것
논블렌딩 : 1개의 정점에 서로 다른 다수의 결합된 행렬 1개가 곱해지는 경우
블렌딩 : 1개의 정점에 서로 다른 다수의 결합된 행렬 여러 개가 곱해지는 경우

스키닝 애니메이션
- 소프트웨어 스키닝
CPU를 이용한 스키닝 애니메이션
당연히 쉐이더 느리지만 쓰는 이유
-> 스키닝한 데이터를 재사용하기 편했었다

스키닝 애니메이션
- 하드웨어 스키닝
CPU가 아닌 그래픽 카드를 이용한 스키닝 애니메이션
대표적으로 Shader가 있다
예전에는 Fiexed funtion 등을 사용했다고 한다

스키닝 애니메이션
- 어떻게 구현했는가
하드웨어 스키닝을 사용
뷰어는 DirectX 11을 이용해 구현했음
애니메이션 추출은 3ds Max에서 Plug-in 제작해서 추출함

3ds Max에서 애니메이션 추출
- 해야할 순서
1. Root 노드부터 노드들을 순회한다.
2. 필요한 노드들을 찾아서 저장해둔다.
3. 찾아놓은 노드들을 통해 필요한 데이터를 따로 저장해둔다.
4. 저장해둔 데이터를 파일로 내보낸다.

3ds Max에서 애니메이션 추출
- 3ds Max에서 뽑은 파일 구조
1. 객체 데이터에 해당되는 SKM 파일
-> 언리얼에서는 Skeleton Mesh에 해당되는 데이터들
2. 행렬에 해당되는 SMC 파일
-> 언리얼에서는 skeleton에 해당되는 데이터

3ds Max에서 애니메이션 추출
- SKM 파일구조
Header
iFirstFrame iLastFrame iFrameSpeed iTickPerFrame iNumObjects iNumMaterials
InverseMatrix
각각 정점에 곱해져있는 월드 행렬을 제거하기 위한 해당 월드 역행렬
Material Info
객체들이 사용하는 텍스쳐 데이터
Object Info
헤더 이름, 부모이름, 마테리얼 번호, 메시 개수
월드 행렬 해당 메시의 월드 행렬
메시 버텍스, 인덱스 데이터들

3ds Max에서 애니메이션 추출
- SMC 파일구조
Header
iFirstFrame iLastFrame iFrameSpeed iTickPerFrame iNumObjects iNumMaterials
Object Info
디버깅용 박스 본의 위치를 시각적으로 알기 위한 임시 박스 데이터(바이패드 포함)
월드 행렬 해당 본의 월드 행렬
월드 역행렬 해당 본의 월드 역행렬
메시(바이패드) 박스보다 정확한 디버깅용 메시가 있으면 나오는 데이터
애니메이션 아핀 분해된 애니메이션 트랙(위치, 회전, 크기)

3ds Max에서
애니메이션 추출
- 3ds max의 Node란?

3ds Max에서 애니메이션 추출
- 3ds max의 Node란?

3ds Max에서
애니메이션 추출
- 필요한 노드를 저장

3ds Max에서 애니메이션 추출
- 저장해둔 노드들로부터 정보를 추출한다
1. 스킨 데이터는 다음과 같은 정보들을 추출한다.
객체의 정점 데이터(버텍스, 인덱스), 마테리얼(텍스쳐) 등
2. 매트릭스 데이터는 다음과 같은 정보들을 추출한다.
각 본들의 트랙마다 존재하는 행렬

3ds Max에서 애니메이션 추출
- 스킨 데이터에 해당되는 데이터 구조
1. 마테리얼
마테리얼
서브 마테리얼
텍스쳐 텍스쳐 ………
서브 마테리얼
텍스쳐 텍스쳐 ………
………

3ds Max에서 애니메이션 추출
- 스킨 데이터에 해당되는 데이터 구조
2. 메시
메시
서브 메시
삼각형 삼각형 ………
서브 메시
삼각형 삼각형 ………
………

3ds Max에서 애
니메이션 추출
- 스킨 데이터에 해당되는
데이터 구조
2. 메시
3ds max는 인덱스 데이터를
넘겨주지 않는다.
-> 직접 인덱스 버퍼를 만들
어야 한다

3ds Max에서 애니메이션 추출
- 매트릭스 데이터에 해당되는 데이터 구조
1. 바이패드 혹은 위치를 표시하는 메시
2. 월드 행렬
3. 애니메이션 트랙

3ds Max에서 애니메이션 추출
- 애니메이션 트랙
데이터/ 시간(틱) 0 160 320 480
위치 V( -0.0237, 36.6073, -0.0163) V(-0.0840, 36.6073, 0.0273) V(-0.1351, 36.6073, 0.1500) …
회전 Q(-0.5800, 0.2619, 0.2220 0.7387) Q(-0.5757, 0.2619, 0.2230, 0.7418) Q(-0.5728, 0.2593, 0.2214, 0.7454) …
크기 V( 0, 0, 0)
Q(-0.5800, 0.2619, 0.2220 0.7387)
V(-100, 100, 100)
Q(-0.5757, 0.2619, 0.2230, 0.7418)
V(-100, 100, 100)
Q(-0.5728, 0.2593, 0.2214, 0.7454)
…

DirectX로 만든 애니메이션 뷰어
- 재생 순서
Frame 단계
- 애니메이션 보간
Render 단계
컴퓨트 쉐이더를 이용해 기존 정점데이터에 월드 역행렬을 곱하는 계산
계산된 행렬을 통해 메시를 렌더링한다.

DirectX로 만든 애니메이션 뷰어
- Frame 단계
해당 시간에 맞는 애니메이션 트랙 두개를 찾는다
두 트랙을 보간 해서 행렬을 만든다

DirectX로 만든 애니메이션 뷰어
- Frame 단계
회전 행렬
1. 해당 애니메이션 트랙들을 찾아서 두 사원수를 구한다.
2. 두 사원 수를 구면 선형 보간을 해 사원수 하나를 얻는다.
3. 찾아낸 사원수로 회전 회전 행렬을 구한다.

DirectX로 만든 애니메이션 뷰어
- Frame 단계
위치 행렬
1. 해당 애니메이션 트랙들을 찾아서 벡터를 구한다.
2. 찾아낸 두 벡터로 선형 보간을 한 벡터를 얻는다.
3. 해당 벡터로 위치 행렬을 만든다

DirectX로 만든 애니메이션 뷰어
- Frame 단계
크기 행렬
1. 해당 애니메이션 트랙들을 찾아서 사원수랑 크기벡터들을 구한다.
2. 찾아낸 두 사원수는 구면 선형 보간을 벡터들은 선형 보간한다
3. 찾아낸 사원수의 값으로 회전 역행렬과 회전 행렬을 구한다.
4. 찾아낸 크기 벡터로 크기 행렬을 구한다.
5. 역행렬을 곱해서 원점으로 돌린 후에 크기 행렬을 곱해주고 다시 회전 행렬을 곱한
행렬을 만든다.

DirectX로 만든 애니메이션 뷰어
- Render 단계
역행렬 곱셈
뽑아낸 정점 데이터는 월드 행렬이 곱해진 상태이다.(애니메이션 파일마다 다름)
역행렬과 본 행렬을 곱해 놓는다.

DirectX로 만든 애니메이션 뷰어
- Render 단계
Shader로 계산

DirectX로 만든 애니메이션 뷰어
- 애니메이션 시연
https://youtu.be/dSfDDr60vRo