INDEPS Lookbook & Photobooth

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 렌더링 성능이 안정적으로 나왔고, 모바일에서도 몰입감 있게 즐길 수 있었습니다.