Exploring Computer Graphics: Weekly Chronicle #7
Tags: computergraphics, learning, computerscience, rust
Published: 2024-01-22 03:52:56

## Overview

Hello everyone, it's been a couple of demanding weeks at work, but I'm back with another weekly chronicle. I was able to make some progress in each project and the main highlight is that I validated the ray tracing in Rust project. Let's go right into the content of the week!

## My Journey into Computer Graphics

### Learning Rust

As I mentioned last week, my goal before continuing with the newly restructured project, was to complete the Rust 3D Graphics in the Browser series from [**Doug Milford's YouTube videos**](https://www.youtube.com/@dougmilford7814). First of all, the series went into 2D graphics in the browser using WebGL. This is the result of that part:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705888603846/888a3c0b-ec57-479f-a2f8-1e9b80548de7.png?auto=compress,format&format=webp align="center")

Then, the series went into 3D graphics, where the first task was to define the plane with perspective view:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705888632892/2f57d580-6999-4ae7-9595-d4124ca8ee62.png?auto=compress,format&format=webp align="center")

Then, I added mouse inputs to be able to rotate the plane.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705888654014/4ca0b63e-cec2-4fe5-8169-46433f1aaca3.gif?auto=compress,format&format=webp align="center")

After having mouse controls, the series went over adding a sin wave to add color to the plane depending on the y-axis value (green for positive and red for negative).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705888722522/64574069-24d6-44a1-a197-673fea993d02.png?auto=compress,format&format=webp align="center")

With this out of the way, the series went into animating the sin wave and adding Phong lighting. This was the final result:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705888766662/d1f27ac3-f0d5-4e8a-b178-f90dc4616369.gif?auto=compress,format&format=webp align="center")

For some parts it felt like I was just blindly coding alongside the video series. However, completing it allowed me to get a better understanding (and a complete project codebase) of Rust. Besides, it allowed me to enhance my understanding of the setup that must be done to use OpenGL (or WebGL in this case) and draw 3D graphics.

### Ray Tracing from the Ground Up in Rust

With the tutorials out of the way, it was time to see if I'd be able to follow alongside the [**Ray Tracing from the Ground Up**](https://www.goodreads.com/book/show/2241769.Ray_Tracing_from_the_Ground_Up?ref=nav_sb_ss_1_30) book (which is based in C++) while using Rust. The first part involves creating a bare bones ray tracer. In the book, the author points towards a skeleton codebase which already has the implementation of the bare bones ray tracer. However, the webpage that is mentioned is no longer maintained. I managed to find [this repository](https://github.com/hadryansalles/ray-tracing-from-the-ground-up/tree/cebbb7740843efd21827d5421342ad982f7f8295/source) of someone who implemented the exercises of the book and the exact commit where they set up everything to work for the skeleton ray tracer. The repository is also in C++, but it allowed me to have another reference besides the book of the basic code that I should be able to set up in Rust for this project to work.

First of all, I made sure I could get [SDL2](https://www.libsdl.org/) (A cross-platform development library that I'll use for handling input and window management) running. To do this, I simply created a window that changed colors in the main function of the program.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705890193100/901dab74-4ca2-4f73-90a8-8c4437a07fa9.png?auto=compress,format&format=webp align="center")

The next part was to implement a Window class instead of just creating it in the main function. To test it, I drew a single red pixel to the black background screen not too far below the word "from". It might be difficult to see in the image, but the pixel is actually there. This gave me hopes that I would at least be able to replicate the skeleton code for the ray tracer.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705891045097/3e06b6f0-3656-4271-9416-30989584956c.png?auto=compress,format&format=webp align="center")

However, Rust doesn't really have classes. It has something called a struct which behaves similar to a class in other languages but not exactly the same. For example, as I mentioned last week, there isn't any inheritance and there isn't any polymorphism. At least in the same way that you'd expect from other object-oriented programming (OOP) languages. In fact, the official Rust programming language book, mentions that [Rust can both be and not be an OOP language](https://doc.rust-lang.org/book/ch17-01-what-is-oo.html). Everything depends on how you define one. This would prove to be a more difficult challenge than I expected since I couldn't simply replicate the classes from the repository with the syntax of Rust and call it a day. I actually tried to do so and got a bunch of compiler errors.

To be able to compile my program I had to change some parts of the design and implement them in a way that would work in Rust. If you're interested in checking out how the code ended up and want to follow along, you can check the GitHub repository for this project [here](https://github.com/EricBL3/ray-tracing-ground-up). The first test scene of the ray tracer consists of a single red sphere with a black background. This is what I got when I finally managed to compile and run the program:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705891285754/fd3829c9-c83d-4d01-9509-b344907e8017.png?auto=compress,format&format=webp align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705891289811/217f91f3-1052-425b-b9e4-e8a01de34c88.png?auto=compress,format&format=webp align="center")

I was getting some weird shadow-casting oval (which disappeared as soon as I moved the window) at the center of a white canvas. Besides, a second window with the black background was being created. After inspecting my code for a while, I was able to find the solution, and everything basically boiled down to problems with how I was using references and handling the [ownership](https://doc.rust-lang.org/book/ch04-01-what-is-ownership.html) of the objects in my program. After fixing this, I was able to render the first scene:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705892786872/b9517ff2-5b60-40e9-bc9a-5a5c7368d37a.gif?auto=compress,format&format=webp align="center")

However, the program was still creating 2 windows, one with the correct size and another one where the ray tracing worked. After I fixed this, I was able to properly render the 3 scenes of the bare bones ray tracer chapter. Note that for the last scene I only include the image since the ray tracing took longer than I was willing to wait for generating a gif.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705892893319/de0dec68-0e28-4735-8b10-f878d776ea57.gif?auto=compress,format&format=webp align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705892914926/a82285f2-0e6d-4697-9b92-451404ee9a61.gif?auto=compress,format&format=webp align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705892928884/0971c0d6-a24d-4b3c-a1ff-0941d18a5458.png?auto=compress,format&format=webp align="center")

## My Journey into OpenGL

For this project I completed the basic lighting and materials section from [**Learn OpenGL**](https://learnopengl.com/).

### Basic lighting

In the basic lighting section, I started implementing ambient lighting. This type of lighting simulates the constant light that is always somewhere in the world (either from the sun, moon, or other distant light).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705893383378/42d230b2-2a38-4e7d-8e9a-63496d2651c2.png?auto=compress,format&format=webp align="center")

Then, I added diffuse lighting. This type of lighting simulates the directional impact that a light has on an object.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705893400282/bc694380-94fd-42d7-adf7-167df3032a60.png?auto=compress,format&format=webp align="center")

And I finally added specular lighting. This type of lighting simulates the bright spot of a light that appears on shiny objects.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705893424831/a20822c8-7937-43c5-ac92-436254a62103.png?auto=compress,format&format=webp align="center")

This allowed me to have the Phong lighting model implemented in my scene.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705893454160/50bf1c36-4147-4cd6-a89f-4be6a8db4f05.gif?auto=compress,format&format=webp align="center")

### Materials

The materials section consisted of expanding the previous section by adding a material structure to the fragment shader. This allows creating different materials that could be used to replicate different objects from life such as gold, emeralds, or plastic.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705893556887/be028519-4106-427e-a19b-107d390b87e7.gif?auto=compress,format&format=webp align="center")

## My Journey into Shaders

This week I learned about textures and normal mapping with [**Ben Cloward's Shader Graph Basics YouTube playlist**](https://www.youtube.com/playlist?list=PL78XDi0TS4lEBWa2Hpzg2SRC5njCcKydl)**.** There isn't really anything to show since I just took some notes while watching the videos. It helped me understand the best ways to import texture maps into game engines and some tips on how to blend normal maps together to produce higher quality materials.

## See you next week!

Here are my goals for next week for each project:

* **My Journey into Computer Graphics:** Complete the antialiasing exercises from [**Ray Tracing from the Ground Up**](https://www.goodreads.com/book/show/2241769.Ray_Tracing_from_the_Ground_Up?ref=nav_sb_ss_1_30) and do some reading to prepare for adding a viewing system to the ray tracer.
    
* **My Journey into OpenGL:** Complete the remaining lighting sections in [**LearnOpenGL**](https://learnopengl.com/).
    
* **My Journey into Shaders:** Finish reading the lighting, shadow & surfaces chapters of [**The Unity Shader Bible**](https://www.goodreads.com/book/show/61969779-the-unity-shaders-bible) and watch videos on the same topic from [**Ben Cloward's Shader Graph Basics YouTube playlist**](https://www.youtube.com/playlist?list=PL78XDi0TS4lEBWa2Hpzg2SRC5njCcKydl)**.**
    

See you next week!