BananaBread

3D first person shooter game compiled to JS+WebGL

Built using JavaScript, HTML5, Web Workers, Audio, WebGL

  • 14577 views
  • 37 comentarii

More About This Demo From The Author

BananaBread is a 3D first person shooter that runs on the web. It takes the Cube 2: Sauerbraten engine, which is written in C++ and OpenGL, and compiles it using Emscripten into JavaScript and WebGL so that it can run in modern browsers using standards-based web APIs and without the need for plugins.

The project has several goals. First, to serve as a testcase for running a demanding 3D game in browsers: Having a working testcase lets us try out new browser features and to profile performance in order to make browsers faster. Another goal is to prove that games of this nature can run in JavaScript and WebGL, which many people are skeptical about. Finally, all the code in this project is open (and practically all the art assets), so others can learn from this effort and use this code to create their own browser games.

The latest update of this demo uses asm.js for additional speed, and WebRTC for multiplayer.

37 comments so far

Log in to add your own.

  1. wt73 said,

    6048x1080
    FPS much higher w/out recording
    http://www.youtube.com/watch?v=YJaskM3UgvA&feature=youtu.be
    1. cronos3k said,

      This video has been recorded in Firefox 15 with about 10 Bots at a resolution of 2560x1600 and ran without the recording software “fraps” at 40 fps
      http://www.youtube.com/watch?v=AzfB6eqRLNE&feature=youtu.be
      1. cronos3k said,

        This video has been recorded in Firefox 15 running in a resolution of 2560x1600. It shows parts of the Zoom map (Lava Chamber).
        http://www.youtube.com/watch?v=C2Fj_n3Ph7E&feature=youtu.be
    2. wt73 said,

      Firefox 18.0, Two Towers, 6048x1080
      http://www.youtube.com/watch?feature=player_detailpage&v=vIfydyclj7U#t=75s
  2. Piexe said,

    there is a problem.... If you have selected in the options "serch in the pace when tiping (i traslate the italian words so i don't know if it si correct)" you can't play because when you try to move the characters it doesen't move
    bye
    1. azakai said,

      This should be fixed in the latest update, is it ok now?
  3. AGD said,

    Looks great guys, although I had a slight problem with the fullscreen. Just wondering if you're aware of the Turbulenz WebGL FPS demo?

    http://www.youtube.com/watch?v=AJg_BmY9-8o

    I'm interested in why you went the compiled route (from C++)? It seems from bullet (and other examples) than compiling into JS doesn't really give the best performance.
    1. azakai said,

      Compiled code actually tends to run faster than handwritten code in many cases. See the FAQ for more about this,

      https://github.com/kripken/BananaBread/wiki/FAQ
  4. skinhat said,

    The game works well except once you finish the game, firefox just hangs for me and I have to kill firefox in task manager in Vista. I've been playing the arena game with bots.
  5. rdenadai said,

    Pretty nice! I'm playing on linux mint 13 and using the latest firefox aurora 17a2 (2012-09-03).
    Running nice in the high res! But i didn't play the game too much time to find a bug or report some kind of a problem...

    For me is working great! :)
  6. dirkk0 said,

    This is insanely great! I took the liberty to write a blog post about this:
    http://web3dblog.wordpress.com/2012/09/09/bananabread-cube-2-engine-in-the-browser/
    Thank you for this!
    Best,
    Dirk
  7. kolobear said,

    Running Firefox 15 on Windows 7 x64. Intel Core 2 6400 2.13GHz, ATI Radeon x1650 Pro 512MB, 4GB DDR2 800Mhz, 7200RPM Western Digital HDD, Comcast 20Mbps Internet

    Had to set "webgl.force-enabled" to "true" in order for the demo to run. Error was "WebGL is missing"
  8. 0xRiddle said,

    Hi,
    I edited my comment , I was having a BSOD with error
    STOP: 0x7F (0x0,0x0,0x0,0x0)
    the whole thing was crashing as soon as I moved the cursor
    I changed the PSU , there was a capacitor leaking and it was dying anyway , the strange thing is that partially resolved the issue . I could move around but the game was still crashing subsequently ..
    had to update the GPU driver ,that resolved the issue. I think it's a good idea to add a note about updating drivers in the demo page , great job BTW :)
    specs:
    Firefox 15.0.1 WinXp SP3 x86 ,Pentium D 925 ,it's quite an old machine .
    Nvidia GeForce 7300 LE ,driver v 6.14.12.5721. updated to the latest driver 6.14.13.142
    It's worth mentioning that the game isn't threaded , which really hurts performance .I once heard that the GUI of Firefox is to blame and it's not easy to fix the code .
    Good luck and thanks ;)
  9. 185db said,

    That was awesome, to bad it was a bit to fast for my play style. Using Waterfox 15.
    1. azakai said,

      Yeah, the game we ported here, Sauebraten, is known for being extremely fast-paced. The engine has been used for slower games too though, perhaps someone will port one of those as well.
  10. ChunkyLoverMark said,

    Really want to love this demo but it isn't working for me, the mouse pointer api's work a treat but when I press w,a,s or d my character stares at the sky. i'm running the game on the dev build of a Chromebook.
    1. azakai said,

      Do other fullscreen+mouse lock demos work? Like http://media.tojicode.com/q3bsp/

      And do you see an error in the js console?
  11. theintercooler said,

    I really love what you have done with this. I'd like to talk to you about possibly doing this for our game as well. We built our game off the cube 2 engine so it should similar when you have time email me and we can talk more Edward(dot)thomas3(at)yahoo(dot)com
  12. slizzart said,

    I think it's worth mentioning at the "Built using" section what is mentioned in the details about the C++ engine compiled to js, so lots of my colleagues won't thing it's as easy as they've used to use js ;) cause it's like showing a Unity3D game exported to swf and say it's built with AS3/ABC, to be honest, building a full-blown 3d game engine using js, efficiently and being scalable is a bit frightening. Or you could change the "Built using" to "Runs using".

    Regardless all that, kudos to everyone that made that happen! It's always great to have a showcase of what can be done with a technology (for benchmarking as well)!
    Who knows maybe MS IE gets jealous after all ;)
  13. nituka said,

    Banana Bread Recipe


    http://bestrecipes-ever.blogspot.in/2012/11/banana-bread-recipe.html


    http://adf.ly/EUDL2
  14. speedro1281 said,

    Integrating the cube 2 engine into the browser is huge! I'd love to contribute to ongoing projects; here's a link to a couple levels I zipped and threw on my wordpress as examples of what I'm good at. I used only in-game assets, and I'm currently brushing up on making textures and using blender to create new assets. I'm interested in level building and sequencing story events first and foremost, and writing dialog for story arcs is a passion, so finding like-minded people is big; as part of some other projects, I have access to a professional-grade sound studio and a few other friends specializing in digital media, so my email is speedro1281 at yahoo.com

    Also, there've been a few attempts at establishing a full dialog system (which could enable quests, etc) in Cube 2, and the AI would have to be revamped to have NPCs in a more dynamic story. It'd be awesome if the engine ever included a full tool set enabling that kind of design... but the online play is an amazing step!
  15. speedro1281 said,

    http://www.fargone2125.com/3d-game-engine-levels/
  16. lamtah said,

    Cool shooter. Ran at 42 FPS in my browser smoothly.
  17. Pingumask said,

    Don't know if that's the right place to report bugs, but i just got a minor visual glitch : With firefox 16, when looking up from uderwater, in the level two towers, the sky is not displayed. Didn't test with any other browser
  18. n-gauge said,

    Hi - great demo, would just like to add that when using chrome stable (win 7) and a bot first appears the screen freezes for around 5 secs. This freezing is a lot less on firefox (about half a second or less). Also on chrome I notice the errors of loading some sounds in the log.

    The frame rate seems slower on firefox compared to chrome, but runs less 'buggy'. when I add hardware rendering option in firefox the game crashes using my laptops gt640m.

    If these issues are sorted this will be a top notch 'modern' browser game.

    Cheers.
  19. Joshua-S said,

    Awesome demo! I really see a lot of potential for this!

    It would be really nice if you could set up servers so people can fight each other and not just bots.
  20. Sin4ddict said,

    I registered to this site just to comment "holy shiz* D: this much better than my cs:source"
  21. IrvinGarcia said,

    Hi!!!

    I'm a student in computer science, and I'm doing my thesis with video games. I have some questions, do not know if you can guide or help me.

    I tried running BananaBread on some android tablet, and shows me a message that i can't run.
    Is it possible to run Cube on mobile?
    In android or iOS

    I've seen the version iphoneCube, but occupies the old Cube.
    Cube 2 can run on mobile?

    Greetings
  22. ChunkyLoverMark said,

    Just tried playing with my Chrome OS device and this game blows me away, feels like a native game with no install. I hope Chrome hurry up with the Web RTC stuff as I wanna play this online.
  23. Stevenx1986x said,

    I see weapon and ammo objects in edit mode, but while playing ammo does not show up. Do I need to change a setting in the configs or something? I can't find anything.
  24. parfumerie said,

    The sky is not displayed when i am in the water, did you manage to fix this?
  25. gamesradar said,

    Don't know if that's the right place to report bugs, but i just got a minor visual glitch : With firefox 16, when looking up from uderwater, in the level two towers, the sky is not displayed. Didn't test with any other browser
  26. Protector1 said,

    According to this: https://code.google.com/p/webrtc/issues/detail?id=1408&q=binary&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Status%20Owner%20Summary , sending data through WebRTC is now supported on Chrome Stable. I would really like to see this updated to have multiplayer work in Chrome.
  27. SuperScript said,

    Argh! I can't run using WinXP, 4GB RAM, 1.8Ghz CPU! Always says "out of memory" in the console. Is this a problem with my machine, so I'll never be able to run, or is there a setting that could be changed to allow pages to use more memory? And if it's my machine, how much memory would I need to run?
  28. greyX said,

    Getting a solid 8 FPS with default settings.
    Essentially unplayable with my current setup.
    I cant imagine this is meant for higher end machines?
    Must be an issue with my browser or something of the like....
    Also as a side note, am I the only one that thought the default mouse sensitivitly to be extreme?
  29. damonsims said,

    i can't make this one to work.
  30. hawaiianon said,

    As of 2/21/14 we can't seem to join eachother's games.

    Is everything working?

Get the Source Code

Download the Source 87803.41 KB · ZIP File

Browse the Source

This demo is released under the BSD license.

More by azakai