RayCast.js is an implementation of the once-popular 3-D rendering technique known as ray-casting which was famously featured in 1991's popular video game hit Wolfenstein 3D.
The graphics are rendered in a 640x480 HTML5 canvas, using the 2d graphics context. The rendering routine, at its core, is made up of vertical lines of texture-mapped walls at constant-Z, and perspective-correct texture-mapping for flat surfaces. An offscreen frame buffer is utilized to optimize per-pixel rendering.
- Node.js
ejsexpress
After cloning the repository, navigate to the root folder and install the dependencies using npm.
$ npm installOnce all the dependencies are installed, you can start up an Express development server with:
$ npm run start| Action | Keys |
|---|---|
| Movement | W A S D |
| Free-look | ↑ → ↓ ←, or the mouse* |
| Change elevation | Q E, or  * |
| Shoot | ⎵, or  * |
| Interact | ⏎ |
| Toggle fullscreen mode | F |
* You should first click on the canvas to activate mouse controls.
You can check out the live demo here, and follow the latest updates here!
Coming soon...
- "1.5" degrees of camera freedom (pitch is achieved via a process called y-shearing)
- Different levels of camera elevation
- Fully texture-mapped walls, floors & ceiling
- Alpha-blending
- 360 parallaxed skies for outdoor spaces
- Light diminishing (distance/depth-based shading)
- A custom collision system that supports collisions against non-axis-aligned geometries as well, like diagonal walls
- Doors
- Diagonal walls
- Mini-map display
- 2-D sprites for in-game
things - Translucent surfaces
- Sloped surfaces
- Blocks of varying widths, heights & depth (
free-form blocks)