Exploring Computer Graphics: Weekly Chronicle #4
Tags: computergraphics, learning, computerscience
Published: 2023-11-28 14:32:42

## Overview

Hello everyone, welcome to this week's Computer Graphics Chronicle! This week there are many images and gifs of progress for each project that I can show you. Let's dive right into them!

## My Journey into Computer Graphics

This week, I started the [**meshes project**](https://graphicscodex.com/projects/meshes/index.html)**.** It has several components to it and I expect that it will take me at least another couple of weeks to finish it. Here are some pictures of my progress:

I created the outline for the report.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701112389494/aa5976ab-be83-4d42-bc84-ead9340f0d46.png?auto=compress,format&format=webp align="center")

For this project, Morgan McGuire (author of [**The Graphics Codex**](https://graphicscodex.com/)) advises to start by planning the tasks that need to be done for completing the project. This allows you to think about every step and not just rush into coding, which can end up wasting time.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701112515177/a1d6d780-eda0-4ab6-94de-ec070f93cded.png?auto=compress,format&format=webp align="center")

I made a .off file by hand that generates this cube.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701112708504/8ca2ae98-2bdb-487e-b559-faa9309a7694.jpeg?auto=compress,format&format=webp align="center")

I also added the GUI controls that will be connected to the methods that generate automatically a cube and a cylinder mesh.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701112726749/8d433ed0-906d-4d89-abe8-2017b7e5d58f.jpeg?auto=compress,format&format=webp align="center")

The final part of this project is to generate an interesting scene that combines the elements from the previous exercises. I still have to complete several tasks but I took this picture which I'll be using as a reference image for my final scene.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701112967015/ee507557-44a8-45da-b959-fa886516a5a7.jpeg?auto=compress,format&format=webp align="center")

## My Journey into OpenGL

This week, I learned about vertex interpolation, using indexed triangles and applying perspective projection. All of this progress was from the [**Computer Graphics with Modern OpenGL and C++**](https://www.udemy.com/course/graphics-with-modern-opengl/) Udemy course.

First, I reviewed vertex interpolation which blends the values of the vertices and creates a smooth transition between them.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701113181249/26e9f75e-2595-4b94-9b84-7d797373677a.png?auto=compress,format&format=webp align="center")

Then I learned that using indexed triangles allows you to specify fewer indices when creating a figure such as this pyramid.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701113338823/655c837c-afbe-424e-9932-4f545d19def7.gif?auto=compress,format&format=webp align="center")

You might have noticed that the illusion of 3D is lost when the triangle is facing the camera. This happens because there is no depth buffering, which is used to represent depth information. This is the result after enabling depth buffering (I also changed the background color for better visualization):

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701113527945/2bad65ae-dcf6-4bdf-b0f3-2fbaf5fb921d.gif?auto=compress,format&format=webp align="center")

Later, I learned how to apply a perspective projection matrix. This gives a more realistic sense of depth when representing objects in 3D.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701113757197/e36ecf6e-ee90-4551-a156-a3fdbea91dd0.gif?auto=compress,format&format=webp align="center")

The last task I completed for this project was refactoring the code base to make it easier to add multiple objects to the scene.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701113814147/27fd2603-d7d7-43da-b81e-9b6fec3d4a5a.gif?auto=compress,format&format=webp align="center")

## My Journey into Shaders

### Visual shaders

The first task I did for this project was getting an introduction to visual shaders in the 3 game engines that I'm using

**Unreal Engine**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701114031872/29d5ebc1-6de2-4646-b86c-51f7a7e341f8.png?auto=compress,format&format=webp align="center")

**Unity**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701114053946/d19c2d67-4b69-49ea-bb89-e9e9ab882a14.png?auto=compress,format&format=webp align="center")

**Godot**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701114060836/6a36bfa0-6730-4862-a710-1d30a6fee581.png?auto=compress,format&format=webp align="center")

### Introduction to Shader Art Coding

I completed the [**Introduction to Shader Art Coding tutorial**](https://www.youtube.com/watch?v=f4s1h2YETNY). In this tutorial, I progressively created an animation using different math functions such as sin(), pow(), and exp(). I also completed the shaping functions chapter of [**The Book of Shaders**](https://thebookofshaders.com/) which further expanded the usefulness of having functions for algorithmic drawing.

The first part of the animation was to progressively go from a black-and-white animated spiral to one with a custom color palette.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118100316/6d396fe0-09c6-4ec3-9f4d-274754f239b0.gif?auto=compress,format&format=webp align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118104679/3d432440-6898-4e19-9cff-7de6f1485b1f.gif?auto=compress,format&format=webp align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118108399/cddebe9a-fdba-4ac3-9492-b407d38027a6.gif?auto=compress,format&format=webp align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118111431/3b05af07-6705-445d-9f5a-92fd859faf85.gif?auto=compress,format&format=webp align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118115954/434eb33c-360e-4e65-a0c0-ffb7b04f4ab7.gif?auto=compress,format&format=webp align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118118590/8237272d-bcbd-4ab6-8e79-dcfb25c75d61.gif?auto=compress,format&format=webp align="center")

Then, the spiral was repeated using the fract() function.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118200751/55796186-d57e-4757-9b31-2412daa18a9b.gif?auto=compress,format&format=webp align="center")

By doing this in iterations, the result becomes more interesting.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118613140/79215ace-c1a8-4c9a-b57d-153c44c4451c.gif?auto=compress,format&format=webp align="center")

Then I added the exp() function.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118660211/508a4264-c916-41bc-89b6-3688f6f047f2.gif?auto=compress,format&format=webp align="center")

Finally, I used the pow() function to get the final result.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118688998/ccb77423-88bd-45d2-be99-4a92da795c05.gif?auto=compress,format&format=webp align="center")

Here's the complete shader code I added in Shadertoy:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701118732188/37be58d8-514a-43e3-8f3c-ee3e2ecd42dd.png?auto=compress,format&format=webp align="center")

### Useful resources

The [**Introduction to Shader Art Coding tutorial**](https://www.youtube.com/watch?v=f4s1h2YETNY) and Shaping Functions chapter from [**The Book of Shaders**](https://thebookofshaders.com/) contained a set of useful resources which I'll share with you here:

* [Shadertoy unofficial plugin](https://chromewebstore.google.com/detail/shadertoy-unofficial-plug/ohicbclhdmkhoabobgppffepcopomhgl?pli=1)
    
* [Useful articles by Inigo Quilez](https://iquilezles.org/articles/)
    
* Graph functions in [Graphtoy](https://graphtoy.com/)
    
* Learn more about Shadertoy in the [unofficial WordPress](https://shadertoyunofficial.wordpress.com/)
    
* [Golan Levin's website](http://www.flong.com/)
    
* Articles for [polynomial](http://www.flong.com/archive/texts/code/shapers_poly/), [exponential](http://www.flong.com/archive/texts/code/shapers_exp/), [circular & elliptical](http://www.flong.com/archive/texts/code/shapers_circ/), [bezier and other parametric](http://www.flong.com/archive/texts/code/shapers_bez/) shaping functions
    
* [LYGIA Shader Library](https://lygia.xyz/)
    

## See you next week!

Here are my goals for next week for each project:

* **My Journey into Computer Graphics:** Continue with the tasks of the [**meshes project**](https://graphicscodex.com/projects/meshes/index.html).
    
* **My Journey into OpenGL:** Complete the coordinate systems tutorials in [**LearnOpenGL**](https://learnopengl.com/) and the camera videos in the Udemy course.
    
* **My Journey into Shaders:** Implement the shader from the [**Introduction to Shader Art Coding tutorial**](https://www.youtube.com/watch?v=f4s1h2YETNY) in Unreal, Unity and Godot. I'll also start watching the videos on shader math and functions from [**Ben Cloward's Shader Graph Basics YouTube playlist**](https://www.youtube.com/playlist?list=PL78XDi0TS4lEBWa2Hpzg2SRC5njCcKydl)**.**
    

See you next week!