CS 4600 - Fall 2021 - Introduction to Computer Graphics

Project 4 - Triangular Meshes

In this project we will render a 3D triangular mesh with a texture on the GPU using WebGL.

Just like the previous projects, you are given an HTML file that implements the user interface and a part of the JavaScript and WebGL code. Here is a short video showing what the completed project should look like:

The part you will implement can be separated into three steps:

Step 1:

The first step is implementing the JavaScript function that computes the 4x4 transformation matrix, including perspective projection:

function GetModelViewProjection( projectionMatrix, translationX, translationY, translationZ, rotationX, rotationY )

The perspective projection is given to this function as a 4x4 matrix. The purpose of this function is to combine it with the other transformations that include a translation and two rotations. You must discover in which order the transformations should be applied, such that the resulting transformation behaves similar to the one in the video above.

Step 2:

Next, we will render a triangular mesh using WebGL. The triangular mesh is loaded from an OBJ file using the UI. The OBJ parser is already implemented for you. The given code also includes triangulation and scaling to form a triangular mesh that fits inside the box.

We will complete the implementation of the JavaScript class MeshDrawer, which is responsible for rendering the triangular mesh. The constructor of this class is called after WebGL is initialized, so we can handle WebGL related initializations for rendering within the constructor.

The MeshDrawer class includes the following methods:

The completed implementation of this step will render the object inside the box. You can use the following code in your fragment shader to set the color of the fragment, instead of picking a single color for the whole object:

gl_FragColor = vec4(1,gl_FragCoord.z*gl_FragCoord.z,0,1);

This code adjust the green channel of the color based on the distance of the fragment from the near plane of the camera projection. You can experiment with other formulations.

Step 3:

The last step is displaying a texture on the mesh. To facilitate this, the MeshDrawer class also includes the following methods:

You are given the following files to help you with this project: