An immersive WebXR application that displays ghosts flying around a specific house location on Halloween. View ghosts through your phone's camera in AR and interact with them!

• 🌍 Geolocation-based AR: Ghosts appear when you're near the target house (50 meters)
• 👻 3D Ghost Models: Custom-designed 3D ghosts with glowing eyes and animations
• 📱 Mobile WebXR: Works on iOS and Android devices with AR support
• 🎮 Interactive Gameplay:
  • Tap to scare ghosts and earn points
  • Scare each ghost twice to banish them
  • Clear all 4 ghosts to win
• 🔊 Sound Effects: Audio feedback for interactions
• 🎨 Halloween Theme: Spooky visuals and effects

1. Open the app on a mobile device with WebXR support
2. Allow location access when prompted
3. Navigate to the target house (within 50 meters)
4. Point your camera around to see ghosts floating in AR
5. Tap ghosts to scare them - each ghost needs 2 taps to banish
6. Clear all 4 ghosts to protect the haunted house!

• Scares: +1 point for each successful scare
• Win condition: Scare all 4 ghosts twice each (8 total scares)

• Floating: Ghosts hover and bob gently in place
• Fading: Ghosts fade in and out, reappearing nearby
• Scared: Tapped ghosts shake and become translucent
• Banished: After 2 scares, ghosts fade away completely

• Three.js: 3D graphics rendering
• WebXR API: AR camera access
• Vite: Build tool and dev server
• Web Audio API: Sound effects
• Geolocation API: GPS tracking

• Device: iPhone or iPad
• OS: iOS 14 or later (iOS 15+ recommended)
• Browser: Safari only (WebXR for AR)
• Connection: HTTPS required (local HTTPS works too)
• Permissions: Camera and Location access required

• Chrome: 88+
• Edge: 88+
• Samsung Internet: 14+

• Chrome/Edge with WebXR emulator extension
• Useful for testing without a phone

The app includes iOS-specific enhancements:

• Device Detection: Automatically detects iOS and Safari
• HTTPS Enforcement: Warns if not using secure connection
• iOS Version Checking: Verifies iOS 14+ for WebXR support
• Contextual Help: iOS-specific permission instructions
• ARKit Integration: Leverages native ARKit on iOS

AR Not Working on iOS?

1. Update to iOS 14 or later
2. Use Safari browser (other browsers don't support WebXR)
3. Ensure site is loaded via HTTPS
4. Check Settings > Safari > Websites for camera/location permissions
5. Grant both camera AND location permissions
6. Reload the page after granting permissions

Performance Tips

• Close other apps before using AR
• Ensure good lighting for better AR tracking
• Update iOS to the latest version

ghostHouse/
├── src/
│   ├── main.js              # Application entry point
│   ├── ar/
│   │   └── ARManager.js     # WebXR session management
│   ├── ghosts/
│   │   ├── Ghost.js         # Individual ghost class
│   │   └── GhostManager.js  # Ghost spawning and control
│   ├── audio/
│   │   └── AudioManager.js  # Sound effects
│   ├── location/
│   │   └── LocationManager.js # Geolocation tracking
│   ├── game/
│   │   └── GameManager.js   # Game state and scoring
│   └── ui/
│       └── UIManager.js     # UI updates and display
├── index.html               # Main HTML file
├── .env.example            # Environment template
├── .env                    # Local configuration (not in git)
├── package.json            # Dependencies
├── vite.config.js          # Vite configuration
├── vercel.json             # Vercel deployment config
└── README.md               # This file

• Location data is only used locally for distance calculation
• No data is sent to external servers
• Address is obscured through environment variables
• Geolocation requires user permission
• All processing happens on the client device

• Ensure WebXR is enabled on your device
• Check that you're near the target address (50m radius)
• Try using "Set Custom Location" to play at your current location
• Ensure AR session has started (camera should be active)

• Grant camera permissions to the website
• Ensure your device has AR capabilities
• Try reloading the page
• Check if your browser version supports WebXR

• Check device volume settings
• Ensure your browser hasn't muted audio
• Some browsers require user interaction before audio plays

• Enable location services on your device
• Grant location permission to the website
• Ensure GPS is enabled
• Try opening the page in a private/incognito window

For testing without a phone:

1. Install WebXR Emulator extension
2. Use Chrome DevTools geolocation emulator
3. See console messages for debugging

Feel free to submit issues and enhancement requests!

MIT License - feel free to use for Halloween events!

Created with ❤️ for Halloween 2025

Happy Halloween! 🎃👻