Game Development Community

dev|Pro Game Development Curriculum

Sample Fullscreen Shaders

by Michael Perry · 11/08/2008 (4:10 pm) · 12 comments

*** Contact Siddartha for support on this resource. ***

Prerequisite: Integrate This Resource

The following is a list of the fullscreen shaders:

- Black and white
- Night
- Blur
- Laplace
- Radial blur

1. Create the following shader files, saving each one out as .hlsl. Place these in your shaders folder. Shader filenames are listed at the bottom of this resource in the shaders.cs script.

Blur Pixel Shader
sampler RT: register(s0);
// Simple blur filter

float4 main(float2 texCoord: TEXCOORD0) : COLOR {

float2 samples[12] = {
-0.326212, -0.405805,
-0.840144, -0.073580,
-0.695914, 0.457137,
-0.203345, 0.620716,
0.962340, -0.194983,
0.473434, -0.480026,
0.519456, 0.767022,
0.185461, -0.893124,
0.507431, 0.064425,
0.896420, 0.412458,
-0.321940, -0.932615,
-0.791559, -0.597705,
};

float4 sum = tex2D(RT, texCoord);
for (int i = 0; i < 12; i++){
sum += tex2D(RT, texCoord + 0.025 * samples[i]);
}
return sum / 13;

}

Blur Vertex Shader
struct VS_OUTPUT {
float4 Pos: POSITION;
float2 texCoord: TEXCOORD0;
};

VS_OUTPUT main(float4 Pos: POSITION){
VS_OUTPUT Out;

// Clean up inaccuracies
Pos.xy = sign(Pos.xy);

Out.Pos = float4(Pos.xy, 0, 1);
// Image-space
Out.texCoord.x = 0.5 * (1 + Pos.x);
Out.texCoord.y = 0.5 * (1 - Pos.y);

return Out;
}

Black and White Pixel Shader
struct ConnectData
{
float2 tex0 : TEXCOORD0;

};


struct Fragout
{
half4 col : COLOR0;
};

float3 grayScaleWeights : register(PC_CANVAS_P1);
float saturation : register(PC_CANVAS_P2);

//-----------------------------------------------------------------------------
// Main
//-----------------------------------------------------------------------------
Fragout main( ConnectData IN,
uniform sampler2D diffuseMap0 : register(S0)
)
{
Fragout OUT;

float4 texelColor = tex2D( diffuseMap0, IN.tex0 );

// makes it b&w
float4 scaledColor = texelColor * float4( grayScaleWeights, 1.0 );
float luminance = scaledColor.r + scaledColor.g + scaledColor.b ;
float4 color = lerp(texelColor, float4( luminance , luminance, luminance, texelColor.a ), step(luminance,saturation));

OUT.col = color; // + (staticColor*0.5);

return OUT;
}

Black and White Vertex Shader
struct VertData
{
float4 position : POSITION;
float2 texCoord : TEXCOORD0;
};

struct v2f
{
float4 hpos : POSITION;
float2 outTexCoord : TEXCOORD0;
};

//-----------------------------------------------------------------------------
// Main
//-----------------------------------------------------------------------------
v2f main( VertData IN,
uniform float4x4 modelview : register(VC_WORLD_PROJ)
)
{
v2f OUT;
OUT.hpos = mul(modelview, IN.position);
OUT.outTexCoord = IN.texCoord;
return OUT;
}

Night Pixel Shader
struct Conn
{
float2 texCoord : TEXCOORD0;
float4 color : COLOR0;
};

struct Frag
{
float4 col : COLOR0;
};

//-----------------------------------------------------------------------------
// Main
//-----------------------------------------------------------------------------
Frag main( Conn In,
uniform sampler2D diffuseMap : register(S0)
)
{
Frag Out;

Out.col = tex2D(diffuseMap, In.texCoord) * In.color;

return Out;
}

Night Vertex Shader
struct Vert
{
float4 position : POSITION;
float4 texCoord : TEXCOORD0;
};

struct Conn
{
float4 position : POSITION;
float4 texCoord : TEXCOORD0;
float4 color : COLOR0;
};

//-----------------------------------------------------------------------------
// Main
//-----------------------------------------------------------------------------
Conn main( Vert In,
uniform float4x4 modelview : register(VC_WORLD_PROJ),
uniform float2 fadeStartEnd : register(C4),
uniform float3 cameraPos : register(C5),
uniform float3 ambient : register(C6)
)
{
Conn Out;

Out.position = mul(modelview, In.position);
Out.texCoord = In.texCoord;
Out.color = float4( ambient.r, ambient.g, ambient.b, 1 );

// Do we need to do a distance fade?
if ( fadeStartEnd.x < fadeStartEnd.y ) {

float distance = length( cameraPos - In.position );
Out.color.a = abs( clamp( ( distance - fadeStartEnd.x ) / ( fadeStartEnd.y - fadeStartEnd.x ), 0, 1 ) - 1 );
}

return Out;
}

Laplace Pixel Shader
sampler Image : register(s0);

// The Laplace filter approximates the second order derivate,
// that is, the rate of change of slope in the image. It can be
// used for edge detection. The Laplace filter gives negative
// response on the higher side of the edge and positive response
// on the lower side.

// This is the filter kernel:
// 0 1 0
// 1 -4 1
// 0 1 0



float4 main(float2 texCoord: TEXCOORD0,
uniform float scale,
uniform float pixelSize) : COLOR
{

float2 samples[4] = {
0, -1,
-1, 0,
1, 0,
0, 1
};
float4 laplace = -4 * tex2D(Image, texCoord);

// Sample the neighbor pixels
for (int i = 0; i < 4; i++){
laplace += tex2D(Image, texCoord + 0.0031 * samples[i]);
}

return (0.5 + 1.0 * laplace);
}

Laplace Vertex Shader
struct VS_OUTPUT
{
float4 Pos : POSITION;
float2 uv0 : TEXCOORD0;
float2 uv1 : TEXCOORD1;
};

VS_OUTPUT main(float4 inPos : POSITION,
uniform float4x4 worldViewProj : register(VC_WORLD_PROJ))
{
VS_OUTPUT Out;

// Use standardise transform, so work accord with render system specific (RS depth, requires texture flipping, etc)
Out.Pos = mul(worldViewProj, inPos);

// The input positions adjusted by texel offsets, so clean up inaccuracies
inPos.xy = sign(inPos.xy);

// Convert to image-space
Out.uv0 = (float2(inPos.x, -inPos.y) + 1.0) * 0.5;
Out.uv1 = inPos.xy;

return Out;
}

Radial Blur Pixel Shader
uniform sampler tex: register(s0);

static const float samples[10] =
{
-0.08,
-0.05,
-0.03,
-0.02,
-0.01,
0.01,
0.02,
0.03,
0.05,
0.08
};

float4 main(float2 texCoord: TEXCOORD0,
uniform float sampleDist,
uniform float sampleStrength
) : COLOR
{
//Vector from pixel to the center of the screen
float2 dir = 0.5 - texCoord;

//Distance from pixel to the center (distant pixels have stronger effect)
//float dist = distance( float2( 0.5, 0.5 ), texCoord );
float dist = sqrt( dir.x*dir.x + dir.y*dir.y );


//Now that we have dist, we can normlize vector
dir = normalize( dir );

//Save the color to be used later
float4 color = tex2D( tex, texCoord );

//Average the pixels going along the vector
float4 sum = color;
for (int i = 0; i < 10; i++)
{
sum += tex2D( tex, texCoord + dir * samples[i] * 1.0);
}
sum /= 11;

//Calculate amount of blur based on
//distance and a strength parameter
float t = dist * 2.2;
t = saturate( t );//We need 0 <= t <= 1

//Blend the original color with the averaged pixels
return lerp( color, sum, t );
}

Radial Blur Vertex Shader
struct VS_OUTPUT {
float4 Pos: POSITION;
float2 texCoord: TEXCOORD0;
};

VS_OUTPUT main(float4 Pos: POSITION){
VS_OUTPUT Out;

// Clean up inaccuracies
Pos.xy = sign(Pos.xy);

Out.Pos = float4(Pos.xy, 0, 1);
// Image-space
Out.texCoord.x = 0.5 * (1 + Pos.x);
Out.texCoord.y = 0.5 * (1 - Pos.y);

return Out;
}

2. Add the following ShaderData objects to your shaders.cs script.

Shader TorqueScript
new ShaderData( screenblur )
{
   DXVertexShaderFile = "shaders/blur_vs11.hlsl";
   DXPixelShaderFile = "shaders/blur_ps2.hlsl";
   pixVersion = 2.0;
};

new ShaderData( BlackandWhite )
{
   DXVertexShaderFile = "shaders/BWvs.hlsl";
   DXPixelShaderFile = "shaders/BWps2.hlsl";
   pixVersion = 2.0;
};

new ShaderData( Night )
{
   DXVertexShaderFile = "shaders/night_vs11.hlsl";
   DXPixelShaderFile = "shaders/night_ps2.hlsl";
   pixVersion = 2.0;
};

new ShaderData( Laplace )
{
   DXVertexShaderFile = "shaders/Laplace_vs11.hlsl";
   DXPixelShaderFile = "shaders/Laplace_ps2.hlsl";
   pixVersion = 2.0;
};

new ShaderData(Radialblur)
{
   DXVertexShaderFile = "shaders/Radialblur_vs.hlsl";
   DXPixelShaderFile = "shaders/Radialblur_ps2.hlsl";
   pixVersion = 2.0;
};

*** Contact Siddartha for support on this resource. ***

#1
11/08/2008 (5:20 pm)
Full Screen Shader Resource link is broken.
#3
11/08/2008 (8:32 pm)
I modified the resource to make the link work. Very bizarre web bug.

Btw, you might also be able to use the shaders with Frank Bignone's TGEA Fullscreen Shader Resource.

I haven't tested it, but I definitely like his resources.
#4
11/08/2008 (11:47 pm)
Here is latest link for the FullScreen Shader resources (possible to activate fullscreen effect per gui): www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=15254
#5
11/10/2008 (2:17 am)
i have gone through this link and found use full in applying some effects at very gui level.

any way has any one worked on full screen - oldmovie effect.

i have implemented it but problem in passing some dds stuff.

hope to resolve it soon.. :)
#6
11/10/2008 (5:22 am)
Could you post these shaders as files or writien in an rtf file? Otherwise if we copy n paste all the new line chars are lost.
#7
11/10/2008 (6:34 am)
@Siddartha: nice work. since i haven't really gotten into shaders yet... is there a way to adjust how strong the radial blur should be? Or is there a way to fade the radial blur in and out? thanks again!
#8
11/10/2008 (7:34 am)
@Anthony - That'll be up to Siddartha
#9
11/10/2008 (8:03 am)
@Anthony: Try pasting into WordPad or MS Word first. Then copy from there and into your IDE.
#10
11/10/2008 (2:45 pm)
@Anthony - Or use FireFox, which doesn't have that problem. That's the one reason I have it on my dev machine.
#11
11/18/2008 (6:51 am)
Quote:
Or use FireFox, which doesn't have that problem. That's the one reason I have it on my dev machine.

Firefox 2.0 does suffer from that problem, at least on my machine.
#12
05/26/2009 (6:00 am)
Sorry,It's been a long time since did attend this post.

Michael k,
if you have seen the above radial blur pixel shader file,their is a parameter clearly mentioned about adjusting the strength of blur in it.
i think that should be enough to tweak the value