Advanced Reflection Probes Blur

[Rodrix3]

I am using a reflection probe to capture the scene and use the texture for reflection.

 

I am aware I can change the blur setting in the final texture. However, I don't want an homogenous blur.

 

I want the reflection to be crystal clear for what is close (no blur) and blurry for what is far away. The more far away, the more blurry.

Is there native support for this? If there is not, can anyone help me create a custom shader that applies blur based on z depth?

And finally, if the shader is an option, how can I use that custom shader with the reflection probe? What would be the actual setup? Thoughts?

 

Thanks!

[Guest]

Hey, interesting question. By default the reflection probes generate a crystal clear image. You can then create a custom postprocess to apply to the probe texture (probe.cubeTexture) with addPostProcess function (https://github.com/BabylonJS/Babylon.js/blob/master/src/Materials/Textures/babylon.renderTargetTexture.ts#L293)

Creating a custom postprocess is not complex: http://doc.babylonjs.com/how_to/how_to_use_postprocesses#custom-postprocesses

[Rodrix3]

Thanks @Deltakosh!

Ok I am glad there is a way to add a custom postprocess.
Now the "hard part" will be creating the shader.

Thinking out loud:

Layer 1. Depth Pass: "white" close by objects / "black" far away objects.
Layer 2. Crystal clear image.
Layer 3. Crystal clear image +  blur applied to entire image homogenously.

Final Output:  
output.r = mix([blurred image].r, [crystal clear image].r, luminance([depth pass]);
output.g = mix([blurred image].g, [crystal clear image].g, luminance([depth pass]);
output.b = mix([blurred image].b, [crystal clear image].b, luminance([depth pass]);

We are interpolating the pixel from the "clear image" <--> "blurred image" pixels, using the luminance of the depth pass as an interpolation factor.
The luminance of the depth pass is 0 for far away objects, so in those cases we would be getting 100% the pixel from the blurred image.
The luminance of the depth pass is 1 for very close objects, so in that case we would be getting 100% the pixel from the clear image.
Anything in between will be a value from 0 to 1 for the luminance, giving us an interpolation of blurred / clear image.

That would be the pseudo code for the shader; which would give a more blurred image for far away objects, and more clear image for close objects.
For objects that are close and get further away, the blur would appear in a gradient form.

It took me a while to figuring this algorithm, but I think it would work very well. 
Any thoughts or improvements?

..and do you think anyone could contribute to coding this into actual code?
And most importantly, is there already a way of easily calculating a depth texture (z)?
That part is complicated as it is a multi-step shader, where the input of one of the uniforms (a texture),
would be the depth pass, calculated in a previous pass. This would depend heavily on how the postprocessing pipeline has been created on Babylon to see how easy would be to implement this.

[Guest]

Let's try it and see how it works

- "and do you think anyone could contribute to coding this into actual code?": yes, definitely. Bjs is open source for that reason!

- "is there already a way of easily calculating a depth texture (z)?": yes sir! http://doc.babylonjs.com/how_to/how_to_use_depthrenderer_to_get_depth_values