CS559 Spring 2021 Sample Solution - Workbook 9
Written by CS559 course staff
We discussed meshes in class. Here are the things you need to know.
The main concepts you need to know (from the lectures and readings):
- What is a mesh (as a collection of triangles)
- Why we avoid “Triangle Soup”
- What is a good mesh
- avoiding T-Junctions
- good triangles
- consistent orientations
- Indexing vertices for efficiency
- Vertex and Face Properties
- The need for Vertex Sharing
- The need for fancy representations
- You don’t need to know a fancy representation (like Winged-Edge) but you should have a sense why they are important.
- Efficiency tricks (strips and fans)
- We’ll only touch on these briefly
Meshes in THREE.js
Confusingly, THREE.js uses the term Geometry to mean a collection of triangles, and uses the term Mesh to mean a Geometry (collection of triangles) that has a material associated with it, and all of the other stuff that a “Graphics Object” has (e.g., transformations and hierarchy). A THREE
Geometry, but a
Geometry is the collection of triangles that is more like the common graphics usage of the term.
Three has two types of Geometry. The regular
Geometry class and the
BufferGeometry class. We can’t really talk about
BufferGeometry until we learn about buffers, so we’ll use regular old
Geometry for now. A warning: most examples in THREE use
BufferGeometry, so it can be hard to find good examples. The examples in this workbook should be good enough to help you get started. (Bigger warning: the regular old
Geometry is being deprecated in newer versions of THREE, you need to use the version we give you with the workbook).
Geometry stores a Mesh as vertex-indexed set of faces (where the faces are triangles). The
Geometry class (documentation) stores a list of vertices (as
Vector3 positions). It also stores a list of Faces (as
Face3). Each face, refers to 3 vertices (by their index in the vertex array).
Faces have properties you would expect - like a color and a normal. However, they also contain properties of the vertices (colors and normals). This allows for “vertex splitting” (the same vertex can have different properties for different faces). Vertices don’t have properties like color or normals by themselves (only inside of faces). To make things more confusing, texture coordinates (which are properties of vertices that are split like colors and normals) are stored in a completely different manner.
THREE has materials specifically designed to work with meshes. If you want materials such as
MeshStandardMaterial to use vertex or face colors, you need to tell it to do so. As far as I can tell, if you tell
MeshStandardMaterial that you want to use vertex colors, but you provide face colors instead, that’s OK. Vertex colors override face colors (if you are in vertex color mode).
For normals, you can provide a normal for either the face or for each vertex on the face. THREE has a way to automatically compute the face normals (so they are normal to the triangle).
Example: Mesh Colors
In this example, we’ve made a Mesh (
Geometry) with two triangles. For the first one, it uses the material color (yellow). For the second one, we’ve given it face colors. For the third, we’re using vertex colors.
Be sure to read the code in 09-01-01.js and understand how the meshes are put together.
Example: Mesh Normals
This example uses the same two triangles. Except that this time, the normals are done differently for each of the 3 versions. On the left, THREE computes the normals for us (see the line
geometry.computeFaceNormals();). In the middle one, we assign each vertex on each face a normal value. This is the same normal that would have been computed for each triangle. The triangle on the right has the vertices in the middle (along the edge between the two triangles) pointing forward - to give the same normals as if it were a smooth, curved piece (rather than two triangles with a crease). Because the lights are on the sides, the middle of this object is dark. But, as you move it, notice the lighting behaves as if this were a curved object.
Be sure to read the code in 09-01-02.js and understand how the meshes are put together.
This is a reminder of what we learned about Meshes, and an example of how to make a very simple one (with two triangles). On Page 2 (Mesh Exercise), you’ll get to try to make a more interesting mesh.