Game map converted and running as a WebGL scene!

A Forum Thread for Counter-Strike: Source

Hello world. We are one of the oldest mod sites on the Interwebs. Sign up and maximize your browsing experience.

  • Subscribe: Get notified of new submissions like this.
  • Say Thanks: Show your appreciation by sending Tito1 points.
  • Post: Give Tito1 your thoughts on this Thread.
  • Flag: Alert moderators and warn members of a problem with this Thread.
  • Watch: Get notified when this Thread is updated.
Mascot

Resistance is futile...

Sign up

Already a Bananite? Login

Play your maps through a web browser

I went ahead and selected a nice game map called "de desertcomplex" from member "ded OK" with his permision and converted it from the original .bsp map format to a WebGL 3d webpage. It's not as simple as it sounds though, there is some "rotating" and "scale" adjusting to do to the main mesh, not to mention applying "alpha channel" transparency to a few of the textures. I did this just to demonstrate that it can be done. I only implemented the main mesh, none of the "entities" or packaged models are included from the original .bsp map, since they did not translate well through the two conversions. Anyway, before you check it out, please be aware that this is a large 3d scene for it to be WebGL, so after testing out both Firefox and Chrome web browsers, I noticed that you will get a much higher frame rate with Chrome than you will with Firefox. Well, here it is: [WebGL Game Map...](http://titodesign.net84.net/cstrike_de_desertcomplex/Desert_Complex.html)

Posts

  • 5y
    yaznee avatar
    yaznee avatar Offline
    Member Joined 7y
    22,839 points Ranked 191st
    Pretty cool :)
    Im Lost! avatar
    Mantra
    Im Lost!
  • 5y
    Egan avatar
    Egan Offline
    Member Joined 8y
    2,884 points Ranked 1590th
    9 medals 1 rare
    • 6 years a member Medal icon
    • Reached 1,000 Points Medal icon
    • 1 post awarded Exemplary Feedback Medal icon
    • One month a member Medal icon
    • 6 months a member Medal icon
    • 1 year a member Medal icon
    That's crazy. I wonder what else this can be used for..
    Pigsareit avatar
    Mantra
    Pigsareit
  • 5y
    Jonny-higgins avatar
    Jonny-higgins avatar DRUNK...
    Admin Joined 10y
    199,818 points Ranked 15th
    42 medals 4 legendary 10 rare
    • Achieved Admin clearance Medal icon
    • Submitted 200 Threads Medal icon
    • Reached 100 subscribers Medal icon
    • 10 years a member Medal icon
    • Reached 75,000 Points Medal icon
    • 6 years a member Medal icon
    Very interesting, we are doing a bit of work about integrating WebGL into the site for 3D model previews - I never thought about map previews as well.

    Would people here be interested in in-browser previews on map submissions?
    • Agree x 1
  • 5y
    Judo avatar
    Judo Offline
    Member Joined 11y
    313,415 points Ranked 8th
    18 medals 4 rare
    • Reached 75,000 Points Medal icon
    • Reached 200,000 Points Medal icon
    • 6 years a member Medal icon
    • Returned 1000 times Medal icon
    • Reached 1,000 Points Medal icon
    • Reached 2,500 Points Medal icon
    Judo Technical Expert
    As a programmer, I recognize how cool this is. I'm also familiar enough with map formats to know Source's BSP isn't the normal BSP so props to you for reverse engineering it. Unless it's documented somewhere and I just don't know about that, but still, props.

    I'm not a fan of this mouse control, though. And draw distances seem a bit shallow. Still, I'm impressed.

    Although I'm also aware that Irrlicht has had web integration and BSP support for quite a while and I now wonder if you used that as your base.
    ?????? avatar
    Mantra
    ??????
  • 5y
    Rafael De Jongh avatar
    Rafael De Jongh avatar Offline
    Apocalyptic Flag Affiliation: Apocalyptic
    Super Moderator Joined 10y
    25,123 points Ranked 174th
    73 medals 8 legendary 19 rare
    • 1st Place - Winter Textures Contest Medal icon
    • 1st Place - GameBanana Around the Globe Contest Medal icon
    • 1st Place - Sci-Fi Skinning Contest Medal icon
    • 1st Place - Winter Warfare Medal icon
    • 1st Place - Movie Replicas Modeling Contest Medal icon
    • Submitted 100 WiPs Medal icon
    Rafael De Jongh avatar
    Rafael De Jongh
    Apocalyptic Flag
    Apocalyptic
    Skinning/Modelling Expert
    > **Posted by Jonny-higgins**

    > Would people here be interested in in-browser previews on map submissions?

    Yes We would!
    2D/3D Artist avatar
    Mantra
    2D/3D Artist
  • 5y
    Tito1 avatar
    Tito1 Offline
    Member Joined 9y
    281 points Ranked 13806th
    I did not use Ambiera's Irrlicht tool, I used their other main tool, Coppercube. Coppercube is basically a WYSIWYG WebGL and Flash editor that non-programmers can use to output WebGL, Flash and stand alone .exe applications. Coppercube can import .bsp maps, but it seems only the Quake 3 level versions, not the ones from Valve. The way I did it, I opened a Counter Strike .bsp map with Crafty, which is a map viewer that can also convert the maps to a .obj format textured mesh. I then imported the .obj map model in to the Coppercube 3d editor, where I did a few adjustments to the mesh and added the fps camera. Once this was done, I published it as a WebGL HTML5 webpage. Coppercube can also import animated models and export playable fps games, all without writing a single line of code! For those of you really interested in all of this, I strongly recommend you check out Ambiera and thier Coppercube tool, and while you are there, check out their nifty WebGL demos.
    • Interesting x 1
    Bananite
  • 5y
    The fuck I must try this!
    Call me Masterb8es
  • 5y
    Tito1 avatar
    Tito1 Offline
    Member Joined 9y
    281 points Ranked 13806th
    > **Posted by Sally-2K**

    > The fuck I must try this!

    Then by all means, go for it! It's easier than you think. If a non-map maker like me can do it, then you can really do it. Now, I do some 3d modeling, but I use other programs, not hammer. By trade, I am a freelance commercial website developer.
    Bananite
  • 5y
    ded_OK avatar
    ded_OK Offline
    Member Joined 5y
    Gj! I like it.
    ? Specialist ?
  • 5y
    Tito1 avatar
    Tito1 Offline
    Member Joined 9y
    281 points Ranked 13806th
    > Gj! I like it.

    I'm glad the original maker of this map likes it. Now, you mentioned before with Firefox you were only getting something like 15fps and like such it made it difficult to navigate. I strongly recommend if you can, switch to Google Chrome, it does a lot better job at rendering large WebGL scenes than Firefox. With Chrome, you will get almost twice the frames per second as you can get with Firefox.
    Bananite

Share

Shareable Image:
Share banner
HTML embed code:
BB embed code:
Markdown embed code:

More embeddable images

Bookmark and Share

Submitter

Tito1 avatar
Tito1 Offline
Member Joined 9y
281 points Ranked 13806th

Tito1
Sign up to access this!
Sign up to access this!
Sign up to access this!
Sign up to access this!

Category

Stats

Posts
10
Views
3,136
Date Added
5y
bcp.crwdcntrl.net tracking pixel