#intermediate computer graphics

The year is winding down and tommorow is the last day to hand in homework questions to get XP. Everyone who doesnt have 40 xp is scrambling trying to get that amount so they can write the final exam. Luckly for me I am not one of those people how are scrambling. I currently have 55 XP and I'm happy with that. I'm going to try my best to get 20 more XP to get full marks for homework but we will see what happens because our game is also due in a couple of days. I would be extremely happy if i could hit that but if not that okay. 

So you may ask how I got to 55 XP well... i will explain.

I first thing that was done was toon shading using sobel edge detection and its upgrade to support hatching which i think is really cool looking.

So above is the toon shading with sobel edge applied to an Ambient occlusion texture which gave me 10 XP.

BELOW IS SOME CODE ON HOW TO DO TOON SHADING

#version 120

// 2 varyings

varying vec2 texcoord;

varying vec3 normal;

// 2 uniforms

uniform sampler2D inputImage;

uniform sampler2D qmap;

// 1 constant

const vec3 lightEyeDir = vec3(0,0,1);

void main()

{

vec3 n =  normalize(normal);

//this is our q-map input

float diffuse = max(0.0,dot(n, lightEyeDir));

//alternative lighting coefficient

float blocky = texture2D(qmap, vec2(diffuse, 0.5)).r;

vec3 c = texture2D(inputImage, texcoord).rgb;

//gl_FragColor.rgb = c * diffuse * blocky;

gl_FragData[0].rgb = c * blocky;

gl_FragData[1].rgb = n*0.5+0.5;

}

The next thing i did was object and tangent space normal mapping. This was one of the most interesting homework question for me. I am more of an artist than a programmer and to get a better understanding of how normals work in video game was awesome. Object space is cool with normals maps the are very colorful.

For those who do not know how object space normal mapping is done you must:

sample from a texture (an object space normal map)

uncompress the normal's(this because normals are from 0-1 when we need them to be from -1 to 1

calculate displacement of light from object

normalize that displacement calculation

calculate diffuse

output color + diffuse

Object space is a good technique for static objects but when you have animating objects it is not good. This is where tangent space normal maps come in. Tangent space is similar to object space but the light must be brought into tangent space and uses a TBN matrix(tangent, bitangent and normals). To bring the light into tangent space requires math which is very important and i will explain how to do it. So your normal is already given to you by your map so that is covered but now we need to find your tangent and bitangent. This may seems complicated but its really not too difficult. To find them you get triangle from an object. Each triangle has a U and a V and we can use them to find e1 and e2 which are you tangent and bitangent. 

So you take your U1 - U0 + your V1 - V0 and your U2 - U0 + your V2-V0 and you can get your e1 and e2 which is what you are looking for.

Once you have the information you need the you apply a transpose and your light is in tangent space. This allows you to use maps like this:

and you can get your model to look all bumpy.

So that was another 10 xp and alot with the art question it put me to 55 XP. 

Its almost the end of the regular school year so that means our games are almost due. That being said a couple of days ago my team attended and showcased our game at Game Con. Game Con is event held at UOIT at the end of the winter semester where students in each year in the Game Development program shows there games off. 

We showcased our game of to everyone but yet again people liked the idea but there were still things missing. Getting other students to play our game was awesome but i felt that we should of had our game completely finished by then but that never happened. Anyways we plan on getting the game done before final submission due date anyway. The professors along with the TA came around to check out our game too. The wanted to see our game and the things we have integrated into our game that has been taught by them. Besides our game i must say the other games the other groups had made were awesome. The games that stood out to me for each year were the multiplayer capable first year game(cant remember the name), A case of the mondays for second year, Red Dawn for 3rd year and finally Magic Duel which was a 4th year capstone project.

So last week myself and my group attended LevelUp at the Design Exchange. It was a fantastic experience! This was my second year attending and I must say it was much better than the previous year. The space we had this year was much better and the overall atmosphere i think was alot better. For those who do not know what LevelUp is, LevelUp is an event that has occurred once a year for about 3 years(i believe its has been happening this long but not 100% sure) where students from different University and Colleges in Ontario from various different programs come together to showcase the video game they have made throughout the year. Schools like UOIT, UofT, OCAD, Trios, Brock and others attended this event. The event is open to the public so anyone was able to attend the event and is great for the students. This is because the students can get feedback on their game and allows them to fix issues they may have. Also it is a great for students to showcase their work to people in the industry and has the potential for students to get a job.

Games

There were many games at LevelUp, all different and interesting. These games were made in different ways as well. Some students made their games from scratch(mostly UOIT students) meaning they were not given any utilities to make there games, some made their games in Unity and then there were the few that used really big game engines like UDK and CryEngine to make their games. 

My team showcased our game Beat Dragon. Though our game had its issues which many people pointed out, we got alot of positive reviews for the idea and people seemed to like it alot. We were given a lot of feedback that would make our game better(though most of the feedback we were planning to add in anyway but never got a change to) which was great. Though i really wish we had more to show at levelUp i did enjoy getting people to play my teams game.

I also went around to play other games and man there were some awesome games. You had students who made a game using the CryEngine which I thought was awesome, students who made a multi-player game that was alot of fun as well. The one game that stood out of the most to me was a game called Magic Duel. The game was made by UOIT students using the Kinect SDK and was played using the kinect. I had the most fun with that game and there was alot of interaction. 

Conclusion

So with the year winding down, GDW game almost due, my homework questions have not been looked at as much as i wanted them to. This semester has been flying by which is a good thing and a bad thing. Schools almost done but stuff is due. A majority of the semester i have been spending my time working on my GDW game which has been stressing me out a bit. This is because  beside animations and a couple of levels which a group member has done, i am the art team for our game and we are redoing our game from scratch. So working on our game has been a priority but at same time now i am stressing to get that 40 XP. 

Currently i am at a measly 5 XP for this:

Baking ambient occlusion to a texture. Yes its a start but i still have ways to go if i want to at least hit 40.

FRAMEWORK

This is the most important topic of this blog. The framework for this class is very important and is needed to submit xp. If any first years ever read this I HIGHLY suggest to start right away. Do not wait. This is something i should of started working on from the beginning of the semester. Currently i almost have everything set-up i just need to get FBO's working properly. With my framework the hardest thing to get working was between VBO's and the interactive camera. I spent some time on this and finally got it.

For those who do not know, your framework should have:

Interactive camera

loading models

toggles for different effects

Capable of using VBO's, VAO's, and FBO's

Today in video games global illumination is a prominent effect used to add more realistic light effects in a 3D scene. This type effect requires special algorithms in 3D graphics which take into account indirect illumination and direct illumination with subsequent cases of radiosity (rays of light from the light source which are reflective). It allows any given scene to have a more realistic look instead of looking dull and flat.

When we talk about global illumination, radiosity is prominently used in video games. This form of illumination takes into account reflections, refractions and shadows in a scene as every object affects each other. Radiosity is computationally expensive as it computes the global illumination of the scene and stores information within the geometry. This is typically useful as radiosity is viewport independent but once calculated they are useful for all viewports. Below is an example used in crysis 2 and the difference global illumination has on a scene.

SSAO

The basic occlusion effect used is ambient occlusion. This method is used to simulate the darkening of certain areas of a surface and involves testing each surface and determine how much it has been occluded or sumply block by light by another surface/object. This type was used but people wanted it in real-time. Calculations of such would be very expensive with all the calculations required so Screen Space Ambient occlusion was created.

SSAO is a method used to approximate ambient occlusion in screen space. The method is done by find occluders in a scene and determining the distance. When the distance is calculated you sample around the current pixel and rotate around 45 and 90 degrees and then reflect around a random normal texture. This process give results that allow the scene to "pop" and give it a more realistic look.

Though SSAO is great it is computational heavy and you need to sample constantly from current pixels in the screen space. 

The last two weeks of class we have been discussing depth of field and the effects we can get with it. For those who do not know depth of field is the distance between the nearest and farthest objects in a scene that appear acceptably sharp in an image. 

Depth of field is used in photography all the time and is done very well. In photography depth of field is usually done with powerful camera but such effect is not a easy task on a computer. Depth of field on a computer using shaders is a post-processing effect that can make your scene contain the depth of field effect. 

On a computer depth of field is not as easy to do as using a camera. Computer graphics uses a pinhole camera which displays perfectly sharp images. This is different that real cameras as they have finite dimensions and allow depth of field to occur. 

In the thin lens model there is no focal plane which allows multiple rays to contribute the image.

Implementation(Computer Graphics) 

To implement this one the computer the alpha channel needs to be used to store per-pixel depth and bluriness information. The steps require:

Downsample and pre-blur the image

use variable size filter kernal to approximate circle of confusion

blend between original and pre-blurred image for better image quality

The shader will also need to know the distance of the camera's planes. The focal point- points which are in focus, near plane- everything closer than this is fully blurred and the far plane- everything beyond the far plane is fully blurred. Then we need to map the depth to bluriness. This is done by mapping a point's camera depth to [-1,1] to and then take the absolute value.

With this we can get depth of field effects like this:

To make things look even better we can use alpha blending. This is done in 2 passes. The first pass render only rgb with blending enabled and the second pass render output computed depth blur only to destination alpha.

Conclusion:

This blog is a little different than all my other blogs. It is an progress update on my groups GDW game. This semester we are working a little differently as we are starting over. Well not entirely, we are keeping the same concept and ideas but just redoing the coding and some game play aspects. This comes as my group has changed from last semester to now with the addition of a new member. He is a great programmer and has presented his skills in many ways. One impressive way was he managed to get deferred rendering a few weeks ago. It looks like this at the moment:  

This is awesome and i am very impressed with his work. Anyways back to our game. This semester I am still the lead designer/level designer so i have been hard at working making the levels but i am also doing alot of 2D and 3D art and some programming as well. My group lost a member this semester who was a big contributor to all the art assets so i am picking up the slack. Currently this is the first level i am working on: 

It is almost done just need to add a few more things. 

Along with a new programmer our group also receive another member whom is helping me out with level design and is doing all the animations for our game. I am also impressed with his work as the animations for the characters are awesome!

Last week's lecture was cancelled due to weather so this weeks blog I will be going into a little detail on what we will be learning this week coming up and covering what happened in our last tutorial.

Normal Mapping

So to begin we are going to be learning about normal mapping. Normal mapping in all of its greatest is used to make a simple objects with low polygon count look amazing as if they were very high polygon count(as seen above). It is a technique used for faking the lighting of bumps and dents in an object. This is done by generating a normal map from a high polygon model or height map.

LightMaps

Lightmaps are pre-computed and are normally used for static objects in games. Light maps are very useful when making games. Lightmaps are usually colored texture maps that are flat(as seen above) without information about the light's direction.

So information that i have given on the topics above are very limited because it is difficult to find information that i can understand but i've decided to make it brief and once I've actually been taught hopefully i will have a better understanding and will be able to discuss them in more detail. For now i would like to show what we have done in our tutorial.

So last tutorial we covered colors and how we could make a lot of simple effects in our games just based off color. We were shown how extract color from a scene and make on specific colors stand out as it has been done in such films like sin city. So we first made our scene grey and then applied a redyellowsatmap to get the from red cube to make it stand out. This is shown below:

Another thing was shown was how to give the scene the effect of looking old through the use of sepia. I thought this was a cool effect but would not know where to use it when it comes to making a video game.

The final effect we created in class was one that was created by the TA dan buckstein in which he called "pyschopearl". This effect i though was really cool because it gave the objects in the scene a pearl like effect and it just looks awesome!