6 ms·

Raycaster in HTML5 / JavaScript

37 points by BruuD 15y ago

mrspeaker 15y ago
My favourite javascript raycaster was P01's "Wolf5k" (http://www.wolf5k.com/ 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-with-html-5-can-1/ 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)
- BruuD 15y ago
  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.
CGamesPlay 15y ago
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 15y ago
  Just did a quick modification so that the screen is only redrawn if the actor has moved.
RobertKohr 15y ago
Need some nazis to shoot.
DanielRibeiro 15y ago
There are also these old html5 2d canvas experiments: http://www.benjoffe.com/code/ http://www.benjoffe.com/code/ Very similar to this one specifically: http://www.benjoffe.com/code/demos/canvascape/textures http://www.benjoffe.com/code/demos/canvascape/textures
- robinduckett 15y ago
  Uses the same textures, but the second one you linked to seems to be much quicker.
noduerme 15y ago
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 15y ago
  I'd blame the implementation, not the platform in this case though, seeing how others have linked much faster JS raycasters.
  - noduerme 15y ago
    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 15y ago
      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 15y ago
        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?

37 points by BruuD 15y ago

My favourite javascript raycaster was P01's "Wolf5k" (http://www.wolf5k.com/ 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-with-html-5-can-1/ 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)

BruuD 15y ago
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.

CGamesPlay 15y ago

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 15y ago
Just did a quick modification so that the screen is only redrawn if the actor has moved.

RobertKohr 15y ago

Need some nazis to shoot.

DanielRibeiro 15y ago

There are also these old html5 2d canvas experiments: http://www.benjoffe.com/code/ http://www.benjoffe.com/code/ Very similar to this one specifically: http://www.benjoffe.com/code/demos/canvascape/textures http://www.benjoffe.com/code/demos/canvascape/textures

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

noduerme 15y ago

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 15y ago
I'd blame the implementation, not the platform in this case though, seeing how others have linked much faster JS raycasters.
- noduerme 15y ago
  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 15y ago
    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 15y ago
      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?