Blur for PlayCanvas UI

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:

  1. Blurred images are got from the previous frame.
  2. 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.
7 Likes

Nice one!

@queriel

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

You need to enable ‘render color buffer’ on the camera.

Hi mvaligursky,

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

Screenshot 2023-11-11 213341

Could you plz be more specific?

The Color Grabpass is the one, sorry

Hi @mvaligursky,

sry but 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]

Also in the forked source project.

@mvaligusky,
@queriel,

is there an alternate fix for this one? Could you solve it queriel?