Computer Artwork

Personal Piano Play for the song. Song lyrics:

شو كانت حلوة الليالي

والهوى يبقى ناطرنا

وتجي تلاقيني وياخذنا بعيد

هدير المي والليل

كان عندنا طاحون ع نبع المي

وقدامه ساحات مزروعة في

وجدي كان يطحن للحي

قمح وسهريات

ويبقوا الناس بهالساحات

شي معهن كياس شي عربيات

تهدر غنيات

اه يا سهر الليالي اه يا حلو على بالي

غني اه غني اه غني على الطرقات

ياي ياي ياي يا سهر الليالي

ياي ياي ياي يا حلو على بالي

غني اه غني اه غني على الطرقات

وراحت الايام وشوي شوي

سكت الطاحون عكتف المي

وجدي صار طاحون الذكريات

يطحن شمس وفي

يا سهر الليالي اه يا حلو على بالي

غني اه غني اه غني على الطرقات

ياي ياي ياي يا سهر الليالي

We’re all surrounded with social constructs around us, they define our lives from the moment we’re born, how we grow up, the way we express our first love, to much more details entrenched within our lives. Yet, we evolve. Over many years, we slowly mold our ideologies, the things we’re told, the things we decide to, or not, pass generation after generation. Ultimately, there’s very little chance for something to stand in the face of change.

That's all what GPU code is all about! No for reals, this week I wanted to take a stab at writing a popular example of GPU programs (Rendering clouds) with the goal of ending with an educational code sample hopefully (Probably not). Here're some concepts to start with:

Shaders: This is a fancy name for computer programs written and specialized for the GPU. There're multiple types of shaders, but the one described in the post here is a shader program that would compute for each image pixel the final color value (a.k.a. Raytracing?).

Raymarching: This's a popular technique associated with rendering clouds (a.k.a. volumetric rendering) and it goes like follows: Imagine you shoot a ray in the direction of the pixel you want to compute its final color. since we're dealing with objects that light can penetrate through (Clouds) we compute the color by sampling multiple points along the ray direction, and accumulating their contributions to the final color of the pixel.

Casting shadows: In the example I attached, I simulate casting shadows on the clouds themselves by doing the following: When computing the color of each sample while raymarching, I kickoff another nested raymarching in the direction of the sun. This attempts to compute how much cloud density is in the way in the direction of the sun (i.e. blocking), and based on this reason about how much shadow this sample should receive.

You can find my code and example on shadertoy, Huge shout out to Inigo whose cloud rendering example was a huge inspiration and I reused many pieces of it (Camera setup + Animation + Noise functions for computing cloud density at a given (x, y, z) + Rough code skeleton).

Hope you find the code educational and the rendering output interesting!