Raycast.js Save

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 things
• Translucent surfaces
• Sloped surfaces
• Blocks of varying widths, heights & depth (free-form blocks)