Skip to content
Ray casting tutorial demos
Branch: master
Clone or download
Latest commit 056d9b7 Jul 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
LICENSE Update LICENSE Jul 13, 2018
README.md Update README.md Jul 17, 2018
demo1.png Preview Images Jul 14, 2018
demo2.png
demo3.png Preview Images Jul 14, 2018
demo4.png
demo5.png
demo6.png Demo 6 Jul 15, 2018
demo7.png

README.md

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

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

Alt text


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

Alt text


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!)

Alt text


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!

Alt text


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.

Alt text


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.

Alt text


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).

Alt text

You can’t perform that action at this time.