3D 모델 애니메이션

씬에서 3D 모델에 애니메이션을 적용하는 방법

안의 3D 모델 .glTF 과 .glb 형식에는 원하는 만큼 많은 애니메이션을 포함할 수 있습니다. 애니메이션은 메시에게 어떻게 움직일지 알려 주며, 일련의 키프레임 을 시간에 따라 배치하고, 그러면 메시는 한 포즈에서 다른 포즈로 블렌딩되어 연속적인 움직임을 시뮬레이션합니다.

대부분의 3D 모델 애니메이션은 골격 애니메이션입니다. 이러한 애니메이션은 모델의 복잡한 기하 구조를 "막대인형"으로 단순화하여, 메시의 모든 정점을 가장 가까운 본 에서 스켈레톤. 모델러는 스켈레톤을 다양한 포즈로 조정하고, 메시는 그 움직임을 따라 늘어나고 구부러집니다.

대안으로, 버텍스 애니메이션 은 스켈레톤 없이 모델에 애니메이션을 적용합니다. 이러한 애니메이션은 모델의 각 버텍스 위치를 직접 지정합니다. Decentraland도 이러한 애니메이션을 지원합니다.

다음 애니메이션 3D 모델용 애니메이션을 만드는 방법에 대한 자세한 내용은 다음을 읽어 보세요. Shape 컴포넌트 3D 모델을 씬에 가져오는 방법은 다음을 참조하세요.

💡 팁: 애니메이션은 보통 엔티티의 위치를 바꾸는 것보다 제자리에서 무엇인가를 움직일 때 더 적합합니다. 예를 들어, 캐릭터의 발을 제자리에서 움직이는 애니메이션을 설정할 수 있지만, 엔티티의 위치를 바꾸려면 Transform 컴포넌트를 사용하는 것이 가장 좋습니다. 다음을 참조하세요. 엔티티 위치 지정 자세한 내용은.

3D 모델에 애니메이션이 있는지 확인

모든 glTF 파일에 애니메이션이 포함되어 있는 것은 아닙니다. 사용 가능한 것이 있는지 확인하려면 다음과 같이 하면 됩니다:

• 다음을 사용하는 경우 VS Code(권장), 다음을 설치하세요. GLTF Tools 확장을 설치한 다음 그곳에서 glTF 파일의 내용을 확인하세요.

• 다음을 열고 Babylon Sandbox 사이트로 이동한 다음 glTF 파일(및 필요한 .jpg 또는 .bin 종속 파일)을 브라우저로 끌어다 놓으세요.

• 다음을 열고 .glTF 파일을 텍스트 편집기로 열고 아래로 스크롤하여 다음을 찾을 때까지 내려가세요. "animations":.

💡 팁: 다음에서 골격 애니메이션에서 애니메이션 이름은 종종 armature 이름, 밑줄, 그리고 애니메이션 이름으로 구성됩니다. 예를 들어 myArmature_animation1.

자동 재생

3D 모델에 애니메이션이 하나라도 포함되어 있으면, 기본 동작은 그중 첫 번째 애니메이션이 항상 반복 재생되는 것입니다.

이 동작을 피하려면, 다음 애니메이터 을 엔티티에 추가한 다음 애니메이션 재생을 명시적으로 처리하세요. 만약 애니메이터 컴포넌트가 엔티티에 존재하면, 모든 애니메이션의 기본값은 playing: false 상태가 되며, 수동으로 재생해야 합니다.

💡 팁: 다음에서 씬 에디터를 사용하는 것입니다., 다음을 추가할 수 있습니다. 애니메이터 컴포넌트를 시각적으로 추가할 수 있습니다. 다음을 참조하세요. 컴포넌트 추가. 또한 노코드 방식으로 다음을 통해 애니메이션을 제어할 수도 있습니다. 동작, 참고: 모든 항목을 스마트 아이템으로 만들기.

애니메이션을 명시적으로 처리

하나의 애니메이터 컴포넌트는 엔티티의 모든 애니메이션에 접근하는 데 사용되며, 엔티티에게 애니메이션을 재생하거나 중지하도록 명시적으로 지시하는 데 사용할 수 있습니다. 이 애니메이터 컴포넌트에는 다음의 배열이 포함되어 있습니다 상태, 이 목록에는 3D 모델이 수행할 수 있는 각 애니메이션마다 하나의 객체가 포함되어야 합니다. 하나의 애니메이터 필요한 만큼 많은 상태를 포함할 수 있습니다.

// 엔터티 생성
const shark = engine.addEntity()

// 여기에 3D 모델을 추가
GltfContainer.create(shark, {
	src: 'models/shark.glb',
})

Animator.create(shark, {
	states: [
		{
			clip: 'swim',
			playing: true,
			loop: true,
		},
	],
})

각 state 객체는 애니메이션이 현재 재생 중인지 추적합니다.

📔 참고: 애니메이터 구성 요소는 다음을 통해 import해야 합니다

import { Animator } from "@dcl/sdk/ecs"

다음 가져오기 를 참고해 쉽게 처리하는 방법을 확인하세요.

애니메이션 가져오기

다음에서 클립을 가져오기 애니메이터 이름으로 다음을 사용하여 .Animator.getClip() 함수입니다. 이 함수는 애니메이션 상태 객체의 변경 가능한 버전을 반환합니다.

const swimAnim = Animator.getClip(sharkEntity, 'swim')

Animator.getClip 다음 매개변수가 필요합니다:

• 엔티티: 다음의 엔티티 애니메이터 쿼리하려는 컴포넌트입니다.

• clipName: 가져오려는 클립의 이름을 나타내는 문자열

Animator.getClip 애니메이션 상태의 변경 가능한 버전을 가져오므로, 이 함수가 반환하는 값에서 자유롭게 값을 수정할 수 있습니다.

const swimAnim = Animator.getClip(sharkEntity, 'swim')
swimAnim.loop = false

📔 참고: 다음을 사용하려고 시도하면 Animator.getClip() 를 사용해 다음에 나열되지 않은 클립을 가져오려고 하면 애니메이터 컴포넌트에서 오류가 발생합니다. 다음을 사용하세요. Animator.getClipOrNull() 원하는 경우 다음을 얻으려면 null 오류 대신 해당 경우에 대한 응답을 받으려면.

애니메이션 재생

이 .playing 애니메이션 상태의 필드는 애니메이션이 현재 재생 중인지 결정합니다. 한 3D 모델에서 여러 애니메이션이 동시에 재생될 수 있다는 점에 유의하세요.

다음을 사용하세요 Animator.playSingleAnimation() 함수를 AnimationState 객체에 사용합니다.

Animator.playSingleAnimation(sharkEntity, 'swim')

엔티티가 다른 애니메이션을 재생 중이었다면, Animator.playSingleAnimation 가 그것들을 중지합니다.

Animator.playSingleAnimation 다음 매개변수가 필요합니다:

• 엔티티: 다음의 엔티티 애니메이터 영향을 주려는 컴포넌트입니다.

• clipName: 재생하려는 클립의 이름을 나타내는 문자열

• resetCursor: (선택 사항) 만약 true, 애니메이션이 이전에 일시 중지되었더라도 처음부터 재생됩니다. 만약 false, 일시 중지된 지점부터 애니메이션 재생이 계속됩니다. 기본값: true.

Animator.playSingleAnimation(sharkEntity, 'swim', false)

다음 표는 다음이 어떻게 동작하는지 요약합니다 Animator.playSingleAnimation() 동작을, 다음의 서로 다른 값들을 사용하여 resetCursor 속성에 대해 보여 줍니다:

	resetCursor = false	resetCursor = true (기본값)
현재 재생 중	영향이 없습니다.	처음부터 재생됩니다.
일시 중지됨	마지막으로 재생된 프레임에서 다시 시작됩니다.	처음부터 재생됩니다.
완료됨(반복 없음)	처음부터 재생됩니다.	처음부터 재생됩니다.

반복 애니메이션

기본적으로 애니메이션은 루프 재생되며, 애니메이션이 영원히 반복됩니다.

다음 값을 설정하여 이 설정을 변경하세요. loop 의 속성 state 객체에 사용합니다.

Animator.create(shark, {
	states: [
		{
			clip: 'bite',
			playing: true,
			loop: false,
		},
	],
})

만약 loop 이 false, 애니메이션은 한 번만 재생된 뒤 멈추며 마지막 프레임의 자세를 유지합니다.

애니메이션 중지

엔티티가 재생 중인 모든 애니메이션을 중지하려면 다음을 사용하세요. Animator.stopAllAnimations().

Animator.stopAllAnimations(shark)

Animator.stopAllAnimations 다음 매개변수가 필요합니다:

• 엔티티: 다음의 엔티티 애니메이터 영향을 주려는 컴포넌트입니다.

• resetCursor: (선택 사항) 만약 true, 애니메이션의 첫 프레임 자세로 돌아갑니다. 만약 false, 현재 자세에서 일시 중지된 상태로 유지됩니다. 기본값: true.

📔 참고: 다음으로 애니메이션을 재생할 때 Animator.playSingleAnimation, 이 함수가 내부적으로 다른 모든 애니메이션 중지를 처리합니다. 그 경우 다른 애니메이션을 명시적으로 중지할 필요가 없습니다.

애니메이션이 반복되지 않는 애니메이션 재생을 끝내면, 기본적으로 3D 모델은 마지막에 있던 자세를 유지합니다. shouldReset 속성은 중지된 애니메이션이 다시 재생될 때 어떤 일이 일어나는지 제어합니다. 만약 true, 애니메이션은 초기 상태(첫 프레임, 또는 음수 속도)로 재생 중일 때는 마지막 프레임)로 복원됩니다. 만약 false (기본값), 이전에 멈춘 지점에서 다시 시작됩니다.

Animator.create(shark, {
	states: [
		{
			clip: 'bite',
			playing: true,
			shouldReset: true,
			loop: true,
		},
	],
})

다음을 사용해서도 Animator.stopAllAnimations() 언제든지 자세를 애니메이션의 첫 프레임으로 명시적으로 되돌릴 수 있습니다.

📔 참고: 자세를 초기화하는 것은 급격한 변경입니다. 모델이 다른 자세로 부드럽게 전환되게 하려면, 다른 애니메이션을 재생하고 두 애니메이션의 가중치 속성을 점진적으로 조정하여 둘 사이를 블렌딩하세요. 다음을 참조하세요. 애니메이션 가중치.

애니메이션이 끝났는지 감지

반복되지 않는 애니메이션의 재생이 끝나면, 엔진은 해당 애니메이션 상태의 playing 속성을 다시 false. 씬 코드에서 이 값을 읽어 애니메이션이 언제 끝났는지 알 수 있으며, 예를 들어 바로 뒤에 다른 애니메이션을 연결할 수 있습니다.

let wasPlaying = false

engine.addSystem(() => {
	const animator = Animator.get(shark)
	const biteState = animator.states.find((state) => state.clip === 'bite')
	const isPlaying = biteState?.playing ?? false

	if (wasPlaying && !isPlaying) {
		console.log('bite animation finished')
		// 다음 애니메이션을 연결
		Animator.playSingleAnimation(shark, 'swim')
	}

	wasPlaying = isPlaying
})

📔 참고: 애니메이션 상태를 매 프레임 폴링할 때는 항상 다음을 통해 읽으세요 Animator.get() (읽기 전용). 다음을 사용하지 마세요 Animator.getClip() 또는 Animator.getMutable() 폴링용으로: 이들은 컴포넌트의 변경 가능한 버전을 반환하며, 매 프레임마다 변경됨으로 표시되어 불필요한 동기화 작업을 유발합니다.

이 playing 속성은 애니메이션이 저절로 끝날 때에만 엔진에 의해 바뀝니다. 반복 애니메이션은 중지될 때까지 재생되므로 스스로 이 속성을 바꾸지 않으며, 다음을 가진 애니메이션은 속도 0으로 설정되면 절대 끝나지 않습니다.

📔 참고: 이 기능은 데스크톱 클라이언트에서만 지원됩니다.

여러 애니메이션 처리

3D 모델에 여러 애니메이션이 포함되어 있다면, 하나의 애니메이터 컴포넌트로 모두 처리할 수 있습니다.

// 엔터티 생성
const shark = engine.addEntity()

// 여기에 3D 모델을 추가
GltfContainer.create(shark, {
	src: 'models/shark.glb'
})

Animator.create(shark, {
	states:[{
			clip: "swim",
			playing: true,
			loop: true
		}, {
			clip: "bite",
			playing: true,
			loop: true
		}
	]
})

위 예시에서는 두 애니메이션이 각각 별도의 state 객체로 처리된 다음, 둘 다 동일한 애니메이터 컴포넌트를 추가해야 합니다.

애니메이션의 각 본은 한 번에 하나의 애니메이션만 영향을 줄 수 있습니다. 단, 이러한 애니메이션이 다음을 가지는 경우는 예외입니다. 가중치 합계가 1 이하가 되는

한 애니메이션이 캐릭터의 다리에만 영향을 주고 다른 애니메이션이 캐릭터의 머리에만 영향을 준다면, 두 애니메이션은 문제 없이 동시에 재생할 수 있습니다. 하지만 둘 다 캐릭터의 다리에 영향을 준다면, 한 번에 하나만 재생하거나 더 낮은 가중치 값을.

위 예시에서 bite 애니메이션이 상어의 입에만 영향을 주고, swim 애니메이션이 상어의 척추 본에만 영향을 준다면, 둘 다 동시에 재생할 수 있습니다.

📔 참고: Animator.playSingleAnimation() 엔티티가 현재 재생 중인 다른 모든 애니메이션을 중지합니다. 여러 애니메이션을 동시에 재생하려면 다음을 수정하세요. playing 애니메이션 상태의 속성을 수동으로 설정하세요.

애니메이션 속도

다음 값을 변경하여 애니메이션 재생 속도를 조절하세요. 속도 속성입니다. 속성의 값은 기본적으로 1입니다.

Animator.create(shark, {
	states: [
		{
			clip: 'swim',
			playing: true,
			loop: true,
			speed: 2,
		},
	],
})

속도를 1보다 낮게 설정하면 더 느리게 재생됩니다. 예를 들어 0.5로 설정하면 절반 속도로 재생됩니다. 1보다 높게 설정하면 더 빠르게 재생됩니다. 예를 들어 2로 설정하면 두 배 속도로 재생됩니다.

const swimAnim = Animator.getClip(sharkEntity, 'swim')

swimAnim.speed = 0.5

애니메이션 가중치

이 가중치 속성은 단일 모델이 여러 애니메이션을 동시에 수행할 수 있게 하며, 애니메이션에 포함된 모든 움직임의 가중 평균을 계산합니다. 값은 가중치 그 애니메이션이 평균에서 얼마나 중요한지 결정합니다.

기본적으로, 가중치 은(는) 1. 값은 가중치 보다 높을 수 없습니다 1.

Animator.create(shark, {
	states: [
		{
			clip: 'swim',
			playing: true,
			loop: true,
			weight: 0.2,
		},
	],
})

이 가중치 엔티티에서 활성화된 모든 애니메이션의 값은 항상 합계가 1이 되어야 합니다. 1보다 작으면 가중 평균 계산의 나머지 부분에는 armature의 기본 자세가 사용됩니다.

예를 들어 위 코드 예시에서는 다음을 재생하고 있습니다. swim 애니메이션은, 다음만 가진 가중치 의 0.2. 이 수영 동작은 매우 미묘합니다. 애니메이션이 정의한 강도의 20%만 적용됩니다. 계산의 나머지 80%는 armature의 기본 자세에서 값을 가져옵니다.

이 가중치 속성은 예를 들어 다음과 같이 흥미로운 방식으로 사용할 수 있습니다. 가중치 의 속성 swim 상어가 얼마나 빠르게 헤엄치는지에 비례하여 설정할 수 있으므로, 빠른 수영과 느린 수영을 위해 여러 애니메이션을 만들 필요가 없습니다.

또한 다음을 변경할 수 있습니다. 가중치 애니메이션을 시작하고 멈출 때 값을 점진적으로 변경하여 더 자연스러운 전환을 만들고, 기본 자세에서 애니메이션의 첫 자세로 갑자기 점프하는 것을 피할 수 있습니다.

📔 참고: 추가된 가중치 값은 3D 모델의 본에 작용하는 모든 애니메이션의 합이 1을 넘을 수 없습니다. 여러 애니메이션이 동시에 같은 본에 영향을 준다면, 가중치의 합이 1 미만이 되도록 설정해야 합니다.

const swimAnim = Animator.getClip(sharkEntity, 'swim')

swimAnim.weight = 0.5