Skip to main content

AR Studio

Take creative selfies with 3D face filters using augmented reality technology.

What is AR Studio?​

The AR Studio is a fun, optional feature that lets you:

  • Take selfies with 3D face filters
  • Apply real-time AR effects
  • Use advanced face tracking
  • Share on social media

Technology: MediaPipe Face Mesh + Three.js 3D rendering

Accessing AR Studio​

From Home Page: Tap "Selfie" button
Direct Path: /ar-studio
Always Available: No progression required

How It Works​

Face Tracking​

  • 468 landmark points
  • Real-time detection
  • Accurate face mapping
  • Smooth tracking

3D Filters​

  • Real-time rendering
  • Follows face movement
  • 3D models and effects
  • Creative transformations

Camera Access​

Required: Camera permission
Privacy: Local processing only
Data: Not stored on server

Using AR Studio​

Starting a Session​

  1. Access AR Studio
  2. Grant camera permission
  3. Position face in frame
  4. Wait for detection
  5. Apply filters

Taking Photos​

  1. Select filter (if multiple)
  2. Position yourself
  3. Tap capture button
  4. Preview photo
  5. Save or share

Sharing​

Options:

  • Download to device
  • Share to social media
  • Copy to clipboard
  • Native share menu

Features​

Real-Time Preview​

  • See effects live
  • Adjust position
  • Try different angles
  • Smooth rendering

Face Filters (Current)​

  • 3D masks and effects
  • Creative overlays
  • Thematic designs
  • Game-related themes

Photo Quality​

  • High resolution
  • Clear capture
  • Good lighting recommended
  • Front camera used

Tips for Best Results​

Lighting:

  • Good, even lighting
  • Face well-lit
  • Avoid harsh shadows
  • Natural light best

Positioning:

  • Center face in frame
  • Proper distance
  • Face camera directly
  • Steady position

Device:

  • Stable holding
  • Good camera quality
  • Clean lens
  • Adequate battery

Privacy & Safety​

Camera Access:

  • Required for AR
  • Local processing
  • Not recorded
  • Revocable permission

Photo Storage:

  • Saved locally only
  • You control sharing
  • No server upload
  • Your choice to share

Troubleshooting​

Camera Not Working:

  • Check permissions
  • Close other camera apps
  • Refresh page
  • Try different browser

Face Not Detected:

  • Improve lighting
  • Face camera directly
  • Check for obstructions
  • Ensure proper distance

Filters Not Appearing:

  • Wait for face detection
  • Check browser compatibility
  • Good internet for initial load
  • Try refreshing

Technical Details​

Browser Support:

  • Modern browsers recommended
  • Chrome/Safari/Firefox
  • Mobile and desktop
  • WebGL required

Performance:

  • Smooth on modern devices
  • May lag on older hardware
  • Close other apps
  • Good internet helps

Future Features​

Planned:

  • More filter options
  • Custom filter creation
  • AR mini-games
  • Enhanced effects
  • Video recording (maybe)

Next Steps​

  • Try different filters
  • Share your creations
  • Return to Home
  • Play Mini-Games