로로젬 WebAR 렌더링 엔진
개요
주얼리 브랜드 로로젬의 온라인 쇼핑 고객을 위한 WebAR 가상 착용 솔루션. 별도 앱 설치 없이 웹 브라우저에서 주얼리를 가상으로 착용해볼 수 있는 실시간 AR 경험을 제공합니다.
작업 범위
- WebGL 기반 실시간 렌더링 엔진 개발
- MediaPipe C++ 커스텀 파이프라인 개발
- WebAssembly 포팅 (Emscripten)
- ReactJS 플러그인 패키징 (Webpack)
- 뷰티 필터 시스템 개발
- 지원 환경: 웹 브라우저 (모바일/데스크톱, iOS/Android/Windows 범용)
핵심 기능
커스텀 MediaPipe 파이프라인 & WASM 포팅
MediaPipe JS의 한계를 극복하기 위해 C++ 원본에서 커스텀 안면 인식 파이프라인 작성. TensorFlow/Protobuffer 등 무거운 의존성을 Emscripten으로 WASM 컴파일하여 웹 고성능 실행.
WebGL PBR 실시간 렌더링
PBR로 주얼리의 금속 질감을 사실적으로 표현. glTF 2.0 기반 에셋 파이프라인으로 Scene Graph, 머티리얼, 텍스처 파싱. 모바일 브라우저에서 60fps 이상 유지.
glTF 2.0 에셋 로딩 시스템
웹 기반 에셋 로딩 및 테스트 환경 구축. 안면 인식 결과와 3D 오브젝트 정확 매핑. 실시간 머티리얼/물리 속성 시험 가능.
뷰티 필터 시스템
WebGL 셰이더로 피부 보정, 얼굴 변형 등 실시간 필터 구현. GPU 실시간 처리, 필터 강도 조절 인터페이스를 렌더링 파이프라인과 통합.
ReactJS 플러그인 패키징
Webpack으로 렌더링 엔진을 React 플러그인 형태로 패키징. npm처럼 간단히 import 가능. 쇼핑몰 웹사이트에 쉽게 통합. 코드 스플리팅으로 로딩 속도 최적화.
성과
- 커스텀 MediaPipe C++ 파이프라인 WASM 컴파일 성공
- 웹 브라우저에서 60fps 실시간 WebAR 렌더링
- ReactJS 플러그인으로 이커머스 간편 통합
- 크로스 플랫폼: 앱 설치 없이 모든 디바이스에서 동작