Continuing the discussion from Blur for PlayCanvas UI:
Hello everyone,
First of all, I must say this is an amazing feature and a great contribution to the community! Thank you all for sharing.
I’m facing an issue and would love to seek your assistance or get some good ideas.
The project works perfectly fine on a 2D Screen, and the effect looks great. However, when I try to run blurImageGaussian on an element within a 3D Screen, the captured screen area behaves abnormally.
What I’m aiming to achieve is a dashboard in 3D space, where the background has this Gaussian blur effect that creates a subtle, see-through look.
You can refer to the image below for what I’m trying to achieve:
Here is the project link.
I have studied the grab-pass example and managed to create a simple blur effect using LOD (in the center of the image), but this is not the Gaussian blur I’m looking for.
I’m not very experienced with shaders, but here are a few insights I’ve gathered:
- The Gaussian blur logic in
blur-image-gaussian.jsapplies multiple texture samples and weighted averages on the captured scene to create the blur effect. - In
blur-image-lod.js,grabUvis used to capture a specific area of the screen. This part of the code mainly calculates the required sampling area in the fragment shader based ongl_FragCoordand screen size.
Is there a way to combine these two approaches to achieve a Gaussian blur on a specific area using the grab pass technique?
ps. I’ve tried replacing the vUv0 in blur-image-gaussian.js with grabUv from blur-image-lod.js, but that didn’t work.
In the BlurImageGaussian.prototype.update() function, the screen coordinates (screenCorners) of the element are used to set the element’s rect property, which updates the display area of the UI element. Could this be a way to control the final display range of element.texture?