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 engine has been written from scratch in pure JavaScript with no external dependencies other than the 2d graphics context provided by the HTML5 Canvas API, to draw pixels on.

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 & sloped surfaces. An offscreen frame buffer is utilized to optimize per-pixel rendering.

This personal project has more or less been my learning journey on the early 90's 3d–or pseudo-3d rather–tech for the last couple of years. So the project has been growing with me, so to speak. Because this is the case, the code is not in its best shape as I mostly have been prototyping ideas and feature implementations and have not had the opportunity to undergo a major and a much needed refactoring. However such a refactor is in the backlog and is sure to gradually happen in future versions.

Key features include:

  • Mini-map display
  • Fully texture-mapped walls, floors & ceiling
  • Alpha-blending
  • 360 parallaxed skies for outdoor spaces
  • Diminishing lighting shading (fog effect)
  • 2-D static & animated sprites for in-game objects
  • Walls of varying heights
  • Sloped surfaces (introduced in v0.3.5)
  • Custom collision system that supports collisions against non-axis-aligned geometries, like diagonal walls (introduced in v0.3.6)
  • Custom occlusion-culling routine to prevent overdrawing
  • Free-look (perspective-incorrect, achieved via y-shearing)
  • Player elevation


Controls

MovementWASD
Free-look or mouse*
Change elevationQ,  E  or MSW*
ShootSPACE or LMB*
InteractENTER
Toggle fullscreen mode F

    * You should first click LMB on the canvas to activate mouse controls.


Please note that this is still heavily a WIP and regard it as a mere tech demo, as there is still no major gameplay loop implemented in.


Some of the visual and audio assets have been re-used from the original 1993 release of Doom.

GitHub:  raycast.js

StatusIn development
PlatformsHTML5
Rating
Rated 4.5 out of 5 stars
(2 total ratings)
Authorundefbehav
GenreShooter
Tags2D, 3D, Doom, doom-clone, First-Person, FPS, Pixel Art, raycasting, Retro, wolfenstein