Why is postprocessing blur effect very pixelated?

Questions
, , ,
1

I’m new to EffectComposer. I’m trying to blur a scene using HorizontalBlurShader and VerticalBlurShader, but the result is very pixelated:

Why is it pixelated? Am I sizing it the wrong way?

EDIT: it seems to be pixelated only along each axis (like duplicated images along vertical or horizontal, rather than actual pixels)

2

You are not setting the v and h uniforms correctly. They should be:

h: { value: 1.0 / window.innerWidth * window.devicePixelRatio }
//
v: {value: 1.0 / window.innerHeight * window.devicePixelRatio }

Both shaders use a fix kernel and thus apply a fix amount of blur.

3

Thanks! Yes, I noticed if the fraction value is small, then there’s less pixelation, but also less blur.

Do you know how we apply more blur without pixelation? I can imagine applying more composer passes, but what’s the impact of that?

I’m hoping to find a numerical way without additional passes.

4

This postprocessing packages does what I want. Here’s a Demo.

5

More blur is achieved by bigger kernels. However, bigger kernels will negatively influence the performance.

6

Can Three blur shaders need some improvements? Or do they need to stay simple for some reason?

The BlurPass from the above postprocessing package works great, and with less code (but still configurable if needed). Example, with no pixelation:

8

Is it an option to use CSS filter: blur(5px) on renderer’s canvas?

renderer.domElement.style.filter = `blur(${blur * 5}px)`;

2 Likes
9

That’s a good idea for visual output, though in my case I am using the content of the canvas with CanvasTexture to use in a second scene. It isn’t the fastest way, but I do not have access to the renderer of the library that I am using so I can not modify its render targets in order to use render targets. More details at [SOLVED] Render second scene as texture on cube. What am I missing?

So I ended up using a CanvasTexture, putting it on a Mesh material, then passing that object into the other library’s APIs. This works without requiring access to the renderer.

Plus maybe you want to blur only inside of an object, then CSS blur is not helpful (limited to rectangles only).