entropia

A while ago a made a little javascript raycaster.  Recently, when I was browsing through my old stuff, I came across it and noticed that it didn’t work in IE7, so I decided to fix it.  But since this was the closest I’ve come to graphics programming in a few years, I ended up doing a lot more to speed it up and make it better.  Here is a page chronicling the development of the fastest canvas-free javascript raycaster I’ve seen.

The rendering portion of a raycaster can be thought of as a simplified subset of 3D rendering.  3D rendering in javascript is covered here.  Essentially, it consisted of breaking down triangles into a number of right-triangles, each of which is represented by a bordered div.  In raycasting, you don’t need to worry about triangles, just trapezoids.  And trapezoids can be rendered in javascript without subdivision.

The crux of making it fast lies in how those trapezoids are calculated from the walls.  I ended up using binary subdivision to find the boundaries between walls, so each wall can be treated as a single trapezoid.  (This is opposed to using fixed-width trapezoids that are subdivided when need be.)

There are a few things I want to add.  Mostly texturing, which I’ve never seen in a javascript raycaster.  I have an idea involving pre-skewing the images which almost works.  Hopefully I’ll be able to work out the final kinks (the most prominent of which is speed) soon.