A 2.5D raycasting engine built from scratch with JavaScript and HTML5 Canvas. Inspired by classic games like Wolfenstein 3D, this project turns a simple 2D grid map into a convincing 3D perspective using rays, trigonometry, and real-time rendering.
Includes performance benchmarking and stress testing to evaluate real-time rendering limits.
- Grid-based map with walls
- DDA raycasting for accurate wall detection
- Field of view projection with fisheye correction
- Distance-based wall scaling and shading
- Smooth player movement with collision detection
- Interactive minimap showing player and rays
- Real-time rendering loop
- Real-time performance profiling (FPS, frame time)
- Stress-tested with large procedural maps
The engine was profiled under increasing ray counts to evaluate scalability and real-time rendering limits. Testing was conducted on large procedural maps to simulate worst-case traversal scenarios.
- Map Size: 800 × 800 (~640k cells)
- Renderer: HTML5 Canvas
- Measurement: Uncapped FPS + frame time (ms)
- Hardware: Intel EVO i7
| Rays per Frame | FPS (uncapped) | Frame Time (ms) |
|---|---|---|
| 1500 | ~150 | ~6–7 ms |
| 3000 | ~90 | ~11 ms |
| 5000 | ~70 | ~14 ms |
| 8000 | ~60 | ~16–17 ms |
- Sustains real-time performance (~60 FPS) up to ~8000 rays per frame
- Demonstrates near-linear scaling with increasing ray count
- Maintains stable performance even on large maps (~640k cells)
Performance is primarily bounded by per-ray computation cost, not map size, indicating efficient spatial traversal.
W/S– Move forward / backwardA/D– Strafe left / rightArrow Left/Arrow Right– Rotate player
- Add textures for walls and floors
- Render sprites for objects and enemies
- Enhanced lighting and shading effects
