Integration of the Monocle 3D System into the Proantic website
Duration: 2024.09 ~ 2025.02
Project Overview
Steampunk Digital successfully integrated the Monocle 3D system ( https://monocle3d.com/)) into the Proantic ( https://www.proantic.com/) antique dealer platform.
This integration empowers Proantic dealers to effortlessly create and showcase high-quality 3D models of antiques, enhancing the online shopping experience and providing a competitive edge for the platform.
The project encompassed:
- Developing secure authentication mechanisms
- Leveraging the Monocle Prime mobile application for 3D scanning
- Implementing a robust 3D processing pipeline
- Seamlessly embedding the 3D model picker into Proantic’s backend and fronted presentation layers
Secure System, Sign-in Automation, and Account Linking
A core requirement was ensuring a secure and seamless experience for Proantic dealers accessing Monocle 3D features.
Secure Authentication
We implemented a server to server account linking and QR code authentication flow. When a Proantic dealer initiates a Monocle 3D action, like accessing the model picker or signing into the Monocle Prime app, the Proantic server is able to securely pre-authenticate a user with the Monocle 3D system. If an account exists at that user’s email address, the user is asked permission to link with their Proantic account.
Sign-in Automation
(Single Sign-On - SSO)
To avoid requiring dealers to manage separate credentials, we established an SSO mechanism. Once authenticated with Proantic, dealers could access integrated Monocle 3D features without needing to log in again. This was achieved using secure token exchange between the Proantic and Monocle 3D systems.
Account Linking
On the first use, Proantic dealer accounts are securely linked to corresponding Monocle 3D accounts. This linking is established behind the scenes, ensuring that each dealer’s 3D models are correctly associated with their Proantic profile and listings. Robust security measures were employed to protect user data and prevent unauthorized access during the linking and subsequent interactions.
Monocle Prime App
The Monocle Prime iPhone application serves as the primary tool for Proantic dealers to capture 3D scans of their antiques.
Simplified Capture
The app provides an intuitive interface tailored for capturing objects, guiding users through the scanning process using technologies like LiDAR (on compatible devices) and AI guided photogrammetry.
Direct Upload
Scans captured via the Monocle Prime app are directly and securely uploaded to the Monocle 3D cloud platform for processing.
Account Integration
Dealers signed into the Monocle Prime app using their linked Proantic credentials via scanning a QR code and directly launching Monocle Prime, ensuring scans were automatically associated with the correct account.
3D processing and Clean-up
Raw 3D scans require significant processing to become web-ready models. The Monocle 3D backend handles this complex workflow.
Automated Pipeline
Upon upload, scans enter an automated processing pipeline. This included steps like point cloud registration, mesh generation, texture mapping, and optimization for web delivery and for use in AR viewing modes.
Quality Control & Clean-up
While largely automated, the system includes tools for users to supplement additional photos or erase geometry, addressing issues like incomplete scans, environmental noise, or texture artifacts. This ensures the final 3D models presented on Proantic were of high fidelity and are loaded efficiently.
Format Conversion
Models are processed and stored in standard web-friendly formats (GLB and USDZ) suitable for embedding in web pages.
3D Model Picker Integration
Integrating the 3D model management seamlessly into Proantic’s existing dealer workflow is crucial for adoption.
Embedded Picker
We developed a Monocle 3D Model Picker component, essentially a mini-application, which is embeds directly into Proantic’s item creation and editing pages.
Contextual Access
Dealers can launch the picker from their item management interface. The picker displays only the 3D models associated with their linked Monocle 3D account.
Selection & Association
Dealers can easily browse their processed 3D models within the picker and select the appropriate one to associate with a specific Proantic item listing. The selected model’s unique identifier is then saved alongside the item’s data in Proantic’s database.
Proantic Presentation of 3D Models
The final step is showcasing the 3D models effectively on the Proantic public website.
Embedded 3D Viewer
Proantic’s development team integrated the Monocle Viewer, a web-based 3D viewer into their item detail pages. When an item has an associated 3D model, the viewer is loaded and fetches the model data from Monocle 3D’s content delivery network (CDN).
User Experience
The viewer allows potential buyers to interact with the 3D model – rotating, zooming, and examining the antique from all angles, providing a much richer understanding of the object than static images alone.
Mobile AR
Buyers can also open a QR code on their iPhone or Android smartphone, allowing scale accurate viewing of the 3D model directly in their homes or work spaces.
AR Demo 1
AR Demo 2
Collaborative Implementation
Steampunk Digital provided technical guidance and API support, while Proantic’s team expertly handled the frontend and backend implementation, ensuring the 3D viewer matched their site’s aesthetic and performance standards. Examples of their excellent implementation can be seen across various listings on the proantic.com website.