6 ms·

Team Fortress 2 in WebGL

116 points by DanielRibeiro 15y ago

pavelkaroukin 15y ago
So.. It looks like we are going to direction, where browsers will be used to play action games in (probably, not really near) future.. Same direction mobile development..
- rorrr 15y ago
  I've been playing this action game for a while: http://www.nplay.com/BeGone/ http://www.nplay.com/BeGone/ They update it around once week, the maps and the code.
  - pavelkaroukin 15y ago
    Yeah. And that's where it moves - centralized hosting, with ability to quickly iterate through in-game and software changes. With ability to access it from (in future) any browser. I definitely like it.
daeken 15y ago
Now we just need fullscreen and mouse grab support. Without those, first-person gaming in the browser is effectively impossible.
- rorrr 15y ago
  Full screen is F11. It almost covers the mouse problem, too.
  - daeken 15y ago
    It doesn't cover the mouse problem for one simple reason: acceleration. Sure, I can tell when the pointer is on the border to my user-fullscreened window (I even have code to make sure that the user is fullscreened), but you suddenly lose track of acceleration. Since you can't grab and hide the cursor and just track raw movement deltas, you can't implement your own acceleration. That makes it impossible to do good mouse grab with current facilities.
    - magicalist 15y ago
      I'm surprised you aren't already aware of this: the mouse lock API is being worked on in the W3C WebApps and Web Events working groups. Implementations in Chrome/Webkit and Firefox very soon, hopefully. http://www.w3.org/2010/webevents/charter/2011/Overview.html#mouselock http://www.w3.org/2010/webevents/charter/2011/Overview.html#...
      - daeken 15y ago
        I'm aware of it, but it's just not there yet. It's very early stage -- just last month there were arguments about how to handle permissions around this even. It's at least 6 months from being mainline, if not longer.
- alexhaefner 15y ago
  Actually, I think those problems will be solved before audio. Audio is in a terrible state with the web. We need a good 3D sound API. Flash? Ugh. Write the entire app in WebGL/JS/html and then go to flash?
  - daeken 15y ago
    Have you played with the experimental sound API in Chrome? It's not perfect (latency is an issue for sure) but it's much, much better than what's out there otherwise. The Mozilla audio API is decent, but doesn't do 3d AFAIK.
JL2010 15y ago
Minor remark about the headline: This appears to be a TF2 map loaded into a minimal Source Engine WebGL port as an example. TF2 itself was not ported, just enough of the Source Engine components to load a map - he could've used a map file from just about any Source Engine powered game. Awesome project :)
- winestock 15y ago
  Therefore, a port of the original Portal to the web would be more feasible than a port of Team Fortress 2.
- Produce 15y ago
  Technically this is not a port. It's just an OpenGL application that can read and render the TF2 map format. A port would consist of modifying the original source (which I assume the author does not have access to, since it's a closed source product) so that it runs on a different platform.
  - JL2010 15y ago
    Fair distinction. Half-Life 2 SDK open sources a decent amount of code. Take a look at his source code, a lot of it is a re-implementation of Valve's map and model data structures in Javascript with similar naming convention. Hence why I called it a "minimal port" or "ported just enough components" to load a map.
kingkawn 15y ago
Would rather have the original teamfortress, it was a lot more fun and would allow me to indulge nostalgia more easily
- Flow 15y ago
  I've only started Team Fortress Classic a few times. It feels really outdated. That said, how can that old game be more fun that TF2? TF2 is shock full of funny sounds, signs, taunts and so on! Watch Meet the Sniper: http://www.youtube.com/watch?v=PyNuriXG3BQ http://www.youtube.com/watch?v=PyNuriXG3BQ or Meet the Demo Man: http://www.youtube.com/watch?v=rxps--huGKY&feature=relmfu http://www.youtube.com/watch?v=rxps--huGKY&feature=relmf... Listen to some of the Demo Man sounds: http://wiki.teamfortress.com/wiki/Demoman_responses http://wiki.teamfortress.com/wiki/Demoman_responses . The game is really well done, you have funny characters to pick from. - Demo Man - One-eyed drunk cyclops who is a black scottish patriot. - Sniper - Talks like Michael Caine did in the 60's. Throws "jarate" at people. - Engineer - Texas redneck with tech know-how. and more... I really love TF2 and play it a lot, so should you!
  - coderdude 15y ago
    > I've only started Team Fortress Classic a few times. It feels really outdated. Well yeah, it's an old game. It is by definition outdated (even has "classic" in the title). > That said, how can that old game be more fun that TF2? I'm guessing you're a pretty young guy. How fun a game is does not depend on when it was released. I used to love playing TFC. TF2 is a lame cartoon game to me. It's a bunch of Reddit memes to me. It's 15 year old kids yelling over microphones to me. TFC forever. ;)
    - Flow 15y ago
      No, I'm 40-ish. I grew up with VIC-20 and C64 being state of the art in home computing. I both played games and programmed stuff. I still do but on computers a zillion times faster. I never liked games that try to be realistic, what's the point, trying to make me sleep bad because of gory headshots with blood everywhere? So I prefer the semi-cartoonish style and hats. Several times every evening I laugh out loud because of the silliness in TF2. Give it a try. It's not easy because it's not realistic, but you can always go medic and follow better players till you know the maps.
FrojoS 15y ago
Where did the source code of the engine come from?
- vogonj 15y ago
  the engine doesn't exist. this is just a renderer for Source maps. edit: and here's the source for the renderer: https://github.com/toji/webgl-source https://github.com/toji/webgl-source
  - magicalist 15y ago
    The author also gave a good break down of the map file format and the approach he took to rendering it in a previous post: http://blog.tojicode.com/2011/09/source-engine-in-webgl-tech-talk.html http://blog.tojicode.com/2011/09/source-engine-in-webgl-tech...
jeffreymcmanus 15y ago
WebGL developer is credit to team!
hugh3 15y ago
OK folks, anyone know much about WebGL? For my work, I'd be very interested in something that can do a decent job of rendering atomic structures in a ball-and-stick view. Say, hundreds of balls and a similar number of sticks. Is this within the capabilities of WebGL?
- nkassis 15y ago
  You can check http://www.chemdoodle.com/ http://www.chemdoodle.com/ under webcomponent. That might be what you are looking for.
  - hugh3 15y ago
    That has some features along the right lines, but I see that the 3D modelling bits really slow down when given more than twenty atoms to draw. Is that a limit of WebGL, or could I get better performance out by using lesser shading... or something? Come to think of it, is this even WebGL?
    - nkassis 15y ago
      Yeah there are much better ways to optimize this, check out http://www.sunsetlakesoftware.com/2011/05/08/enhancing-molecules-using-opengl-es-20 http://www.sunsetlakesoftware.com/2011/05/08/enhancing-molec... This technique should work for WebGL too.

116 points by DanielRibeiro 15y ago

So.. It looks like we are going to direction, where browsers will be used to play action games in (probably, not really near) future.. Same direction mobile development..

rorrr 15y ago
I've been playing this action game for a while: http://www.nplay.com/BeGone/ http://www.nplay.com/BeGone/ They update it around once week, the maps and the code.
- pavelkaroukin 15y ago
  Yeah. And that's where it moves - centralized hosting, with ability to quickly iterate through in-game and software changes. With ability to access it from (in future) any browser. I definitely like it.

daeken 15y ago

Now we just need fullscreen and mouse grab support. Without those, first-person gaming in the browser is effectively impossible.

rorrr 15y ago
Full screen is F11. It almost covers the mouse problem, too.
- daeken 15y ago
  It doesn't cover the mouse problem for one simple reason: acceleration. Sure, I can tell when the pointer is on the border to my user-fullscreened window (I even have code to make sure that the user is fullscreened), but you suddenly lose track of acceleration. Since you can't grab and hide the cursor and just track raw movement deltas, you can't implement your own acceleration. That makes it impossible to do good mouse grab with current facilities.
  - magicalist 15y ago
    I'm surprised you aren't already aware of this: the mouse lock API is being worked on in the W3C WebApps and Web Events working groups. Implementations in Chrome/Webkit and Firefox very soon, hopefully. http://www.w3.org/2010/webevents/charter/2011/Overview.html#mouselock http://www.w3.org/2010/webevents/charter/2011/Overview.html#...
    - daeken 15y ago
      I'm aware of it, but it's just not there yet. It's very early stage -- just last month there were arguments about how to handle permissions around this even. It's at least 6 months from being mainline, if not longer.
alexhaefner 15y ago
Actually, I think those problems will be solved before audio. Audio is in a terrible state with the web. We need a good 3D sound API. Flash? Ugh. Write the entire app in WebGL/JS/html and then go to flash?
- daeken 15y ago
  Have you played with the experimental sound API in Chrome? It's not perfect (latency is an issue for sure) but it's much, much better than what's out there otherwise. The Mozilla audio API is decent, but doesn't do 3d AFAIK.

JL2010 15y ago

Minor remark about the headline: This appears to be a TF2 map loaded into a minimal Source Engine WebGL port as an example. TF2 itself was not ported, just enough of the Source Engine components to load a map - he could've used a map file from just about any Source Engine powered game. Awesome project :)

winestock 15y ago
Therefore, a port of the original Portal to the web would be more feasible than a port of Team Fortress 2.
Produce 15y ago
Technically this is not a port. It's just an OpenGL application that can read and render the TF2 map format. A port would consist of modifying the original source (which I assume the author does not have access to, since it's a closed source product) so that it runs on a different platform.
- JL2010 15y ago
  Fair distinction. Half-Life 2 SDK open sources a decent amount of code. Take a look at his source code, a lot of it is a re-implementation of Valve's map and model data structures in Javascript with similar naming convention. Hence why I called it a "minimal port" or "ported just enough components" to load a map.

kingkawn 15y ago

Would rather have the original teamfortress, it was a lot more fun and would allow me to indulge nostalgia more easily

Flow 15y ago
I've only started Team Fortress Classic a few times. It feels really outdated. That said, how can that old game be more fun that TF2? TF2 is shock full of funny sounds, signs, taunts and so on! Watch Meet the Sniper: http://www.youtube.com/watch?v=PyNuriXG3BQ http://www.youtube.com/watch?v=PyNuriXG3BQ or Meet the Demo Man: http://www.youtube.com/watch?v=rxps--huGKY&feature=relmfu http://www.youtube.com/watch?v=rxps--huGKY&feature=relmf... Listen to some of the Demo Man sounds: http://wiki.teamfortress.com/wiki/Demoman_responses http://wiki.teamfortress.com/wiki/Demoman_responses . The game is really well done, you have funny characters to pick from. - Demo Man - One-eyed drunk cyclops who is a black scottish patriot. - Sniper - Talks like Michael Caine did in the 60's. Throws "jarate" at people. - Engineer - Texas redneck with tech know-how. and more... I really love TF2 and play it a lot, so should you!
- coderdude 15y ago
  > I've only started Team Fortress Classic a few times. It feels really outdated. Well yeah, it's an old game. It is by definition outdated (even has "classic" in the title). > That said, how can that old game be more fun that TF2? I'm guessing you're a pretty young guy. How fun a game is does not depend on when it was released. I used to love playing TFC. TF2 is a lame cartoon game to me. It's a bunch of Reddit memes to me. It's 15 year old kids yelling over microphones to me. TFC forever. ;)
  - Flow 15y ago
    No, I'm 40-ish. I grew up with VIC-20 and C64 being state of the art in home computing. I both played games and programmed stuff. I still do but on computers a zillion times faster. I never liked games that try to be realistic, what's the point, trying to make me sleep bad because of gory headshots with blood everywhere? So I prefer the semi-cartoonish style and hats. Several times every evening I laugh out loud because of the silliness in TF2. Give it a try. It's not easy because it's not realistic, but you can always go medic and follow better players till you know the maps.

FrojoS 15y ago

Where did the source code of the engine come from?

vogonj 15y ago
the engine doesn't exist. this is just a renderer for Source maps. edit: and here's the source for the renderer: https://github.com/toji/webgl-source https://github.com/toji/webgl-source
- magicalist 15y ago
  The author also gave a good break down of the map file format and the approach he took to rendering it in a previous post: http://blog.tojicode.com/2011/09/source-engine-in-webgl-tech-talk.html http://blog.tojicode.com/2011/09/source-engine-in-webgl-tech...

jeffreymcmanus 15y ago

WebGL developer is credit to team!

hugh3 15y ago

OK folks, anyone know much about WebGL? For my work, I'd be very interested in something that can do a decent job of rendering atomic structures in a ball-and-stick view. Say, hundreds of balls and a similar number of sticks. Is this within the capabilities of WebGL?

nkassis 15y ago
You can check http://www.chemdoodle.com/ http://www.chemdoodle.com/ under webcomponent. That might be what you are looking for.
- hugh3 15y ago
  That has some features along the right lines, but I see that the 3D modelling bits really slow down when given more than twenty atoms to draw. Is that a limit of WebGL, or could I get better performance out by using lesser shading... or something? Come to think of it, is this even WebGL?
  - nkassis 15y ago
    Yeah there are much better ways to optimize this, check out http://www.sunsetlakesoftware.com/2011/05/08/enhancing-molecules-using-opengl-es-20 http://www.sunsetlakesoftware.com/2011/05/08/enhancing-molec... This technique should work for WebGL too.