For our final project, we had to integrate everything we learned in the class to create a partial model of our solar system with the sun, Earth, and moon using JavaScript and WebGL.

The only lighting in this world comes from a diffuse point light situated at the position of the sun. The sun and background have emissive lighting to show the full color of their texture. The Earth and sun are only lit by the diffuse point lighting.

All of the celestial bodies rotate about their y axis, but at different rates. The Earth revolves around the fixed point of the sun, while the moon’s revolution around is a bit more complex since it revolves around the non-fixed position of the Earth.

Although the model can be improved, I am pretty happy with the result since I had zero experience writing shaders and have not taken math since Calculus I ten years ago. This class involved some understanding of Linear Algebra, which I was able to follow along well enough to to find success in this class.

In our penultimate week, we learned about shadow mapping–specifically, casting shadows from a single directional light. First, we had to render scene depth from the point of view of the directional light into a texture. Next, we had to re-render the scene from the eye, determining whether each pixel was in shadow (by using the depth texture created in the initial rendering).

Continuing with WebGL, we implemented directional lighting Phong shading–a combination of ambient, diffuse, and specular lighting. Each of these three components are computed as a function of the light and surface material properties.

Diffuse lighting is view independent since it is uniformly distributed. However, the orientation of the light impacts the intensity of its reflection. This is represented by the lambertian term (derived from Lambert’s cosine law). Specular lighting, being non-uniformly distributed, is view dependent.

To test the Phong shading, we can manipulate the viewing angle of the world as well as the orientation of the light. While the ability to manipulate the view matrix was previously completed, we added the ability to rotate the light orientation (a vector) about the X and Y axes using rotation matrices:

As a bonus implementation, we were given the challenge to implement point lighting with Phong shading:

This week, we covered texturing and transparency. We focused on applying textures to objects in the world space. In this world, we also had three spheres of varying transparency, and we had to use the painters algorithm for in order to render the entire scene correctly. You can see the results below!

In addition to the required assignment above, we also tackled some of the extra credit parts of the assignment, animating a texture and using multiple textures. You can see in the rendering below that the texture is not only animated (try not to get sick), but the original texture is blended with another cute bunny texture.

This week, we focused on the Graphics Pipeline and utilized the WebGL API. I’m currently working on the bonus implementations to create a more interesting animation, and will update when I am finished!

The extension activity this week was to animate the colors based on time. To do this, we needed to add another uniform float (for time) to our fragment shader, which could then receive an incremented time variable from our program. Here’s a cool scrolling effect achieved with the fract GLSL function:

This week we covered matrix operations and focused primarily on 3×3 and 4×4 square matrices. For this week’s assignment, we had to implement functions that would compute matrix by matrix multiplication (which, by the way, is only valid if the first matrix is r x n and the second matrix is n x c), vector by matrix multiplication (focusing on row vectors, which must be on the righthand side), as well as calculating the determinant, the inverse and transposition of a given 3×3 or 4×4 matrix. The 1Blue3Brown videos were very helpful this week in illustrating all of these concepts. I also found Desmos helpful.

This week we implemented ray tracing to create a 3D scene with depth, lighting, and shading. Since we are building visual abstractions, it is always helpful to draw out what the scene should look like in order to determine the correct values to use. For example, when setting up the Cornell Box with five planes representing three walls, a floor, and a ceiling, it was helpful to diagram this with respect to an x, y, z axis to determine the normal vector (the direction each plane would be facing) and a valid point that falls within each plane:

It’s the first week of Graphics Programming, and I am really glad to be back to programming after a lack of it in Computer Networks. It has been about a decade since I took a math class, and I have never taken Linear Algebra, so I had to really sit down and talk through the math required for this week.

We are also required to do all the programming assignments with a partner in this class, which is helpful since it forces you to see another’s ideas and talk through points of confusion.

This week we covered vectors, operations on vectors, and how to convert from a vector to a scalar. We also learned how to find the closest point of intersection of a (unit) ray and a sphere, given the distance vector of the ray, the ray’s origin, the sphere’s radius, and the sphere’s center vector. This can be done by using the quadratic formula (after some rearranging of terms to get the equation into a standard form, we can identify each component–a, b, and c).

However, there are cases that we need to catch: when the ray’s point of intersection is opposite the ray’s direction (the result of the quadratic is negative), when the c component of the quadratic is negative (this means that the magnitude of the vector from the ray origin to the sphere center is LESS THAN the radius. In other words, the ray is INSIDE the sphere), and when the discriminant is negative (there are no points of intersection). These three cases should be caught to yield no result.

In our first programming assignment, we implemented a Vector3 class and a Sphere class in order to calculate the nearest points of intersection between a given ray and a sphere (and to catch instances that were invalid).