Is there a good/remended approach regarding performance to load a 3D model from file to be used in a three.js JavaScript application (especially where the model is generated in Blender)?

I currently have the following workflow:

1. Create model in Blender.
2. Export using the three.js exporter.
3. Load from javascript using THREE.JSONLoader

This works great except that the resultant JSON file can be around 4MB and it would be good if I could reduce this size. I am wondering what the best approach is: -

• Minify the JSON file (a bit tricky as most of the js minifiers I have e accross don't seem to work), or
• Use gzip pression (a bit of handshaking required), or
• Use a binary format (I imagine this requires conversion back to JSON) or
• Use OpenCTM format (unfortunately the scripts don't seem to work in Blender 2.70).

I have done some research, representative examples being here, here, here and here. From what I have found the main approaches seem to fall under those I have listed in the bullet points above. Each have some hurdles to overe.

So, I am asking - is there a good/remended approach regarding performance to load a model from file?

Update

So, it has been a while since I asked this question and I thought I'd report back on the approach I took. In the end I optimised the models, reducing the number of vertices without much loss of visible quality for the size that I am using them for. I also cache on the client in indexeddb as a blob.

Is there a good/remended approach regarding performance to load a 3D model from file to be used in a three.js JavaScript application (especially where the model is generated in Blender)?

I currently have the following workflow:

1. Create model in Blender.
2. Export using the three.js exporter.
3. Load from javascript using THREE.JSONLoader

This works great except that the resultant JSON file can be around 4MB and it would be good if I could reduce this size. I am wondering what the best approach is: -

• Minify the JSON file (a bit tricky as most of the js minifiers I have e accross don't seem to work), or
• Use gzip pression (a bit of handshaking required), or
• Use a binary format (I imagine this requires conversion back to JSON) or
• Use OpenCTM format (unfortunately the scripts don't seem to work in Blender 2.70).

I have done some research, representative examples being here, here, here and here. From what I have found the main approaches seem to fall under those I have listed in the bullet points above. Each have some hurdles to overe.

So, I am asking - is there a good/remended approach regarding performance to load a model from file?

Update

So, it has been a while since I asked this question and I thought I'd report back on the approach I took. In the end I optimised the models, reducing the number of vertices without much loss of visible quality for the size that I am using them for. I also cache on the client in indexeddb as a blob.

• javascript
• json
• three.js
• blender

3 Answers 3

I've had some experience with this kind of problem. The issue here is that you model most likely has a lot of points/polygons. So no matter what format you use every point and face of your model has to be described. This ensures a large file size and there is no way around it.

My solution was to look at Blender rather than Three.js and optimise my models. There are a ton of posts on this topic (e.g. here, here, and here). After learning more about how Blender works, I was able to reduce most of my 4-8 Mb meshes down to < 200kb each without noticable degradation to the objects rendered in the browser.

I saw your ment on my question and I can confirm I used Blender 2.68a. To load from openctm format I did:

var loader = new THREE.CTMLoader();
...
loader.load( 'models/basic_model.ctm',  function( geometry, material ){
    // create mesh and position it
    var material = new THREE.MeshPhongMaterial({ color: 0xEEEEEE, shininess: 100, side: THREE.DoubleSide }),
        mesh = new THREE.Mesh( geometry, material );
    // Faces have an orientation that orientation decides which side is which. And the culling removes the backside in normal circumstances

    mesh.position = position;
    mesh.scale.set( 30, 30, 30 );

    // render
    scene.add( mesh );
    render();

    meshes[ 'basic_model' ] = mesh;
}, {} );

You need to export from Blender using the openctm export plugin and to include js-openctm in your project. Don't remember more details, as I'm working on pletely different stuff now.

PS: I'm pretty sure I had to manually load the openctm plugin into Blender for it to work

With the current Blender Three.js exporter (as of writing this I am referring to the r71 dev version) there are a few things you can do:

• dial down the precision values, the short the float value precision the smaller the file
• uncheck Indent, this is huge on animation files as it removes white spaces and \n characters
• experiment with using msgpack pression (requires the mspack package be installed) msgpack loading example

at some point, tho, the JSON format may not be the most ideal and maybe other formats will work better for you. As previous posts stated; model optimization goes a long ways too.