Blog 2
Before we proceed
further, an introduction to our
game. It is called Monkey Racers; a racing game situated on a remote volcanic
island with a cartoony and vibrant vibe to it. Here is a screen from
the game.
As the first month of this freezing semester comes to an end, the workload has gradually increased. What awaits us are two hectic months of development. At the very least the winter Olympics are approaching; too bad I don’t have cable.
This week in
INFR2350, we covered post processing effects.
Post
processing effects alter the final image. From a graphics point of view this
means after all the computations of rendering, lighting, shadows and the like.
The outputted 2d image is what would be sent to the screen per frame. Post
processing effects are applied to this image to create some very interesting visual
appearances; these effects of which are akin to Photoshop’s image manipulation.
To apply
these effects, requires mathematical operations to be applied to pixels of the
image. Pixels are multiplied with a matrix to create different effects. This
matrix takes into consideration the values of adjacent and surrounding pixels
to output an altered value for the source pixel. This matrix is called the convolution
matrix or kernel/mask or filter. It is
important to note that the values in the matrix are to be normalized to total a
value of 1.
GIMP, the
free image editor (discount Photoshop) allows for the specification of your own
convolution matrix to apply to an image. This makes it a nifty tool to easily
see how different filters are applied in OpenGL. Using the screenshot from our
game, we take to applying these post processing effects in GIMP.
The simplest
of filters which simple blurs the image with a matrix of 1s is the box filter. A smoother blur that produces less artifacts is the Gaussian blur, which does so using Pascal's triangle distribution.
As it is not prominently visible, if we zoom up close we will notice a greater difference
Another interesting post processing effect is edge detection. Where given an edges in the image are essentially highlighted to appear as those objects have a sort of glow to them. This can commonly be seen in games to guide players to objects of interest. To achieve this effect Sobel filtering can be used. For optimization purposes, rather then a single pass, two passes of the filter are used; the same can be said of Gaussian blur. One pass for each axis (x,y) are used then merged to create the final image.
The image produced from applying the 2 filters, notice how the outline of the fences, and monkey are more noticeable.
One of the major effects seen of late that AAA games have that is commonly a challenge for weaker graphics card is HDR Bloom. HDR stands for high dynamic range, which signifies the range of colors available. Under normal imaging standards, there are 256 colors available per pixel, what HDR does is simulate a much larger range. This is done by modern day cameras by taking pictures of different exposure levels to produce a combined image. The combined image is vibrant with a wide palette of colors, often seen as glowing and bright.
The HDR bloom effect is created in graphics by firstly creating a bright version of the scene, applying a blur filter to it, then combining this image with the original.
With enough previews of the shader effects to add to the game, the challenge is in now implementing them...
 |
| Box Blur |
 |
| Gaussian Blur |
When applied to our screenshot It produces the following image
 |
| Blurred |
As it is not prominently visible, if we zoom up close we will notice a greater difference
 |
| Normal, Box Blur, and Gaussian Blur |
Another interesting post processing effect is edge detection. Where given an edges in the image are essentially highlighted to appear as those objects have a sort of glow to them. This can commonly be seen in games to guide players to objects of interest. To achieve this effect Sobel filtering can be used. For optimization purposes, rather then a single pass, two passes of the filter are used; the same can be said of Gaussian blur. One pass for each axis (x,y) are used then merged to create the final image.
 |
| Sobel filter for X and Y |
One of the major effects seen of late that AAA games have that is commonly a challenge for weaker graphics card is HDR Bloom. HDR stands for high dynamic range, which signifies the range of colors available. Under normal imaging standards, there are 256 colors available per pixel, what HDR does is simulate a much larger range. This is done by modern day cameras by taking pictures of different exposure levels to produce a combined image. The combined image is vibrant with a wide palette of colors, often seen as glowing and bright.
The HDR bloom effect is created in graphics by firstly creating a bright version of the scene, applying a blur filter to it, then combining this image with the original.
 |
| Highlights |
 |
| Highlights + several passes of gaussian blur |
 |
| Final HDR scene with (highlights + blur) + original image |
With enough previews of the shader effects to add to the game, the challenge is in now implementing them...
Hogue, A.
(2014, January 31). Fullscreen effects PostProcessing [PowerPoint slides].
Retrieved from UOIT College
Blackboard site: https://uoit.blackboard.com/
No comments:
Post a Comment