Monday 21 January 2013

Intro to Shaders!

Welcome

The beginning of a new semester comes with new adventures and challenges. This semester there is one class in particular that this blog will be referring to and that is Intermediate Computer Graphics. This class overview is that it will be building off of our introductory computer graphics taken in the previous semester and the topics to be covered will include lighting, advanced shading models, more advanced texturing, shadow algorithms, and programming GPU's. In this class we will be programming in C++ while in conjunction with the OpenGL and 3D computer graphics API. I will be making a blog every week for this course discussing topics in class or anything related to computer graphics.

Onto this weeks first topic! So what everyone else in this course is also blogging about this week is their efforts to try and make their games look awesome with the use of photoshop. The point of this exercise was to demonstrate, with the use of photoshop, how our games could look with the help of shaders. As we were told in class, almost everything you can do to an image in photoshop can be done to a game using OpenGl Shader Language (GLSL).

With this task I took a quick screenshot of my game and made an attempt to visually enhance it with the wonders of photoshop. Here's the original photo of my game Bullet Hell  where the player is fighting for his life on the fourth level of the game. I had the character cloaked because it was near impossible to make a screenshot while playing, plus it gave for a few more effects I could give to the visuals.

Before



So as you can see in this image the game is very flat. The enemies don't have textures and the player is almost impossible to see ( he's to the top right of the blue guys in the bottom left corner). With these in mind I went to work and tried using photoshop to enhance the game screen shot. 

Photoshop History

The first thing I could think of to give this game some depth was to add drop shadows to the player and the enemy ships. This was easily done by cutting out the models in the image and applying a layer style to the layers with the enemies and the player. 

Now I really wanted to see the player while he was cloaked, so what I did was applied a green outer glow to the player's model. This allowed the model to be much more visible and kept the idea that he is cloaked. 

For the enemies I wanted them to have more depth to the actual model. This would be easily done by giving them really well done textures but I wanted to see what could be done simply through the use of photoshop. The way how I did this is that I used a bevel and emboss on the enemies which created a global light to the image making the model itself having depth. I also threw a red outer glow to the enemies as well to give a tint of evil to them. 

When it came to actually giving more dimension to the background, the texture was already pretty good to give an illusion of depth. I wanted to make even more depth to it though so what I did was I changed the level of lighting in the scene which caused darker shadows to the ground's shadows that were already visible. 

Finally I gave the HUD an outer glow to make the interface come up and away slightly from the rest of the objects in the scene. 

After

This is the after effects of photoshop being implemented into the graphics of our game. As you can see below the added changes to the game gives the scene more dimension and pop to the visuals.



Conclusion

The effects I chose to implement to this came from my basic knowledge of what shaders can really do to enhance the visuals in a game. This was an interesting insight into shaders and how they can possibly be seen in our game before they are actually implemented with code. I'm sure by the end of this class I will be able to make this look way better and in future blogs I hope to show updates for the graphics enhancements in the game.