Graduate students will explore shape representations in graphics by implementing a fundamental operation used in computer graphics: mesh smoothing (sometimes called mesh fairing). In particular, they will implement Laplacian smoothing, a technique that iteratively updates vertex positions based on their neighborhoods. Laplacian smoothing has a deep connection to signal processing, in particular smoothing kernels that we discussed earlier in class. For more information about that, you might find A signal processing approach to fair surface design, by Gabriel Taubin, an interesting read. Luckily, we will not need such complex machinery to implement it.

Objectives

This assignment is designed to teach students concepts with shape representation in computer graphics. Specifically, students will:

  • Understand triangle mesh file formats, specifically by implementing a basic file parser that reads and writes files the Wavefront .obj format.
  • Understand triangle mesh data structures, implemented through a data structure that stores triangle meshes internally so that one can smooth mesh surfaces.
  • Implement and understand the concept of Laplacian smoothing, allowing one to update the positions of vertices based on neighborhood information.

Part 1: Triangle Mesh File Formats

Your code will implement a basic reader and writer for Wavefront .obj files, as discussed in class. You need only to support reading lines that begin with v (for a mesh vertex), f (for a mesh face) and comments (that start with #).

Lines that are vertices will follow the form v x y z, where x, y, and z are three floats representing the \((x,y,z)\) position of the mesh vertex.

Lines that are faces will follow the form f v1 v2 ... vk where v1, v2, through vk are integer indices that refer to specific mesh vertices \(\{v_1, v_2, \ldots, v_k\}\). Note that this indices begin counting with 1 instead of 0! Also, while the .obj standard supports polygonal faces of arbitrary vertices, your code need only support loading triangles (and thus you can assume that \(k = 3\). You can either skip or report an error if an .obj file has more than 3 vertices for a given face.

You should also implement methods to write the .obj file from your internal data structure, so as to save the updated mesh after you have smoothed it.

Part 2: Storing Triangle Meshes in Memory

After parsing the .obj file, you should create an internal data structure to store the triangle mesh. Specifically, you must implement the triangle-neighbor structure as described in Chapter 12 of the textbook and Lecture 14’s slides. I recommend doing this with a Mesh class. If your previous implementations included it, you may also want to consider making this class a subset of your abstract Surface from A03/A04. But, in this assignment you will not be required to render triangle surfaces using your own code, so the functionality for processing ray hits will not be necessary.

You may find that using your class to store three-dimensional vectors from from A03/A04 will be useful here to store the vertex positions. For storing mesh topology, your data structure should follow convention of the textbook. Each mesh vertex will store a index to one of its adjacent triangles while each triangle will store indices to all three of its triangle neighbors. Doing so will require you to compute this information from the input triangle mesh as you read it in. If done correctly, you should be able to perform the appropriate adjacency query required in the next step. You may assume that all input meshes are oriented and that the original order of the vertices is CCW (this isn’t a requirement for .obj files, but I have manually set it for the ones we started with).

Your Mesh class must provide two functions as an interface for the renderer, getVertList() and getFaceList(). The first function, getVertList() returns a Float32Array of size \(3n_v\) where \(n_v\) is the number of vertices in the mesh. This array is a flattened list of the vertex positions, i.e. \((x_0,y_0,z_0,x_1,y_1,z_1,\ldots)\). The second function, getFaceList() returns a Uint32Array() of size \(3n_t\) where \(n_t\) is the number of triangles in the mesh. This array is a flattened list of the integer indices for the triangles, i.e. \((v_1^0,v_2^0,v_3^0,v_1^1,v_2^1,v_3^1,\ldots)\).

Part 3: Laplacian Smoothing

The basic algorithm for Laplacian smoothing creates a new vertex position for each vertex in the input mesh by computing both the average position of all of its edge neighbors and taking a step from the original position of the vertex towards this new position. Specifically, let \({\bf x}_i\) by the position of vertex \(i\). One will compute the updated position \({\bf x}'_i\) as:

\[\Delta {\bf x}_i = \frac{1}{N} \sum_{j} ({\bf x}_j - {\bf x}_i)\] \[{\bf x}'_i = {\bf x}_i + \lambda \Delta {\bf x}_i\]

In the above, \(\Delta {\bf x}_i\) is called the Laplacian, and it is based on a weighted sum of the edge vectors to the positions \({\bf x}_j\) for all adjacent vertices \(j\). \(\Delta {\bf x}_i\) plays a role that is very similar to a stencil we saw for image processing. In particular, if \(i\) had exactly four neighbors, it would add them up with weights:

\[\frac{1}{4} \begin{bmatrix} 0 & 1 & 0 \\ 1 & -4 & 1 \\ 0 & 1 & 0 \end{bmatrix}\]

Of course, for arbitrary triangle meshes, the number of neighbors is variable so it’s more helpful to think of this as a summation rather than a kernel.

In the above summation, the parameter \(\lambda\) plays a role of controlling the rate of smoothing. In the case where \(\lambda = 1\), one can see that \({\bf x}'_i\) will precisely be the average position of all of its neighbors, \(\frac{1}{N} \sum_{j} {\bf x}_j\), since the \({\bf x}_i\) terms cancel. Typically, one uses smaller steps to help smooth more gracefully, and thus \(0 < \lambda < 1\) is a useful range.

To enumerate all adjacent vertex positions \({\bf x}_j\), you can use the TriangleOfVertex() method described in the textbook to access all vertices \(j\) adjacent to vertex \(i\). Doing so will count each vertex \(j\) twice, as each is shared by two adjacent triangles. This is OK to double count each of them, as the \(N\) you will compute will actually be double what the true value for \(N\) is.

Additionally, Laplacian smoothing is usually done in multiple iterations. Your code must support producing new positions for all vertices by iteratively applying this operator, and letting the user vary the number of iterations. At each iteration, all vertex positions should be computed from the previous iterations locations (thus, you should be careful not to use intermediate positions as your are applying the smoothing to each vertex).

Part 4: Execution, Display, and Parameters

In the default repository, I have provided both a sample HTML file with a default glcanvas, and a sample Javascript file gl-rasterizer.js that includes rendering functionality with webGL.

Your code needs to provide a Mesh class with the functions Mesh.getVertList() and Mesh.getFaceList() as described above. You will pass this mesh to the webgl renderer in two places.

Upon reading and storing the mesh, you should make one call to the function startRender() and pass it the mesh. This will initialize the GL canvas and create buffers for rendering the mesh object.

For smoothing, I recommend creating two instances of the mesh, one which is the initial mesh and a second which is the smoothed mesh. Upon setting parameters for \(\lambda\) and the number of iterations, you should update the mesh information with the renderer. To do this, you will call updateMesh(), again passing it the mesh that contains the newly create mesh vertices.

If the base repository for the assignment, I’ve provided a sample a05.js that shows how startRender() and updateMesh() might be used. You’ll also see an example of a very stripped down Mesh object that I create inline to demonstrate the interface. I expect that you will remove almost all of this code in your final submission.

For testing, we have included a variety of sample .obj files in your repository, but you may want to try out models you can find online too. Note that you may discover than many freely available meshes are not watertight manifolds, which may cause undesirable effects when building your data structure.

Finally, as the rasterizer only provides a static view, you may find it useful to test with an external program that your meshes are correct. I recommend using the freely available, open-source, cross platform program, MeshLab to display your triangle meshes. There are also a variety of online .obj viewers that work in your browser, but you might not find them as easy to use.

Part 5: Written Questions

Please answer the following written questions. You are not required to typeset these questions in any particular format, but you may want to take the opportunity to include images (either photographed hand-drawings or produced using an image editing tool).

These questions are both intended to provide you additional material to consider the conceptual aspects of the course as well as to provide sample questions in a similar format to the questions on the midterm and final exam. Most questions should able to be answered in 100 words or less of text.

Please create a separate directory in your repo called written and post all files (text answers and written) to this directory. Recall that the written component is due BEFORE the programming component.

  1. In this assignment you are required to use the triangle-neighbor data structure for storing the mesh. What data structure (if any) would you have used instead if you had freedom to pick it? Why?

  2. Imagine that you have additional data other than position stored on the vertices of a mesh (such as colors). How might you update them when performing Laplacian smoothing?

  3. Exercise 12.1 on pg. 321 of the textbook.

  4. How do triangle strips help store a mesh more efficiently?

  5. Exercise 6.6 on pg. 137 of the textbook.

Grading

Deductions

Reason Value
Program crashes due to bugs -10 each bug at grader's discretion to fix


Point Breakdown of Features

Requirement Value
Consistent modular coding style 10
External documentation (README.md) 5
Class documentation, Internal documentation (Block and Inline). Wherever applicable / for all files 15
Expected output / behavior based on the assignment specification, including

Parsing the .obj file into a triangle-neighbor structure10
Displaying the transformed mesh using the provided rasterizer5
Allowing the user to vary parameters for smoothing10
Correctly enumerating all neighboring vertices10
Properly computing new vertex locations15
Correctly allowing iterative application of the operator10
Writing smoothed mesh as an .obj output file10

 70
Total 100