Tag Archives: Subdivision Surfaces

Subdivision surfaces with three.js

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!


VIEW EXAMPLE

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.

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.