SimonDev Shader Course

Over the holiday break I completed a tutorial series on GLSL shaders. Shaders are programs that run on GPU for each pixel on the screen. They are powerful because they run in parallel processing hundreds of thousands of pixels at the same time. All modern real-time graphic applications utilize shader programs. In this tutorial series JavaScript and ThreeJS are used to create the scenes and get user input. With ThreeJS and GLSL one can create complex 3D scenes that run in real-time on any modern web browser. All the concepts I learned in the course, however, are not specific to ThreeJS. Some are even useful outside of programming and computer graphics.

I am going to keep my explanations here short, since my purpose here is to show off some of the interesting results. You can find the tutorial series here https://simondev.teachable.com/. Its a great course and new content is still being released. You can find the code for each project GitHub, if you are interested. (https://github.com/zackthomas1/SimonDevShaderCourse)

Lighting Models

After a few introductory sections the first major concept is lighting models. The instructor teaches two simple, but widely used models, Phong and Lambertian. I have actually learned about these from previous projects as well. They are basically the same except in how they calculate specular reflections. The Lambertian model uses the dot product between the surface normal and the half angle direction, while the Phong model calculates the dot product between the view direction and reflection direction. I also learned more about loading and processing texture maps on the GPU and UV mapping, which is how 2D textures are mapped onto 3D objects. One interesting idea taught is that UV coordinates can be manipulated the same as any 2D vector, which allows one to create a lot of unexpected effects.

The final project in this section was creating a toon shader. Instead of trying to implement physically accurate lighting models the aim is to mimic the look of cartoon and other artistic styles. The toon shader below uses clamping and linear interpolation to create three distinct bands of contrast.

Shaping Functions

Shaping functions are basically algebraic functions, such as exponential, logarithmic, and linear. However, they can be combined together and applied to an objects transform properties to create a variety of interesting animations. These shaping function are the basis for a lot of modern 3D animation. This animation below implements a few functions, I can’t remember which ones, from this website (https://easings.net/).

Shaping functions are highly useful in computer graphics, not just for animation. As you will see in a few other of my projects they can also be used to create color gradients and combine noise patterns.

Sign Distance Functions(SDF)

Sign distance functions (SDF) are a fairly simple concept with a lot of power. Basically, shapes, such as circles and squares, can be defined by functions that are either negative if a point is inside the shape or positive if it is outside. What is really interesting though is that more complex shapes can be created using Boolean logic to union and intersect simpler shapes. For instance, the clouds in the animation below are the union of three spheres. A bunch of SDF can be found on Inigo Quilez’ website (https://iquilezles.org/articles/distfunctions2d/). While I only worked with 2D SDFs, 3D SDFs also exist.

Noise Function

Noise functions have to be one of the most underrated, but useful concepts in computer graphics. They are crucial, since creating realism often involves creating a level of detail that is impossible for a person to create manually by-hand. Noise functions allow one to create an infinite amount of detail procedurally. Its also amazing how many natural phenomenon can be at least roughly modeled by combine and layering noise patterns. Below you will see three examples using noise patterns. The first is a scrolling mountain range animation, the second is an ocean surface animation, and the third is a burning paper animation. All created with procedural noise patterns.

There are two main categories of noise, spatial and gradient noise. Spatial noise linearly interpolates between randomly placed points in space, while gradient noise calculates the dot product between randomly generated normal vectors. One of the most popular types gradient noise is known as Perlin Noise, which is named after computer scientist Ken Perlin. All three of the projects from this section apply Perlin noise.

An important concept for creating useful noise patterns is fractional Brownian motion (fBm). While I do not have a strong understand of fBm the basic concept, in my mind, is to combine noise functions together in a way that is continuous and does not grow infinitely.

Conclusion

All of these topics deserve much more discussion. In the future I am interested in creating a 3D terrain generation program. It would be a good way to combine together concepts I have learned in this course to create a more practical application.