home home

downloads files

forum forum

docs docs

wiki wiki

faq faq

Cube & Cube 2 FORUM


BananaBread: Porting Cube 2 to the Web

by kripken on 05/04/2012 00:02, 143 messages, last message: 11/10/2016 01:26, 82872 views, last view: 05/01/2024 17:12

Over the last month I've been working to get Sauerbraten running on the web, here is a demo of what I have so far:

http://syntensity.com/static/bb/client.html

Press the "fullscreen" button below the screen, then press "GO!".

That is the Sauerbraten C++ code, compiled to JavaScript and WebGL. It runs at 60fps on my laptop on both Firefox and Chrome, but note that it has not been optimized *at all* yet. I'm posting here because I just got what you see in the demo to work, not because it's finished ;) In particular, the code is not optimized or even minified, and when you press "GO!" it loads an ugly level that I made (I have no artistic talent). So ignore the performance, download time, and artwork. This is just a very very early demo.

Note that you need a very recent browser for the demo to work 100%. Firefox Nightly (15) has fullscreen and pointer lock, for example, but earlier versions don't, the same is true for Chrome. Stable versions of those browsers probably will not work so well, you'll need dev versions (nightly or beta for Firefox, canary or beta for Chrome).

So again this is just a very early demo, but I think this is enough to show the approach can work. Actually we knew this could work already because Mandreel did it,

http://dl.dropbox.com/u/6873971/data/cube2/index.html

But Mandreel is a closed-source compiler that costs money while this demo was made with emscripten, a free open source compiler (that I work on). All the tools and all the code here are open, here is the engine code https://github.com/kripken/BananaBread (hardly any is changed, though) and here is the compiler http://emscripten.org/ So this project will end up with something Sauerbraten and other Cube 2-using projects can use, if they want, unlike Mandreel's tech demo.

Another difference is Mandreel apparently just wanted a tech demo of walking through a small map, that's what they have, whereas the goal in this project is to get all the rest of Sauerbraten working: Rendering other characters, bot AI, weapons, editing (actually a lot of editing already works in the demo!) etc. Basically we aim to get everything working, minus multiplayer since web browsers can't support that yet. But even that should be possible later this year when web browsers get WebRTC support, so we should be able to get the entire game :)

Why is this worth doing? In my opinion, two main reasons:

1. To promote 3D games on the web using open technologies. 3D games are starting to appear on the web, but generally they depend on nonstandard and/or closed source technologies like Flash. This project uses only 100% open and standard technologies, JavaScript and WebGL. We need open technologies to win.

2. To give back to the Sauerbraten community. While running on the web has disadvantages, it does have one huge advantage - all you need is a web browser to run the game. You don't need to download and install an application, which stops most people visiting your game's website from actually playing the game. Imagine if anyone visting the Sauerbraten website could just click and jump right into a game, we could get a lot more people in the community that way!

The current status of this project is that I will continue to work on the rest of the missing features, like model rendering, that are not yet running in the demo. We have permission to use geartrooper's models, and we should be getting some maps from gk, so we should have what we need for some nice results :)

In summary, this is just an early demo, but I think it shows that this can work. There is a lot left to do so help is of course welcome. Btw, this can work for any Cube 2-based project, of course, not just Sauerbraten, so if Red Eclipse, Sandbox etc. want to run on the web as an option we can make that happen too (in fact the porting from C++ to JavaScript is 99% automatic, so almost nothing specific would need to be done), if any project is interested in that then let's work together on it!

- kripken

Go to first 20 messagesGo to previous 20 messages    Board Index    Go to next 20 messagesGo to last 20 messages

#21: ..

by kripkenstein on 05/06/2012 06:24

@Zorg

It looks like Chrome just doesn't support keyboard input in fullscreen nor mouselock, nor dynamically-loaded audio, unless I am missing something. I am not aware of any workaround we can do in BananaBread for those.

@Suicizer

Help->About tells you the version of Firefox.

The mandreel demo has a hudgun, BananaBread doesn't have model rendering yet.

Options are disabled?

reply to this message

#22: Re: ..

by Zamwa on 05/06/2012 08:21, refers to #21

Oops! Do to a old install log I had mistaken about witch version of firefox! I'm using 12.0 stable!

reply to this message

#23: Re: ..

by suicizer01 on 05/06/2012 15:52, refers to #21

Ah my bad, took the wrong link =P.

Too bad the mouse aim being screwed actually.

reply to this message

#24: ..

by kripkenstein on 05/06/2012 17:08

The mouse aim is ok if you are in fullscreen+mouselock mode. But it only works in Firefox aurora and nightly, turns out. I found the Chrome issue for it,

http://code.google.com/p/chromium/issues/detail?id=72754

Looks like it just isn't ready yet, might be in Chrome 21 later on. There is actually a flag in about:flags for it, but it doesn't seem to do anything, doesn't work in this demo nor in the demo the Chrome blog mentions,

http://beautifulpixels.blogspot.com/2012/01/javascript-pointer-lock-mouse-lock-in.html

reply to this message

#25: ..

by kripkenstein on 05/06/2012 20:54

version 0.0.3: http://www.syntensity.com/static/bb/client_3.html

* Particle effects like fire have the right colors
* Closure compiler is used for a smaller download
* Keys work in fullscreen in Chrome (but until Chrome implements mouse lock, it is still not all there)

reply to this message

#26: Re: ..

by suicizer01 on 05/06/2012 22:14, refers to #25

So how do you get that mouselock? Because the browserarrow always is being offset to the arrow within Sauerbraten when I play your mod.

reply to this message

#27: ..

by kripkenstein on 05/06/2012 23:26

Chrome simply has not implemented mouselock yet. There are a little behind other browsers there. Here is the Chrome bug to track progress,

http://code.google.com/p/chromium/issues/detail?id=72754

Once Chrome does implement it, then in fullscreen you will only see the right mouse cursor, no offset between two.

reply to this message

#28: Re: ..

by suicizer01 on 05/07/2012 00:58, refers to #27

I don't use chrome at all (as I stated I use Firefox instead).

reply to this message

#29: Re: ..

by suicizer01 on 05/07/2012 01:06, refers to #27

Have you actually thought about a plugin for settings and such? I doubt everyone uses the same sensitivity or even wants to have each of their maps free to view to anyone out there.

reply to this message

#30: ..

by kripkenstein on 05/07/2012 01:17

@suicizer: Oh sorry, I was confused. Then mouselock should work in Firefox, but only in Aurora and Nightly, not in stable. But Firefox and Chrome update every 6 weeks, so in less than 12 weeks it will get to Firefox stable.

We will need to be able to save settings, yeah, that's very important. Can use IndexedDB and other web APIs for that.

- kripken

reply to this message

#31: Re: ..

by suicizer01 on 05/07/2012 01:32, refers to #30

I don't know if it really helps, but would it help to check out how QuakeLive does the job (as they seem to use a plugin on webbrowsers)?
Here's the wiki-link:
http://en.wikipedia.org/wiki/Quake_Live

reply to this message

#32: Re: ..

by kripkenstein on 05/07/2012 03:09, refers to #31

Yeah, Quake Live uses a browser plugin. The plugin contains native code, basically they compile their engine normally and add a little browser plugin wrapper.

The problem with that approach is that people need to install the plugin, and that the plugin only works where plugins work (so not on the iPad browser) and only where they build the plugin to work (not on ARM devices).

BananaBread on the other hand compiles the engine C++ into JavaScript&WebGL, so it can run in any modern web browser directly (no plugins), so this is a very different approach. It has downsides too, of course, mainly performance, in BananaBread we are trying to show that you *can* get good frame rates on the web.

reply to this message

#33: Re: ..

by tempest on 05/07/2012 09:19, refers to #29

Well, in that respect, do you think everyone wants to download some 100 MB of textures every time they feel like playing a game? IMO local installations are inevitable for games as huge as Sauer at least for the next few years. But saving setting should work without plugins, as IIRC several browsers now support HTML5 offline storage.

reply to this message

#34: ..

by kripkenstein on 05/07/2012 16:47

Yes, saving data locally is very important. We can do that with IndexedDB (a standard web API, no need for plugins).

reply to this message

#35: 0.0.4

by kripkenstein on 05/08/2012 06:48

Version 0.0.4

http://www.syntensity.com/static/bb/client_4.html

* Lightmaps work
* Normal maps work
* Colors work properly in the GUI (hover in main menu, font colors in the hud)

reply to this message

#36: 0.0.5

by kripken on 05/09/2012 20:50

Version 0.0.5

http://syntensity.com/static/bb/client_5.html

* Non-animated models work
* Lighting and bumpmapping work on models

reply to this message

#37: Re: 0.0.5

by suicizer01 on 05/09/2012 22:31, refers to #36

I see a new replacing pickup for collect: the acorn.
Now we only need a playermodel which looks similar to a squirl...

reply to this message

#38: ..

by kripkenstein on 05/10/2012 05:50

Actually there is such a model ;) the acorn and squirrel both come from the yo frankie game, a long time ago i converted them to md5,

http://syntensity.com/static/screenshot_1476394.jpg

reply to this message

#39: Re: ..

by suicizer01 on 05/10/2012 17:41, refers to #38

Any link where to get your converted version please?

reply to this message

#40: ..

by kripken on 05/10/2012 21:26

Sure, here is frankie

https://github.com/kripken/BananaBread/tree/master/cube2/packages/models/frankie

and the acorn

https://github.com/kripken/BananaBread/tree/master/cube2/packages/models/nut

reply to this message

Go to first 20 messagesGo to previous 20 messages    Board Index    Go to next 20 messagesGo to last 20 messages


Unvalidated accounts can only reply to the 'Permanent Threads' section!


content by Aardappel & eihrul © 2001-2024
website by SleepwalkR © 2001-2024
53815002 visitors requested 71587273 pages
page created in 0.067 seconds using 10 queries
hosted by Boost Digital