Tuesday, 22 July 2014

My code - MD2 loader for three.js

three.js is a fine library but it suffers from a lack of file loaders. three.js contributors have this naive "we don't need file loaders! we have our own shiny JSON formats!" bullshit. Since I am planning to use three.js in LD30, I decided to roll my own model loader. And as everyone knows, id software's MD2 is the most modern and featured model format ever.

Doing some research on previous efforts in loading binary model formats in Javascript, I found this WebGL MD2 loader and renderer. At first I thought I could simply use this guy's loading code and write some code to convert the loaded mesh to a three.js geometry object, but I was wrong, as his code was quite bug-ridden. So I ended up changing a lot of things.

Summary of changes:

  • First of all, I renamed his inferior snake_case variables to use my superior camelCase standards.
  • I also changed things like a "vertex index" array to a "verticum indices" array, as I mind to use proper latin.
  • I changed the loading with XMLHttpRequest to be asynchronous, as is the standard when loading resources from different files in web development.
  • I changed the binary interface, the original was buggy and no longer mantained, to use jDataView instead.
  • I made it sure that the file is loaded in the correct endiannes (little endian).
  • I rewrote the file ID checking, because the identifier is not an actual string.
  • I don't divide the texture coordinates by the texture size to get s and t as I load them, since some MD2 exporters set invalid texture sizes.
  • I solved a problem with the loading of frame and animation names.
  • I added skin name loading code.
  • I wrote code to convert the loaded model to a three.js geometry.
I changed so much I can't even call my code "derivative" anymore, it's totally different.

You can check out the live demo of the loader here. And you can click on the cat below to check out the Github repo:


No comments:

Post a Comment