Uploaded source code and demos for our ray casting tutorials to GitHub (https://github.com/permadi-com/ray-cast#ray-casting-tutorial-demos).

Ray casting is a popular graphic rendering techniques in the 90s, used to render semi-3D worlds in many games.  These repository contain demos for the ray-casting tutorials at permadi.com.
https://permadi.com/1996/05/ray-casting-tutorial-table-of-contents/

Read through the tutorial to learn the concept behind ray casting, then check out the demos and source codes.

References

• Javascript Canvas API: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
• Javascript Animation Interval (Animation Frame): https://developer.mozilla.org/en-US/docs/Games/Anatomy
• Bresenham Line Drawing Algorithm: https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
• https://permadi.com/1996/05/ray-casting-tutorial-bibliography/

First Demo

Source: https://github.com/permadi-com/ray-cast/tree/master/demo/1
See it in action: https://permadi.com/tutorial/raycast/demo/1/

What’s on it:

• Wall finding
• Generating lookup tables
• Fishbowl / distortion corrections
• Simple flat wall shading
• Rendering of simple (static) ground and sky
• Handling keyboard inputs
• Moving the player

Second Demo

Source: https://github.com/permadi-com/ray-cast/tree/master/demo/2
See it in action: https://permadi.com/tutorial/raycast/demo/2/

What’s on it:

• Wall texturing using JavaScript canvas copy image

Third Demo

Source: https://github.com/permadi-com/ray-cast/tree/master/demo/3
See it in action: https://permadi.com/tutorial/raycast/demo/3/

What’s on it:

• Wall texturing revamped with offscreen buffer
• Wall texture beutification with cheap shading
• Line drawing and image scaling with Bresenham algorithm (https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm)
• Offscreen drawing/double buffering
• Collision detection (player can no longer move through walls or walk into oblivion!)

Fourth Demo

Source: https://github.com/permadi-com/ray-cast/tree/master/demo/4
See it in action: https://permadi.com/tutorial/raycast/demo/4/

What’s on it:

• Floor casting!

Fifth Demo

Source: https://github.com/permadi-com/ray-cast/tree/master/demo/5
See it in action: https://permadi.com/tutorial/raycast/demo/5/

What’s on it:

• Panoramic seamless background.
• Shading tricks.

Sixth Demo

Source: https://github.com/permadi-com/ray-cast/tree/master/demo/6
See it in action: https://permadi.com/tutorial/raycast/demo/6/

What’s on it:

• Ceiling casting.

Seventh Demo

Source: https://github.com/permadi-com/ray-cast/tree/master/demo/7
See it in action: https://permadi.com/tutorial/raycast/demo/7/

What’s on it:

• Vertical motion (looking up and down, flying and crouching).