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-... (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)
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.
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.
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.
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.
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).
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?
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).
There is not really a justified reason for building a 3D engine this way, except for just being bored and wanting to practice my JavaScript a little :)
The canvas supports hardware accelerated 3D graphics so there is no reason to draw a 3D world in a 2D context, like i did.
There are many examples out there of 3D games who are written entirely in JavaScript and rendered on a canvas, that perform very well (even complete Quake ports with networking capabilities).
14 comments
[ 3.3 ms ] story [ 35.8 ms ] threadBut 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-... (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)
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.
Very similar to this one specifically: http://www.benjoffe.com/code/demos/canvascape/textures
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...
[1] http://themaninblue.com/writing/perspective/2010/03/22/
The canvas supports hardware accelerated 3D graphics so there is no reason to draw a 3D world in a 2D context, like i did.
There are many examples out there of 3D games who are written entirely in JavaScript and rendered on a canvas, that perform very well (even complete Quake ports with networking capabilities).