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.
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.
Hi - i found your blur.js script and was wondering, if you where able to fix the error message i still receive and you mentioned.
“Shader [Shader Id 4 FirstBlurShader] requires texture sampler [uSceneColorMap] which has not been set, while rendering [Pass:RenderPass-drawQuadWithShader-Blur: Horizontal | drawQuadWithShader | QuadRender]”
Would be awesome, so i could use it for a project.
i can’t find the mentioned ‘render color buffer’ on the camera - ive played around with the clear color buffer, but there is no difference - i still get the error message.
Shader [Shader Id 8 FirstBlurShader] requires texture sampler [uSceneColorMap] which has not been set, while rendering [Pass:RenderPass-drawQuadWithShader-Blur: Horizontal | drawQuadWithShader | QuadRender]