Blogger Templates

Sunday, September 03, 2017


Graphics I - About Project Setup and Playing with the shader code

Posted in ,
EAE 6320-001 write-ups 

The Why and How I landed with the above gif? I did this part of an assignment which allowed me to learn how visual studio’s project dependencies work across multiple projects. For example, it introduced me to things like property sheets that can be used intuitively to setup the configs across many projects in the same solution. It also introduced me to basic shaders where I learned how to manipulate the vertex and fragments across different platforms(OpenGL and Direct3D) This required a detective work as to identify the project’s references and make corresponding hooks (An ideal thing to do before starting to work on an existing code base).

Getting Ready
When I started this assignment, I had a sample solution where I had no idea of how the dependencies were hooked in. The professor’s notes were very helpful in figuring out where to start and how to start. There will be some challenges in the process of trying to overcome it by googling or through trial and error and every successful solution feels super rewarding. Even the notes from the other students and the professor on the discussion forum saved me some time by pointing me in the right direction.
Initial Setup

As soon as I had the project files ready, I was introduced to the property sheets where I learned how to set the environment variables of the solution directly from a .prop file. I always had a thought that all projects will have its own environment variables and that it could be a hassle to set it for the first time. Now I see property sheets as a centralized way to set the references directly from a file. This way the developer need not worry or spend much time in figuring out environment dependencies. Another interesting thing I got introduced was making platform specific implementations and having it included only in the intended build platforms(i.e, x64 or Win32) This way I don't have to bloat my build size by excluding the unwanted platform specific implementations.

Hooks Made
The most intriguing thing was whenever a linker error hits me during a build process. It would make me investigate all possible information sources starting from nothing. This has happened to me as a result of reference mismatch to a static library or an external library. Based on the linker error details, I would then figure out if it has caused by my embedded Graphics project and then do corresponding references or check the forced file include option in configuration properties for external library reference. For this project, I had to add graphics library reference to the application project because the application was making graphics library function calls whereas the shader builder project just makes a reference to the Graphics::ShaderTypes enum and doesn't do any function calls; this allows the enum to work with just a header file reference and not the actual project library reference.

Fun Time
The fun started right when I started meddling with the shader code. This was the easiest part of the assignment as there was hardly any code changes. I just had to manipulate some values in the high-level shader language code and OpenGL shading language. All I have to do was to pick my intended color from photoshop and get its RGB values. Do a bit of math to normalize each additive color model of the RGB to fall between 0 and 1(Each color model has 0 - 255 variations) It was, even more, fun when I was able to create some color specific animations by getting oscillations(-1 to 1) using sine wave of the simulation time. I applied the same approach for making mods with the vertex code. But rather a hard coding the vertex points, I just relied on using the sinusoidal curve of the simulation time to make a subtle movement. At first, I had trouble trying to get the triangle on the screen so I had to refresh myself with the coordinate system endpoints (-1 to 1) Then the next challenge was trying to understand how the sinusoidal curve could fit my values within the screens normalized range. I had a smooth left and right animations in place by manipulating the triangles x position but the triangle was deforming its shape on the right side. I would like to give credits to Nancy who explained in detail how the sinusoidal curve works on a whiteboard which helped me understand that my logic clamped x value between -1 and 1 at one point and the other base point between 0 and 1. Then all I have to do was to take the absolute value(0 to 1) of the sinusoidal curve and use that as a reference for manipulating x across all points. Now I have a rectangle with a smooth left and right transition. There will be an immediate bounce on the right edge of the screen due to the absolute curve nature.

To see the executable in action, please click the link below. (Executable Specification: x64 Release build, Windows only)

This is just a start to my (sort of)graphics class. I am really interested in learning more about graphics and understanding how the shader works at a low level. This way I feel as a gameplay programmer I would be able to make better decisions when implementing game systems considering how the low-level system work or build my own shader system on the need basis.