depth of field shader ?

[jerome]

Hello,

 

Did anyone here already coded some depth of field postprocess ?

 

I mean the same effect as with picture cameras : things/meshes before or beyond the depth of field set look blured, things/meshes within the depth of field range look sharp, at last normal  .

 

I found this article here : http://artmartinsh.blogspot.fr/2010/02/glsl-lens-blur-filter-with-bokeh.html

with this fragment shader GLSL code : http://www.pasteall.org/10779

 

but I don't really get how to port it to BJS shaders (maybe because I haven't yet learnt anything about them  )

 

[jahow]

Hey Jerome,
 
I quickly hacked a depth-of-field effect for my current game project, and it looks like this (also using BJS ambient occlusion effect):
http://40.media.tumblr.com/944395855bece9a9385d74bd6cc16c1f/tumblr_nj8o8cREgD1u7ay33o1_1280.jpg
 
The code (typescript) is as follows:

var depth_texture = scene.enableDepthRenderer().getDepthMap();var depth_effect = new BABYLON.PostProcess("depth_render", "./depth_render", ['focus_depth'], ['depthSampler'], 1.0, camera, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, engine, true);depth_effect.onApply = (effect: BABYLON.Effect) => {   effect.setTexture('depthSampler', depth_texture);   effect.setFloat('focus_depth', camera.radius / camera.maxZ);};

And the fragment shader:

#ifdef GL_ESprecision highp float;#endif uniform sampler2D textureSampler;uniform sampler2D depthSampler;uniform float focus_depth;varying vec2 vUV; vec4 sampleBox(float u, float v, float size) {  vec4 color = vec4(0.0,0.0,0.0,0.0);  color += texture2D(textureSampler, vec2(vUV.x - size,  vUV.y - size))  * 0.075;  color += texture2D(textureSampler, vec2(vUV.x,  vUV.y - size))  * 0.1;  color += texture2D(textureSampler, vec2(vUV.x + size,  vUV.y - size))  * 0.075;  color += texture2D(textureSampler, vec2(vUV.x - size,  vUV.y))  * 0.1;  color += texture2D(textureSampler, vec2(vUV.x,  vUV.y))  * 0.30;  color += texture2D(textureSampler, vec2(vUV.x + size,  vUV.y))  * 0.1;  color += texture2D(textureSampler, vec2(vUV.x - size,  vUV.y + size))  * 0.075;  color += texture2D(textureSampler, vec2(vUV.x,  vUV.y + size))  * 0.1;  color += texture2D(textureSampler, vec2(vUV.x + size,  vUV.y + size))  * 0.075;  return color;} void main(void){  float depth = texture2D(depthSampler, vUV).r;  float blur_amount = abs(depth-focus_depth)*20.0;  if(depth < depth-focus_depth) { blur_amount *= 10.0; }  blur_amount = clamp(blur_amount, 0.0, 1.0);   vec4 baseColor = texture2D(textureSampler, vUV);  vec4 blurredColor = vec4(0.0,0.0,0.0,0.0);   float blurSize = 0.005*blur_amount;  blurredColor = 0.75*sampleBox(vUV.x, vUV.y, blurSize*0.5) + 0.25*sampleBox(vUV.x, vUV.y, blurSize*1.0);   gl_FragColor = baseColor * (1.0 - blur_amount) + blurredColor * blur_amount;}

It's basically a progressive blur modulated by the depth of each pixel. A 'focus depth' is passed as argument (depth is a value between 0 and 1), and if the pixel is nearer or further from that depth, it gets blurred.
 
I'm quite happy with the result, but I'll probably improve it, at least for performance. As you can see, for every fragment (pixel), I'm sampling the texture 18 (!) times... Doing a 2-pass blur effect (horizontal and vertical) would probably be less expensive.
 
Also someone else has made a DOF effect with BJS, it's right there: http://www.html5gamedevs.com/topic/6557-babylon-projects/#entry61192
 
I haven't had time to dive into its code though.

[jerome]

Waaaooowww

really nice !!!

   

thank you

[jahow]

You're welcome For the record, I think DK was hoping for someone to do a pull request with a depth of field effect!

[GameMonetize]

I can do it actually but I prefer when community is involved

[jerome]

I wish I can do it

Heu, just wait for two or three geological eras until I can learn GLSL

[jahow]

GLSL is not that hard, and the stuff you can do with it is mind-boggling. Being able to use it in a web app is a wonderful thing, and BJS makes it very easy: it literally took me 5 lines of typescript to include my custom postprocess shader.

 

I'll work on a PR for this effect.

[jerome]

Ok I trust you

Let me go in typescript first

[HugoMcPhee]

Hi here's the project with the Depth of Filed cut down to it's depth of field bones, http://hugos.website/DepthOfFieldEffect

and the zip file can be downloaded here http://hugos.website/DepthOfFieldEffect.zip (there may be some tweaks that can be made to make it better)

 

I edited the Dof Image fragment shader of this to get it to work http://www.nutty.ca/?page_id=352&link=depth_of_field

 

 

*Updated* 

 

The Dof now uses Babylon 2.0's built in DepthRenderer so the code is a little more simplified, and there's less extra files