2022년 INDEPS NFT 프로젝트의 Lookbook 기능 개발 프로젝트입니다. 기존 영상 콘텐츠로는 사용자의 능동적인 참여와 탐색이 제한되어, 더 몰입감 있는 인터랙티브한 3D 환경이 필요한 상황이었습니다.
영상으로 제작된 장면을 인터랙티브한 3D 장면으로 재구성하여, 사용자가 능동적으로 탐색하고 상호작용할 수 있는 풍부한 사용자 경험을 제공하는 것을 목표로 했습니다.
Vite와 React-three/fiber를 기반으로 3D 환경을 구축하고, 영상 콘텐츠를 분석하여 3D 장면으로 재구성했습니다. 사용자 인터랙션을 위한 컨트롤 시스템과 탐색 기능을 개발하여 웹 환경에서 최적화된 3D 렌더링 성능을 확보했습니다.
영상을 완전히 대체하는 인터랙티브 3D Lookbook을 구현했습니다. 사용자가 직접 탐색할 수 있는 몰입형 콘텐츠로 기존 정적 영상 대비 향상된 사용자 참여도와 브랜드 경험을 제공할 수 있었습니다.
2022년 INDEPS NFT 프로젝트의 PhotoBooth 기능 개발 프로젝트입니다. 사용자가 아바타를 선택하고 의상을 입힌 후, 다양한 분위기와 동작을 적용하여 개인화된 장면을 창작할 수 있는 플레이그라운드가 필요했습니다. 특히 200개 이상의 3D 메시가 동시에 렌더링되면서 성능 최적화가 요구되는 상황이었습니다.
사용자가 자신만의 아바타로 다양한 장면을 자유롭게 꾸며볼 수 있는 창작 도구를 제공하면서, 웹 환경에서도 원활하게 동작할 수 있는 최적화된 3D 렌더링 성능을 확보하는 것을 목표로 했습니다.
Vite와 React-three/fiber 기반으로 3D 환경을 구축하고, InstancedMesh 최적화를 통해 200개 메시의 동시 렌더링에서 Draw Call을 173개에서 50개로 감소시켰습니다. GLTF 모델에 Draco/KTX 압축을 적용하여 모델 용량을 32MB에서 6MB로, GPU 메모리를 675MB에서 84MB로 절감하여 모바일 Safari에서도 구동 가능하도록 최적화했습니다.
사용자가 자유롭게 창작할 수 있는 PhotoBooth 플레이그라운드를 성공적으로 구현했습니다. Draw Call 최적화와 모델 압축을 통해 웹 환경에서도 안정적인 3D 렌더링 성능을 달성하여, 모바일 환경까지 지원하는 몰입감 있는 사용자 경험을 제공할 수 있었습니다.