Game Development Community

dev|Pro Game Development Curriculum

Vignette PostFx - Shader

by J0linar · 10/25/2013 (4:24 pm) · 7 comments

Hi all
so instead of keeping it where others cant get @ it
am releasing thsi as a Resource

it might not look like much but it gives/ at least sometimes a nicer touch to your games

oi44.tinypic.com/21b2gps.jpg

Special Note:
This shader is based on Andy J.Edmonds - postFx library Resource
www.garagegames.com/community/resources/view/21224



Howto:

go to your game/shaders/common/postFx folder
create a folder called vignette
there create a textfile
name it VignetteP.hlsl

open the file
and insert

#include "shaders/common/postFx/postFx.hlsl"  
#include "shadergen:/autogenConditioners.h"  
  
uniform sampler2D backBuffer : register(S0);  
uniform float radiusX;  
uniform float radiusY;  
  
float4 main(PFXVertToPix IN) : COLOR0  
{  
   float4 base = tex2D(backBuffer, IN.uv0);  
   float dist = distance(IN.uv0, float2(0.5,0.5)) * 0.7 ;  
   base.rgb *= smoothstep(radiusX, radiusY, dist);  
   return base;  
}

next step
go to the game/core/scripts/client/postFx folder
and create a new textfile
name it vignette.cs

and insert the following

// Vignette PostFx  
$VignettePostEffect::RadiusX = 0.6;  
$VignettePostEffect::RadiusY = 0.2;  
  
singleton ShaderData( VignetteShader )  
{     
   DXVertexShaderFile   = "shaders/common/postFx/postFxV.hlsl";  
   DXPixelShaderFile    = "shaders/common/postFx/Library/VignetteP.hlsl";  
   pixVersion = 2.0;  
};  
  
singleton PostEffect( VignettePostEffect )    
{    
   isEnabled         = false;  
   allowReflectPass  = false;  
   renderTime        = "PFXAfterBin";  
   renderBin         = "GlowBin";  
   shader            = VignetteShader;  
   stateBlock        = PFX_DefaultStateBlock;  
   texture[0]        = "$backBuffer";  
   renderPriority    = 10;  
};  
  
function VignettePostEffect::setShaderConsts(%this)  
{  
   %this.setShaderConst("$radiusX", $VignettePostEffect::RadiusX);  
   %this.setShaderConst("$radiusY", $VignettePostEffect::RadiusY);  
}


If the T3D-OpenSource-Commitee should see it worthy enough
it can add it to T3D MIT

anyways hope someone finds it useful

About the author

http://j0linar.blogspot.co.at/


#2
11/08/2013 (11:14 pm)
Good one!
#3
01/24/2014 (1:24 pm)
how is activate this?(all is integrated,but not seen effect)
#4
01/25/2014 (4:27 pm)
In game/scripts/client/serverConnection.cd

In the function
GameConnection::onConnectionAccepted(%this)

//Add this line
VignettePostEffect.enable();
}

This enables Vignette from the start.
#5
01/26/2014 (6:37 pm)
outstanding, but your code has " instead of the regular ".....

here it is fixed....

VignetteP.hlsl
#include "shaders/common/postFx/postFx.hlsl"
#include "shadergen:/autogenConditioners.h"

uniform sampler2D backBuffer : register(S0);
uniform float radiusX;
uniform float radiusY;

float4 main(PFXVertToPix IN) : COLOR0
{
   float4 base = tex2D(backBuffer, IN.uv0);
   float dist = distance(IN.uv0, float2(0.5,0.5)) * 0.7 ;
   base.rgb *= smoothstep(radiusX, radiusY, dist);
   return base;
}

and vignette.cs
// Vignette PostFx
$VignettePostEffect::RadiusX = 0.6;
$VignettePostEffect::RadiusY = 0.2;

singleton ShaderData( VignetteShader )
{   
   DXVertexShaderFile 	= "shaders/common/postFx/postFxV.hlsl";
   DXPixelShaderFile   	= "shaders/common/postFx/Library/VignetteP.hlsl";
   pixVersion = 2.0;
};

singleton PostEffect( VignettePostEffect )  
{  
   isEnabled         = false;
   allowReflectPass  = false;
   renderTime        = "PFXAfterBin";
   renderBin         = "GlowBin";
   shader            = VignetteShader;
   stateBlock        = PFX_DefaultStateBlock;
   texture[0]        = "$backBuffer";
   renderPriority    = 10;
};

function VignettePostEffect::setShaderConsts(%this)
{
   %this.setShaderConst("$radiusX", $VignettePostEffect::RadiusX);
   %this.setShaderConst("$radiusY", $VignettePostEffect::RadiusY);
}

only diff is where i put my VignetteP.hlsl... for me it was shaders/common/postFx/Library/VignetteP.hlsl
#6
01/27/2014 (9:23 am)
Ye sry, no idea why markup lite converted it to &quot

anyways am glad ppl find use for this and a tip by combining the vignette with color correction - you can achieve pretty nice results.
#7
08/17/2016 (8:11 am)
this was added to the engine by J0linar https://github.com/GarageGames/Torque3D/pull/1241