Tutorial #4: Models
There are various 3d modeling tools that you can use to build 3D models. Which one you use can depend on your level of familiarity with the tool and your budget. The current version of the canvas 3D JS library supports static models in collada form (collada 1.4).
A model is built of triangles. Any curved surface requires edges and therefore multiple triangles because each triangle is perfectly flat. Typically the curvier an object is the more edges there are and the more triangles you have. Triangles are typically one sided. If you look at a triangle from the other side, the triangle will not be there. Each triangle consists of 3 vertices. Each vertex has a coordinate in 3D space with an x,y, and z component. Each vertex of a triangle also has a vector called a normal. Typically this vector is pointing 90° away from the visible surface of the triangle. It is also possible to take the normals of all the triangles that share the same vertex and use an average or weighted average of these normals.
The triangle coordinates and normals defines the shape of the model. What it does not do is determine how a texture is applied to a model. Simply put, a texture is a 2D graphic that is applied to each triangle of the model. Typically it is best if the texture is square with power of 2 dimensions (512X512, 1024X1024 etc.). If the 2D graphic is not a square with a power of 2 dimension, the library will increase the dimension to the next power of two value. This can distort the texture and have unwanted visual effects. To apply a texture to a model, each vertex of the model must be mapped to a point on the 2D graphic. Thus, each vertex of a triangle also maps to a 2 value co-ordinate on a texture. These values are typically called UV’s.
Different modeling software will allow you to create models and texture them in different ways. It is best to consult the modeling software’s tutorial on how to do this. The rest of this tutorial will look at what information is needed and what format is necessary to use the models with the canvas3d js library.
The texture (uv) coordinates have 0,0 at the top left corner of the texture and 1,1 is the bottom right.
One popular place you can find models is the Google’s 3D Warehouse : Download the Collada version of these models. If not available, you can also get the Google earth (.kmz) version. For the google earth version, change the extension to .zip and unzip the file. Use the full path to the .dae file and it will load.
Modeling Basics and Terminology
This section is meant for those who do not have much experience with 3D models and basic terminology. If you are familiar with these terms, feel free to skip on to the next section.A model is built of triangles. Any curved surface requires edges and therefore multiple triangles because each triangle is perfectly flat. Typically the curvier an object is the more edges there are and the more triangles you have. Triangles are typically one sided. If you look at a triangle from the other side, the triangle will not be there. Each triangle consists of 3 vertices. Each vertex has a coordinate in 3D space with an x,y, and z component. Each vertex of a triangle also has a vector called a normal. Typically this vector is pointing 90° away from the visible surface of the triangle. It is also possible to take the normals of all the triangles that share the same vertex and use an average or weighted average of these normals.
The triangle coordinates and normals defines the shape of the model. What it does not do is determine how a texture is applied to a model. Simply put, a texture is a 2D graphic that is applied to each triangle of the model. Typically it is best if the texture is square with power of 2 dimensions (512X512, 1024X1024 etc.). If the 2D graphic is not a square with a power of 2 dimension, the library will increase the dimension to the next power of two value. This can distort the texture and have unwanted visual effects. To apply a texture to a model, each vertex of the model must be mapped to a point on the 2D graphic. Thus, each vertex of a triangle also maps to a 2 value co-ordinate on a texture. These values are typically called UV’s.
Different modeling software will allow you to create models and texture them in different ways. It is best to consult the modeling software’s tutorial on how to do this. The rest of this tutorial will look at what information is needed and what format is necessary to use the models with the canvas3d js library.
Coordinate System
The coordinate system for c3dl is the right-handed coordinate system. This means that positive Y is up, positive X is to the right, and positive Z is pointing out from the screen. The following diagram details this.
The texture (uv) coordinates have 0,0 at the top left corner of the texture and 1,1 is the bottom right.
File Format
The easiest way to use your models with the library is to export your models as collada file. When doing so please ensure the following:- if possible export to collada 1.4 spec
- saved as quads or triangles
- keep the models relatively small and simple. Remember that you do need to send this information over the web so large models may make it far too slow. We know that models files that are over 20MB are too big and will crash firefox.
Notes about Exporting
When you export a model there are a few things you should do to have it show in the browser.- centre your model at the origin
- Note the size of your model. You don’t have to be exact but you need a rough estimate. The size of the model will affect where you can place the camera and still see it.
- Orientation might not be correct. Some modeling software export on a different axis system. Thus when you load the model with c3dl the model may appear to be on its side. There are two ways to fix this. You can either rotate the model inside the software package before export or you can apply a 90 degree rotation to the model after you bring it in.
Ready Made Models
If you do not wish to make your own model, there are models available online that can be used by our library. The thing to be aware of if you use these models is that their sizes may be very different from model to model. When you get them you may need to scale them so that they are all proportional to each other.One popular place you can find models is the Google’s 3D Warehouse : Download the Collada version of these models. If not available, you can also get the Google earth (.kmz) version. For the google earth version, change the extension to .zip and unzip the file. Use the full path to the .dae file and it will load.
