Introduction
Subdivision surfaces are a technique for transforming a lower polygon model into a more detailed model. The algorithm subdivides each face in a model into smaller faces, while maintaining the same approximate surface. The advantage when using subdivision surfaces are that the modeler can continue to work with the less detailed model. This makes the process easier since it is less to keep track of for the modeler. Then when complete, the modeler can “bake” in the subdivisions to create a more detailed model.
More Info on Subdivision Surfaces – Wikipedia
Benefits
When dealing with large JSON models in three.js they can get large in file size. This is because they need to store data for every vertex and face in the model. For example, my Mr. Bird model was about 4.8 megs. However, by using subdivision surfaces a smaller low poly model could be sent. (reducing loading times) Then once the model is loaded a more detailed model could be created using subdivisions.
Example
For an example I modeled a very simple flashlight in Blender. When exporting to the three.js JSON model format the file checks in at 12k. Now that is more like it! By adding more subdivisions the flashlight geometry becomes more complex even though the model is still based on the original low poly geometry. Cool!
Code
Making this all happen is pretty easy. Getting the latest version of three.js should contain a new modifier called SubdivisionModifier. Once the model is loaded the subdivision modifier can be applied and the result will be a more detailed mesh.
// First we want to clone our original geometry.
// Just in case we want to get the low poly version back.
var smooth = THREE.GeometryUtils.clone( geometry );
// Next, we need to merge vertices to clean up any unwanted vertex.
smooth.mergeVertices();
// Create a new instance of the modifier and pass the number of divisions.
var modifier = new THREE.SubdivisionModifier(divisions);
// Apply the modifier to our cloned geometry.
modifier.modify( smooth );
// Finally, add our new detailed geometry to a mesh object and add it to our scene.
var mesh = new THREE.Mesh( smooth, new THREE.MeshPhongMaterial( { color: 0x222222 } ) );
scene.add( mesh );
Conclusion
For complex scenes subdivision surfaces give the ability to only send the “blueprint” of a mesh over the wire and let three.js do the heavy lifting. This technique should give users less time with lame preloading and more time with awesome webgl interactions.