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, 83290 views, last view: 05/15/2024 23:59

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

#64: ..

by kripken on 06/08/2012 02:16

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

reply to this message

#65: Re: ..

by suicizer01 on 06/08/2012 09:17, refers to #64

Toggling outline on results in a pretty glitched view.
Also, wireframe isn't working yet.

reply to this message

#66: ..

by kripkenstein on 06/08/2012 18:35

Which commands or keys trigger those? (I am not familiar with either offhand)

reply to this message

#67: ..

by kripkenstein on 06/09/2012 06:29

v0.0.11

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

A few simple optimizations. Now fighting a bot is very playable even on my old laptop.

reply to this message

#68: Re: ..

by suicizer01 on 06/10/2012 14:06, refers to #66

in edit-mode:
key 7 - outline
key 8 - wireframe

as commands:
wireframe 0 - 1
outline R G B from 0 to 255 (default 0 0 1 when set on).

reply to this message

#69: Re: ..

by eihrul on 06/10/2012 16:58, refers to #68

In SVN it is just:

outline 0/1 to toggle it on or off
outlinecolour R G B to set the color

They were decoupled so that outline can be toggled on or off without having to reset the color every time.

reply to this message

#70: ..

by kripkenstein on 06/10/2012 21:57

Thanks guys. Ok, I see the problem, this uses an OpenGL option to only render the outlines of polygons, which is not present in WebGL.

It probably wouldn't be too hard to emulate that or modify the code. I am currently focused more on the game than the editor though.

reply to this message

#71: Re: ..

by suicizer01 on 06/10/2012 22:18, refers to #70

Was just meant to be at service =P.

reply to this message

#72: ..

by kripkenstein on 06/11/2012 03:14

Appreciated :) Good to know what we can and can't run yet.

reply to this message

#73: ..

by Hirato Kirata on 06/11/2012 08:12

what about grass?
https://dl.dropbox.com/u/23891252/grass.jpg

also, shadowmaps?

I also see you didn't include any of the blendmap brushes - I wanted to see if those worked too :(

reply to this message

#74: Re: ..

by kripkenstein on 06/12/2012 05:06, refers to #73

Grass seems to work sometimes and other times not. Weird. I'll look into it.

Shadowmaps are problematic it seems. In the engine they run only when occlusion queries are enabled, and looking in the code I couldn't tell exactly why. But occlusion queries are not present in WebGL, so that is a problem.

About blendmap brushes, I'm an editing noob, how do I test those?

reply to this message

#75: Re: ..

by suicizer01 on 06/12/2012 09:50, refers to #74

1. Get into edit-mode
2. Select the surface which you want to blend
3. Press "F9" and read the echo which you should receive.
4. Retexture the selected surface
5. Press "/vlayer textureslot" (the number which appears before the texture's path in the echo)
6. Press 1, 2, 3, 4 or 5 on numpad or "/blendpaintmode 1" in console line (till 5)
7. Choose which blendbrush you'll use by pressing "8" or "9" on numpad
8. Now click (and hold the button) on the surface again and move along with your mouse
9. Great job! Now you should have blended textures

Step 3, 4 and 5 could also be swapped. So you'll first retexture the surface first, then hit 9 and at least you'll undo the retexturing.

reply to this message

#76: ..

by kripken on 06/13/2012 00:26

v0.1

http://www.syntensity.com/static/bb1/high.html

* full snoutx10k model including vweps
* music

--

Thanks suicizer, i'll look into the blendmap stuff.

reply to this message

#77: ..

by kripken on 06/13/2012 01:14

Turns out blend brushes were not being included in the build. I added those to git (they will show up in the next demo).

It looks like blending *might* work, I am not sure though. Here is what I got:

http://imagebin.org/216159

Is that the right sort of result?

Note that there is another issue, the image gets very dark when blending, and only looks normal like in that screenshot with lightmaps calculated. Maybe a bug in light calculation in the GL translation somewhere.

reply to this message

#78: ..

by Hirato Kirata on 06/13/2012 04:22

yeah, if the square's the only one with a blendmap applied.
They were never made to work with vertical surfaces.

reply to this message

#79: Re: ..

by kripkenstein on 06/13/2012 05:40, refers to #78

Yeah, I just did some blending on that one square. I told you I suck at editing ;)

reply to this message

#80: ..

by kripkenstein on 06/15/2012 06:01

v0.0.istoppedcounting

http://www.syntensity.com/static/night/high.html

* Fog
* DXT support (works, but not used yet)

reply to this message

#81: Re: ..

by suicizer01 on 06/16/2012 14:57, refers to #80

There is a little problem when I try to start up;
Assertion failed: Failed to get texture compression WebGL extension:
ob("Assertion failed: Failed to get texture compression WebGL extension")@http://www.syntensity.com/static/night/bb.js:1
vb(null,"Failed to get texture compression WebGL extension")@http://www.syntensity.com/static/night/bb.js:1
BYa()@http://www.syntensity.com/static/night/bb.js:1
(BYa,0,[object Array])@http://www.syntensity.com/static/night/bb.js:1
GYa([object HTMLCanvasElement],true,true)@http://www.syntensity.com/static/night/bb.js:1
RIa(800,600,83886081,true,"screen")@http://www.syntensity.com/static/night/bb.js:1
Eja(800,600,83886080)@http://www.syntensity.com/static/night/bb.js:1
Fja(28,32,36)@http://www.syntensity.com/static/night/bb.js:1
eka(1,6430740)@http://www.syntensity.com/static/night/bb.js:1
([object Array])@http://www.syntensity.com/static/night/bb.js:1
d()@http://www.syntensity.com/static/night/bb.js:1
(2)@http://www.syntensity.com/static/night/bb.js:1

I'm still able to hear the music (which sounds interesting), so it's not like it crashed.

reply to this message

#82: ..

by kripkenstein on 06/16/2012 19:24

I believe that means your browser doesn't support the WebGL texture compression extension. We need compression because gk is making levels that rely on it.

Texture compression is present in Firefox 15 and I think Chrome 18 or so. I'll try to find a way to use noncompressed textures when the extension is not available, but not sure how easy that is. But in any case it's just a matter of weeks until stable releases of those browsers support the extension.

In other news, I looked more into grass. I fixed a GL_QUAD bug, and it looks better, but they still vanish sometimes. Since the right data is sent to the GPU, it might be some shader difference between OpenGL and WebGL or culling or something like that, not sure I know enough GL to figure that out.

reply to this message

#83: ..

by suicizer01 on 06/17/2012 11:36

I've updated Firefox to 13.0.1 and I'm still getting the same error =S.

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
54006740 visitors requested 71786071 pages
page created in 0.066 seconds using 10 queries
hosted by Boost Digital