모바일에서도 60fps로 도는 인터랙티브 3D 제품 쇼케이스 웹사이트

기존의 정적인 이미지와 동영상만으로는 제품의 디테일과 소재감을 충분히 전달하기 어려운 한계가 있었다. WebGL과 Three.js로 사용자가 제품을 직접 돌려보고 확대할 수 있는 인터랙티브 경험을 제공하고, 향후 다양한 산업의 제품 쇼케이스에 쓸 수 있는 범용 플랫폼으로 발전시키는 것이 목표였다. 고해상도 3D 모델을 브라우저에서 실시간 렌더링하면서 부드러운 인터랙션을 유지해야 했고, GPU 성능이 제한적인 모바일에서도 60fps를 확보해야 했다. 고해상도 텍스처와 복잡한 지오메트리를 쓰면서 초기 로딩 시간을 합리적으로 유지하고, PBR 재질로 금속·가죽·패브릭의 질감을 사실적으로 구현하며, 다양한 브라우저·디바이스에서 일관된 품질을 보장해야 했다.

3D 모델에 LOD(Level of Detail) 기법을 적용해 카메라 거리에 따라 디테일 수준을 동적으로 조절하고, 텍스처는 KTX2 포맷으로 압축해 점진적 로딩을 적용했다. Three.js 기반 커스텀 뷰어 엔진을 설계해 제품 쇼케이스에 특화된 카메라 제어와 조명 시스템을 구현했다. 디바이스 GPU 성능을 감지해 그림자 품질과 안티앨리어싱 수준을 자동 조절하는 적응형 렌더링 전략을 세우고, 모바일 터치 제스처와 데스크톱 마우스 인터랙션을 각각 최적화했다. 저해상도 모델을 먼저 표시한 뒤 고해상도로 교체하는 점진적 렌더링으로 체감 로딩을 줄이고, 환경 맵 조명과 PBR 재질, 부위별 상세 설명이 뜨는 핫스팟 가이드까지 구현했다.

• 마우스·터치로 360도 회전, 확대, 재질 변경이 가능한 3D 쇼케이스 완성
• 모바일 기기에서도 60fps의 부드러운 3D 렌더링 달성
• LOD 최적화와 텍스처 압축으로 고품질 모델의 빠른 로딩 구현
• 3개월 내 뷰어 엔진부터 웹사이트 전체까지 완성해 3D 웹 기술의 실용성 입증
• 축적된 3D 웹 렌더링 기술을 이후 다양한 클라이언트 프로젝트에 활용

Three.js 기반 커스텀 3D 뷰어 엔진과 인터랙티브 제품 쇼케이스 웹사이트. 색상·재질 변경, 핫스팟 가이드, 적응형 렌더링 포함.