Recreated this in

개요 Three.js의 InstancedMesh를 활용하여 수천 개의 포인트로 구성된 인터랙티브 지구본을 웹에서 구현한 크리에이티브 코딩 프로젝트다. 파티클 대신 InstancedMesh를 선택해 대량의 오브젝트를 단일 드로우 콜로 처리하며, 브라우저에서도 부드러운 렌더링 성능을 확보했다.

핵심 내용 InstancedMesh는 동일한 지오메트리와 머티리얼을 공유하는 수천~수만 개의 오브젝트를 하나의 드로우 콜로 렌더링하는 Three.js의 핵심 최적화 기법이다. 일반적인 Mesh를 개별로 생성하면 각각이 별도의 드로우 콜을 발생시켜 GPU 병목이 생기지만, InstancedMesh는 변환 행렬만 인스턴스별로 다르게 적용하므로 렌더링 파이프라인 효율이 극대화된다. 이 프로젝트에서는 지구본 표면의 각 포인트를 인스턴스로 배치하고, 사용자 인터랙션에 따라 위치와 색상을 동적으로 업데이트하는 방식을 사용했다.

기존 대비 차별점 파티클 시스템으로도 유사한 효과를 낼 수 있지만, InstancedMesh를 사용하면 각 포인트에 3D 지오메트리(큐브, 스피어 등)를 적용할 수 있어 시각적 깊이감이 다르다. 또한 Raycasting을 통한 개별 인스턴스 감지가 가능해 인터랙티브 요소를 자연스럽게 추가할 수 있다는 점이 흥미롭다.

활용 가능성 데이터 시각화 대시보드에서 지리 기반 데이터를 표현하거나, 포트폴리오 사이트의 히어로 섹션에 인터랙티브 지구본을 배치하는 데 활용할 수 있다. InstancedMesh 패턴 자체는 지구본 외에도 대규모 파티클 필드, 도시 모델링, 군집 시뮬레이션 등에 범용적으로 적용 가능하다.

참고 자료 - 원본 트윗 - 라이브 데모 ===