Exploring Computer Graphics: Weekly Chronicle #1
Tags: computergraphics, learning, computerscience
Published: 2023-10-16 14:50:20

## Overview

Hello everyone! Welcome to a new series in my blogging journey. The "Exploring Computer Graphics: Weekly Chronicles" series will take you through my weekly progress of learning about computer graphics. To start this series, I will be working on 3 different projects. I described them during the [last part of "My Journey into the Fundamentals of Computer Graphics"](https://eric-buitron.hashnode.dev/my-journey-into-the-fundamentals-of-computer-graphics-part-6) series, but I'll explain again what they're about in their corresponding section. For the foreseeable future, I will tell you about my discoveries and progress in each of these projects.

It's important to warn you that the amount of content in each section will vary each week. This is something that I'm doing during my free time and, as much as I would love for this to not be the case, I won't be able to dedicate the same amount of time to each project every week. A quick disclaimer for this week is that I actually started 2 weeks ago but I still wasn't sure about the format that I would give to this series. Besides, since I'm just getting started, there isn't a lot to show for every project even with 2 weeks' worth of progress. Anyway, let's go into the contents of this week!

## Journey into Computer Graphics

This project will consist of learning the topics covered in an undergraduate-level computer graphics course. It's based on following the [**syllabus**](https://graphicscodex.com/syllabus.xml) & [**projects**](https://graphicscodex.com/projects/projects/index.html) suggested in "The Graphics Codex". The resources I will follow are:

* [**The Graphics Codex**](https://graphicscodex.com/) by Morgan McGuire
    
* [**Fundamentals of Computer Graphics (5th edition)**](https://www.goodreads.com/book/show/57281611-fundamentals-of-computer-graphics) by Steve Marschner & Peter Shirley
    

These first couple of weeks were all about the introductory chapters in the reading materials. I read the preface, introduction, C++ and version control basics chapters in "The Graphics Codex". Meanwhile, I read the introduction, computer graphics in games and visualization chapters in "Fundamentals of Computer Graphics". After these readings, I started to get things ready for the coding parts of the project. I set up the recommended tools given by "The Graphics Codex" and completed the warmup section of the [Cubes project](https://graphicscodex.com/projects/cubes/index.html).

If you're interested, you can follow my coding progress in the [GitHub repository](https://github.com/EricBL3/journey-into-computer-graphics) of this project. Something that I like so far about the projects given in "The Graphics Codex" is that they invite you to document your progress in a development journal and by writing reports for each project. Here's the first test I made of documenting to the journal:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697432407230/79ee9ae1-e819-4133-be07-6fdad675be84.png?auto=compress,format&format=webp align="center")

## Journey into OpenGL

This project will consist of learning OpenGL by following these resources:

* [**Learn OpenGL**](https://learnopengl.com/) online book
    
* [**Computer Graphics with Modern OpenGL and C++**](https://www.udemy.com/course/graphics-with-modern-opengl/) Udemy course
    

During these weeks I got an introduction to the libraries that I'll use for these projects which are:

* [GLFW](https://www.glfw.org/): A library for window creation and managing user input.
    
* [GLEW](https://glew.sourceforge.net/)/[GLAD](https://github.com/Dav1dde/glad): Libraries that manage and give access to OpenGL functions and extensions. The difference is that GLAD allows for greater flexibility & customization for more recent versions of OpenGL. However, the Udemy course that I'm following uses GLEW and at least at this point, I prefer to follow along with the tools that each resource recommends.
    

You can also follow the progress of this project in the [GitHub repository](https://github.com/EricBL3/journey-into-opengl). With all this setup out of the way, I was able to draw a simple window:

Udemy Course

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697433382049/089d6e29-2dd3-4138-97ec-3b211dc85a6f.png?auto=compress,format&format=webp align="center")

Learn OpenGL

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697433395725/8c7eeda1-5626-4aa5-90d7-15c70c45d5f4.png?auto=compress,format&format=webp align="center")

Then, I got a quick overview of the stages of the rendering pipeline and how to create a shader program. With this knowledge, I was able to draw some pretty triangles:

First triangle shader in the Udemy course.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697433549715/e7c2a8bd-e2fb-4f70-9d7c-eb55ac9363dc.png?auto=compress,format&format=webp align="center")

First triangle shader in Learn OpenGL.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697433573504/6389cfd5-4207-4a16-b664-be81a14783ad.png?auto=compress,format&format=webp align="center")

I then converted the triangle to a rectangle.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697433590878/0fbfa905-b5aa-4419-bd5b-f215564eff9f.png?auto=compress,format&format=webp align="center")

Which is actually made of 2 triangles.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697433600427/2c99f5bd-88d9-4ae9-af66-88ebade9e81e.png?auto=compress,format&format=webp align="center")

Then I drew 2 triangles next to each other.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697433650706/db216448-46f9-4370-8c82-0ef1e9951be8.png?auto=compress,format&format=webp align="center")

And used a different shader program to draw each triangle of a different color.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697433685552/7a3fc2e1-b2c3-4e70-974c-7cd8e3ca4776.png?auto=compress,format&format=webp align="center")

Then I drew a triangle with a different color per vertex. Green for the bottom left vertex, blue for the top vertex and red for the bottom right vertex.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697433849885/2ca2391e-9d8e-4116-84d2-116261370472.png?auto=compress,format&format=webp align="center")

The reason the triangle ends up having such a wide range of colors is because of a concept known as fragment interpolation, which blends the values of the vertices and creates a smooth transition between them. I also played a little bit with moving the position of the triangle in the vertex shader:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697434002249/bfcb8421-5f90-4c6c-9c4e-e9592472bebf.png?auto=compress,format&format=webp align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697434006561/d3e2ff51-1d53-490b-a5cb-c63d974b0548.png?auto=compress,format&format=webp align="center")

## Journey into Shaders

This project will consist of learning about shader programming. I will do my best to recreate each shader in 3 different game engines: Unity, Unreal & Godot. The resources that I'm going to follow are:

* [**Ben Cloward's Shader Graph Basics YouTube playlist**](https://www.youtube.com/playlist?list=PL78XDi0TS4lEBWa2Hpzg2SRC5njCcKydl)
    
* [**The Unity Shader Bible**](https://www.goodreads.com/book/show/61969779-the-unity-shaders-bible) by Fabrizio Espíndola & Pablo Yeber
    
* [**The Book of Shaders**](https://thebookofshaders.com/) by Patricio Gonzalez Vivo & Jen Lowe
    
* [**Shaders section in Godot's documentation**](https://docs.godotengine.org/en/stable/tutorials/shaders/index.html)
    

These first weeks were all about getting an introduction and overview of the basics of what are shaders and some of their types in Unity and Godot.

## See you next week!

As you can see, my journey into OpenGL clearly took the front stage during these first weeks. For this next week, I'll try to give more focus to my other two projects. Here are my goals for the week for each project:

* **My Journey into Computer Graphics:** Complete the [cubes project](https://graphicscodex.com/projects/cubes/index.html) and start with the reading that comes next.
    
* **My Journey into OpenGL:** Watch the theory video on using vectors, matrices & uniform variables and start using the GLM library.
    
* **My Journey into Shaders:** Finish reading the initial documentation and introduction to shaders and start running/writing my first shaders.
    

I hope that you enjoy this new series and maybe learn something new along the way. See you next week!