WNDR Vivid Eye System is an immersive 3D web experience that creates an infinite cloud of watching eyes. The application uses AI-powered webcam detection to capture your iris pattern and transforms it into anatomically-accurate 3D eyes that follow you through a dark void. You can also upload iris images directly.
Navigate through thousands of eyes using first-person flight controls, watching as they track your movement with organic, sentient-like behavior. Each eye has its own personality - some react quickly while others drift lazily.
If you would like to run the project locally, please see the Installation section below. If you would like to view the live demo, please see the Usage section below.
To run this project locally:
-
Clone the repository:
git clone https://github.com/pnsw123/iris.git cd iris -
Start a local server (required for webcam access and ES modules). You can use any of these methods:
Using Python 3:
python3 -m http.server 8000
Using Node.js (npx):
npx serve
Using VS Code: Install the "Live Server" extension and click "Go Live"
-
Open your browser and navigate to
http://localhost:8000(or the port shown by your server) -
For AI iris scanning, allow camera access when prompted (requires HTTPS or localhost)
| Key | Action |
|---|---|
| W / Arrow Up | Fly forward |
| S / Arrow Down | Fly backward |
| A / Arrow Left | Strafe left |
| D / Arrow Right | Strafe right |
| Space / Q | Fly up |
| Shift / E | Fly down |
| Mouse Drag | Look around |
| H | Hide/Show UI |
- Upload Iris: Click to upload an iris image (JPG, PNG) which will be processed and added to the eye cloud
- Scan Eye (AI): Uses your webcam with MediaPipe AI to detect and capture your iris in real-time
- Speed Control: Adjust movement speed from 0.5x to 5x using the slider or preset buttons
The infinite eye cloud environment with thousands of eyes tracking your movement through the void.
AI-powered iris detection with cyan reticle overlay showing "IRIS LOCKED" when ready to capture.
On-screen keyboard hints with visual feedback showing which keys are currently pressed.
This project was created as part of CS460 - Computer Graphics at the University of Massachusetts Boston.
Course website: CS460.org
- Three.js - WebGL 3D rendering engine by Ricardo Cabello (mrdoob)
- MediaPipe Face Mesh - Google's ML solution for facial landmark detection
- WebGL 2.0 - Hardware-accelerated 3D graphics
Built with vanilla JavaScript, WebGL, and AI - no frameworks, just web standards.