A real-time 3D autonomous vehicle simulation featuring LiDAR visualization, AI traffic management, and a cinematic HUD interface — all rendered in pure JavaScript Canvas.
🌐 Live Demo · 🐛 Report Bug · 💡 Request Feature
Open teslaway.vercel.app — a 3-second countdown launches you straight into the simulation. No clicks needed.
| Feature | Description | |
|---|---|---|
| 🛣️ | 3D Road System | Procedurally generated roads with curves, intersections, lane markings & crosswalks |
| 🤖 | AI Traffic | Multiple AI-controlled vehicles with realistic behavior and tail lights |
| 📡 | LiDAR Visualization | Real-time 360° LiDAR sweep, point cloud rendering & 3D object mapping |
| 🚦 | Traffic Lights | Dynamic traffic signal system with countdown timer & auto speed adjustment |
| 🎯 | Object Detection | AI bounding boxes with distance tracking on detected vehicles |
| 🖥️ | Cinematic HUD | Full heads-up display with speed, battery, sensor status & AI decisions |
| 🗺️ | LiDAR Minimap | Circular radar-style minimap with real-time vehicle positions |
| 🌃 | Night Environment | Starfield, moon, illuminated buildings with window lights |
| 🏙️ | City Objects | Procedural buildings & trees with LiDAR point detection |
| ⏱️ | Auto Countdown | 3... 2... 1... GO! Auto-starts without user interaction |
| Technology | Usage |
|---|---|
 |
Core simulation engine & game loop |
 |
Canvas rendering & DOM structure |
 |
HUD layout, animations & effects |
 |
2D graphics & 3D perspective projection |
 |
Orbitron & Inter typefaces |
 |
Deployment & hosting |
| Key | Action |
|---|---|
| ↑ | Increase speed (+10 km/h) |
| ↓ | Decrease speed (-10 km/h) |
| L | Toggle LiDAR system on/off |
┌─────────────────────────────────────────────────────────┐
│ 🟢 FSD + LiDAR ACTIVE 00:12:34 │
│ │
│ ┌─────────┐ NEURAL NETWORK ┌───────┐ │
│ │ 8 CAM │ + LiDAR PROCESSING │ DETECT│ │
│ │ L LiDAR │ │ 98.7% │ │
│ │ R RADAR │ ┌─ TRAFFIC SIGNAL ─┐ │ 96.2% │ │
│ │ U ULTRA │ │ 🔴 🟡 🟢 12s │ │ 94.1% │ │
│ │ N NEURL │ └──────────────────┘ │ 99.5% │ │
│ │ G GPS │ └───────┘ │
│ └─────────┘ ┌──────────┐ │
│ │ LiDAR360 │ │
│ │ 🔵 │ │
│ ┌──────┐ FULL SELF-DRIVING BETA └──────────┘ │
│ │ 120 │ LiDAR + VISION FUSION BATTERY ████░ 87% │
│ │ KM/H │ Highway 101 N - Palo Alto, CA │
│ └──────┘ │
└─────────────────────────────────────────────────────────┘
# Clone the repository
git clone https://github.com/romizone/teslaway-simulation.git
# Navigate to the project
cd teslaway-simulation
# Open in browser (macOS)
open index.html
# Open in browser (Linux)
xdg-open index.html
# Open in browser (Windows)
start index.html💡 No dependencies, no build step, no server needed — just open the HTML file!
teslaway-simulation/
├── 📄 index.html # Complete application (HTML + CSS + JS)
├── 📋 README.md # Documentation
├── 📝 LICENSE # MIT License
└── 🚫 .gitignore # Git ignore rules
The simulation uses a procedural AI system that:
- Generates road segments (straights, curves, intersections)
- Manages traffic light state machines with countdown logic
- Adjusts vehicle speed based on traffic conditions
- Simulates object detection with confidence percentages
- 4 virtual sensors scanning the environment
- Real-time point cloud visualization on road and objects
- 360° minimap showing detected vehicles and road edges
- Wireframe overlays on detected objects with depth mapping
- Custom perspective projection engine (no libraries)
- Depth-sorted rendering for buildings and environment
- Dynamic lighting and fog based on distance
- Scanline & vignette post-processing effects
This project is deployed on Vercel with automatic deploys on push:
Distributed under the MIT License. See LICENSE for more information.
Made with ❤️ and JavaScript
⭐ Star this repo if you found it interesting!