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.
Setting up
Requirements
- Node.js
ejs
express
After cloning the repository, navigate to the root folder and install the dependencies using npm
.
$ npm install
Once all the dependencies are installed, you can start up an Express development server with:
$ npm run start
Controls
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.
Live Demo
You can check out the live demo here, and follow the latest updates here!
Map Editor GUI
Coming soon...
Features include
- "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
TODOs
- 2-D sprites for in-game
thing
s - Translucent surfaces
- Sloped surfaces
- Blocks of varying widths, heights & depth (
free-form block
s)