콜라이더

엔티티에 3D 형태와 충돌을 부여하는 다양한 컴포넌트에 대해 알아봅니다.

콜라이더가 있는 엔티티는 공간을 차지하며 플레이어의 경로를 막고, 콜라이더가 없는 엔티티는 플레이어의 아바타가 통과할 수 있습니다.

엔티티를 클릭 가능하게 만들려면 콜라이더도 필요합니다. 버튼 이벤트는 엔티티의 보이는 모양이 아니라 콜라이더 모양을 기준으로 합니다.

플레이어의 물리 상호작용용과 포인터 이벤트용으로 별도의 충돌 레이어가 있으며, 콜라이더는 둘 중 하나에만 반응하도록 설정할 수 있습니다. 또한 사용자 지정 레이어와 상호작용하도록 설정할 수도 있으며, 이는 레이캐스트 와 함께 사용해 씬에 맞는 방식으로 처리할 수 있습니다.

📔 참고: 콜라이더는 다른 엔티티들이 서로 상호작용하는 방식에는 영향을 주지 않으며, 엔티티는 언제나 겹칠 수 있습니다. 충돌 설정은 엔티티가 플레이어의 아바타 및 버튼 이벤트와 상호작용하는 방식에만 영향을 줍니다. Decentraland에는 기본 물리 엔진이 없으므로, 엔티티가 떨어지거나, 부딪히거나, 튕기게 하려면 이 동작을 씬에 직접 코딩하거나 이를 처리하는 라이브러리를 가져와야 합니다.

씬 에디터를 사용하세요

엔티티의 콜라이더를 관리하는 가장 쉬운 방법은 씬 에디터를 사용하는 것입니다..

엔티티에 MeshCollider 컴포넌트를 추가하여 엔티티에 기본 도형(큐브, 평면, 구, 원통 또는 원뿔)을 할당할 수 있습니다. 그런 다음 충돌 레이어 를 드롭다운에서 선택할 수 있습니다.

또한 GLTF 컴포넌트에서 충돌 레이어를 구성하여 기본값을 변경할 수도 있습니다. 충돌 레이어 콜라이더 지오메트리 또는 모델의 보이는 지오메트리에 사용되는 컴포넌트 추가.

기본 도형의 콜라이더

이 MeshCollider 컴포넌트는 기본 도형(박스, 구, 평면, 원통 또는 원뿔)을 기반으로 엔티티에 단순한 콜라이더를 부여합니다.

다음 MeshRenderer 컴포넌트를 가진 엔티티는 기본 도형 콜라이더가 기본적으로 없습니다. 엔티티에도 MeshCollider 컴포넌트를 추가해야 합니다.

다음 콜라이더 모양은 MeshCollider에서 사용할 수 있습니다. 일부 모양에는 해당 모양에만 해당하는 추가 선택 필드가 포함되어 있습니다.

• 박스:

  다음을 사용하세요 MeshCollider.setBox()를 사용하고, 엔티티를 전달합니다.

• 평면:

  다음을 사용하세요 MeshCollider.setPlane()를 사용하고, 엔티티를 전달합니다.

• 구:

  다음을 사용하세요 MeshCollider.setSphere()를 사용하고, 엔티티를 전달합니다.

• 원통:

  다음을 사용하세요 MeshCollider.setCylinder()를 사용하고, 엔티티를 전달합니다. 추가 선택 필드로 radiusTop 과 radiusBottom 을 전달하여 원통을 수정할 수 있습니다.

💡 팁: 둘 중 하나를 radiusTop 또는 radiusBottom 0으로 설정하면 원뿔이 됩니다.

이 예시는 통과할 수 없는 박스 엔티티를 정의합니다.

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

// 보이는 모양
MeshRenderer.setBox(myCollider)

// 콜라이더
MeshCollider.setBox(myCollider)

다음이 사용하는 모양은 MeshCollider 가 사용하는 모양과 반드시 일치할 필요는 없습니다. MeshRenderer에 또 하나의 MeshCollider 를 추가할 수도 있습니다. GltfContainer 컴포넌트가 있는 엔티티나, 아예 보이는 모양이 없는 엔티티에도 추가할 수 있습니다.

📔 참고: MeshCollider 컴포넌트와 ColliderLayer 는 다음과 같이 가져와야 합니다.

import { MeshCollider, ColliderLayer } from "@dcl/sdk/ecs"

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

3D 모델의 콜라이더

3D 모델에는 두 가지 서로 다른 지오메트리 수준에서 콜라이더를 지정할 수 있습니다:

• visibleMeshesCollisionMask: 모델의 보이는 지오메트리를 가리킵니다. 기본적으로 이 지오메트리에는 콜라이더가 없습니다.

• invisibleMeshesCollisionMask: 이름이 _collider로 끝나는 콜라이더 메시에 해당합니다. 기본적으로 이 지오메트리는 물리와 포인터 이벤트 모두에 대한 콜라이더로 취급됩니다.

3D 모델의 일부로 포함된 어떤 메쉬든 이름이 _collider 로 끝나면 invisibleMeshesCollisionMask 레이어의 일부로 간주되며, 기본적으로 콜라이더로 해석됩니다.

콜라이더 지오메트리를 별도의 보이지 않는 레이어로 정의하면 훨씬 더 세밀한 제어가 가능하고, 일반적으로 충돌 오브젝트가 원본 모델보다 훨씬 단순하므로(버텍스 수가 더 적음) 보이는 지오메트리를 사용하는 것보다 시스템 부담도 훨씬 적습니다.

모델에 콜라이더 지오메트리가 없고, 물리 또는 포인터 이벤트 시스템에 영향을 주게 하려면 다음 중 하나를 할 수 있습니다:

• 다음을 통해 보이는 지오메트리에 직접 충돌 레이어를 지정합니다. visibleMeshesCollisionMask.

📔 참고: 객체의 보이는 지오메트리에 버텍스가 많다면, 성능 비용이 더 클 수 있습니다.

• 엔티티에 MeshCollider 컴포넌트를 부여하여 기본 도형 콜라이더를 만듭니다.

• 를 가진 보이지 않는 엔티티를 겹쳐 배치합니다. MeshCollider 컴포넌트를 추가해야 합니다.

• Blender 같은 외부 도구에서 모델을 편집해 콜라이더 메시를 포함시킵니다.. 콜라이더의 이름은 x_collider여야 하며, 여기서 x 는 모델 이름입니다. 따라서 house라는 이름의 모델이라면 콜라이더 이름은 house_collider.

호버 힌트와 포인터 이벤트가 엔티티의 윤곽에 더 정확하게 반응하게 하려는 경우에는 포인터 이벤트 충돌 레이어도 visibleMeshesCollisionMask 에 지정하고 싶을 수 있습니다. 이는 성능 요구가 더 큽니다.

📔 참고: 같은 레이어(물리, 포인터 이벤트 또는 사용자 지정 레이어)가 둘 다에 할당되어 있지 않은지 확인하세요. visibleMeshesCollisionMask 과 invisibleMeshesCollisionMask그렇게 하면 리소스를 매우 비효율적으로 사용하게 됩니다. 각각에 서로 다른 레이어를 둘 수 있으며, 예를 들어 보이지 않는 레이어에는 물리를, 보이는 레이어에는 포인터 이벤트를 둘 수 있습니다.

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

// GLTF 모양 할당
GltfContainer.create(myEntity, {
	src: '/models/myModel.gltf',
	invisibleMeshesCollisionMask: ColliderLayer.CL_PHYSICS,
	visibleMeshesCollisionMask: ColliderLayer.CL_POINTER,
})

다음 3D 모델 3D 모델에 콜라이더용 보이지 않는 지오메트리를 추가하는 방법에 대한 자세한 내용은 참조하세요.

📔 참고: GltfContainer 컴포넌트와 ColliderLayer 는 다음과 같이 가져와야 합니다.

import { GltfContainer, ColliderLayer } from "@dcl/sdk/ecs"

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

애니메이션 모델

골격 기반 애니메이션을 포함한 모델에서 콜라이더가 보이는 지오메트리를 사용하도록 설정하면 골격 기반 애니메이션를 콜라이더가 따라가지 않습니다. 콜라이더 메시는 원래 모양을 유지합니다. 애니메이션이 메쉬의 지오메트리를 변형하는 경우에도, 애니메이션이 재생되는 동안 콜라이더 메시는 애니메이션이 적용되지 않은 모양을 유지합니다.

모양을 바꾸지 않고 메쉬 전체를 이동시키는 애니메이션을 재생할 때는 이러한 변화가 콜라이더에 정확하게 반영됩니다. 예를 들어 플랫폼이 애니메이션의 일부로 움직이면, 플랫폼의 콜라이더도 애니메이션과 함께 움직입니다.

충돌 레이어

씬은 서로 다른 동작을 가진 별도의 충돌 레이어를 처리할 수 있습니다.

다음 MeshCollider 컴포넌트 또는 GltfContainer 컴포넌트를 MeshCollider 설정하여 collisionMask 속성을 지정하고, GltfContainer 설정하여 visibleMeshesCollisionMask 또는 invisibleMeshesCollisionMask 속성은 다음 값들 중 하나 또는 여러 개로 설정합니다:

• ColliderLayer.CL_PHYSICS: 플레이어 이동을 차단합니다(씬의 벽, 바닥, 플랫폼). 포인터 이벤트에는 영향을 주지 않습니다.

• ColliderLayer.CL_POINTER: 포인터 이벤트에만 반응합니다. 플레이어 이동은 차단하지 않습니다.

• ColliderLayer.CL_PLAYER: 콜라이더를 아바타 표시용으로 태그합니다. CL_PLAYER를 대상으로 하는 레이캐스트와 트리거 영역은 이를 감지하지만, 플레이어 캡슐은 그대로 통과합니다(물리적 차단 없음). 씬 메쉬에서는 감지 전용으로 메쉬를 "아바타 같은 대상"으로 표시할 때 유용합니다. CL_PLAYER 는 이를 감지하지만, 플레이어 캡슐은 그대로 통과합니다(물리적 차단 없음). 씬 메쉬에서는 감지 전용으로 메쉬를 "아바타 같은 대상"으로 표시할 때 유용합니다.

• ColliderLayer.CL_MAIN_PLAYER: CL_PLAYER와 같지만 로컬 플레이어에게만 적용됩니다. 마스크에 CL_MAIN_PLAYER가 있는 레이캐스트와 트리거 영역은 이를 감지하지만, 원격 아바타용 레이캐스트/트리거는 감지하지 않습니다. CL_MAIN_PLAYER 가

• ColliderLayer.CL_CUSTOM1 부터 CL_CUSTOM8: 특정 사용자 지정 레이어와의 충돌만 감지하도록 레이캐스트 및 트리거 영역과 함께 사용할 수 있습니다.

• ColliderLayer.CL_NONE: 어떤 종류의 충돌에도 반응하지 않습니다.

💡 팁: CL_PLAYER 과 CL_MAIN_PLAYER 에서 MeshCollider / GltfContainer 는 감지 전용 레이어입니다 — 플레이어 캡슐은 이를 통과합니다. 메쉬를 아바타로도 감지 가능하면서 동시에 플레이어를 물리적으로 막게 하려면, 아바타 레이어와 CL_PHYSICS (예: CL_PHYSICS | CL_MAIN_PLAYER).

📔 참고: 충돌을 비활성화하려면 MeshCollider 컴포넌트를 삭제하세요. 충돌 레이어를 ColliderLayer.CL_NONE로 설정하지 마세요. 다음 MeshCollider 컴포넌트에는 알려진 문제가 있습니다. 모든 충돌을 비활성화하는 대신, 이 값을 기본값과 동일하게 만듭니다(ColliderLayer.CL_PHYSICS | ColliderLayer.CL_POINTER).

// 엔티티 생성
const myEntity = engine.addEntity()
// 보이는 모양
MeshRenderer.setBox(myEntity)

// 플레이어 물리에만 반응하는 MeshCollider 컴포넌트 생성
MeshCollider.setBox(myEntity, ColliderLayer.CL_PHYSICS)

하나의 충돌 마스크는 여러 충돌 레이어에 반응할 수 있습니다. | 문자를 또는으로 사용하여 필요한 만큼 많은 레이어를 포함하세요. MeshCollider의 기본값은 ColliderLayer.CL_PHYSICS | ColliderLayer.CL_POINTER.

MeshCollider.setBox(
	myEntity,
	ColliderLayer.CL_CUSTOM1 |
		ColliderLayer.CL_CUSTOM3 |
		ColliderLayer.CL_PHYSICS |
		ColliderLayer.CL_POINTER
)

필요에 가장 잘 맞는 용도로 8개의 서로 다른 사용자 지정 레이어를 사용할 수 있습니다. 예를 들어 하나는 NPC의 시야 계산에, 다른 하나는 떨어지는 물체의 궤적 추정에 사용할 수 있습니다. 서로 다른 시스템에 서로 다른 레이어를 사용하면 각 경우에 관련 있는 엔티티와의 충돌만 확인하면 되므로 리소스를 더 적게 사용할 수 있습니다.

다음 레이캐스팅 에서 사용자 지정 충돌 레이어를 사용하는 방법에 대해 더 알아보세요.

카메라와 콜라이더

플레이어의 카메라가 3인칭 모드에서 움직일 때, 엔티티에 할당된 충돌 레이어에 따라 카메라가 콜라이더에 막힐 수도 있고 그렇지 않을 수도 있습니다. 씬을 설계할 때 이 점을 유의하세요. 카메라가 벽이나 다른 엔티티를 통과하지 못하게 하고 싶을 수 있습니다.

카메라가 벽을 통과하지 못하게 하려면 ColliderLayer.CL_PHYSICS 와 ColliderLayer.CL_POINTER 레이어를 모두 카메라를 막고 싶은 엔티티에 할당해야 합니다. 두 레이어가 엔티티의 같은 지오메트리에 할당되는 것이 중요합니다. 따라서 ColliderLayer.CL_PHYSICS 레이어를 엔티티의 보이는 레이어에 할당했다면 ColliderLayer.CL_POINTER 레이어도 같은 지오메트리에 할당해야 합니다.

예를 들어 Creator Hub에서는 다음 설정 조합이 카메라가 벽을 통과하지 못하게 합니다:

둘 다 ColliderLayer.CL_PHYSICS 와 ColliderLayer.CL_POINTER 레이어가 엔티티 지오메트리의 같은 보이지 않는 레이어에 할당됩니다. 둘 다 보이는 레이어에 할당해도 결과는 같습니다. 이것이 기본 동작이며, Creator Hub로 엔티티를 추가하든 코드로 추가하든 동일합니다.

이 두 번째 예시에서는 ColliderLayer.CL_PHYSICS 레이어가 엔티티의 보이지 않는 레이어에 할당되고, ColliderLayer.CL_POINTER 레이어가 엔티티의 보이는 레이어에 할당되므로 카메라가 벽을 통과할 수 있습니다. 두 지오메트리의 전체 모양이 같더라도 마찬가지입니다.

// 카메라가 벽을 통과하지 않음
// 기본값(포인터와 물리 모두 보이지 않는 지오메트리 사용)
GltfContainer.create(myEntity, {
	src: '/models/myModel.gltf',
})

// 카메라가 벽을 통과하지 않음
// 둘 다 같은 보이지 않는 지오메트리 사용
GltfContainer.create(myEntity2, {
	src: '/models/myModel.gltf',
	invisibleMeshesCollisionMask:
		ColliderLayer.CL_PHYSICS | ColliderLayer.CL_POINTER,
})

// 카메라가 벽을 통과하지 않음
// 둘 다 같은 보이는 지오메트리 사용
GltfContainer.create(myEntity2, {
	src: '/models/myModel.gltf',
	visibleMeshesCollisionMask:
		ColliderLayer.CL_PHYSICS | ColliderLayer.CL_POINTER,
})

// 예, 카메라가 벽을 통과함
// 물리와 포인터가 서로 다른 레이어에 있음
GltfContainer.create(myEntity2, {
	src: '/models/myModel.gltf',
	invisibleMeshesCollisionMask: ColliderLayer.CL_PHYSICS,
	visibleMeshesCollisionMask: ColliderLayer.CL_POINTER,
})

// 예, 카메라가 벽을 통과함
// 물리와 포인터가 서로 다른 레이어에 있음
GltfContainer.create(myEntity2, {
	src: '/models/myModel.gltf',
	invisibleMeshesCollisionMask: ColliderLayer.CL_POINTER,
	visibleMeshesCollisionMask: ColliderLayer.CL_PHYSICS,
})

포인터 차단

콜라이더가 있는 모양만 포인터 이벤트로 활성화할 수 있습니다. 엔티티는 포인터 이벤트가 통과하지 못하게 하고 뒤에 있는 엔티티를 누르는 것을 방지하기 위해서도 콜라이더가 필요합니다. 예를 들어 상자 안에 잠겨 있는 물건은, 상자 주변에 콜라이더가 있으면 플레이어가 집어 들 수 없습니다. 플레이어의 포인터 이벤트는 ColliderLayer.CL_POINTER 레이어에서 활성화된 메쉬에만 영향을 받습니다.

기본적으로 MeshCollider는 물리와 포인터 레이어 모두에 영향을 주지만, 이 값을 변경해 하나만, 혹은 둘 다 아니게 설정할 수 있고, 대신 사용자 지정 레이어에 영향을 주도록 할 수도 있습니다.

📔 참고콜라이더 외에도 엔티티는 포인터 이벤트에 반응하려면 PointerEvents 컴포넌트도 필요합니다. pointerEventsSystem 헬퍼도 이 요구 사항을 처리해 줍니다.

// 플레이어 물리에만 반응
// 예: 클릭은 가능하지만 통과할 수 없는 보이지 않는 벽
MeshCollider.setBox(myEntity, ColliderLayer.CL_PHYSICS)

// 플레이어의 포인터에만 반응
// 예: 클릭해서 집을 수 있지만 그대로 통과할 수 있는 아이템
MeshCollider.setBox(myEntity2, ColliderLayer.CL_POINTER)

기본적으로 GltfContainer 의 보이는 지오메트리는 어떤 충돌 레이어에도 매핑되지 않지만, 보이지 않는 지오메트리는 물리와 포인터 레이어 모두에 영향을 줍니다. 이 값을 변경해 하나만, 혹은 둘 다 아니게 설정할 수 있고, 대신 사용자 지정 레이어에 영향을 주도록 할 수도 있습니다. 같은 방식으로 보이는 지오메트리 레이어도 구성할 수 있습니다.

// 기본값(포인터와 물리 모두 보이지 않는 지오메트리 사용)
GltfContainer.create(myEntity, {
	src: '/models/myModel.gltf',
})

// 플레이어 물리는 더 단순한 보이지 않는 지오메트리를 사용
// 포인터 이벤트는 보이는 지오메트리의 전체 세부 윤곽을 사용
GltfContainer.create(myEntity2, {
	src: '/models/myModel.gltf',
	invisibleMeshesCollisionMask: ColliderLayer.CL_PHYSICS,
	visibleMeshesCollisionMask: ColliderLayer.CL_POINTER,
})

// 플레이어 물리와 포인터 이벤트 모두 보이는 지오메트리의 전체 세부 윤곽을 사용
// 더 단순한 보이지 않는 지오메트리를 ColliderLayer.CL_NONE에 매핑해 둘 다 계산하지 않도록 함
GltfContainer.create(myEntity, {
	src: '/models/myModel.gltf',
	invisibleMeshesCollisionMask: ColliderLayer.CL_NONE,
	visibleMeshesCollisionMask:
		ColliderLayer.CL_POINTER | ColliderLayer.CL_PHYSICS,
})

// 보이는 지오메트리든 보이지 않는 지오메트리든 어떤 종류의 충돌에도 반응하지 않음:
GltfContainer.create(myEntity, {
	src: '/models/myModel.gltf',
	invisibleMeshesCollisionMask: ColliderLayer.CL_NONE,
})

고급 MeshCollider 문법

다음을 생성하는 전체 문법은 MeshCollider 컴포넌트이며, 이를 단순화하는 어떤 헬퍼도 사용하지 않으면 다음과 같습니다:

MeshCollider.create(myBox, {
	mesh: {
		$case: 'box',
		box: {},
	},
})

MeshCollider.create(myPlane, {
	mesh: {
		$case: 'plane',
		plane: {},
	},
})

MeshCollider.create(myShpere, {
	mesh: {
		$case: 'sphere',
		sphere: {},
	},
})

MeshCollider.create(myCylinder, {
	mesh: {
		$case: 'cylinder',
		cylinder: {},
	},
})

이것이 기본 프로토콜이 MeshCollider 컴포넌트를 해석하는 방식입니다. 헬퍼 함수는 이를 추상화해 더 친숙한 문법을 제공하지만, 내부적으로는 이 문법을 출력합니다.

이 $case 필드에서는 허용된 유형 중 하나를 지정할 수 있습니다. 각 유형은 서로 다른 매개변수 집합을 지원합니다.

다음은 $case 이 지원하는 값들입니다:

• 박스

• 평면

• 구

• 원통

의 값에 따라 $case해당 모양에 맞는 객체를 관련 속성과 함께 정의하는 것이 유효합니다.