Do something like aero glass

Questions
,
1

Hi,

So, I’m working on a webapp running three.js.
It’s a a 3D world explorer, where I use multiple passes:
The first one is on a scene with a perspective camera on PointerLockControls
The second one is on a scene with an orthogonal camera that I use as an interface.

Now on the interface, what I want is something like Aero glass on Windows. I think iOS does that too nowadays.
Basically everything behind a specific material would appear blurred out.

I know how to blur stuff, you average the neighbor pixels.
But how do I get the neighbor pixels in the rendering color buffer?
Is there a specific variable?
Do I need an extension?
Is there any example anywhere?

If not possible, do I need to do a full pass?
Or do I need to do render to texture the world in perspective and pass it to the material.
Both these solutions seem more ressource hungry.

Any hint is welcome.
Thanks.

2

You can render the objects to be blurred to a render target as a mask, then combine it with the scene also rendered to one and blur where it it’s masked.

1 Like
3

There is even an example that illustrates this approach: https://threejs.org/examples/#webgl_postprocessing_masking

4

Ok, thank you both.

I was able to but something together:
http://jsfiddle.net/rbL7bf04/7/

It’s not a blur, but a zoom shader. But the idea is the same.
I’ll play a bit more with it latter to make it look supa keoool.

So this is the only way to do that? Passes with masking? Isn’t that heavy, for a mobile target for example?

4 Likes
5

Not really, but depends on the hardware and everything else you are doing/rendering. For some devices performance can heavily improved by upscaling a lower resolution. Especially those with higher dpi.

6

I had thought this would be possible just using CSS… but it looks like we’ll have to wait a few years for support.

http://caniuse.com/#search=backdrop%20filter

7

@looeee CSS backdrop-filter is not an option for blurring WebGL objects. CSS backdrop-filter only work with HTML elements…

8

@horsetopus u can add a css layer to achieve this

.your-layer {
width: 100vw;
height: 100vh;
backgroud-color: rgba(0, 0, 0, 0);
backdrop-filter: blur(4px)
}

9

this is built into three now: new THREE.MeshPhysicalMaterial({ transmission: 1, thickness: 1, roughness: 0.65 })

10

Your example broke because you used unversioned URLs. Please use versioned URLs for the sake of people reading in the future. Here’s the fixed example:

11

@bel7aG CSS backdrop-filter does not blur specific WebGL objects, only a rectangle on top of the canvas (which is fine if that’s all your app needs).

@drcmda I wish the blur in THREE.MeshPhysicalMaterial was not so bad

12

ive seen better implementations, for instance mlperego’s Frosted glass - CodeSandbox it at least gets the blur right but when you move it you see that underneath are chunks still. i hope transmission lets us configure the resolution at some point.

13

Indeed the blur looks great. This is probably nice for motionless use cases, but with motion the pixel popping is notably too obvious.