WebGL from Scratch: Converting a Complex Mesh

In the last post, I generated a model directly within Blender and exported it as an OBJ file.

In this post, I’m going to take a model posted on the web and turn it into something that the code from last time can render without modification to the code from last time. After a brief search, I found a nice skeleton, which is an excellent model because you can see between the ribs as it rotates.

First, get a hold of the .3ds version of the model, and import it into Blender (File -> Import -> 3D Studio (.3ds)). Now, unless something’s changed, this didn’t go quite to plan for me: the rib cage was fine, but the figure itself was on its back! To fix this, click on the $$$DUMMY.Skelet mesh on the right-hand side of the window, then click on the Object editor and change the X-rotation to 90°:


There’s still a small problem here, as far as we’re concerned: the model is straddling 0,0 on the X-axis, which for our renderings so far has been the centre of our canvas. There are two solutions here:

  1. Translate the skeleton body and rib-cage by -1.25 in the Z direction (not the Y direction. Using the Blender defaults, .3ds and .obj disagree about which axes point where)
  2. Adjust our view matrix (in JavaScript) to move the world by the same amount in the Y direction (Remember: the view matrix moves the world around the camera)

NB. These are not really equivalent, as you’ll see if you rotate around anything but the Y-axis. Play around with that and see why.

With your translations/adjustments done, export the model as before:

  1. [File] -> [Export] -> [Wavefront (.obj)]
  2. Check ‘Write Normals’, ‘Triangulate Faces’, and ‘Objects as OBJ Objects’, and clear everything else
  3. Pick a filename and click ‘Export OBJ’

Then, back in the JavaScript code, change the loadMesh call to use your model, and reload the page. After a small pause (a second or two on my late 2011 Macbook Pro), you’ll see something like this:


This is being lit by the very same vertex and fragment shaders as for the monkey face in the last post. The primary difference here is that the vertex count—available from a console.log in the JavaScript console—will list just short of a million vertices. Lit in real time, at 60fps. And, unless you’re doing this on a machine with no GPU, the CPU usage won’t be any different than it was when rendering a 36-vertex cube.

Pretty neat, huh?

In the next post, I’m going to take a step back to a programmatically generated square mesh, and use it to play with texturing.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s