Lab 5: BYO Mesh

Initial due date: Thursday 10/23
Final due date: Tuesday 11/04

Goals

By the end of this lab, you will:

The main goal of this lab is to prepare you to render your own scenes. When preparing the labs, I have usually done a lot of trial and error to figure where to place geometries, set up the camera, lights etc., and I want you to be able to do this too. However, it can be frustrating to guess how to set things up, so we're going to use a software called MeshLab to help us (1) set up a camera and (2) modify the mesh you found in the pre-lab.

The next section also covers how to get set up to work on your labs locally (on your computer).

Part 0: Using git locally (optional but highly recommended)

Click to expand.

Codespaces work well, but I also want you to be familiar with how to develop graphics programs in a non-Codespaces environment (specifically, locally on your computer). You'll need to install the following tools (if not already installed):

Then open VS Code and install the following two extensions. Extensions can be installed by searching within the Extensions panel on the left (the Extensions icon looks like a game of Tetris):

  • Live Server extension: search for "Live Server" (author: Ritwick Dey) then click "Install,"
  • Live Share extension: search for "Live Share (author: Microsoft) then click "Install." This extension is optional but is useful for collaboratively working with someone else.

To work on an assignment, you'll need to sign into GitHub within VS Code (though there are other ways to authenticate). Open a new window in VS Code (click File -> New Window). Then click on the Source Control panel, and click Clone Repository. Then click Clone from GitHub. Click Allow to allow VS Code to sign into GitHub. Your default browser should open with a new tab asking you to authorize the connection: click Continue. You should now be able to scroll through the repositories you have access to, which should include your repositories for our class.

After selecting the repository you want to work on, pick a destination (it might be a good idea to create a folder on your computer to save all your CS 461 work). Then you can use VS Code as you have been using Codespaces so far (e.g. click the Go Live button which will be available after installing the "Live Server" extension).

Why do we need to Go Live? In some labs, like Labs 1 and 2 and 3, you could just open the index.html page. However, for Labs 4 and beyond, we will often need to run a server, mostly because we need to read our mesh files.

Part 1: Edit the 3d model you chose in the pre-lab.

If your model (from the pre-lab) has more than 25,000 polygons (e.g. triangles), I would suggest reducing the number of faces through a process called "simplication/decimation". If you want to increase the number of faces, you can use something called "subdivision". Pick one of these two options, depending on your initial mesh. Ultimately you should have between 5,000 and 25,000 faces in the mesh to render.

The optional parts below are included because the mesh you find online might have some problems that need to be pre-processed. First try the steps below without the optional parts, but if you encounter any errors, try the optional parts.

  1. First, start by downloading the MeshLab software: https://www.meshlab.net/#download
  2. Then import your mesh: File -> Import Mesh and find the mesh you downloaded in the pre-lab.
  3. Make sure your mesh only has triangles: Filters -> Remeshing, Simplification and Reconstruction -> Turn into a Pure-Triangular Mesh.
  4. (Optional) Merge close vertices: Filters -> Cleaning and Reparing: Merge Close Vertices and click Apply (I think the default values should be fine).
  5. (Optional) Repair the mesh: Filters -> Cleaning and Reparing: Repair Non Manifold Edges and click Apply.
  6. Modify your mesh:
  1. Export your model (File -> Export Mesh As, select Alias Wavefront Object (.obj) ). You can uncheck all the options or click None in the bottom left corner of the options window.

Part 2: Figuring out how to set up the camera.

Our model coordinates are defined in "object space." How can we visualize it in world space? One option is to directly use MeshLab since it renders the geometry so quickly (using rasterization, which we'll talk about in a few weeks). We can rotate, zoom etc. in order to get the view we want and then inspect the camera parameters that we can then import into our ray tracer.

After you've decided on a view you like, take a screenshot of your mesh (this will be part of the lab submission). Then click on Render -> Show Camera (i.e. Show Camera will now be checked). Now click Filters -> Camera -> Set Mesh Camera. Click Get Shot and then click Apply. You should now see the camera information at the top-left of your project window. If not, try expanding the Show Camera settings on the right (in the Layer Dialog) and make sure all the options below are checked (then try clicking Apply again).

The Camera Info box at the top-left of the project window contains the camera settings. The Viewpoint is the eye. The FOV is the field-of-view and axis 0, axis 1 and axis 2 are the $\vec{u}$, $\vec{v}$ and $\vec{w}$ vectors we used to set up our camera matrix.

Part 3: Set the view in your ray tracer.

Open up your bvh repository from class on Tuesday (do not start a new Codespace: the one you were previously using should still be listed in the <> Code tab in your repository). This is the repository you'll submit to Gradescope.

After opening your Codespace again, you'll need to upload the mesh you want to render (from Part 1). To upload a file to your bvh repository:

Make sure you change the filename field in the data passed to webgl-obj-loader (find the call to OBJ.downloadMeshes(data, main) in index.html).

Recall the c matrix from the in-class exercises (defined in index.html). Fill this matrix with the values you found in Part 2 from MeshLab. Remember that the columns of c are $\vec{u}$, $\vec{v}$ and $\vec{w}$. Also adjust the eye and fov.

Leaving c as the identity matrix will be considered "Not Assessable."

Part 4: Place the light at the eye.

Instead of hard-coding a light direction as we did in class, place a point light directly at the eye. This means you'll need to move the calculation of l inside the pixel loop.

Not using a light at eye will be considered "Revisions needed."

Part 5: Experiment

The rendered image should now look like the screenshot you took earlier from MeshLab. If not, keep debugging the values you entered for c, eye and fov. Take a screenshot of your ray-traced image and upload this image along with the screenshot of your MeshLab rendering to your lab repository.

When everything looks good, it's time to run some experiments and report them in a README.md file. Start by creating this file in your Codespace (File -> New File) and name the file README.md. Copy the contents below into your newly-created README.md file:

# Lab 5

**Number of triangles:** *enter # triangles reported in the Console*
**Number of vertices:** *enter # vertices reported in the Console*


| Method                                  | Rendering Time (milliseconds) |
| :-------------------------------------- | :---------------------------: |
| `intersectFast`                         |                               |
| `intersectSlow` (with `AABB` filter)    |                               |
| `intersectSlow` (without `AABB` filter) |          _optional_           |

Submission

Here is a checklist of everything you need to submit for this lab to be considered complete:

Once all of these elements are included in your repository, submit your bvh repository to Gradescope. Remember to add-commit-push your .obj file to your repository.

© Philip Caplan, 2025