Print Shortlink

WebGL Tutorial – How to export and display Half Life Models in WebGL

1)      Have an old version of Half Life installed

  • Newer versions of Half-Life have been adapted for play over Steam. In the new versions, models and other media are no longer stored on the hard drive in compressed .pak files. Therefore (in the context of this tutorial) you will need access to a pre-steam version of Half Life. So whip out your circa 1998 CD-ROM copy of HL and let’s get cracking.
  • If you don’t have a access to an old Half Life version, with a little research you can find which steam .gcf files hold the models you want and then export them using ‘Jed’s Half –Life Model Viewer 1.36.’

2)      Download and install ‘Jed’s Half-Life Model Viewer 1.36’

3)      Download Studiomdl_dod1.3.zip and mdldec12.zip from (http://www.wunderboy.org/apps/jhlmv.php) – these files are needed by the HL Model Viewer and will be essential to export models.

4)      Open Jed’s Half-Life Model Viewer 1.36

  1. Click Tools-> Configure Tools and point to the studiomdl and mldec12 programs.
  2. File:Open pak0.pak – this file should be within C:\SIERRA\Half-Life\valve (depending on where Half Life was originally installed).
  3. Find any desired model in root->models, right click on model, click ‘Extract File’ and export to any specified folder.
  4. Go to Tools -> Decompile Model and select the mdl file which was exported in the previous step (3).
  5. Now you should see a bunch of .smd files and texture files (in bmp format).

5)      Download, install, and open the latest version of Blender (2.62 at the time this was written).

6)      Download Blender SMD Tools 1.17 from http://code.google.com/p/blender-smd/downloads/list

  1. This plug will allow you to import Half Life models (in SMD and QC format) into Blender.
  2. Install Blender SMD Tools 1.17 as you would for any other add-in/plugin for Blender.

7)      Open Blender

  1. File->Import->Source Engine (.smd, .vta, .dmx, .qc)
  2. Import the .qc file for the model that was decompiled in Step 4.
  3. Now you should see your imported model in ‘Object Mode.’
    • If you don’t see anything it could be that the object is larger than your screen. In this case you should ‘zoom out’ using your mouse scroll wheel.

8)      Convert bmp textures to web friendly format (ie: jpg)

  1. In Step 9 you will have to manually map the model textures to each body part of your HL model. But before you do that, the mapped textures should be in a web-friendly format… if it isn’t then your textures will not be loaded by the browser which is using WebGL to render your model.
  2. So, open your friendly Image processing program (MS Paint, Photoshop, etc) and systematically open each of the model textures (they are usually in bmp format).
    • Resave the textures as jpgs but keep the same names.

9)      Go back to Blender and find your imported model.

  1. Within the ‘Outliner’ window, you will see a hierarchy of items related to your model. If you open the contents within the ‘body’ of your model (indicated by a stick-figure icon) you will find the areas related to animations, skeletal points and material (texture) mappings.
  2. For each material (bmp texture) you will want to add a new texture (jpeg).
    • When a texture is assigned you should see that texture in the texture preview window. In order to map this texture correctly to the 3d model in the ‘object view’ you will need to change the ‘Coordinates’ under the ‘Mapping’ configuration to UV. Then you will need to set the ‘Map’ to UVMap. Doing this will wrap the texture in the correct way on your HL 3D model.
    • Follow the aforementioned steps for all imported textures. You should note that the more complicated your 3D model is the more textures you will have to map. It is also worth mentioning that it is (probably) possible to speed up this manual mapping process by doing a ‘search and replace’ on ‘bmp’ to ‘jpg’ inside the ‘reference’ .smd files. You can spot the reference smd file easily, because it will be the only smd file that is not named after a model animation.
  3. Test that all the textures maps are correct by pressing F12 (this opens up Render Image). Note that you may have to readjust the ‘camera’ in the ‘3D viewer’ in order to see your model as a rendered image.

10)   Now for animations.

  1. You may have noticed that your imported model typically gets loaded with at least one default animation. If you only want one animation to display in your WebGL canvas then your work is basically done.
  2. However if you want more than one animation to be exported you will have to add these animations as ‘Action Strips’ in the NLA Editor.
    • i.       When you open the NLA Editor, you should see your Default Animation highlighted by the color red.  You should also see a ‘Snowflake’ like icon nearby.
    • ii.      Click this ‘Snowflake’ icon – This will allow you to add in other animations.
    • iii.     Highlight an Action Strip by right clicking on the strip
    • iv.     Click Add->Action Strip and select the new animation you want to include with your model
    • v.      Click Edit->Transform->Grab/Move if you like to move this action strip (animation) around.
      • Note that animation should not overlap in the same time frame, this confuses the model and one animation will win over another.

11)   To export this model to be used in a standard three.js WebGL library, you must install the three.js import/export add-in for Blender.

  1. If you will be exporting only one animation with your model, then you can install the standard export plugin here (https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender)
  2. But if you will be exporting multiple animations with your model, then you should install Madlion’s modification of the three.js exporter here (https://github.com/madlion/three.js/tree/dev/utils/exporters/blender/2.62/scripts/addons/io_mesh_threejs)

12)   After installing the three.js Blender Export plugin, you can export your model by going to File-> Export-> Three.js (.js).

  • This will export a js file which can be read into three.js JSON demo, or into the HL demo that I put together.

 

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)
WebGL Tutorial - How to export and display Half Life Models in WebGL, 5.0 out of 5 based on 3 ratings

You might also like

  • Pingback: WebGL Demo – Half Life Zombie Model

  • John

    Great tutorial, but I can’t get it to work.
    I add the textures, but it doesn’t seem to work. I just get a completely black model…

    • http://twitter.com/Eowyn327 Sara Morsi

      I’m having the same problem. Would could fix it?

      • epiphanyp7a

        email me at social@webgl.com and i’ll send you the original blender file.

  • Sssssssssssss

    test

  • http://profile.yahoo.com/THGTGUEHO526GG2K2OJRIR2FMI Nidya

    i got problem as soon as i exported 3d model into three.js. can you tell me why? see this pic : http://www.flickr.com/photos/79964259@N03/7549709616/

    • Darien

      The export plugin isn’t working because ‘the box mesh has no faces.’ I don’t think you can just export a cube, it needs to be a mesh model. If you would like a copy of the blender file I worked on, email me at social@webgl.com.

      • http://www.jgladwilldesign.com/ JGladwill

        I’m also getting the “object has no faces” error and I tried exporting an actual model. This error is with madlion’s modification.

  • Elisabetetn2004

    Hi, Darien. Good job. It is a great tutorial.

    Please, I had troubles in find the JSON demo (see step 12) “read into three.js JSON demo, or into the HL demo that I put together”.
    Where could I find it?
    Thanks in advantage.
    Elisabete

    • Darien

      Hi Elisabete,

      Within the html source of the HL viewer demo, you will find the following lines

      var loader = new THREE.JSONLoader();
      loader.load( baseUrl + “zombie-tex2.js”, function( geo ) {

      When I say ‘read into’, I mean replacing “zombie-tex2.js” with the name of the new .js file that was exported in Step11.

  • Viktor

    why not only use app.cl3ver.com???

  • gfxdevrus

    Life was really difficult for Blender artists. But thanks to Blend4Web they can do animation in WebGL without coding.
    https://twitter.com/gfxdevrus/status/467532724388257792