react-three-fiber: Bounding Volume Hierarchy

BVH(Bounding Volume Hierarchy) 예제를 살펴 봅니다.

2024-07-14

BVH(Bounding Volume Hierarchy)

<Ray /> 컴포넌트는 실린더(CylinderGeometry) 하나와 구체(SphereGeometry) 2개를 가집니다.

alt text

그림과 같이 실린더는 파란색, 구체는 파란색으로 표시 했습니다.

조금더 알아보기 쉽게 origMesh 객체는 노란색, hitMesh 객체는 빨간색, cylinderMesh는 파란색으로 표시했습니다.

이제 가운데에 반지름을 1로하는 초록색의 구체를 놓아 봅니다.

Raycaster는 기준 점과 방향을 가리키는 단위 벡터를 지정해 주면 기준점으로 부터 시작하여 특정 방향으로 가상의 선을 그엇을 때 충돌하는 객체를 찾을 수 있습니다.

노란색의 origMesh로 부터 중심이 되는 방향으로 raycast를 합니다. 이 때 intersectObject 함수를 사용하여 특정 mesh와의 교차 지점을 알아 낼 수 있습니다.

이를 통해 origMesh로 부터 중심의 구체와 충돌하는 지점을 빨간색의 hitMesh 구체와 파란색의 cylinderMesh 선으로 표시를 할 수 있습니다.

이제 초록색 구체 대신 복잡한 모양의 torus를 배치하고 노란색 구체를 렌덤하게 회전해 주면 원본 프로젝트와 같은 동작을 하게 됩니다.

사실 이 예제는 raycast 보다는 BVH(Bounding Volume Hierarchy)를 사용한 raycast의 성능향상을 보여주기 위한 것 입니다.

자세한 내용은 아래에서 찾아 볼 수 있습니다.

BVH(Bounding Volume Hierarchy)

원본 코드

Loading script...