How to implement a plane background-blur material with objects behind?

Questions
, , ,
1

Hey there,

my goal is it to have a transparent material on a plane that blurs the contents behind the plane (simply spoken a css background-blur for three). I figured that I need a second render pass to solve this. Thus I started with a second perspective camera that renders the part of the scene that I want to blur into a render texture and passes it on to the material shader of the plane. As you can see in the image I’m currently stuck changing the projection / orientation of the near plane of the second camera. Does someone have an idea how to solve this or hint me an API direction where I can change this projection? Or maybe there are other more performant ways to solve the whole problem?

Camera
Camera1600×800 43.9 KB

2

Or maybe there are other more performant ways to solve the whole problem?

I will go with this. “Css background-blur for three” is kind of vague yet in terms of performance. Maybe if you define some aspects like use case, rendering frequency, and specially size and “quality” of blured area, you should be able to pick from several approaches, even the most naive ones could help you in defining the right direction.

  • First, please (re)check official examples with water and refraction, just to be sure you are not missing something from them.

  • For a photoshop-like blured effect, you should consider writing a dedicated shader in glsl. Again, you can start by looking at the “Depth of field” official example. Just be aware that, dispite its gpu acceleration, it is going to be really intensive to render a full quad screen-size blur, even using some tricks to mask out areas in screen space.

  • If you feel in a dev mood, I would suggest to search for altenative blur methods, away from the expensive gaussian blur. Go and have a look at box-blur or the superfast stackBlur, to gain a better understanding of limitations and usefullness to your specific scenario. Even the most dirty tricks (like downsampling the area of interest and letting the hardware just do the bluring by rasterizing at original size) could be effective to your needs.

Best

2 Likes