Okay, so I've created these sleek-looking spaceship models for an OpenGL game that I'm going to make. To make them look sleek and smooth, I used a Subdivision Surface modifier in Blender. Hmm... 100000+ triangles.

I've managed to get the files down to the 30 to 40 thousands range (EDIT: under ten thousand, but with loss of quality) in terms of triangles though. So the file size is usually around a few megabytes.

Soon I found out that this wasn't really a problem when rendering the spaceships. However, I did quickly notice that it takes forever for Firefox to load one spaceship. And I want to load three of them, possibly more.

Chances are if I create a game that starts up with a "Please wait five years whilst everything loads" loading bar, it's going to turn away a lot of users. And I still haven't even considered loading planets, images, and a bunch of other stuff.

So now, for my questions:

  • Has anybody else run into this before? Is there a generally accepted solution for this type of problem?
  • Speaking of libraries, is there one that could apply the subdivision surface modifier on the models at run time? Then I could just export the model frames, which are only somewhere around 1000 triangles.

Also, any other input would be very much appreciated.

Thanks! :)

EDIT: What I've tried so far:

So far, compression looks like a no-go but I'm not sure.

  • method 1: zip folders: zipping the files drastically reduces filesize, but it requires a gigantic zip.js library to actually use the zip folders. So far I've been unable to get it to work, I guess the zip.js API is just way over my head.

  • method 2: custom compression: I've managed to make my own sort of compression system, but it's not nearly as effective and only cuts away half of the file size. Oh and it also looks like it is broken ATM xD

EDIT: just realized that the bottleneck might not be my internet speed, but rather the Collada file loading script that I'm using. (ColladaLoader.js, it's from three.js) in this case compression is definitely out of the picture.

  • 1
    \$\begingroup\$ The only solution to loading too much data is to load less data. Do you really need all those polygons? Have you tried compression? \$\endgroup\$
    – Anko
    Commented Aug 23, 2015 at 12:19
  • \$\begingroup\$ @Anko I think I've reduced the model down to the lowest number of polygons that is visually acceptable. At least I would like the high quality models available for faster GPU computers. I am wondering though how much compression will actually be worth it, I figure that if I compress a MB of data that means uncompressing about a fifth of that server side which might just end up taking the same amount of time as the loading anyway. \$\endgroup\$
    – Superdoggy
    Commented Aug 23, 2015 at 12:27
  • \$\begingroup\$ @Anko just spent a few hours hacking together a huffman-tree style compressor, and turned a DAE file into a BIN file. Unfortunately that only actually saved half of the file size. I think that compression probably is not going to be worth it, especially because now I'd have to decompress it on the client. :P \$\endgroup\$
    – Superdoggy
    Commented Aug 23, 2015 at 22:27
  • \$\begingroup\$ 30-40 thousand triangles seems rather excessive. Have you considered looking at using normal maps to provide smoothing? Some of the games I used to mod seemed to have about a 10k triangle limit for most characters and used normal maps to smooth out the edges, making them seem like they were of HQ than they actually were without having HQ models. \$\endgroup\$
    – Seta
    Commented Aug 24, 2015 at 5:02
  • \$\begingroup\$ @AlexBunn that sounds interesting! How do I generate those normal maps though, assuming I don't have super-fancy software like CrazyBump or anything? And what should the normal map be based off of anyway, do I just take a snapshot of the high quality spaceship and normal map it onto the low quality version? \$\endgroup\$
    – Superdoggy
    Commented Aug 24, 2015 at 12:10

3 Answers 3

  1. real-time models should have as few polygons as possible. 100k for a model is on the high end. 10k is more reasonable.

  2. COLLADA is an interchange format designed for interoperability. You should open it in a program like Blender and export it as a format better suited for your needs. You may have to experiment with formats, but first try using Three.js's native JSON format -- JSON parsing is fast in javascript since it's built-in functionality. I don't remember if the exporter is bundled with Blender but you can get it at https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender

  3. Your browser should have a developer tools pane with a performance profiler -- you can use this to figure out where the delay is coming from.


To generate normal maps you'll have to have a version of your model uv-mapped and with low polygon density. You'll have to use a 3d software like maya, mudbox or blender to output a texture file your high resolution mesh onto your low poly-model. You can also use xNormal which is free and dedicated to this task.


I'm not sure if this technique is still used in modern games (I think it is, but I'm a gameplay programmer, not an artist or graphics programmer, so I haven't really kept up with modern techniques for creating art assets).

But a common technique for a long time was to create a high-res model and a low-res model, and project from the high-res model to the low-res model to generate a normal-map.

I think the technique is something like, for each vertex on the high-res model, raycast to the low-res model to figure out where the equivalent position is, then write the normal into the equivalent part of the normal map. Not a million miles away from lightmapping, I guess.

The normal map mimics the increased detail on the high-res model, but with a much lower polycount. I first heard of this technique being used on Doom 3, for the character models, but it's definitely been used on more modern games.

My understanding is that modern content creation tools support this, so you wouldn't need to go to the trouble of writing a tool to do this manually


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .