

Raycaster in HTML5 / JavaScript - BruuD
http://www.dottech.nl/raycaster

======
mrspeaker
My favourite javascript raycaster was P01's "Wolf5k"
(<http://www.wolf5k.com/>) - a raycaster in 5k of Javascript: before there was
any such thing as canvas! It worked using an obscure, two colour, but
programable image format - .xbm files, now killed by the browsers, so it won't
work anymore.

But there is a great article on the Opera Dev blog about how to build your own
like the parent's: [http://dev.opera.com/articles/view/creating-
pseudo-3d-games-...](http://dev.opera.com/articles/view/creating-
pseudo-3d-games-with-html-5-can-1/) (in fact, looking at the code it seems
like this post is just a re-write of the Opera code by Jacob Seidelin - though
it might me a coincidence)

~~~
BruuD
If I get bored again, I will make a version without canvas using only <div>
elements :)

Code was written from scratch, so any similarities with the code you are
referring to are coincidental, although the technique I used is exactly the
same.

------
DanielRibeiro
There are also these old html5 2d canvas experiments:
<http://www.benjoffe.com/code/>

Very similar to this one specifically:
<http://www.benjoffe.com/code/demos/canvascape/textures>

~~~
robinduckett
Uses the same textures, but the second one you linked to seems to be much
quicker.

------
CGamesPlay
Pretty near. It keeps the CPU pegged at 100% with textures/lighting/shadows on
my Macbook Air, and that drops to 90% when I disable all three. Although maybe
not generally applicable to games, it'd be nice if this didn't redraw unless
the actor moved.

~~~
BruuD
Just did a quick modification so that the screen is only redrawn if the actor
has moved.

------
RobertKohr
Need some nazis to shoot.

------
noduerme
Well, it gets about one frame per second on a core2duo... that should be about
one frame every five seconds on an iphone. Not that it isn't a nice piece of
code, but I have to ask, would there be any more point to writing this in
Javascript/HTML5 than there would be in a more appropriate tool for the job,
if it weren't for this inane restriction against Flash on mobile devices? And
is there any way that given the tools at hand, it could be written to run as
smoothly as it would in Flash? To me this is just more proof that Steve Jobs
was wrong -- if this were written in Flash it would get 60 fps on my box and
at least 15 on a mobile. The more I see people trying to push the boundaries
of Javascript with stuff like this, the more I have to laugh when I hear
people tout HTML5 as the Flash-killer.

~~~
zokier
I'd blame the implementation, not the platform in this case though, seeing how
others have linked much faster JS raycasters.

~~~
noduerme
I have to agree. But I still think it's weird that we're giving up Flash, with
the argument basically that 3D games aren't necessary in the browser, and then
going back to the stone age to reproduce basic 1993-era functionality in
Javascript of all things.

~~~
zokier
I think the general attitude is quite opposite. We're giving up Flash
_because_ browser-based gaming actually seems a viable thing. And therefore
community feels the need to take control of the platform away from singular
corporation (Adobe) to somewhat neutral committee (WHATWG).

~~~
noduerme
This doesn't really answer the question. In what way is it viable if it's
currently a tiny fraction of the speed of what's easily attainable with a
plugin, and shows little chance of improvement over the next five years?

~~~
zokier
Could you point some benchmark actually showing canvas performing at tiny
fraction of Flash's speed? Considering that they both are ECMAScript-based and
Firefox got even some code from Adobe for their JS engine, I'd imagine that
the performance difference wouldn't be that great.

I found one (micro)benchmark[1], and in my quick unscientific tests, canvas-
version performed quite well compared to Flash (70 FPS for canvas, and 40 FPS
for Flash, Firefox 7 on Windows 7).

And I certainly believe that there is great chance of improvement, as the APIs
an techniques are quite young yet. See Mozillas Azure project as an example:
[http://blog.mozilla.com/joe/2011/04/26/introducing-the-
azure...](http://blog.mozilla.com/joe/2011/04/26/introducing-the-azure-
project/)

[1] <http://themaninblue.com/writing/perspective/2010/03/22/>

