In The Depth of the Field

This blog post is about and effect that allows to create a more realistic look to a rendered scene. Truthfully the effect can be used in both photo-realistic graphics and non-photo realistic graphics alike, I guess a better way of putting it is that it helps create a more believable world blurring a certain degree depending on the distance they are from the target object or camera.

Now depth of field can be achieved in two ways one way is the use the distances of the nearest and the farthest parts of an object and feed them into a fragment shader and anything within that range of distance stays on focus but anything outside of it is blurred. The other way is to calculate the blur radius of the camera with some camera properties such as focal length and focal stop. This is the method I am going to explain.

The first thing we do is calculate the how much an object is blurred depending on the distance the object is from the camera. This can be done using the blur disc diameter equation

Focal length(magnification)  distance                                                                              = blur

Focal stop                          distance of object +/- the distance of object from fragment 

Now the pixels/millimeter needs to be calculated. After that we blur, we can do this by separating bur into two passes one for blurring all the pixels horizontally and the other is for all the pixels vertically (aka box blur). When done we combine it all together, the blurred scene we just did and the regularly rendered scene so that the highly blurry parts blends with the really low resolution parts (as defined by the blur-disc equation) and the highly defined parts blend with the high resolution parts (again, as defined by the equation).

Source
http://devmaster.net/posts/3021/shader-effects-depth-of-field

A Bloom by any other name would smells as sweet

So this blog, as mentioned in the title, is about an effect that has made games look so, so, so sweet. And that effect is bloom. Now back in the day, when I was a kid there were no fancy shaders like bloom to make things look awesome. When you played games you played them with harsh edges, blocky models, and everything was rendered EXACTLY how it was originally, and you liked it. But today shaders are everywhere in games, you can't imagine games without them anymore and one of the most used effect is bloom. Bloom is an effect that, essentially, blurs an area of a model or a model itself that is emitting or reflecting, or generally sending light into the camera so that it gives the lights are softer and brighter look.

So how is this done, well the first part is to know that bloom has 2 main parts, one is the creation of something called a glowmap. A glowmap is just a texture used to map the parts of the scene which will emit light. Remember to disable the colour writes then draw all the non-lighting stuff to the frame buffer object. The GPU will write the depth values to the FBO. The other part of bloom is the enabling of the colour writes again and drawing of all the glowing parts of the scene. So to reiterate, to create bloom render the glowmap then blur it using a Gaussian blur. Once this is done blend it the rendered scene using additive blending. This matches the edited scene perfectly as I used semitransparent layers coloured white to increase the brightness of the colours.














Sources

http://devmaster.net/posts/3100/shader-effects-glow-bloom

It's Could Be Motion Bur, Or You Could Just Be Drunk

You stagger forward through the dark alleys of some dirty, polluted city. You should not have had that drinking contest with that russian at the pub but the look on his face as he passed out was priceless. Your vision beings to blur, each movement of everything you see blending with the next. You wonder what is happening; its simple, its called being drunk. Now when this happens to a character in a videogame its called motion blur. There are a few ways of creating motion blur such as through the accumulation buffer or through the use of per-pixel motion vectors. I will be briefly going over both.

First let us go over the accumulation buffer method of creating motion blur. Firstly what is the accumulation buffer? the accumulation buffer is essentially a feature of Opengl that stores images from the draw buffer (the draw buffer takes in images in whatever perspective the user is currently set to). But the thing about the accumulation buffer is that it takes the images it got from the draw buffer  multiplies them by a decay value (the decay value is how much of the image or frame is left visible) before inputting them into the current draw buffer. So when the scene is finally drawn on the computer screen you see multiple frames at once but with varying opacity. This method is easy to implement but presents an unrefined look. 

Per-pixel motion vectors on the other hand give a much more smoother blur as oppose the accumulation buffer. How it does this is that it first uses a pixel shader with values taken from the depth buffer to calculate the location of each pixel in a scene relative to the world and in alignment with the view-projection matrix presently being used. Now the difference in pixel positions from the previous frame and the current frame is calculated to give a vector, a per-pixel velocity vector. This can be used to accumulate samples from the frame buffer which are then averaged to create the blur. 

References

http://http.developer.nvidia.com/GPUGems3/gpugems3_ch27.html

http://www.cse.msu.edu/~cse872/tutorial5.html

We're wacky! We're loony! We are all a little toony!

This time around I am going to talk about a really cool effect that will leave you flattened like an anvil got dropped on your head by a pesky rabbit. In this entry I am going to discuss toon shading. But what is toon shading you ask? Toon shading is and effect that can be applied to a rendered scene to give it a cartoon look. Characterized by thick lines and non-smooth shadows as seen in the following image.

So, how do we do this. Well, first thing you have to know is that there are actually 2 effects happening on the screen, one is called cell-shading, the other is called a sobel filter. We will cover how both work.

First up is cell-shading. As can be seen previously, in the image above, cell-shading is responsible for the layered or "blocky" shadows in the scene.


To do this, two shaders are needed a fragment shader and a vertex shader as well as the position where the light is coming from. The fragment shader requires four variables in order to function properly, the texture coordinates, the information on the normals, and two uniform variables for the input image and the qmap. For our purposes, the qmap is simply a grey scale from white to black.  The vertex shader on the other hand only requires the texture coordinates, the information on the normals, and vertex positions. This shader will inform the fragment shader where to draw the shadows and what shade they should be. 
 

Now that we have these shaders we normalize the vectors and create the calculations for the qmap which first needs a diffuse calculation which helps in calculating the shadows of the scene, after this the maximum of either the zero or the dot product of the normalized vector and the vector for the direction of the light. These calculations are then used to calculate the shadows which are displayed as layers of gradient as oppose to a smooth transition from light to dark. Lastly, the texture 2D data of the input image and the texture coordinates are stored in a vector. This vector is then multiplied by the results of the shadow calculations which creates the toon shadows. 

The thick lines of the image are created using the sobel filter which filters the normals to create an edge texture that creates black lines around the edges of the models but leaves the rest white. To start define a kernel to calculate the edge detection so that both the horizontal and the vertical edges of the models are detected. The sobel filter will take in the x and y image coordinates and the image data. Now the pixel size and sum vector for the sum of location of the kernel and the texture data. Now the dot product of the sum by itself is taken and returned if the result is lower than 1 otherwise zero is returned. 

Now the put the shading and the lines together simply multiply them together to generate the finished toon shader.

Power Of The Dark Side

 I dance around flame
But am never burned

I am as quick as light 
but can never out run you

I take form in day
But am colour of night

What am I?

Seriously, if you answered anything other than a ****** (answer is below) I am sorely disappointed. So, for those who got the riddle this blog entry is about ****** mapping, essentially a way of creating ******s.

OK so the first step to ****** mapping is to create something called a depthmap which is essentially a texture that holds all the distances from a light source to all the vectors in a scene. The depthmap can be made by rendering the scene from the light’s perspective and take in the distances of all the vectors of all the objects in the scene to have ******s from the light source. Now that the depthmap has been created render the scene from the camera’s perspective. Now use a fragment shader to do calculations for lighting. Now determine if a fragment is cast in ****** by using the vertices from the light’s perspective. This can be done by determining if a fragment is a greater distance from the light source than is recorded in the depthmap, if so then it is cast in ****** otherwise it is lit as normal.

Answer: SHADOW

Sources
http://devmaster.net/posts/3002/shader-effects-shadow-mapping

The Snow has Buried My Mind and Froze My Soul

In other words, I have no idea what to write about. With the weather draining out all my mental and physical energy I am at a loss at thinking of a meaningful topic to write about. So I am going to write about a game I purchased and played (for research purposes, of course) called Thief Gold, developed by Looking Glass Studios. The game is one of, if not the first, first person game that revolved around stealth. Before this,  first person games were essentially shooters (FPSs). This game threw the whole notion running and gunning thing out the window and instead focused on the fact that a good thief should be able to get into any place, rob them blind, and get out without even being seen. Personally, I love stealth games like this, spending hours  crouching in shadows timing the patrols of guards, swearing under your breath the moment a guard so much as breaths in your direction, and crapping your pants when he starts moving in your direction. The game came out years ago for PC, and by years I mean 1999. Though despite its age, it made a great use of shaders, mainly lights and shadows but they really enhanced the atmosphere. Which was very much needed given the quality of graphics at the time.

Now, this would be the part in the blog where I put screenshots of the game and talk a little bit of whats happening in the shots. But unfortunately the game doesn't seem to want to cooperate ( in other words it wont let me print screen). Which is really unfortunate because there was one happening that I really wanted to show. In my quest to obtain screenshots of the shaders used in the game, I had unwittingly woken up a zombie, but because I was hidden in the shadows it did not attack me but instead attacked a nearby guard. The guard immediately tried to defend himself but couldn't because his weapon kept hitting the wall. Oh the AI of that time, creating hilarious happenings around every turn. So as consolation I have drawn you all a happy face! May it bring you warmth in these cold times! Till next time! Laters!

Lights! Camera! Action! and Shaders!

Last week we were introduced to basic lighting and shading techniques such as the use of Phong and Blinn equations. Lighting and shading has been essential to fully expressing the vision of the designer creating vastly different moods from the same model or level with a simple change in lighting, immersing the player deeper into the world which you created.

Modern techniques mainly use 3 kinds of lighting/shading ambient, specular and diffuse that when combined create a realistic interpretations of real life lights and shadows.

Within the game Guild Wars 2 it is possible manipulate the level of shading within the game for purposes such as for improved computer performance or personal preference.

As can be seen in the image above there is no shading on any of the character within the scene but the buildings possess some diffused shading.

Where in this image all characters and buildings posses very clean well defines shadows. Here the developers use multiple passes to create these dynamic shadows, first from  the light's perspective and the second from the camera's perspective.