플러스프로젝트 배경
1) 문제점
- **앱 설치 장벽**: 네이티브 앱 다운로드 없이 즉시 AR 체험이 필요함
- **MediaPipe JS의 한계**: 웹용 MediaPipe는 제공하는 기능이 제한적이고 커스터마이징 불가
- **복잡한 의존성**: MediaPipe C++ 프로젝트는 TensorFlow, Protobuffer 등 무거운 의존성이 많아 웹 환경 포팅이 어려움
- **성능 문제**: 웹 환경에서 실시간 AR 렌더링과 비전 처리를 동시에 수행하기 어려움
- **커머스 연동**: 기존 웹 기반 쇼핑몰과 자연스럽게 통합되어야 함
⠀
2) 프로젝트 목표
- **커스텀 MediaPipe 파이프라인**: C++ MediaPipe 프로젝트에서 새로운 비전 파이프라인 작성
- **WebAssembly 포팅**: 무거운 C++ 프로젝트를 WASM으로 컴파일하여 웹 환경에서 고성능 실행
- **WebGL 렌더링 엔진**: 브라우저에서 동작하는 고품질 PBR 렌더링 엔진 구축
- **ReactJS 플러그인**: Webpack으로 패키징하여 React 프로젝트에 쉽게 통합 가능한 형태 제공
- **범용 호환성**: 모바일/데스크톱, iOS/Android/Windows 등 모든 디바이스와 브라우저 지원
⠀
3) 주안점
- MediaPipe C++ 프로젝트의 복잡한 빌드 시스템(Bazel)을 Emscripten으로 포팅
- WASM 번들 크기 최적화 및 로딩 속도 개선
- WebGL 기반 PBR 렌더링으로 사실적인 주얼리 질감 표현
- JavaScript와 WASM 간의 효율적인 데이터 전달 구조 설계
- 웹 기반 에셋 테스트 환경으로 개발 생산성 향상
- **앱 설치 장벽**: 네이티브 앱 다운로드 없이 즉시 AR 체험이 필요함
- **MediaPipe JS의 한계**: 웹용 MediaPipe는 제공하는 기능이 제한적이고 커스터마이징 불가
- **복잡한 의존성**: MediaPipe C++ 프로젝트는 TensorFlow, Protobuffer 등 무거운 의존성이 많아 웹 환경 포팅이 어려움
- **성능 문제**: 웹 환경에서 실시간 AR 렌더링과 비전 처리를 동시에 수행하기 어려움
- **커머스 연동**: 기존 웹 기반 쇼핑몰과 자연스럽게 통합되어야 함
⠀
2) 프로젝트 목표
- **커스텀 MediaPipe 파이프라인**: C++ MediaPipe 프로젝트에서 새로운 비전 파이프라인 작성
- **WebAssembly 포팅**: 무거운 C++ 프로젝트를 WASM으로 컴파일하여 웹 환경에서 고성능 실행
- **WebGL 렌더링 엔진**: 브라우저에서 동작하는 고품질 PBR 렌더링 엔진 구축
- **ReactJS 플러그인**: Webpack으로 패키징하여 React 프로젝트에 쉽게 통합 가능한 형태 제공
- **범용 호환성**: 모바일/데스크톱, iOS/Android/Windows 등 모든 디바이스와 브라우저 지원
⠀
3) 주안점
- MediaPipe C++ 프로젝트의 복잡한 빌드 시스템(Bazel)을 Emscripten으로 포팅
- WASM 번들 크기 최적화 및 로딩 속도 개선
- WebGL 기반 PBR 렌더링으로 사실적인 주얼리 질감 표현
- JavaScript와 WASM 간의 효율적인 데이터 전달 구조 설계
- 웹 기반 에셋 테스트 환경으로 개발 생산성 향상
프로젝트 성과
커스텀 MediaPipe 파이프라인 개발
C++ 기반 MediaPipe 프로젝트에서 새로운 안면 인식 파이프라인 구현
WebAssembly 포팅 성공
TensorFlow, Protobuffer 등 무거운 의존성을 포함한 C++ 프로젝트를 WASM으로 성공적으로 컴파일
고성능 WebAR 구현
웹 브라우저에서 실시간 60fps로 동작하는 AR 렌더링 엔진 개발
ReactJS 플러그인 제공
Webpack 패키징을 통해 npm 패키지처럼 쉽게 사용 가능한 형태로 제공
크로스 플랫폼 지원
별도 앱 설치 없이 모든 디바이스와 브라우저에서 동작
핵심 기능
커스텀 MediaPipe 파이프라인 개발 및 WASM 포팅
MediaPipe C++ 프로젝트에서 커스텀 안면 인식 파이프라인을 작성하고, TensorFlow/Protobuffer 등 무거운 의존성을 Emscripten으로 WASM 컴파일하여 웹 고성능 실행을 구현했습니다.
WebGL 기반 실시간 PBR 렌더링
WebGL로 PBR 렌더링을 구현해 주얼리의 금속 질감을 사실적으로 표현하고, glTF 2.0 기반 에셋 파이프라인을 구축했습니다. 모바일 브라우저에서 60fps 이상 성능을 유지합니다.
glTF 2.0 에셋 로딩 시스템
glTF 2.0 기반 웹 에셋 로딩 시스템을 개발하여 Scene Graph, 머티리얼, 텍스처 등을 파싱하고 안면 인식 결과와 정확히 매핑했습니다. 웹 기반 테스트 환경으로 머티리얼과 물리 속성을 실시간 시험 가능
뷰티 필터 시스템
WebGL 셰이더로 피부 보정, 얼굴 변형 등 실시간 뷰티 필터를 구현했습니다. GPU 실시간 처리로 자연스러운 결과를 제공하며, 필터 강도를 조절 가능한 인터페이스를 렌더링 파이프라인과 통합했습니다.
프로젝트 상세
1) 포트폴리오 소개
⠀
주얼리 브랜드 로로젬의 온라인 쇼핑 고객을 위한 WebAR 가상 착용 솔루션. 별도 앱 설치 없이 웹 브라우저에서 주얼리를 가상으로 착용해볼 수 있는 실시간 AR 경험을 제공합니다.
⠀
2) 작업 범위
⠀
- WebGL 기반 실시간 렌더링 엔진 개발 (바닥부터 신규 개발)
- MediaPipe C++ 커스텀 파이프라인 개발
- WebAssembly 포팅 (Emscripten)
- ReactJS 플러그인 패키징 (Webpack)
- 뷰티 필터 시스템 개발
- 지원 환경: 웹 브라우저 (모바일/데스크톱, iOS/Android/Windows 범용)
⠀
3) 주요 업무
⠀
- **커스텀 MediaPipe WASM 포팅**: MediaPipe JS의 한계를 극복하기 위해 C++ 원본 프로젝트에서 커스텀 안면 인식 파이프라인 작성. TensorFlow/Protobuffer 등 무거운 의존성을 Emscripten으로 WebAssembly 컴파일하여 웹에서 고성능 실행
- **WebGL PBR 렌더링**: Physically Based Rendering으로 주얼리의 금속 질감을 사실적으로 표현. glTF 2.0 기반 에셋 파이프라인으로 Scene Graph, 머티리얼, 텍스처 파싱. 모바일 브라우저에서 60fps 이상 유지
- **glTF 2.0 에셋 시스템**: 웹 기반 에셋 로딩 및 테스트 환경 구축. 안면 인식 결과와 3D 오브젝트 정확 매핑. 실시간 머티리얼/물리 속성 시험 가능
- **뷰티 필터 시스템**: WebGL 셰이더로 피부 보정, 얼굴 변형 등 실시간 필터 구현. GPU 실시간 처리, 필터 강도 조절 인터페이스
- **ReactJS 플러그인**: Webpack으로 npm 패키지 형태 패키징. React 컴포넌트로 제공되어 쇼핑몰 웹사이트 쉽게 통합. 코드 스플리팅으로 로딩 속도 최적화
⠀
4) 주안점
⠀
- **MediaPipe JS 한계 극복**: 제한적인 JS 버전 대신 C++ 원본을 커스터마이징하고 WASM 포팅하여 고성능 비전 처리 구현
- **복잡한 빌드 시스템 포팅**: MediaPipe C++ 프로젝트의 Bazel 빌드를 Emscripten으로 성공적 변환
- **WASM 번들 최적화**: TensorFlow 등 무거운 의존성 포함하면서도 번들 크기 최소화 및 로딩 속도 개선
- **웹 실시간 성능**: 브라우저에서 60fps AR 렌더링과 비전 처리를 동시 수행
- **커머스 통합**: 기존 쇼핑몰 웹사이트와 자연스럽게 통합되는 플러그인 형태로 제공
⠀
주얼리 브랜드 로로젬의 온라인 쇼핑 고객을 위한 WebAR 가상 착용 솔루션. 별도 앱 설치 없이 웹 브라우저에서 주얼리를 가상으로 착용해볼 수 있는 실시간 AR 경험을 제공합니다.
⠀
2) 작업 범위
⠀
- WebGL 기반 실시간 렌더링 엔진 개발 (바닥부터 신규 개발)
- MediaPipe C++ 커스텀 파이프라인 개발
- WebAssembly 포팅 (Emscripten)
- ReactJS 플러그인 패키징 (Webpack)
- 뷰티 필터 시스템 개발
- 지원 환경: 웹 브라우저 (모바일/데스크톱, iOS/Android/Windows 범용)
⠀
3) 주요 업무
⠀
- **커스텀 MediaPipe WASM 포팅**: MediaPipe JS의 한계를 극복하기 위해 C++ 원본 프로젝트에서 커스텀 안면 인식 파이프라인 작성. TensorFlow/Protobuffer 등 무거운 의존성을 Emscripten으로 WebAssembly 컴파일하여 웹에서 고성능 실행
- **WebGL PBR 렌더링**: Physically Based Rendering으로 주얼리의 금속 질감을 사실적으로 표현. glTF 2.0 기반 에셋 파이프라인으로 Scene Graph, 머티리얼, 텍스처 파싱. 모바일 브라우저에서 60fps 이상 유지
- **glTF 2.0 에셋 시스템**: 웹 기반 에셋 로딩 및 테스트 환경 구축. 안면 인식 결과와 3D 오브젝트 정확 매핑. 실시간 머티리얼/물리 속성 시험 가능
- **뷰티 필터 시스템**: WebGL 셰이더로 피부 보정, 얼굴 변형 등 실시간 필터 구현. GPU 실시간 처리, 필터 강도 조절 인터페이스
- **ReactJS 플러그인**: Webpack으로 npm 패키지 형태 패키징. React 컴포넌트로 제공되어 쇼핑몰 웹사이트 쉽게 통합. 코드 스플리팅으로 로딩 속도 최적화
⠀
4) 주안점
⠀
- **MediaPipe JS 한계 극복**: 제한적인 JS 버전 대신 C++ 원본을 커스터마이징하고 WASM 포팅하여 고성능 비전 처리 구현
- **복잡한 빌드 시스템 포팅**: MediaPipe C++ 프로젝트의 Bazel 빌드를 Emscripten으로 성공적 변환
- **WASM 번들 최적화**: TensorFlow 등 무거운 의존성 포함하면서도 번들 크기 최소화 및 로딩 속도 개선
- **웹 실시간 성능**: 브라우저에서 60fps AR 렌더링과 비전 처리를 동시 수행
- **커머스 통합**: 기존 쇼핑몰 웹사이트와 자연스럽게 통합되는 플러그인 형태로 제공
실시간 face geometry transform 및 2D-3D 공간 변환 맵핑
브라우저 기반 실험실 인터페이스
커스텀 cpp 파이프라인
