A from-scratch raycasting engine inspired by the rendering technique that powered Wolfenstein 3D — built entirely with vanilla JavaScript and the HTML5 Canvas API. No libraries, no frameworks, just math and pixels.
Raycasting has a special place in computer graphics history. Before GPUs could brute-force millions of polygons per frame, developers had to be clever. In 1992, id Software shipped Wolfenstein 3D — a game that faked a 3D environment on hardware that had no business rendering one. The trick? Raycasting.
Instead of projecting full 3D geometry, raycasting sends out one ray per vertical screen column from the player's point of view. Each ray marches through a 2D grid until it hits a wall, then the engine calculates how far away that wall is and draws a proportionally sized vertical stripe. Do this for every column on screen and — suddenly — you have a convincing first-person 3D perspective, computed entirely from a flat 2D map.
The core math relies on the DDA (Digital Differential Analyzer) algorithm, a method for efficiently stepping through grid cells along a ray's path. Combined with perpendicular distance correction (to eliminate the fisheye effect), it produces clean, undistorted walls with surprisingly little computation.
It's elegant, it's fast, and it's a beautiful example of what you can do when you understand the geometry behind rendering.
This is a real-time raycasting renderer running in the browser. You walk around a 24×24 tile map in first person, with colored walls, basic lighting, and smooth movement.
- DDA Raycasting — Rays are cast column-by-column across the screen using the Digital Differential Analyzer algorithm for precise grid traversal.
- First-Person Camera — Direction vector + camera plane setup gives a proper perspective projection with a natural field of view.
- Mouse Look — Pointer lock integration for fluid, FPS-style camera rotation.
- WASD / ZQSD Movement — Full support for both QWERTY and AZERTY keyboard layouts, plus arrow keys.
- Wall Sliding — Collision detection handles X and Y axes independently, so you slide along walls instead of getting stuck on them.
- Side Shading — Walls hit on the Y-axis are drawn slightly darker than X-axis walls, giving an immediate sense of depth and shape.
- Color-Coded Wall Types — The map supports multiple wall types (values 1–5), each rendered in a distinct color to differentiate rooms and structures.
- Sky & Floor — Simple flat-color sky and ground plane to frame the 3D view.
- Zero Dependencies — Pure JavaScript. One HTML file, one JS file. Open it and it runs.
Just open index.html in your browser. That's it.
Click the canvas to lock your mouse, then look around and move.
| Key | Action |
|---|---|
W / Z / ↑ |
Move forward |
S / ↓ |
Move backward |
A / Q |
Strafe left |
D / → |
Strafe right |
| Mouse | Look around |
├── index.html # Entry point — canvas setup and script loading
└── engine.js # Complete raycasting engine (map, player, input, rendering loop)
The entire renderer lives in a single game loop: handle input → cast rays → draw columns → repeat via requestAnimationFrame.
- Textured walls — Map textures onto wall surfaces instead of flat colors
- Floor & ceiling casting — Render textured floors and ceilings with per-pixel raycasting
- Minimap overlay — Show a top-down 2D view of the map with the player's position and ray fan
- Sprites / billboards — Add objects and entities in the world (items, enemies, decorations)
- Variable wall heights — Support for walls of different heights or multi-level maps
- Doors — Animated sliding doors that open and close
- Lighting & distance fog — Fade walls to black based on distance for atmosphere
- Sound — Footstep audio and ambient sounds using the Web Audio API
- Map editor — A simple in-browser tool to design and export maps
- Performance display — FPS counter and ray debug visualization
Built for the love of old-school rendering. Standing on the shoulders of id Software.