Lologem WebAR Rendering Engine
Overview
WebAR virtual try-on solution for Lologem jewelry brand's online shoppers. Real-time AR experience for virtually trying on jewelry without any app installation, directly in the web browser.
Work Scope
- WebGL-based real-time rendering engine development
- Custom MediaPipe C++ pipeline development
- WebAssembly porting (Emscripten)
- ReactJS plugin packaging (Webpack)
- Beauty filter system development
- Cross-platform: Mobile/Desktop, iOS/Android/Windows browsers
Key Features
Custom MediaPipe Pipeline & WASM Porting
Overcame MediaPipe JS limitations by writing custom face recognition pipeline in C++ original project. Compiled heavy dependencies (TensorFlow, Protobuffer) to WebAssembly via Emscripten for high-performance web execution.
WebGL PBR Real-time Rendering
Implemented Physically Based Rendering for realistic metal textures in jewelry. Built glTF 2.0 asset pipeline for Scene Graph, material, and texture parsing. Maintains 60fps+ on mobile browsers.
glTF 2.0 Asset Loading System
Developed web-based asset loading with accurate mapping between face recognition results and 3D objects. Real-time material and physics property testing environment.
Beauty Filter System
Implemented real-time beauty filters (skin smoothing, face reshaping) using WebGL shaders. GPU real-time processing with adjustable filter intensity integrated into rendering pipeline.
ReactJS Plugin Packaging
Packaged rendering engine as React plugin via Webpack. Simple npm import, React component integration for e-commerce websites. Code splitting for optimized loading.
Achievements
- Custom MediaPipe C++ pipeline with WASM compilation
- 60fps real-time WebAR rendering in browsers
- ReactJS plugin for easy e-commerce integration
- Cross-platform: Works on all devices without app installation