Under the Radar: Before and After shading

My game is called Under the Radar, it is a 2012 3D isometric adventure game. Given the limited time and limited experience of our group, the game is the bare minimum in terms of graphics. There was even a problem loading in the graphics we intended due to frame rate issues which did not allow the textures to look as good as intended or the models to move as smoothly as they could. But there is a way to improve upon the in game graphics, not just in the texturing but also the overall atmosphere.

As you can see, due to the camera angle and limited graphics, the perspective lends itself to seem rather flat, however it is more 3 dimensional in the gameplay.

Image

Fortunately shaders can allow us to take relatively primitive graphics and make them more appealing. What I have here is a representation of how shaders could change computer graphics.

Image

I went into the blending options, enabled the gradient overlay to make a light source appear from the left. To strengthen the effect, I added shadows to each object on the screen, in order to make accurate shadows that resemble their original hosts; I copied the image of each object, transformed the shapes to emerge from the bases of each objects’ feet, and darkened the image by turning over the lightness in Hue/Saturation to the darkest possible setting.

As mentioned earlier, the texturing does a huge disservice to the game’s graphics and makes them more dated then they are due to frame rate issues and limited time. So to make it look nicer, I used a craquelure filter to make it look like a more sophisticated stone road and structure.

Simple editing effects in photoshop helped make a flat looking image come to life and allow your sight to feast on wonderful visuals. Shaders are similar in the sense that they use simple effects to make computer graphics more appealing.

Lighting is a vital part of any game. Without lighting, everything would look incredibly flat and have no definition as shown in the screen shot of my game.

I used lighting and shaded the texture differently, this can be done in one go, two birds with one stone, using the ADS lighting model.

The ADS lighting model consists of three kinds of lights, Ambient light which is always present at all points, Diffuse light which is light coming directly from a light source, and Ambient light which is reflected by an object from the light source to give it that shiny looking texture.

Ambient Lighting is simplest one and can be seen as a global brightening factor applied to the geometry lit. Imagine light which comes from no particular location because it has bounced off the surface of objects often you can also say it comes from everywhere. This light is relatively low comparatively. It just makes absolutely dark places a bit brighter.

For example, take a Vertex which has an ambient material color of pure red, if your Ambient Lighting Color is this:

Image

To get the Ambient Color for the Vertex, just multiply these two, component wise:Image

Diffuse lighting is more complex than ambient lighting. Imagine a light source which is at a far away location like the sun. Each light ray is parallel when an object is hit.

Image

The diffuse coefficient is proportional to the input angle of the incoming rays, perpendicular to the vertex it’s value is 1, at 0° or 180° its 0. To get the angle of the incoming ray we would require the vertex normal.

Image

If we take a look at our torus we can clearly see far more details – this time the torus is diffusely lit only:

Image

To calculate the final diffuse color of the vertex, use the following equation:

 Image

The final light type is specular lighting. Imagine something made of glossy plastic. If you look at it, you will see spots reflecting the light. This property leads us to the conclusion that specular lighting is a highly view angle and light position dependent property. Take a look:

So, here we have more properties to take care off:

  • L is the vector from the Light source to the vertex
  • N is the vertex normal
  • R is the reflected incoming Light Ray
  • C is the vector from the vertex to the viewer position
  • The shininess exponent (S), ranging from 0 (maximum reflection) to 128 (no reflection); this one isn’t shown on the graphic

To calculate the Specular coefficient use the following equation:

 Image

In the equation above you need to know the Reflection R, which is calculated by:

 Image

This type of specular light calculation is the so called “Phong” Model (there are others, but this one’s the simplest)

Seems a little bit complicated but GLSL supports us with built-in functions to calculate the reflection of a vector about another one. Last but not least, here’s an image of our torus with just the specular components:

Image

At the end of the day, when all three lights are fused together, this is the final result:

Image

It’s beautiful isn’t it? I hope to achieve this level graphics in the coming months, and hope to apply such techniques to make the nicest possible

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s