*UPDATED* The Shader Thread [CelShading + Bleach Bypass PP + Cross Processing PP]

[seenooh]

------------------------------------------------------------------------
Update: Added at the end Bleach Bypass post process effect
Update: Added Cross Processing Post Process effect at page 4.
------------------------------------------------------------------------

Greetings all,

Introduction

One of the most challenging things I personally have faced with learning the UDK (apart from Unrealscript) is porting nice shaders I see around in the internet to the UDK. I started practicing couple of days back and achieved quite good results. The aim of this tutorial is not just showing how to implement toon shading, but rather learning how to port a shader to the material editor so when you come across some nice shader and the source is available, you should be able to have it as an asset.

Also note that not every shader is portable to the material editor. It has to be compatible with SM3.

The Shader

I'm going to present a snippet from the HLSL shader that we'll work with. For the purposes of this tutorial, we are only interested in the pixel shader which basically has what we want.

float4 PixelShader(float2 Tex: TEXCOORD0,float3 L: TEXCOORD1, float3 N: TEXCOORD2) : COLOR
{
	// Calculate normal diffuse light but use Tex.x as color in stead.
	float4 Color = tex2D(ColorMapSampler, Tex);	
	float Ai = 0.8f;
	float4 Ac = float4(0.075, 0.075, 0.2, 1.0);
	float Di = 1.0f;
	float4 Dc = float4(1.0, 1.0, 1.0, 1.0);
	
	Tex.y = 0.0f;
	Tex.x = saturate(dot(L, N));
	
	float4 CelColor = tex2D(CelMapSampler, Tex);	
	
	return (Ai*Ac*Color)+(Color*Di*CelColor);
}

First, we need to understand few things that will be seen alot when working with shaders such as:

1- L is the Light Vector
2- N is usually the surface normal (normal map) unless stated otherwise.
3- Tex is the UV coordinates of a texture.
4- tex2D(Sampler, Tex): Think of this as a Texture Sample node where Sampler is the texture and Tex is the UV input in the back.
5- V is usually the view vector (camera vector) unless stated otherwise.
6- Saturate() is a function which clamps between 0,1. Exactly like the Clamp node.

It is very important to understand what each variable means/refers to. For example, I didn't how to "translate" Saturate() to the material editor's "language". After quick research I found that it's the Clamp node. Once the picture is clear to you, you can start the porting process. Let's analyze the above segment by segment:

float4 Color = tex2D(ColorMapSampler, Tex);

Create a Texture Sample node containing the color map texture (Diffuse).

float Ai = 0.8f;
float4 Ac = float4(0.075, 0.075, 0.2, 1.0);
float Di = 1.0f;
float4 Dc = float4(1.0, 1.0, 1.0, 1.0);

Create 2 constants, Ai, and Di and assign them with the values you see above. Create another couple of 3d-constants and assign their respective values. I tried creating 4d-constants, but it gave me arithmetic errors while doing the calculations because of the 4th channel. So I resolved this by using 3d-constants only. Try to mimic the code as much as possible, or find alternatives. If it looks fine, then you're safe.

Tex.y = 0.0f;
Tex.x = saturate(dot(L, N));

Create a Light Vector, Texture Sample (having the normal map), and plug them to a DotProduct node. Connect the output to a Clamp node. (1)

Create a constant and assign it to zero. (2)

Create an Append vector and connect (1) and (2) to it. (3)

Create a TextureCoordinate node, plug it to a Multiply node. Use (3) to connect it with the same Multiply node. Connect the output to the input of the cel sampler texture.

What I did here is basically is calculate whatever the Saturate function has, and appended it to a zero value to represent a 2-d vector which should be assigned as a texture coordinate to the cel sampler texture. Now all you have to do is multiply this vector with a TextCoord having both U and V set to 1.0. TextCoord doesn't have an input, so I had to do it this way in order to modify the UV values according to whatever I want and avoid hardcoding.

float4 CelColor = tex2D(CelMapSampler, Tex);

Create a TextureSample node having this:



This is the Cel Sampler. If you want to know why this texture is used, please refer to my references. Download it from the attachments.

return (Ai*Ac*Color)+(Color*Di*CelColor);

Last step. Multiply the constants on the left with the diffuse texture. Then add it up to Diffiuse X Di X Image Provided. Pretty straightforward.

Connect the final output to "Custom Lighting" and again to "Custom Lighting Diffuse". Make sure that you set the Lighting Model in the properties to MLM_Custom. Other minor stuff need to be done, all illustrated here along with everything we've done so far:



You can mess around with the values in the constants. In the above, I set the Di to a value of 10 and it felt right to me. Suit yourself.

Bonus: Edge Detection

Edge detection is a nice way to spice up your toon-shaded scene. I found a nice tutorial that shows how to do that as a post process effect, did some very small modifications and the outcome was good. Create a new material having this:





You need to plug this material in a postprocess chain to be able to view it. You can make a copy from the default one, assign the material in the Material Effect node, check "Show in Editor" for testing. In the World Properties, find an option named "World Post process chain" (or something similar) and assign it with the copy you created.


Play with the constants in the shader and check out how it looks.

Results

A BSP cube and some UDK stock content to put some love on:



Built with Lightmass.

Conclusion

I hope you guys find this useful. If you have/saw any shaders with source code, post them here and let's all learn how to port to UDK. This would be a good practice. If this tutorial helped you doing some nice shaders, post pics and show us your work.

Have fun.

References

1- Petri Wilhelmsen's Toon Shading Tutorial for XNA

2- Dave Prout's Edge Detection Tutorial

-----------------
* NEW *
-----------------

Exercise: Bleach Bypass Post-Process Effect

Opacity in the above set to 0.8

Analyze the following HLSL code segment (source):

float4 bypassPS(QuadVertexOutput IN, uniform sampler2D SceneSampler) : COLOR {   
 
float4 base = tex2D(SceneSampler, IN.UV);
     float3 lumCoeff = float3(0.25,0.65,0.1);
     float lum = dot(lumCoeff,base.rgb);
     float3 blend = lum.rrr; 
    float L = min(1,max(0,10*(lum- 0.45)));
     float3 result1 = 2.0f * base.rgb * blend; 
    float3 result2 = 1.0f - 2.0f*(1.0f-blend)*(1.0f-base.rgb);
     float3 newColor = lerp(result1,result2,L); 
    float A2 = Opacity * base.a;
     float3 mixRGB = A2 * newColor.rgb; 
    mixRGB += ((1.0f-A2) * base.rgb); 
    return float4(mixRGB,base.a);
 }

Port the above to the material editor, and since this is a post process effect, don't forget to:

0. DO NOT forget to tick that damn checkbox in all SceneTexture nodes. (It'll make you bang your head on the keyboard)
1. Set the Blend Mode to Transluecent
2. Set the Lighting Model to Unlit.
3. Connect the final node to the Emmisive channel.
4- Use the material in a post-process chain in order to test this.

Answer: (If you are too lazy to try doing it yourself)



Create a material instance out of that and play with the Opacity parameter (0 to 1).

I hope you find this useful and wish to see some of you guys trying out porting nice shaders to UDK.

[jorewe]

Very nice tutorial!

I know that there is a "special" node for hlsl code in the material editor, any chance a shader with looping conditions would fit in there?

[seenooh]

Very nice tutorial!

I know that there is a "special" node for hlsl code in the material editor, any chance a shader with looping conditions would fit in there?

Edit: Ops! Misread that (thought you meant the view HLSL code button)... Anyways, thanks for telling me, I'll definately have a look at it.

[Whitenorthstar]

So, was this one resolved, does UDK's material editor accept standard HLSL code?

[seenooh]

So, was this one resolved, does UDK's material editor accept standard HLSL code?

Yes, there is a "Custom" node where you can type in HLSL code. If there are parts in the shader that contain loops for example, you can do them in a Custom node and connect the output to the rest of your network.

[glra2222]

Hey, I'm just wondering how I would be able to translate this hlsl code into the material editor:

f2s main_frag_parallax(
	v2f IN,
	uniform sampler2D rmtex:TEXUNIT0,		// relief map
	uniform sampler2D colortex:TEXUNIT1,	// color map
	uniform float4 ambient,		// ambient color
	uniform float4 diffuse,		// diffuse color
	uniform float4 specular,	// specular color
	uniform float tile)			// tile factor
{
	f2s OUT;

	  // view and light directions
	float3 v = normalize(IN.vpos);
	float3 l = normalize(IN.lightpos.xyz-IN.vpos);

	float2 uv = IN.texcoord*tile;

	// parallax code
	float3x3 tbn = float3x3(IN.tangent,IN.binormal,IN.normal);
	float height = tex2D(rmtex,uv).w * 0.06 - 0.03;
	uv += height * mul(tbn,v).xy;

	// normal map
	float4 normal=tex2D(rmtex,uv);
	normal.xyz=normal.xyz*2.0-1.0; // trafsform to [-1,1] range

	// transform normal to world space
	normal.xyz=normalize(normal.x*IN.tangent+normal.y*IN.binormal+normal.z*IN.normal);

	// color map
	float4 color=tex2D(colortex,uv);

	// compute diffuse and specular terms
	float att=saturate(dot(l,IN.normal.xyz));
	float diff=saturate(dot(l,normal.xyz));
	float spec=saturate(dot(normalize(l-v),normal.xyz));

	// compute final color
	float4 finalcolor;
	finalcolor.xyz=ambient.xyz*color.xyz+
	  att*(color.xyz*diffuse.xyz*diff+specular.xyz*pow(spec,specular.w));
	finalcolor.w=1.0;

	OUT.color=finalcolor;

	return OUT;
}

The problem I'm having is that if I place it straight into the Custom node and make an input for each input referenced, it doesn't recognize the f2s and v2f.

What format should I put this in and what should I replace IN with?

[glra2222]

okay, so I've figured out that I can do something like:

float4 normal=tex2D(rmtex,uv);
normal.xyz=normal.xyz*2.0-1.0; // transform to [-1,1] range
return normal;

and connect the custom texture to an input called 'rmtex' and texturecoordinates to 'uv'.

however, if I do something like:

float3x3 tbn = float3x3(rmtex.tangent,rmtex.binormal,rmtex.normal );
return tbn;

I get 'error X3018 invalid subscript 'tangent'.

[seenooh]

First of all, you should use the Custom node when you are sure 100% that the expression you are trying to work with is not supported by a native node.

If you notice here in the comment:

// transform normal to world space
	normal.xyz=normalize(normal.x*IN.tangent+normal.y*IN.binormal+normal.z*IN.normal);

There is a node in the material editor that does that calculation for you. It's called the Transform node. Whenever you get stuck always refer to that useful reference. In most cases you will find what you are looking for. Study all nodes carefully.

Hope that helps.

[glra2222]

First of all, you should use the Custom node when you are sure 100% that the expression you are trying to work with is not supported by a native node.

There is a node in the material editor that does that calculation for you. It's called the Transform node. Whenever you get stuck always refer to that useful reference. In most cases you will find what you are looking for. Study all nodes carefully.

Hope that helps.

Thank you. That really helps a lot.
I've been working on translating hlsl code so that it can be used in the custom node but I am now planning to learn how to translate the code into material editor nodes, because according to udn website, they said it can reduce the number of instructions.

So far, I have made some progress:

IN.eye = CameraVector
IN.texcoord = TexCoord
I think IN.light = LightVector
tex2D is a TextureSample
float, float2, float3, etc are the constant vector nodes that you can define.

I'm still not sure how to define something like "length(CameraVector.xy)" as a node. Would it be a Mask RG connected to the CameraVector?

I sort of understand now how the shader works in the program. something like struct a2v at the start of a code means these are declared variables of the application (a2v = application to vertex shader). after that is a line in the code a2v IN - which is similar to something like float variable - with IN being the variable name given to the input program. So when they have something like IN.eye, its just a declaration telling the vertex shader to detect a cameravector connected to an input on the custom node.

Now I've run into a problem of figuring out how to get an input of float4 vertex, float4 tangent and float3 normal using the material expressions provided.

[EFF]

As far as I see, the code you provided can be made using only material expression nodes. Try playing with BumpOffset. This is Epic's implementation of parallax mapping.

[seenooh]

I'm still not sure how to define something like "length(CameraVector.xy)" as a node. Would it be a Mask RG connected to the CameraVector?

First you need to mask the x and y, then plug the output to an input "A" in the Distance node. In the other input "B" connect a (0,0) constant.

Now I've run into a problem of figuring out how to get an input of float4 vertex, float4 tangent and float3 normal using the material expressions provided.

I didn't get you here, could you please explain more?

[seenooh]

As far as I see, the code you provided can be made using only material expression nodes. Try playing with BumpOffset. This is Epic's implementation of parallax mapping.

That's true, but it's still a good idea to practice porting shaders to the material editor. All the nice shaders we see around are nothing more than 45% research on shader papers, 50% porting, and 5% of minor modifications.

[glra2222]

First you need to mask the x and y, then plug the output to an input "A" in the Distance node. In the other input "B" connect a (0,0) constant.

Thanks for that, I understand now.

[QUOTE=I didn't get you here, could you please explain more?[/QUOTE]

In some shader codes I have come across, they have IN.vertex and IN.tangent. These are declared at the start as both constant 4 vectors.
I'm not sure about what material expressions would input as a vertex, but I think the tangent might be ScreenPos expression.

[seenooh]

Thanks for that, I understand now.



In some shader codes I have come across, they have IN.vertex and IN.tangent. These are declared at the start as both constant 4 vectors.
I'm not sure about what material expressions would input as a vertex, but I think the tangent might be ScreenPos expression.

Oh yes, actually I'm not sure about the ScreenPos, I always wanted to ask this in the forums and I forget. But usually, I try to figure out what the code is trying to do with these IN.whatever stuff. In most cases I find nodes that do the job.

I'd be thankful if someone can confirm what ScreenPos represents in terms of input variables, i.e. tangent whatever...

[glra2222]

Yep, I'm pretty sure the tangent is ScreenPos. If you look at my post on this other thread:

http://forums.epicgames.com/showthre...=745030&page=6

You should see how I set it up. When I added ScreenPos and did Screen Align, it completes the parallax occlusion effect.

[seenooh]

Yep, I'm pretty sure the tangent is ScreenPos. If you look at my post on this other thread:

http://forums.epicgames.com/showthre...=745030&page=6

You should see how I set it up. When I added ScreenPos and did Screen Align, it completes the parallax occlusion effect.

So ScreenPos is the tangent, any idea what the IN.binormal and IN.normal are?

I'm glad that my tutorial helped you. I would suggest though that you don't encapsulate the whole thing in a custom node, but rather make 2 custom nodes having the for loops, and everything else outside. I believe this will improve your performance and instruction count. Give it a shot and tell us how it goes with you.

[glra2222]

So ScreenPos is the tangent, any idea what the IN.binormal and IN.normal are?

Actually, sorry about that - I just tested out the code without ScreenPos and it seems that I may have been wrong. I replaced ScreenPos with 1 and it didn't make a difference - the only reason I thought it was ScreenPos was because when I didn't turn on Screen Align it messed up the texture.

From most of the ported codes that I have seen so far, tangent, normal and binormal all seem to already be implemented by the udk engine, so do not need to be used.

[glra2222]

So it turns out that I actually do need to know how to obtain In.tangent and In.binormal in order to correctly get silhouettes in my relief mapping. From what I've tried to read so far, these are both 4 dimensional vectors, with tangent being the horizontal vector that is parallel to the face of the texture (and perpendicular to the normal) and binormal/bitangent is just the vertical version of that vector.

The CameraVector or 'view' vector seems to be the 3 channel vector made up of [tangent vector, binormal vector, normal vector]. This seems to make sense according to this code:

float3 view = normalize(IN.vpos.xyz);

// view vector in tangent space

float3 v = normalize(float3(dot(view,IN.tangent.xyz), dot(view,IN.binormal.xyz), dot(-view,IN.normal)));

however, there is also code like this:

// mapping scale from object to texture space
float3 mapping=float3(tile/IN.tangent.w,tile/IN.binormal.w,1.0/depth);

I am confused as to what the fourth dimension *.w is. From the definition of a vector, xyz defines the direction in 3d space, so would w be the length? in other words would IN.tangent.w in fact be the Distance of the CameraVector masked at yz to the object coordinates? with the object being at (0,0,0)?

[seenooh]

Regarding the camera vector, that is incorrect actually. It is the direction of the view. The first code above shows transforming the view/camera vector to tangent space, however in the material editor that is unnecessary because all vectors in it are already in the tangent space, so you can skip that step.

After some quick research in the material reference, I came to know that to get the IN.tangent, you create a constant (1,0,0) and connect it to a Transform node. Similarly for IN.binormal, but use (0,1,0) instead and (0,0,1) for IN.normal.

As for the .w thing, it's a fourth channel. In the material editor it is equivalent to the alpha channel RGBA. You can safely set it to 1.

Hope that helps.

[seenooh]

I ported the relief mapping shader you provided to UDK, here's a screenshot



I will post the shader network sometime later. The heightmap provided will do the opposite of what it should do because in UDK the brighter the pixel the higher it will appear, and it seems it was done that way to work with the engine he uses. A quick fix to this is inverting the heightmap, but I will not include it in the shader because the artist should do it.

[glra2222]

After some quick research in the material reference, I came to know that to get the IN.tangent, you create a constant (1,0,0) and connect it to a Transform node. Similarly for IN.binormal, but use (0,1,0) instead and (0,0,1) for IN.normal.

Thanks, I think I understand now. So float3 v is the camera in tangent space, which is by default in the material editor. IN.tangent is the tangent vector in World Space - which can be done with the transform node.

I had a feeling there was something wrong with the rockbump texture I had used - I made mine really steep and it looked like spikes, but at the same time - with specular turned on, it had the illusion that the rocks were the other way around.

The code that I included apparently includes silhouettes, but I still can't figure out what I am doing wrong. Its possible that the height map being reversed like you said, is causing this problem.

{
	float3 r=v*t;
	r.z-=t*t*dataz;
	r.xy+=tx;
	return r;
}

note that tx is the texture, v is the view vector in Texture Space:

	// transform view and quadric data to texture space
	v*=mapping;
	dataz*=mapping.z;

dataz is:

	// quadric constants
	float dataz=IN.curvature.x*v.x*v.x+IN.curvature.y*v.y*v.y; 
	dataz=sign(dataz)*max(abs(dataz),0.001);

(btw, apparently there was a mistake in the code (originally v.z*v.z is supposed to be v.y*v.y))

I found the source of the code:

'Advanced game development with programmable graphics hardware' by Alan Watt and Fabio Policarpo. Pg. 152.

http://books.google.com.au/books?id=...page&q&f=false

[seenooh]

As promised, here's the shader network for the code provided:




There are quite few things that can be applied to optimize the material and decrease the instruction count as well as adding a nice silhouette. I'll do that and share it in this thread.

I hope this helps someone to better understand the process of porting shaders to UDK.

[seenooh]

glra2222,

Try to invert the heightmap before you use it. Use the OneMinus node (1 - x).

[seenooh]

The optimized version:



What I did here is removing the entire specular calculation part, and used the alpha channel of the diffuse map as the spec map. I also removed the diffuse lighting calculation, because since I'm using the Phong model already, I just kept what is relevant to the height simulation thing. Lastly I removed the attenuation calculation because it didn't look so nice, which is not worth increasing the instruction count for.

The normal map here helps to give a nice silhouette, which is controlled by the Normal Intensity parameter. 0.5 for both x and y seemed nice to me.

It is worth to mention though that this shader is a little bit cheaper than the bumpoffset, and nicer-looking with the shadows going on.

[Kaldrick]

@up
How hardcore can it get, 'til it produces artifacts? Would it look as badass as real parallax or relief mapping?

[seenooh]

It is very much similar to the bumpoffset effect.

[roosterMAP]

Amazing tut. I was just wondering, how do you know which park of the hlsl code is relevant to what u wanna do? I looked up some other hlsl shaders, and they're massive! How were you able to isolate that tiny segment of code?

[seenooh]

In 90% of cases you basically look for the part which concerns "Pixel Shader" or "Fragment Shader".

[roosterMAP]

im having trouble with my shader, but i dont know how to take a pic of my material in the editor. Is there a fast way of doing it? its kinda big.

[roosterMAP]

Having much trouble with my toon shadow shader.

// For two-pass blur, we have chosen to do  the horizontal blur FIRST. The
//	vertical pass includes a post-blur scale factor.

// Relative filter weights indexed by distance from "home" texel
//    This set for 9-texel sampling
#define WT9_0 1.0
#define WT9_1 0.8
#define WT9_2 0.6
#define WT9_3 0.4
#define WT9_4 0.2

// Alt pattern -- try your own!
// #define WT9_0 0.1
// #define WT9_1 0.2
// #define WT9_2 3.0
// #define WT9_3 1.0
// #define WT9_4 0.4

#define WT9_NORMALIZE (WT9_0+2.0*(WT9_1+WT9_2+WT9_3+WT9_4))

float4 PS_Blur_Horizontal_9tap(VS_OUTPUT_BLUR IN) : COLOR
{   
    float4 OutCol = tex2D(NormalSamp, IN.TexCoord0) * (WT9_1/WT9_NORMALIZE);
-    OutCol += tex2D(NormalSamp, IN.TexCoord1) * (WT9_2/WT9_NORMALIZE);
-    OutCol += tex2D(NormalSamp, IN.TexCoord2) * (WT9_3/WT9_NORMALIZE);
-    OutCol += tex2D(NormalSamp, IN.TexCoord3) * (WT9_4/WT9_NORMALIZE);
-    OutCol += tex2D(NormalSamp, IN.TexCoord4) * (WT9_0/WT9_NORMALIZE);
    OutCol += tex2D(NormalSamp, IN.TexCoord5) * (WT9_1/WT9_NORMALIZE);
    OutCol += tex2D(NormalSamp, IN.TexCoord6) * (WT9_2/WT9_NORMALIZE);
    OutCol += tex2D(NormalSamp, IN.TexCoord7) * (WT9_3/WT9_NORMALIZE);
    OutCol += tex2D(NormalSamp, IN.TexCoord8) * (WT9_3/WT9_NORMALIZE);
    return OutCol;
}

*im only doing the first blur pass.

Its doing... NOTHING. The result is exactly the same as if I just plugged in the original normal map. Is there something wrong with my materiel map?

[seenooh]

Can you show me the material properties? That window you find below...

And can you please use the [SHOT] tags? Thanks.

[roosterMAP]

here u go:
http://i232.photobucket.com/albums/e...g?t=1299555543

also, what are the [SHOT] tags?

[seenooh]

Try disconnecting the Normal map from the main/material node, do you notice any difference in visual appearance? If you do, then there is nothing wrong.

SHOT tags are like the [ IMG ] tags but it resizes the image to fit the screen.

[seenooh]

Bump. Added some new stuff in the main post.

[seenooh]

Ok, the main post is becoming bigger, so I'll post whatever cool stuff here and mention it in the main one.

Anyways, here's another exercise with a nice new shader:

Cross Processing Post-Process Effect

What is it?

You can also google some more and see how to make the required texture.

Screens: (I used an ugly stock red gradient texture, so don't blame me =p)




Source Code:

float4 af(v2f In) : COLOR 
{ 
	float3 image =  tex2D(image_samp, In.UV);

	// get grayscale
	float gray = dot(float3(0.3,0.59,0.1), image);
	image = lerp (gray, image,Saturation);

	// contrast
	image = lerp (0.5, image,Contrast);

	// brightness
	image +=Brightness;

	float3 image2;
	// crossprocess	
	image2.r =  tex1D(GradiantMapSampler, image.r);
	image2.g =  tex1D(GradiantMapSampler, image.g);
	image2.b =  tex1D(GradiantMapSampler, image.b);

	image = lerp (image, image2,Intensity);

	
	return float4(image,1); 
}

Shader Network:



Instance that out and play with the following parameters:

1- Intensity: 0 to 1
2- Brightness: -1 to 1
3- Contrast: 0 to 2
4- Saturation: 0 to 2
5- Gradient Texture: Assign a 1D gradient texture.

That's it, I hope you find this useful, and don't forget to share shaders, white papers, or whatever. I'm having a hard time finding them, I don't know why. I spend much more time searching than actually implementing them.

[Hellclown]

I've spent the last 30 minutes staring at the edge detect network trying to figure out what I did to get the error 'Arithmetic between types float3 and float2 are undefined' I've double triple and quadrupedal checked the node connections and they appear to be right, and I have no idea what to do short of rebuilding the entire material. is there a setting I might have missed or something that isn't obvious in the tutorial?

EDIT: Spoke too soon, turns out I missed the three scene depth nodes...

[shuriken88]

I love the look of the "ugly red gradient" shader! I'm definitely going to have to give this a try!

[seenooh]

EDIT: Spoke too soon, turns out I missed the three scene depth nodes...

I bet the keyboard got hurt shortly after that .

I love the look of the "ugly red gradient" shader! I'm definitely going to have to give this a try!

A pleasant surprise... Try your best to manage and do it, don't peek at the answer.

[xxfatmikexx13]

I cannot view the images,i click on the link and it just loads and nothing.
Please help.

[seenooh]

Thanks for informing. I will fix that when I return back home because all the screenshots are in my personal PC.