Real Display: 얼굴 추적을 활용한 웹 3D 모델 시뮬레이션

"Real Display"는 사용자가 3D 안경 없이 가상 모델을 실제 물건처럼 느낄 수 있게 해주는 웹 3D 모델 시뮬레이션 프로젝트입니다. 이 프로젝트는 얼굴 추적(Face Tracking) 기술을 활용하여 이러한 경험을 가능하게 하며, 해커톤에서 4명의 팀원들이 함께 2일 동안 협업하여 구현하였습니다. 관련 정보

프로젝트 개요

이 프로젝트는 사용자의 얼굴 움직임을 인식하고, 그 움직임을 3D 모델에 적용하여 사용자가 모델을 마치 실제 물체처럼 조작할 수 있도록 합니다. 사용자는 웹 브라우저 상에서 3D 모델을 자유롭게 이동하고 회전시킬 수 있습니다. 이를 통해 우리는 실제 물체를 들고 살펴보는 것과 같은 경험을 웹 상에서 제공하려고 노력하였습니다.

사용된 기술

• JavaScript
• Three.js
• MediaPipe

개발 파트

3D 모델(GLTF형식) 웹 렌더링

우리는 Three.js를 활용하여 GLTF 형식의 3D 모델을 웹상에서 렌더링하였습니다. 사용자는 웹 브라우저 상에서 이 3D 모델을 직접 조작하고 시각적으로 탐색할 수 있습니다.

얼굴 추적을 사용한 상호작용 인터페이스 구현

MediaPipe 라이브러리를 사용하여 사용자의 얼굴 움직임을 인식하고, 이 움직임 정보를 3D 모델의 조작 입력으로 변환하였습니다. 사용자는 자신의 얼굴 움직임을 통해 3D 모델을 마치 실제 물체처럼 다루는 경험을 얻을 수 있습니다.

Real Display 프로젝트 데모

프로젝트 사이트 방문, 웹캠 필요