Tag Archives: Blender

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.

Three.js + Blender Part 2

At this point we should have a JavaScript file that represents our model. Let’s investigate how to get this model into our Three.js scene.

Three.js Basics

In Three.js there are a few basic things you need to setup a 3D scene. You will need a scene (duh!), camera, renderer, and an animation loop.

We will be setting up an init function that will handle most of the setup. First we need to define variables for the main container, camera, scene and renderer. Next we create a new THREE.Camera. The parameters are as follows. (fieldOfView, aspectRatio, near, far, target). Note: The target parameter is optional in our example and near and far are parameters that refer to the clipping plane that should be used when rendering.

After the camera is ready to go we need a Scene to render in. This is as easy as creating a new THREE.Scene. Now since our eyeballs are a different mesh than our base mesh for our bird body we will need a group to put all the 3D objects in. This is so that we can change the group properties and the whole bird object will move within the same coordinate system.

Creating objects

Now that we have the scene and camera setup we can start adding objects to our scene. Since we have exported our main mesh out as an external JSON model we will need a way to import it into our scene. Enter the THREE.JSONLoader function. All we need to do is setup a new THREE.JSONLoader and then call the load function. Once our bird.js file is loaded the callback function will be executed and the loaded geometry will be passed to it. In the callback function we can create a new THREE.Mesh, set the position, rotation, scale, and finally add the newly created mesh to our group using the addChild method.

One thing to note… The scale at which the model is exported seems to be really small. I think this is due to the size of Blender units internally. However I am not sure on this. Anyway, you will need to bump up the scale in order to see your exported model. Here we are setting the scale to 700.

The last thing to note here is that we are setting up a material with a textured image to “map” to the uv coordinates exported from Blender. If you are not familiar with UV coordinate mapping click here. UV Mapping allows for a 2D image to be “wrapped” onto an object in 3D space. This is particularly useful for texturing. Three.js comes with a map object you can then set to your textured image. Every major 3D program should come with UV mapping capabilities.

Rendering / Animation Loop

The last thing we need to do is actually render this out. Since we want to use WebGL for this example we will need to setup a new THREE.WebGLRenderer, set the width/height, and append it to the container DIV element we created above. That’s it for the renderer.

Lastly we need a loop to update and animate the model. As you can see we are once again using our friend requestAnimationFrame to accomplish this. If you need more info on RequestAnimationFrame go here. So we request an animation frame from the browser and then we call the render function passing in our scene and camera. Simple stuff. Before we render we could update properties of our group as seen in our commented line.

Conclusion

So as you can see it’s pretty simple to get complex models up and running with Three.js. I have attached the source if anyone would like to investigate further. Source.

Once again here is the final product. Mr. Bird Preview

Three.js + Blender 2.5 = FTW

For anyone who has played with Away3D in Flash inevitably you hit a moment where you go man this is cool but these 1k poly counts are really frustrating. This is due to the fact that until recent beta demos Away3D had no access to the GPU and was dependent on a completely software based solution. I always kept thinking in the back of my mind man wouldn’t it be nice to be able to export a reasonably low poly model from Blender, Maya, (insert 3D program of choice) and not have to worry as much about poly counts or uv’s, etc. Enter WebGL. Now supported in Chrome, Firefox 4.0, and Safari nightly betas WebGL is a Javascript based wrapper using canvas and some magic to talk to the GPU via OpenGL ES 2.0. More Info

Preview

Here is a preview of what we will be building. Mr. Bird Preview

Three.js

Now this is where it gets really cool… Three.js is a library that makes this whole process super simple and quite similar to anyone who as used Away 3D. For the purposes of this post we are going to concentrate on the process of getting a model exported from Blender and into Three.js. If you need more info and other examples please check out the project on GitHub. Here

Installing Three.js plugin for Blender.

Let’s get it started… We will need to get the Blender exporter script installed. When downloading and extracting the Three.js project there should be a “utils/exporters” folder. Look for your version of Blender (Either 2.56 or 2.57) and install the Three.js plugin using the instructions provided here.

Exporting a Model from Blender

Now that we have the plugin installed we can fire up a model to test with. I used a bird model that I got from the Big Buck Bunny project. Here (bird.blend) This model had 32k faces so I thought it would be a good test for performance.

Now the magic. File -> Export -> Three.js. That’s it! Blender will export a model in JSON format that is ready to use within Three.js with Geometry, UV’s and materials.

In Part 2 we will explore how to actually get this exported JSON model working in Three.js.