My Journey into the Fundamentals of Computer Graphics - Part 5: Attack of the Lighting Techniques
Tags: gamedev, learning, computergraphics, mathematics
Published: 2023-09-25 15:19:22

## Overview

Hi everyone! Before we go into the things that I learned this week I want to address some big changes that are happening in this series. First of all, you may have noticed that I changed the name of the series (previously it was called "My Journey into Computer Graphics"). I decided to rename it to "My Journey into the Fundamentals of Computer Graphics" because I believe that it does a better job of explaining the actual contents of this series which is mostly on the fundamental mathematics used in computer graphics. This is just one of several changes coming soon, which I further explain in the "What's next?" section.

Another bit of news, which is completely unrelated to the changes I'm making, is that this series is now being published in the [Technological Singularity](https://medium.com/technological-singularity) publication on Medium. So definitely go check out the other posts in that publication! Anyway, with all the news out of the way, let's get into the things that I learned this week!

## Top 3 things I learned

This week, the top 3 things that I learned came from the last 3 chapters of the [Mathematics for Game Programming and Computer Graphics](https://www.goodreads.com/book/show/66087612) book.

### Intro to shader programming

I got an introduction to shader programming, specifically GLSL and learned about these different types of shaders:

* Fragment
    
* Vertex
    
* Geometry
    
* Compute
    
* Tessellation Evaluation
    
* Tessellation Control
    

Teapot drawn using shaders:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695596081965/336eeb79-9f72-4920-9441-971222018f3c.png?auto=compress,format&format=webp align="center")

Besides, I learned how to calculate the colors of a model using shaders and how to draw them with textures.

Vertex colored teapot:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695596686925/0428bb72-2378-405a-8ac0-0b8dfc9a145f.png?auto=compress,format&format=webp align="center")

Teapot with wall stone texture:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695596698850/9df2dcba-3f6c-47cb-a1a7-d3bf04c6468f.png?auto=compress,format&format=webp align="center")

### Intro to lighting

I got an introduction to lighting concepts and basic lighting calculations. I wasn't able to replicate the expected outcome for the diffuse & the specular calculations (I even opened an [issue](https://github.com/PacktPublishing/Mathematics-for-Game-Programming-and-Computer-Graphics/issues/1) about this in the book's GitHub repository). However, I'll include the images from the book so that you get an idea of what it should look like.

* Ambient lighting: This is lighting that has no apparent source and is used to illuminate an entire scene.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695596841434/e665007d-b8fe-440e-927d-7675c9729413.png?auto=compress,format&format=webp align="center")
    
* Diffuse lighting: Calculated using the normal vectors of the surface and the vector representing the direction of the light source. It injects more depth and shadows into the scene.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695597090362/88c1981a-1051-416d-a8c9-2e599b93046b.png?auto=compress,format&format=webp align="center")
    
* Specular (Phong) lighting: Adds specular highlights to the objects through gloss/shininess based on the direction of the viewer.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695597112939/dea7f673-c760-4c7c-805a-e9243cf1cdf7.png?auto=compress,format&format=webp align="center")
    

### Intro to Physically Based Rendering

I got a very basic introduction to Physically Based Rendering (PBR) which is basically rendering basing the calculations on the actual physics of light. This means also taking into consideration reflections & refractions in the surfaces of objects. For some reason, the output I got doesn't look as the images from the book. However, I'm not familiar enough with these techniques to know what's going on. Hopefully, once I get more experience with lighting, I can come back and see what went wrong. It's important to note that I took the screenshot from a different angle than the example in the book, but it's still very obvious that something's off.

Spheres drawn with PBR:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695597372630/27aedfaa-b2e6-4c08-ad68-e1a7fa510af9.png?auto=compress,format&format=webp align="center")

Expected outcome of spheres drawn with PBR:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695597425416/33b32b3b-baf1-477e-8feb-356fb639f3c5.png?auto=compress,format&format=webp align="center")

## This week's math concepts

This week, I finished reading the chapters that I wanted to cover in [3D Math Primer for Graphics and Game Development](https://gamemath.com/). Here's what I learned:

### Geometric Primitives

I learned some general principles regarding the representation techniques of geometric primitives. I also got an overview of the following geometric primitives:

* Lines & Rays
    
* Spheres & Circles
    
* Bounding Boxes
    
* Planes
    
* Triangles
    
* Polygons
    

### Mathematical Topics from 3D Graphics

I got a high-level overview of the following topics:

* The rendering equation
    
* Mathematics of viewing in 3D
    
* Review of coordinate spaces
    
* Polygon meshes
    
* Texture mapping
    
* Blinn-Phong lighting model
    
* Light sources
    
* Skeletal animation
    
* Bump mapping
    
* The real-time graphics pipeline
    
* Examples of these topics in HLSL
    

## Useful resources

Here's this week's list of useful resources:

* Learn about the [OpenGL Shader Language](https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language)
    
* Learn about [Compute Shaders](https://learnopengl.com/Guest-Articles/2022/Compute-Shaders/Introduction)
    
* Learn about [Tessellation Evaluation Shaders](https://www.khronos.org/opengl/wiki/Tessellation_Evaluation_Shader)
    
* Learn about [Tessellation Control Shaders](https://www.khronos.org/opengl/wiki/Tessellation_Control_Shader)
    
* Learn about [Anti Aliasing](https://learnopengl.com/Advanced-OpenGL/Anti-Aliasing)
    
* Learn more about shaders in [LearnOpenGL](https://learnopengl.com/Getting-started/Shaders) and [Lighthouse3d.com](http://www.lighthouse3d.com/tutorials/glsl-tutorial/)
    
* Check out some [common GLSL functions](https://shaderific.com/glsl/common_functions.html)
    
* Learn about [Pixar's reflectance model](https://graphics.pixar.com/library/ReflectanceModel/)
    
* Learn about the [Scattering of electromagnetic waves from a rough surface](https://pubs.aip.org/aip/jap/article-abstract/49/3/1002/505236/Scattering-of-electromagnetic-waves-from-a-rough?redirectedFrom=fulltext)
    
* Learn about [Geometrical shadowing of a random rough surface](https://ieeexplore.ieee.org/abstract/document/1138991)
    
* Learn about [an Inexpensive BRDF Model for Physically-based Rendering](https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.50.2297&rep=rep1&type=pdf)
    
* Learn more about the [Blinn-Phone reflectance model](https://learnopengl.com/Advanced-Lighting/Advanced-Lighting)
    
* Learn about [Microfacet Models for Refraction through Rough Surfaces](https://www.cs.cornell.edu/~srm/publications/EGSR07-btdf.pdf)
    
* Learn about [Physically Based Rendering in Filament](https://google.github.io/filament/Filament.html)
    
* Learn more about [PBR](https://learnopengl.com/PBR/Theory)
    

## What's next?

After 5 weeks of following my study materials, I can say that I'm barely getting started in learning about the topics that encompass the vast universe of computer graphics. As I mentioned at the beginning of this article, several changes are happening besides a change of name for the series. First of all, this will be the last article in the series that will have the sections and format that I've used so far. The reason behind this is that I already finished the chapters that I wanted to cover from the 2 books that I've been using in this journey.

Another important bit of news is that my next article will be the last in this series. But, what's it going to be about if I just told you that I have finished my current study materials? Well, I have already determined what the next projects of my journey will be. I just have to structure them (and wait for a book I order to arrive) and I'll tell you all the details as well as close off this series in next week's post. Meanwhile, I invite you to tell me if you've ever implemented a lighting technique in a shader!