Bokeh DoF Shader

Grab your favourite IDE and tinker with the innards of game engines

Bokeh DoF Shader

Postby ThrillerProd on Sat Jun 14, 2014 11:20 am

Hey there !

I finally make it ! I successfully implement a Bokeh DoF Shader. It's fully functionnal and add an incredible level of quality to the Source Engine. I'm supeeeeeeeer happy !

What it rendered ? Take a look :
Image
Image
Image
Image

Original Thread : http://forums.steampowered.com/forums/showthread.php?t=3234873

Here the code if you want to add it to your game ! (with SSE of biohazard)

Code: Select all
/*
DoF with bokeh GLSL shader v2.4
by Martins Upitis (martinsh) (devlog-martinsh.blogspot.com)

---------------------
CONVERTED BY Corentin FLACH (www.corentinflach.fr) @ 2014 for Source Engine

Hope you enjoy it !
---------------------

----------------------
The shader is Blender Game Engine ready, but it should be quite simple to adapt for your engine.

This work is licensed under a Creative Commons Attribution 3.0 Unported License.
So you are free to share, modify and adapt it for your needs, and even use it for commercial use.
I would also love to hear about a project you are using it.

Have fun,
Martins
----------------------

changelog:
   
2.4:
- physically accurate DoF simulation calculated from "focalDepth" ,"focalLength", "f-stop" and "CoC" parameters.
- option for artist controlled DoF simulation calculated only from "focalDepth" and individual controls for near and far blur
- added "circe of confusion" (CoC) parameter in mm to accurately simulate DoF with different camera sensor or film sizes
- cleaned up the code
- some optimization

2.3:
- new and physically little more accurate DoF
- two extra input variables - focal length and aperture iris diameter
- added a debug visualization of focus point and focal range

2.1:
- added an option for pentagonal bokeh shape
- minor fixes

2.0:
- variable sample count to increase quality/performance
- option to blur depth buffer to reduce hard edges
- option to dither the samples with noise or pattern
- bokeh chromatic aberration/fringing
- bokeh bias to bring out bokeh edges
- image thresholding to bring out highlights when image is out of focus

*/

#define PI  3.14159265

//uniform variables from external script

static float focalDepth = 10;  //focal distance value in meters, but you may use autofocus option below
static float focalLength = 12.0; //focal length in mm
static float fstop = 1.4; //f-stop value
static bool showFocus = false; //show debug focus point and focal range (red = focal point, green = focal range)

/*
make sure that these two values are the same for your camera, otherwise distances will be wrong.
*/

static float znear = 16; //camera clipping start
static float zfar = 1024; //camera clipping end
static float zScaleLinear = znear / zfar;
static float zScaleLinearRev = zfar / znear;

//------------------------------------------
//user variables

static int samples = 3; //samples on the first ring
static int rings = 4; //ring count

static bool manualdof = false; //manual dof calculation
static float ndofstart = 24.0; //near dof blur start
static float ndofdist = 128.0; //near dof blur falloff distance
static float fdofstart = 128.0; //far dof blur start
static float fdofdist = 512.0; //far dof blur falloff distance

static float CoC = 0.02;//circle of confusion size in mm (35mm film = 0.03mm)

static bool vignetting = false; //use optical lens vignetting?
static float vignout = 1.5; //vignetting outer border
static float vignin = 0.0; //vignetting inner border
static float vignfade = 22.0; //f-stops till vignete fades

static bool autofocus = true; //use autofocus in shader? disable if you use external focalDepth value
static float2 focus = float2(0.5,0.5); // autofocus point on screen (0.0,0.0 - left lower corner, 1.0,1.0 - upper right)
static float maxblur = 1.0; //clamp value of max blur (0.0 = no blur,1.0 default)

static float threshold = 0.9; //highlight threshold;
static float gain = 64.0; //highlight gain;

static float bias = 0.8; //bokeh edge bias
static float fringe = 0.7; //bokeh chromatic aberration/fringing

static bool noise = false; //use noise instead of pattern for sample dithering
static float namount = 0.0004; //dither amount

static bool depthblur = false; //blur the depth buffer?
static float dbsize = 1; //depthblursize

static float exponential = 7.0;

/*
next part is experimental
not looking good with small sample and ring count
looks okay starting from samples = 4, rings = 4
*/

static bool pentagon = false; //use pentagon as bokeh shape?
static float feather = 0.5; //pentagon shape feather

//------------------------------------------
float readDepth(in float2 coord, sampler tex)
{
   return tex2D(tex, coord ).a * zScaleLinear;
}
float readDepth(float linDepth)
{
   return linDepth * zScaleLinear;
}

float penta(float2 coords) //pentagonal shape
{
   float scale = float(rings) - 1.3;
   float4  HS0 = float4( 1.0,         0.0,         0.0,  1.0);
   float4  HS1 = float4( 0.309016994, 0.951056516, 0.0,  1.0);
   float4  HS2 = float4(-0.809016994, 0.587785252, 0.0,  1.0);
   float4  HS3 = float4(-0.809016994,-0.587785252, 0.0,  1.0);
   float4  HS4 = float4( 0.309016994,-0.951056516, 0.0,  1.0);
   float4  HS5 = float4( 0.0        ,0.0         , 1.0,  1.0);
   
   float4  one = float4( 1.0,1.0,1.0,1.0 );
   
   float4 P = float4((coords),float2(scale, scale));
   
   float4 dist = float4(0.0,0.0,0.0,0.0);
   float inorout = -4.0;
   
   dist.x = dot( P, HS0 );
   dist.y = dot( P, HS1 );
   dist.z = dot( P, HS2 );
   dist.w = dot( P, HS3 );
   
   dist = smoothstep( -feather, feather, dist );
   
   inorout += dot( dist, one );
   
   dist.x = dot( P, HS4 );
   dist.y = HS5.w - abs( P.z );
   
   dist = smoothstep( -feather, feather, dist );
   inorout += dist.x;
   
   return saturate(inorout);
}
float bdepth(float2 coords, float2 texelSize, sampler color_depth) //blurring depth
{
   float d = 0.0;
   float kernel[9];
   float offset[9];
   float offset1[9];
   
   float2 wh = float2(texelSize.x, texelSize.y) * dbsize;

   offset[0] = -wh.x;
   offset[1] = 0.0;
   offset[2] = wh.x;
   
   offset[3] = wh.x;
   offset[4] = 0.0;
   offset[5] = wh.x;
   
   offset[6] = wh.x;
   offset[7] = 0.0;
   offset[8] = wh.x;

   offset1[0] = -wh.y;
   offset1[1] = -wh.y;
   offset1[2] = -wh.y;
   
   offset1[3] = 0.0;
   offset1[4] = 0.0;
   offset1[5] = 0.0;
   
   offset1[6] = wh.y;
   offset1[7] = wh.y;
   offset1[8] = wh.y;

   float seize = 16.0;

   kernel[0] = 1.0/seize;   kernel[1] = 2.0/seize;   kernel[2] = 1.0/seize;
   kernel[3] = 2.0/seize;   kernel[4] = 4.0/seize;   kernel[5] = 2.0/seize;
   kernel[6] = 1.0/seize;   kernel[7] = 2.0/seize;   kernel[8] = 1.0/seize;
   
   
   for( int i=0; i<9; i++ )
   {
      //float tmp = tex2D(color_depth, coords + offset[i]).r;
      float tmp = tex2D(color_depth, coords + float2(offset[i],offset1[i])).r;
      d += tmp * kernel[i];
   }
   
   return d;
}


float3 color(float2 coords,float blur, float2 texelSize, sampler color_depth) //processing the sample
{
   float3 col = float3(0.0,0.0,0.0);
   
   col.g = tex2D(color_depth,coords + float2(0.0,1.0)*texelSize*fringe*blur).g;
   col.b = tex2D(color_depth,coords + float2(-0.866,-0.5)*texelSize*fringe*blur).b;
   col.r = tex2D(color_depth,coords + float2(0.866,-0.5)*texelSize*fringe*blur).r;
   
   float3 lumcoeff = float3(0.299,0.587,0.114);
   float lum = dot(col.rgb, lumcoeff);
   float thresh = max((lum-threshold)*gain, 0.0);
   return col+lerp(float3(0.0,0.0,0.0),col,thresh*blur);
}

float2 rand(float2 coord, float2 size) //generating noise/pattern texture for dithering
{
   float noiseX = ((frac(1.0-coord.x*(size.x/2.0))*0.25)+(frac(coord.y*(size.y/2.0))*0.75))*2.0-1.0;
   float noiseY = ((frac(1.0-coord.x*(size.x/2.0))*0.75)+(frac(coord.y*(size.y/2.0))*0.25))*2.0-1.0;
   
   if (noise)
   {
      noiseX = frac(sin(dot(coord ,float2(12.9898,78.233))) * 43758.5453) * 2.0-1.0;
      noiseY = frac(sin(dot(coord ,float2(12.9898,78.233)*2.0)) * 43758.5453) * 2.0-1.0;
   }
   return float2(noiseX,noiseY);
}

float3 debugFocus(float3 col, float blur, float depth)
{
   float edge = 0.002*depth; //distance based edge smoothing
   float m = saturate(smoothstep(0.0,edge,blur));
   float e = saturate(smoothstep(1.0-edge,1.0,blur));
   
   col = lerp(col,float3(1.0,0.5,0.0),(1.0-m)*0.6);
   col = lerp(col,float3(0.0,0.5,1.0),((1.0-e)-(1.0-m))*0.2);

   return col;
}

float linearize(float depth)
{
   return -zfar * znear / (depth * (zfar - znear) - zfar);
}

float vignette(float2 uv)
{
   float dist = distance(uv, float2(0.5,0.5));
   dist = smoothstep(vignout+(fstop/vignfade), vignin+(fstop/vignfade), dist);
   return saturate(dist);
}
void DoDOF( in float2 uv, in float2 texelSize, in sampler color_depth, out float4 dof_out )
{
   //scene depth calculation

   float depthSample = tex2D(color_depth, uv ).a;
   float depth = linearize(depthSample);
   
   if (depthblur)
   {
      depth = bdepth(uv, texelSize, color_depth);
      depth = linearize(depth);
   }
   //focal plane calculation
   
   float fDepth = focalDepth;
   
   if (autofocus)
   {
      fDepth = tex2D(color_depth,focus).a;
      fDepth = linearize(fDepth);
      //fDepth = pow( (1.0f - fDepth), exponential );
   }
   //dof blur factor calculation
   
   float blur = 0.0;
   
   if (manualdof)
   {   
      float a = depth-fDepth; //focal plane
      float b = (a-fdofstart)/fdofdist; //far DoF
      float c = (-a-ndofstart)/ndofdist; //near Dof
      blur = (a>0.0)?b:c;
   }
   else
   {
      float f = focalLength; //focal length in mm
      float d = fDepth*1000.0; //focal plane in mm
      float o = depth*1000.0; //depth in mm
      
      float a = (o*f)/(o-f);
      float b = (d*f)/(d-f);
      float c = (d-f)/(d*fstop*CoC);
      
      blur = abs(a-b)*c;
   }
   
   blur = saturate(blur);
   
   // calculation of pattern for ditering
   
   float2 noise = rand(uv,texelSize)*namount*blur;
   
   // getting blur x and y step factor

   float w = texelSize.x/clamp(depth,0.25,1.0)+(noise.x*(1.0-noise.x));
   float h = texelSize.y/clamp(depth,0.25,1.0)+(noise.y*(1.0-noise.y));
   w = w*blur*maxblur;
   h = h*blur*maxblur;
   
   // calculation of final color
   
   float3 col = float3(0.0,0.0,0.0);
   
   if(blur < 0.05) //some optimization thingy
   {
      col = tex2D(color_depth, uv).rgb;
   }
   else
   {
      col = tex2D(color_depth, uv).rgb;
      float s = 1.0;
      int ringsamples;
      
      for (int i = 1; i <= rings; i++)
      {   
         ringsamples = i * samples;
         
         for (int j = 0 ; j < ringsamples; j++)   
         {
            float step = PI*2.0 / float(ringsamples);
            float pw = (cos(float(j)*step)*float(i));
            float ph = (sin(float(j)*step)*float(i));
            float p = 1.0;
            if (pentagon)
            {
               p = penta(float2(pw,ph));
            }
            col += color(uv + float2(pw*w,ph*h),blur,texelSize,color_depth)*lerp(1.0,(float(i))/(float(rings)),bias)*p; 
            s += 1.0*lerp(1.0,(float(i))/(float(rings)),bias)*p;   
         }
      }
      col /= s; //divide by sample count
   }
   
   if (showFocus)
   {
      col = debugFocus(col, blur, depth);
   }
   
   if (vignetting)
   {
      col *= vignette(uv);
   }
   
   dof_out.rgb = col;
   dof_out.a = 1.0;
   
}
Actinium Studio
User avatar
ThrillerProd
Dumpling
Dumpling
 
Joined: Sun Dec 12, 2010 10:00 am

Return to Programming

Who is online

Users browsing this forum: No registered users