5 ms·

JavaScript Wolfenstein 3D Engine

psyklic 17y ago
VERY cool! I've seen this before, but this is the best version yet.
- I_got_fifty 17y ago
  How do they do it? Is each frame created with HTML/CSS?
  - e1ven 17y ago
    The CANVAS tag allows per pixel placement. It's what makes things like this possible. From the Source- This file is part of the article series by Jacob Seidelin about creating a ray casting engine with JavaScript, DOM and Canvas. If you have questions or comments, please contact the author at either jseidelin@nihilogic.dk or http://blog.nihilogic.dk/ http://blog.nihilogic.dk/ The code samples here are freely available under the MIT license. See: [http://www.nihilogic.dk/licenses/mit-license.txt http://www.nihilogic.dk/licenses/mit-license.txt] The graphics for sprites and walls are property of id Software.
    - axod 17y ago
      >> "It's what makes things like this possible." You could, and I've seen, versions that use loads of <div> elements which get resized, or you could use a ton of <img> elements. So it's certainly possible without canvas, but I'm not sure how the frame rate would compare.
      - TrisMcC 17y ago
        Check the source. This one is done without canvas, and with div and img elements. The canvas elements used here are for the minimap.
        ars 17y ago
        It's png sprites: http://devfiles.myopera.com/articles/650/walls.png http://devfiles.myopera.com/articles/650/walls.png http://devfiles.myopera.com/articles/650/lamp.png http://devfiles.myopera.com/articles/650/lamp.png http://devfiles.myopera.com/articles/650/tablechairs.png http://devfiles.myopera.com/articles/650/tablechairs.png http://devfiles.myopera.com/articles/650/guard.png http://devfiles.myopera.com/articles/650/guard.png You use the piece you want then scale it. For distance, make it smaller, for viewing something that is on the side you shrink it in width while leaving the height alone, this gives the illusion that it is slanted. It would not be possible to do true 3d with this because you would need to scale something into a trapezoid which HTML can not do. The guard png implies that you can shoot (and get shot), but I could not get that to work. By the name of the URL looks like there should be a step 6.
jasonkester 17y ago
This rocks. So many Javascript demos that we see here are just rehashes of things we all did as demos back in the days of Netscape Navigator. This actually does something you couldn't have pulled off a few years back. Well done.
- ars 17y ago
  Actually, you could do this with Netscape Navigator, sorry to burst your bubble. It's just images in a row scaled to different sizes. The effect is amazing, but the idea is simple.
  - sgoranson 17y ago
    Well, to get pedantic, I think the original Navigator fizzled out before CSS was truly supported. Not sure you could do it without it.
    - ars 17y ago
      You don't need CSS to do this, just positioned images (which you can do with layers, or even with a blank image above the main one).
- sgoranson 17y ago
  seriously...hard to believe that 12 years ago I thought my MIDI jukebox was as cool as javascript was going to get :)
newsdog 17y ago
Sir, I am impressed!
actually 17y ago
For comparison, what Flash can do now: http://www.badsectoracula.com/peponi/rayfaster2/ http://www.badsectoracula.com/peponi/rayfaster2/
- dtf 17y ago
  Incredible stuff. Do you know if this is using anything intrinsically Flash-only, other than a fast VM? It looks like a software rasterizer - is there anything preventing a port to some kind of Javascript/HTML setup?
  - actually 17y ago
    It is software rasterizing, written in haXe. I know the author from his posts on the haXe compiler ML, so I have a few details about the engine. haXe itself compiles to JS/C++/PHP/etc., however the only way that engine could possibly be fast enough is to make use of haXe's Flash-specific "Memory" API, which uses opcodes from Adobe Alchemy to manipulate a flat memory space at the byte-level. While it could definitely be ported, you'd have to change the part of the implementation that makes it fast to do so. If JS got a similar ability to do byte-level manipulations, it wouldn't be out of reach, but right now it looks like JS implementations are avoiding these kinds of proprietary extensions.
    - badsectoracula 17y ago
      I think this version doesn't use the "Memory" API. I have two versions, one that uses it and one that doesn't and the difference is very minimal - not worth to drop the Flash 9 support at least. I'm not sure if RF2 can be done in regular JavaScript though. Maybe in Chrome 3, which about twice as fast in my 3D canvas benchmark test (this one: http://gimme.badsectoracula.com/canvas3dbenchtest.html http://gimme.badsectoracula.com/canvas3dbenchtest.html ). But Flash works 'equally' in almost all browsers while JS+Canvas is very browser specific when it comes to performance.
- andreyf 17y ago
  For comparison, here's what computers could do outside the browser, two years ago: http://www.youtube.com/watch?v=ACQW8iVCbhY http://www.youtube.com/watch?v=ACQW8iVCbhY Why do our expectations drop so drastically just because something is downloaded from the web and run in a browser? Not that there's anything wrong with that, but accessing something via web and running things naively aren't necessarily mutually exclusive.
andreyf 17y ago
I don't get it, sure it's impressive, kind of like a Rube Goldberg machine is impressive. But let's step back a second - isn't it a sign of a monumental failure of computer programming that we're gawking at a machine which can perform ~6 billion calculations/second (not counting the GPU) displaying a 310 by 190 "3d" maze at ~25 frames a second?
- rottencupcakes 17y ago
  It really just shows that we're a bunch of web programming nerds.
- psyklic 17y ago
  No, not necessarily. You've been spoiled by GPUs. Try filling any modern screen buffer (>1024x768) pixel-by-pixel, just as software rasterizers do, even with just a solid color. You'll find it takes a long and quite frankly unacceptable time (for real-time apps at least), even with modern processors. Even at 1024x768 (@ 25 frames/sec), you are given just ~300 cycles/pixel, which is gone quickly after slow memory accesses and multi-cycle instructions.
  - DarkShikari 17y ago
    Try filling any modern screen buffer (>1024x768) pixel-by-pixel Sure, if you completely throw away SIMD, things might be slow. you are given just ~300 cycles/pixel, which is gone quickly after slow memory accesses Memory accesses are pipelined and are generally not slow; an L1 cache access is 3 cycles and prefetching on modern CPUs is generally flawless for such situations. multi-cycle instructions. Since when do you need multiplies to fill a screen with a solid color? Even if you had to do YUV -> RGB conversion, that is done much faster with a multi-dimensional LUT than with multiplies (see swscale). Of course it's even faster in SIMD. It's quite possible to do very fast rasterization on modern hardware without a GPU. It's just that people generally don't do it, because everyone has GPUs to do it for them.
firefoxman1 17y ago
Wow this is a good javascript engine benchmark. Chromium 3 gets twice as many FPS as Firefox 3.5
pjvandehaar 17y ago
HTML 5 with the 3D css feature should allow a whole different approach to this sort of thing, yes?

VERY cool! I've seen this before, but this is the best version yet.

I_got_fifty 17y ago
How do they do it? Is each frame created with HTML/CSS?
- e1ven 17y ago
  The CANVAS tag allows per pixel placement. It's what makes things like this possible. From the Source- This file is part of the article series by Jacob Seidelin about creating a ray casting engine with JavaScript, DOM and Canvas. If you have questions or comments, please contact the author at either jseidelin@nihilogic.dk or http://blog.nihilogic.dk/ http://blog.nihilogic.dk/ The code samples here are freely available under the MIT license. See: [http://www.nihilogic.dk/licenses/mit-license.txt http://www.nihilogic.dk/licenses/mit-license.txt] The graphics for sprites and walls are property of id Software.
  - axod 17y ago
    >> "It's what makes things like this possible." You could, and I've seen, versions that use loads of <div> elements which get resized, or you could use a ton of <img> elements. So it's certainly possible without canvas, but I'm not sure how the frame rate would compare.
    - TrisMcC 17y ago
      Check the source. This one is done without canvas, and with div and img elements. The canvas elements used here are for the minimap.
      - ars 17y ago
        It's png sprites: http://devfiles.myopera.com/articles/650/walls.png http://devfiles.myopera.com/articles/650/walls.png http://devfiles.myopera.com/articles/650/lamp.png http://devfiles.myopera.com/articles/650/lamp.png http://devfiles.myopera.com/articles/650/tablechairs.png http://devfiles.myopera.com/articles/650/tablechairs.png http://devfiles.myopera.com/articles/650/guard.png http://devfiles.myopera.com/articles/650/guard.png You use the piece you want then scale it. For distance, make it smaller, for viewing something that is on the side you shrink it in width while leaving the height alone, this gives the illusion that it is slanted. It would not be possible to do true 3d with this because you would need to scale something into a trapezoid which HTML can not do. The guard png implies that you can shoot (and get shot), but I could not get that to work. By the name of the URL looks like there should be a step 6.

This rocks. So many Javascript demos that we see here are just rehashes of things we all did as demos back in the days of Netscape Navigator. This actually does something you couldn't have pulled off a few years back. Well done.

ars 17y ago
Actually, you could do this with Netscape Navigator, sorry to burst your bubble. It's just images in a row scaled to different sizes. The effect is amazing, but the idea is simple.
- sgoranson 17y ago
  Well, to get pedantic, I think the original Navigator fizzled out before CSS was truly supported. Not sure you could do it without it.
  - ars 17y ago
    You don't need CSS to do this, just positioned images (which you can do with layers, or even with a blank image above the main one).
sgoranson 17y ago
seriously...hard to believe that 12 years ago I thought my MIDI jukebox was as cool as javascript was going to get :)

newsdog 17y ago

Sir, I am impressed!

actually 17y ago

For comparison, what Flash can do now: http://www.badsectoracula.com/peponi/rayfaster2/ http://www.badsectoracula.com/peponi/rayfaster2/

dtf 17y ago
Incredible stuff. Do you know if this is using anything intrinsically Flash-only, other than a fast VM? It looks like a software rasterizer - is there anything preventing a port to some kind of Javascript/HTML setup?
- actually 17y ago
  It is software rasterizing, written in haXe. I know the author from his posts on the haXe compiler ML, so I have a few details about the engine. haXe itself compiles to JS/C++/PHP/etc., however the only way that engine could possibly be fast enough is to make use of haXe's Flash-specific "Memory" API, which uses opcodes from Adobe Alchemy to manipulate a flat memory space at the byte-level. While it could definitely be ported, you'd have to change the part of the implementation that makes it fast to do so. If JS got a similar ability to do byte-level manipulations, it wouldn't be out of reach, but right now it looks like JS implementations are avoiding these kinds of proprietary extensions.
  - badsectoracula 17y ago
    I think this version doesn't use the "Memory" API. I have two versions, one that uses it and one that doesn't and the difference is very minimal - not worth to drop the Flash 9 support at least. I'm not sure if RF2 can be done in regular JavaScript though. Maybe in Chrome 3, which about twice as fast in my 3D canvas benchmark test (this one: http://gimme.badsectoracula.com/canvas3dbenchtest.html http://gimme.badsectoracula.com/canvas3dbenchtest.html ). But Flash works 'equally' in almost all browsers while JS+Canvas is very browser specific when it comes to performance.
andreyf 17y ago
For comparison, here's what computers could do outside the browser, two years ago: http://www.youtube.com/watch?v=ACQW8iVCbhY http://www.youtube.com/watch?v=ACQW8iVCbhY Why do our expectations drop so drastically just because something is downloaded from the web and run in a browser? Not that there's anything wrong with that, but accessing something via web and running things naively aren't necessarily mutually exclusive.

andreyf 17y ago

I don't get it, sure it's impressive, kind of like a Rube Goldberg machine is impressive. But let's step back a second - isn't it a sign of a monumental failure of computer programming that we're gawking at a machine which can perform ~6 billion calculations/second (not counting the GPU) displaying a 310 by 190 "3d" maze at ~25 frames a second?

rottencupcakes 17y ago
It really just shows that we're a bunch of web programming nerds.
psyklic 17y ago
No, not necessarily. You've been spoiled by GPUs. Try filling any modern screen buffer (>1024x768) pixel-by-pixel, just as software rasterizers do, even with just a solid color. You'll find it takes a long and quite frankly unacceptable time (for real-time apps at least), even with modern processors. Even at 1024x768 (@ 25 frames/sec), you are given just ~300 cycles/pixel, which is gone quickly after slow memory accesses and multi-cycle instructions.
- DarkShikari 17y ago
  Try filling any modern screen buffer (>1024x768) pixel-by-pixel Sure, if you completely throw away SIMD, things might be slow. you are given just ~300 cycles/pixel, which is gone quickly after slow memory accesses Memory accesses are pipelined and are generally not slow; an L1 cache access is 3 cycles and prefetching on modern CPUs is generally flawless for such situations. multi-cycle instructions. Since when do you need multiplies to fill a screen with a solid color? Even if you had to do YUV -> RGB conversion, that is done much faster with a multi-dimensional LUT than with multiplies (see swscale). Of course it's even faster in SIMD. It's quite possible to do very fast rasterization on modern hardware without a GPU. It's just that people generally don't do it, because everyone has GPUs to do it for them.

firefoxman1 17y ago

Wow this is a good javascript engine benchmark. Chromium 3 gets twice as many FPS as Firefox 3.5

pjvandehaar 17y ago

HTML 5 with the 3D css feature should allow a whole different approach to this sort of thing, yes?