Firefox 3D Canvas FPS Engine

axonis writes "Benjamin Joffe has developed Canvascape - "3D Walker", a simple javascript browser based 3D first person game engine that shows off the capabilities of the Canvas tag found in Firefox, Safari and Opera. " Don't expect much except a proof of concept ;)

Comments

overhead

[jacquesm]

Think about the overhead, here is a triple-layered game engine ! Wonder what you could really do with these machines if you hard coded them 80's style in assembler...

Re:overhead

[rd4tech]

would it be as portable as it is now?

Re:overhead

[Lionel Debroux]

Both of you raise a valid point.
That said, what he did is a good tech demo of what users/programmers out here can do with Canvas on the most recent Firefox versions ! Although older computers should not be neglected, the power of modern computers leaves some room for improvement: it is perfectly usable on my machine, which is more than two years old.

Re:overhead

[Anonymous Coward]

Yeah, it will never work. Only took 12 seconds to load with no excitement. Compare that to the 15 minutes of quality time my son & I spend together trying to launch Runescape.

Re:overhead

[bradbeattie]

Wonder what you could really do with these machines if you hard coded them 80's style in assembler...

Not much more than if you coded it in C. Compiler optimizations pretty much took the place of tricky assembly programming.

Re:overhead

[Lionel Debroux]

> It would take you months to do that in assembler, and half a day to do it in C.
Imprecise. If considering only a specific platform and no existing libraries, you're even completely wrong: Coding ASM is significantly more time-consuming than coding C, but the difference is 3-5 times "only".
Obviously, with C, you get a higher level of abstraction, therefore more reusability, portability, etc.

> Then the C code would end up faster because compiler optimizations are faster than anything a person could hope to do,
Depends on the platform. Hardly anybody is able to optimize for speed a modern x86 processor "by hand", but RISCs and even some CISCs like the 68000 are another story. I have been programming for years as a hobby on the 68000 processor, and I have seen:
* GCC missing completely obvious CSEs: a global array used about ten times in a row, the compiler won't put its address into a register even if it has many spare ones;
* GCC not using the instruction set possibilities (10-byte code instead of 4-byte code, and that spills one more register; bad code related to local variables on the stack; etc.);
* GCC completely messing up a calling convention that should be more optimized ( saves&restores on a register that isn't even changed);
* etc.
Wonder why a number of not-very-powerful embedded platforms, like calculators, are still partly programmed in ASM...

There may be more appropriate compilers for those processors, but hey, GCC is supposed to be portable, and it has (had, they deprecated some useful things like casts-as-lvalues in GCC 4.0) cool extensions that most other compilers don't have.

> and it would be portable too.
If you use external libraries like the SDL, yes. Otherwise, no, not more than ASM.

Re:overhead

[ultranova]

If you look at the code you will find that it isn't actual 3D either, just emulated 3D using math and gradients.

I have to tell you an awfull secret about 3D software. None of them really renders graphics three-dimensionally. They all just emulate 3D using math and gradients ;).

As a proof of concept it isn't bad, but current implementations of the technology(SVG in this case I believe) do not make decent use of available hardware, which is a pity. If the browser used the GFX chip for rendering this I imagine it would be a lot faster.

Actually, you could just code it in Java and use Java3D for acceleration. That is pretty fast. Though I have to wonder - why would anyone want 3D ad banners ? Because actual 3D games require far too much data to be practical as applets...

...except, perhaps, as a really quick and easy test drive for a MMORPG, or simply to let potential players see what the gameplay looks like - just use the 3D applet as a floating "News cam". Maybe major battles in MMORPGS could attract a news helicopter (or magical eye or whatever), which could report activities, which would then be shown in the applet (and in ingame news sources too - why couldn't a fantasy world have a newspaper, complete with more or less magical journalists ?). And of course players (or enemies) could kill the darn thing too, giving that classical "Hey - he's pointing that thing thi<Static>" death sequence.

Re:overhead

[squiggleslash]

While I generally agree that you'd end up with something more practical (faster, less likely to break - or at least, less likely for it to be a problem if the binary breaks, on a CPU upgrade) if you write it in C, it's a bit of an exaggeration to say it'd take months vs half a day doing it in assembler vs doing it in C. As long as you think in a high level, and attempt to program with elegance coming before clock-cycle counting, assembler programming can be tremendously quick, once you're in the mindset.

The big issue is that assembler code doesn't have a lot going for it, so most people who program it these days do it for the extremes where nothing else will do - the glue to start a C program, that kind of thing. Worse still, a lot of it is device driver code designed by people who really aren't programmers. It's hard to find good assembler code in the 2000s. Those of us who were programming Motorola 68xxx code in the 1980s though know elegant, readable, maintainable, well structured, assembler code, generated no more slowly than stuff in C isn't impossible. As it's not as maintainable as the equivalent in C, nor as portable, nor as fast, it's just not worth doing any more.

Re:overhead

[Guspaz]

Because actual 3D games require far too much data to be practical as applets...

I disagree. The shareware release of Doom 1 was only 2.9MB compressed, and look at how much content it has. 2.9MB for all sounds, music, maps, code, etc. The game has a limited low-res textureset that is used creatively, used MIDI for music, and had a small number of sounds.

It isn't a matter of requireing too much data, it's a matter of not being able to use the same mindset when coding games for such platforms.

I'm not even a game developer, and I can think of a few tricks. For one thing, stream content as needed. Assume the player has broadband. Stream content as you play. Yes, have a loading screen, and use that initial load to grab the content for the first level. Then, while the user is playing, grab the content for the next level or two. Assuming low-end DSL (half a megabit), and 10MB of compressed content per level (Which can store a TON of content), you've got three minutes of load time per level. The initial load time is going to be the big crunch, because after that you can use gameplay time for downloading the next level.

You can also reduce initial load times by prioritizing content and streaming it in as-needed. If you have a level that is going to have 10 or 20 minutes of gameplay, then you don't need to load in sounds and textures that are only going to be used 15 minutes into the game. Those can be loaded while the user is playing. They only initially need to load stuff that is going to be present in the first few minutes of gameplay.

Another trick is procedural texture generation, where textures are mathematically generated rather than stored as bitmaps. And of course there's always the trick of combining multiple low-res textures to create higher res ones, like Halo did for terrain.

And assuming you have a 10 megabyte budget per level, you can always get more out of that by using textures from previously-loaded levels. This has the side effect of the game getting more graphically diverse as the player progresses, so it may not be something you want.

Anyhow, I think that considering how much can be done with a mere 2.9MB of data, having that much or more PER LEVEL can lead to some pretty good looking content.

Re:overhead

[Suddenly_Dead]

Try pouet.net or other "demoscene" websites. The Demo Scene guys still do a fair amount of stuff in low level languages, especially for the 64k (or smaller) competitions. Some of the stuff they do is quite amazing, for its technical merits as well as the artistic aspect.

Re:overhead

[coopaq]

Here's a fake example I wrote using just DIV and IMG tags.

games

Re:overhead

[jcnnghm]

I ran a basic benchmark to test this theory a couple of weeks ago. I wrote a very basic selection sort in asm, then rewrote it in C++. The asm took 25 seconds to sort 100,000 random 32-bit numbers whereas the C++ took 45.

I would suggest compiling performance sensitive apps to asm, and then optimizing nested loops and some comparison orderings. It is possible to get a lot better performance out of assembly.

Re:overhead

[einhverfr]

It also depends though on what you are optimizing for.

Having worked in Fortran, I can tell you that some things are just not possible to optimize well in Fortran either. And although I will admit that it is possible my knowledge of Fortran could be outdates (is there any other kind?) I suspect that you still have issues with optimizing for certain things (such as executables of sane sizes when dealing with huge arrays).

Again, I have friends who work as programmers in scientific fields who have complained about the overhead of Java in things like genetics analysis apps. On both the Fortran and Java the problem is not how fast can you pass X benchmark but rather how fast will your program work on a data set of arbitrary size.

Indeed Fortran makes this requirement next to impossible for the very fact that all memory allocation is done at *compile time* in Fortran 77, and in Fortran 90, you still extremely inflexible and this is what allows certain optimizations to take place.

Secondly, these posts only deal with pointer optimizations. They *do not* deal with the question of whether a given application will be faster than another one, especially in cases where many of the cycles are run through routines which don't involve user defined pointers. There is a very real question whether in memory or processor intensive applications whether these pointer optimizations will create a *net* gain of speed. For example, lets say in Fortran 77, I use a static array that is large enough to take up most of memory because this is the maximum size I *may* need for my application. At least with Fortran 77, this executable will be *big* and take time to load that could be better used actually running the program. Secondly, what happens when I also need to run another app on that same system? What is going to get swapped to disk? How is that going to impact performance? How does the kernel scheduling affect things?

Now supposed I write the same app in ANSI C using malloc and free where appropraite. The executable will load faster and *only use the memory it needs.* This means less swapping, and fewer delays due to outside factors.

In Fortran 90, things get somewhat better. I can create an array and then allocate space to it. But complex data structures are still lacking and so certain types of problems are going to get semantically *ugly* in Fortran 90. Ugly semantics makes for slow programs.

Here is the thing. There is no "perfect language." Fortran excells at allowing science students to rapidly develop quick and dirty programs to solve science problems safely (no buffer overruns, etc). These simulations, provided that they meet certain criteria, will probably run faster in Fortran than in any other language. But I don't think you can generalize this to an idea that "Fortran is faster than C" because in many cases, it won't be (many of these cases are corner cases in Fortran's core market though).

As for Java... It is great at some things. But there are many other areas where it simply doesn't perform well. Again processor and memory intensive apps (especially those involving string processing) come to mind. Java excells at being able to offer closed source software vendors a compiled environment with the portability of a scripting langauge. If performance continues to improve, great, but I don't think that performance will ever be the reason to choose Java, unless it is being compared to the likes of Python. Is it possible to determine circumstances where it may perform better than C, C++, or insert language here? Sure, but can one say that this means that Java is on a par performance wise with these languages? I don't think so.

Re:overhead

[jcnnghm]

I'm sure the built in sorts would be much faster, they almost certainly use quick sorts, and I didn't take the time to write a proper quick sort in assembly. What I did do is write two sorts that operate in exactly the same way, an apples to apples comparison.

Bottom line, my register usage makes all the difference.

http://compucatedsolutions.com/asm.htm contains the C++ and assembly sorts, you'll notice they both operate in exactly the same way. I couldn't manage to get it past the lameness filter.

Great, just what we need...

[martinultima]

Yay, a platform-independent way of senselessly killing innocent people! What's next, "Grand Theft Auto: Firefox <canvas>"?

Re:Great, just what we need...

[aussie_a]

Yay, a platform-independent way of senselessly killing innocent people!

Woah! We get to kill real living sacks of dirty water? Neat! How does it work? remote operation?

Juxtaposition?

[mikeage]

[In case it's slashdotted, the walkthrough looks like a standard FPS, with an M4 being held].

Then we have the last line of text:

This game is being developed but doesn't have much direction at this time, to make a suggestion email me. The gun is copyright by FarCry but is only here temporarily until I model the weapon set. Sydney Wedding Video and DVD

Wedding Video? Crazy Aussies...

Re:Juxtaposition?

[TubeSteak]

In case of /.ing, break mirror
http://www.abrahamjoffe.com.au.nyud.net:8090/ben/c anvascape/

Oddly enough, I get an error message for FF 1.07 but not IE6
(Yea, I know, use FF 1.5, it says so right in the error message)

The 2nd to last line of text;
Alot of people have suggested that I make the gun shoot or other equally redundant points. I only made this a couple of days ago so all in good time.

Kinda takes the shoot out of First Person Shooter

Wiki

[BibelBiber]

Now include a Wiki environment and people can dynamically built and develop on the levels. Looks nice, really.

Re:Wiki

[hritcu]

Do you mean someting like this?

Re:Wiki

[Anonymous Coward]

No, something fun.

Opera

[masklinn]

FYI, Firefox only works from 1.5 onwards (Gecko 1.8), and Opera 8.5 doesn't work (anyone testing 9.0 could tell if it works or not?)

Firefox Compatibility

[Anonymous Coward]

May I point out that Canvas tag is only supported in Firefox 1.5, and not the current stable release 1.0.7.

Re:Firefox Compatibility

[kyouteki]

But it works fine in Safari 1.3+.

Re:Firefox Compatibility

[andymadigan]

Last I checked, Safari is KHTML, not Gecko, therefore the "underlying structure" wouldn't be the same.

Re:Firefox Compatibility

[masklinn]

Not in HTML4, nor in XHTML1.0 or 1.1

Canvas is a semi-proprietary element (originates from Apple, who first implemented it for Dashboard) that currently is in the under development HTML5/Web Applications 1.0 standard from WHATWG, but is (as far as I know) not part of the W3C's XHTML2 draft

Re:Firefox Compatibility

[iabervon]

That's so that, when a dupe of this is posted next week, everybody who gets the stable release of Firefox 1.5 when it comes out will have something new to see in the article.

Re:Firefox Compatibility

[zootm]

Yeah, the <canvas> tag was introduced by Apple, so they were first-to-market with this one. Looks neat, which is probably why it's being adopted by others.

A cease and desist coming his way

[aussie_a]

This game is being developed but doesn't have much direction at this time, to make a suggestion email me. The gun is copyright by FarCry

And you can expect to be in trouble now that you've been slashdotted (I expect the legal document will come just as you finish putting out the fire your server caused). Even if it was only tempporary, lawyers have funny ways of dealing with copyright infringement. Which is sad, but protected by the law.

Re:A cease and desist coming his way

[aussie_a]

Actually there are no fair use laws in Australia. Thanks for playing.

Re:A cease and desist coming his way

[Tim C]

Two points:

1) that may well fall under fair use

2) so he gets a C&D letter, instructing him to remove the offending content... which he's planning on doing anyway. Net result, the company pays some lawyers needlessly.

Re:A cease and desist coming his way

[Kaenneth]

"Fair Use" is more of a right than a law.

Such as reading a bedtime story from a book to your children is not a "Performance"; copying a vinyl record to cassette tape for use while jogging (those wearable 45's skip too much) is not "Piracy"; recording a TV show on your Betamax deck is not "Theft" (unless you fast forward through the commercials).

Fair Use shouldn't need to be specifically defined in the written law, but I'm sure many clarifications can be found in case law.

I would guess that since his use is not a review, parody, tribute or other protected use, and it's being knowingly publicly distributed in a form that could be construed as competing with Farcry, he would be eligible to be sued (for triple damages I think), but hopefully the makers of Farcry arn't total jerks.

Opera 9 preview 1

[sucker_muts]

In opera 9 preview 1 it works, but incredibly slowly. I get about 1 fps, because it reloads all the scenery and redraws the white walls with every move.

Perhaps because the /. effect? Or is javascript not dependent on the server? Or is the implementation for javascript in opera not optimal?

Re:Opera 9 preview 1

[porneL]

It's because Opers's implementation of is at very early stage (JS in Opera is very fast). Since Opera helps to standari[zs]e <canvas> you can expect that they will aim for a pretty decent implementation.

safari works

[BushCheney08]

Works in Safari on 10.4 However, it really helps show the age of my G3 iBook (4+ years). I get approx 2-3FPS. But it loads really fast! Still, a nice proof of concept. I'll have to check it out on my PC when I go fire up NFS Most Wanted this afternoon.

Ideas

[Hinhule]

This game is being developed but doesn't have much direction at this time, to make a suggestion email me.

I hear Jack Thompson recently had some ideas.

Well....

[confusion]

I guess we've found a purpose for those 8 core CPU's we've been hearing about...

Jerry
http://www.cyvin.org/

works fine

[Anonymous Coward]

works fine with athlon64 and 2gb ram on firefox1.5

FPW

[Avisto]

More like a First Person Walker. /ripped from a digg comment

end result VRML without VRML

[Danathar]

Its funny to see things popup that have been done before but with standards that never made it....

Re:end result VRML without VRML

[Anonymous Coward]

One of the longest running jokes in Internet history revolves around VRML (an acronym for "Virtual Reality is Much Laughter"). In case you haven't heard of this idiotic language, and I truly hope you haven't, let me get you up to speed by presenting an alarmingly inaccurate historical description of VRML. VRML was initially created in the mid-90's to allow users to experience the utter joy of being in "cyberspace," which consisted of floating around gigantic neon cubes and cones. All the "cool" movies in those days featured people who would log in to their bitchin' 100 MHz Pentium 1 computers and enter some magical world where numbers are represented by dumb geometric shapes and nobody can find anything useful anywhere. The main point of going into virtual reality was to apparently teach your idiot children how to name shapes and colors. Despite heavy protests from people with over nine brain cells, VRML 1.0 was released in May of 1995, causing coders around the globe to immediately dismiss it and go back to playing "Rise of the Triad." Programmers who didn't have access to this game were forced by their bosses and college instructors to use VRML and create some kind of virtual reality world that not only took forever to load but also had the added benefit of being completely impossible to navigate. Most colleges offered at least one VRML-related course where the instructor was some short chubby guy with bulging eyes and a grey beard. He often knew as much about VRML as the students, so it was really easy to just answer "RED CONE" to every test question and end up passing the course. Here's an actual quote from the VRML 1.0C specifications: "Finally, we move to "perceptualized" Internetworks, where the data has been sensualized, that is, rendered sensually. If something is represented sensually, it is possible to make sense of it. VRML is an attempt to place humans at the center of the Internet, ordering its universe to our whims. In order to do that, the most important single element is a standard that defines the particularities of perception. Virtual Reality Modeling Language is that standard, designed to be a universal description language for multi-participant simulations." THE FUTURE!!! Wow! That sure sounds exciting and revolutionary! With such a meaningful and detailed description, I can't even possibly begin to imagine why this useful language never caught on. I mean, read that again: "the data has been sensualized, that is, rendered sensually. If something is represented sensually, it is possible to make sense of it." How anybody could expect VRML to succeed when its description doesn't even make any sense whatsoever baffles even me, and I've seen things on the Internet that would make your head spin around so fast that it flies off your neck stump and lands on the collection of carpet samples you bought off of eBay. Anyway, everybody got really excited about VRML back then because they had nothing else to do but either program in that language or play "Rise of the Triad," and since most of them had already killed that utterly retarded demon-snake-terrorist-lizard-bug-alien end boss of the game, they tried making websites in VRML. The amazingly flexible nature of this language allowed developers to construct exciting "cyberspace virtual webpage e-worlds" that included such revolutionary creations as: Planet of the Red Cubes A large blue square with a bitmap stretched across it reading "WELCOME TO MY HOMEPAGE" Something involving green pyramids A huge box that, upon entering, allowed the user to experience entering a huge box. These were all incredibly exciting and wonderful concepts that were predicted to revolutionize the Internet industry just like how Dale Earnhardt revolutionized the "dying in a NASCAR race" industry. Can you imagine going to Amazon.com and seeing a whole line of red boxes underneath a shelf of orange spheres, some of which blink and read "WELCOME TO MY HOMEPAGE"? I can't! And also I'm impotent! Oddly enough, most Internet citizens felt the same way as I do (about t

Re:end result VRML without VRML

[gwernol]

An anonymous coward spews:

One of the longest running jokes in Internet history revolves around VRML... etc.

"Hilarious" and stolen from:

http://www.somethingawful.com/articles.php?a=926

Re:Not for Opera 8.5 for OSX?

[Esine]

Works on Opera 9.0 preview on Linux

here we go again...

[ilmdba]

support for this sort of stuff seems like bloat to me. i mean wasn't the whole idea behind firefox to get away from the "hey let's jam everything we can possibly think of into one browser app" idea that was bogging down mozilla?

all the code neccesary to support this canvas thing (which will probably rarely be used) is just more junk that will slow down legit bug fixes, and probably be RIFE with security holes.

firefox will eventually just turn into 'Mozilla NG', and become yet another bloated turd of a browser, given the direction that 1.5 is taking, IMO.

this 'web app' support should be a sandboxed plugin, or something else that can be -optionally- added on, for firefox, not built directly into it.

Camino beats Safari/Firefox in speed on OS X

[Nevenmrgan]

Works much faster on Camino 1.0 than in Firefox 1.5 or Safari. Smooth enough to "play" on a 1.5GHz G4.

Shoot the Monkey and Win $20!

[Neillparatzo]

And of course this technology will NEVER be used for ads.

And java3d takes yet another hit

[Miros]

And so Java3d takes yet another hit. It's always interesting and amazing to me that games in web browsers using things like java3d never really took off. It's probably all due to the loading times, and the ammount of content you'd have to send via http. I mean, look at modern games, one of the huge differneces is the ammount of memory modern video cards have for textures, hundreds of megabytes of textures. Could you imagine having to put that kind of strain on a webserver? It would simply be imposssible! While certainly neat, this will likely become an novelty. Even for things like demonstrations on websites of products, there's flash out there. But, i digress, yet another thing you can do via javascript hacks. Bravo! let the interoperability headaches abound....

Not just for games

[Lysol]

I was just looking at the api and this has applications outside games. Think graphics programs; of course, nothing like Photoshop, but enough to allow doing images in a browser. Why use Dia as a standalone app when you can have a collaborative version in a browser?

It's coming..

Re:Not just for games

[LnxAddct]

Here is a cellular automata simulator I've written. Right now I'm working on a simulator for Conway's Game of Life, here. Next I'm doing an interactive whiteboard using AJAX and then I was thinking about a ray caster like the one in the article but a bit more optimized and possible doing textures. The possibilities with <canvas> are pretty significant, I think we're on the verge of a web revolution.
Regards,
Steve

How long till doom

[bombshelter13]

With progress like this, it shouldn't be longer before Firefox achieves full 'It runs Doom!' certification. Good job guys.

Try this

[DrIdiot]

Hold the space bar so you'll jump continually. Then, while holding the space bar, click on a window that isn't your browser (so the browser will lose focus). Then go back to the browser.

Click on the canvas, and walk around. You've turned into a rabbit.

But will IE7 support Canvas

[TSTM]

Will there be a support for canvas in IE7?

I think it will be a big factor to think about when thinkin about using canvas in some web app. Because noone will want to use it if only a handful of browsers can support it.

Opera 8.51 / MacOsX

[twopeak]

I downloaded the latest Opera today for MacOsX, and it doesn't work. The alert clearly says it will only work in Firefox and Safari.

One more reason I 3 Firefox 1.5: 3D Canvas

[Bushido Hacks]

First thing I like about 1.5 is that SVG is now supported. The Second thing I like about 1.5 is the 3D Canvas FPS Engine. What will really win me over is if they offered VRML/X3D support.

I'm taking a peek at the source codes for this web page and they are very well written. He says it does not have much direction at this time. On the contrary. This project has much potential.

Apple Powerbook G4@1.25ghz

[indigo78]

Firefox DeerPark latest 1.6a1 20051125 -> perfect, I wish WoW had the same frame rate... ;)
Safari (OS X 10.4.3 with all standard updates) -> a bit slower...
Shiira 1.1 -> same as Safari, maybe a bit faster (should have the same engine as Safari, though)
Opera 8.5 -> Browser incompatibility... yadda yadda...

Anyway I think the most interesting test would be some kind of IE7 on some Vista's Beta...

Re:Different than IE ?

[CableModemSniper]

Not quite a standard yet, but on its way to being one: http://www.whatwg.org/specs/web-apps/current-work/ #scs-dynamic

Already supported with a plug-in

[mw22]

See: http://www.beaufour.dk/blog-archives/2005/06/canva s_support.html Although not fully functional.

Story Title

[AgNO3]

Why is the story title Firefox 3D canvas when this thing runs on other browsers. (and probably runs in Konquerer too) So it runs in AT LEAST 2 other browsers but the title is Firefox? I have nothing agaist FF Since its my main (99%) browser for Windows, but geez. Fan boy titles for Slashdot articles is getting out of hand. And you all know if the title of this article had been Safari 3d Canvas someone else would have written this and subsituted Safari for FF. Peace. Tip your waitress, I'm hear all week. Goodnight.

Wow

[BejaminJoffe]

Gee thanks guys your gonna kill my server. It is a shock to see how much coverage this game is getting, this is the first 3D environment I have ever coded so it is pleasing to see that I am not the only one enjoying my efforts. When I ran my tests about 80% of the processing power was spent on rendering the trapeziums to the canvas which I have little control over. As far as I can see most of the math was fairly optimal, no obvious problems there. I will probably continue developing this in a few weeks when I am on holidays, probably by that time several people will have coded far more superior ones but I will see... The wedding business is my brother's, I don't have my own server. Here's another little code I made, not quite as interesting though: http://www.random.abrahamjoffe.com.au/public/JavaS cripts/canvas/interpolation.htm

Re:Wow

[BejaminJoffe]

Here's an older version of the Canvascape: http://www.abrahamjoffe.com.au/ben/canvascape/old. htm which is alot worse but uses the original raycasting technique.