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.
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.
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.
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:
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.