You've Got Mail WebAR

Creating a 3D Model on Blender and then having it displayed on the "You've Got Mail" Movie Poster using Web-based Augmented Reality.

Overview

Developed a WebAR experience that brings the "You've Got Mail" movie poster to life through augmented reality. By scanning the movie poster with a smartphone, users can see a 3D model appear and animate directly in their browser—no app download required. This project showcases the potential of web-based AR for interactive marketing and entertainment.

Key Features

• Marker-based AR: Poster recognition and tracking
• Browser-based: Works directly in mobile web browsers (no app needed)
• 3D Model Display: Custom Blender model rendered in real-time
• Interactive Elements: Touch to trigger animations and effects
• Cross-platform: Works on iOS and Android devices
• Lightweight: Fast loading and smooth performance

Tech Stack

• AR Framework: WebAR (AR.js / 8th Wall)
• 3D Engine: Three.js, WebGL
• Development: Unity for prototyping, export to WebGL
• 3D Modeling: Blender
• Languages: JavaScript, HTML5, CSS3
• Backend: C# for initial Unity development

Technical Highlights

• Created custom 3D model optimized for mobile web rendering
• Implemented image target tracking for poster recognition
• Developed progressive loading system for faster initial render
• Built responsive AR experience working across device types
• Optimized 3D assets for mobile WebGL performance
• Implemented touch gesture controls for model interaction
• Created fallback experience for unsupported devices

Results

• Successfully demonstrated WebAR technology with movie poster interaction
• Achieved smooth AR performance on mid-range smartphones
• No app installation required—instant access through web browser
• Generated engagement through interactive movie poster
• Showcased practical application of WebAR for entertainment marketing

Challenges & Solutions

Challenge: Achieving good AR tracking on printed poster
Solution: Enhanced poster design with high-contrast tracking features

Challenge: Model complexity vs. mobile performance
Solution: Created multiple LOD versions and optimized mesh topology

Challenge: Cross-browser compatibility
Solution: Implemented feature detection and progressive enhancement

Challenge: Fast loading times on mobile networks
Solution: Aggressive model optimization and progressive loading strategy

Impact

This project demonstrates how WebAR can create engaging interactive experiences without the friction of app downloads. By making AR accessible through a simple web link and movie poster, it shows how augmented reality can enhance marketing materials and create memorable interactions with audiences.

Technical Achievements

• Seamless WebAR experience across platforms
• Optimized 3D rendering for mobile browsers
• Intuitive user interface for AR interaction
• Reliable marker tracking and registration
• Professional 3D modeling and texturing workflow

Use Cases

• Movie marketing and promotion
• Interactive print advertising
• Educational content enhancement
• Museum and gallery exhibits
• Product packaging activation