Artist Q1

My new screenshots that I have sown to my teachers for homework were the following images below.


These images are taken from the game my group and I made last semester.

Here is what they look like afterwards. I have applied blurring on the first image on the right. Toon shading on the second image . And bloom on the third.

Relatively you can look at these pictures at first glance and say, "This is the work of Photoshop". However, these screenshots can be done through, the one and only "Shaders".

Yes, shaders can perform these same tasks as Photoshop. But how??? Let me draw up some diagrams and show you.

Toon & Bloom Diagram

In the toon diagram, all of the varyings, positions, and such are going to be passed into the fragment shader. within the fragment shader, all lighting, colour, and position is going to be calculated using the information provided in the vertex shader. Also, there is another shader that can be used and will prove to be very useful.

The edge shader is another type of shader that calculates each pixel relative to its edge or by the extreme differences of the lighting throughout the image. It uses the Sobel_operator in order to implement it.

Here is an example.


float Sobel_Horiz(sampler2D image, vec2 texcoord)
{
vec2 ps= pixelSize;
vec2 offset[6]= vec2[](vec2(-ps.s, -ps.t), vec2( ps.s, -ps.t),
vec2(-ps.s, 0.0), vec2(ps.s, 0.0),
vec2(-ps.s,ps.t),vec2(ps.s, ps.t));

vec3 sum= vec3(0.0);
sum+= -texture2D(image, offset[0]+texcoord).rgb;
sum+= texture2D(image, offset[1]+texcoord).rgb;
sum+= -2.0*texture2D(image, offset[2]+texcoord).rgb;
sum+= 2.0*texture2D(image, offset[3]+texcoord).rgb;
sum+= -texture2D(image, offset[4]+texcoord).rgb;
sum+= texture2D(image, offset[5]+texcoord).rgb;

float lenSq= dot(sum, sum);
return (lenSq< 1.0 ? 1.0: 0.0);

}

Blur Diagram

In gaussian blurring there are two passes. You have to compute the horizontal texcoords and the vertical texcoords. This is why there are two vertex shaders being passed into the fragment shader.