PlayCanvas project: PlayCanvas 3D HTML5 Game Engine
Github repo: GitHub - querielo/playcanvas-blur-ui
The repository provides the blurImageElement script type. It provides a way to blur background of ImageElement with iterative two-pass blurring process. blurImageElement assigns the blurred texture as an image of Image Element.
If you want to use it in your project, please, read carefully the Setup section of README.
NOTE: there is a background-blur filter in CSS, I highly recommend to check it first.
The repo is based on the Playcanvas TypeScript Template. I highly recommend you to check it. Read more about building Playcanvas Blur UI in the Playcanvas TypeScript Template.
Known issues:
- Blurred images are got from the previous frame.
- At the first frame there is an error:
Shader [Shader Id 2 FirstBlurShader] requires texture sampler [uSceneColorMap] which has not been set, while rendering [drawQuadWithShader | Pass:RenderPass-drawQuadWithShader-Blur: Horizontal | QuadRender]. Iām going to fix it later.