[Solved] Why the image looks so low res after applied UnrealBloomPass?

Hello everyone, I’m a new user of three.js, recently met a weird problem while trying to apply UnrealBloomPass to my renderer.

shortly, after applied the UnrealBloomPass, the output become very low res, which looks like this:

But If I remove the bloom pass, everything turns normal:

Anyway to fix the problem…?

Code attached: https://codesandbox.io/s/low-resolution-bug-iw4zo?file=/src/App.tsx

Hi, welcome to the forum.

The image with bloom is probably low res because it’s not anti-aliased, you can’t use native anti-aliasing with postprocessing. Try removing antialias: true from your renderer options, and instead adding a anti-aliasing postprocessing pass before the bloom pass.

you also forgot to set the size of the composer : composer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);

2 Likes

Or set size and pixel ratio of renderer before you pass renderer into composer.
Means these lines:

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);

have to be before this line:
const composer = new EffectComposer(renderer);

2 Likes

@felixmariotto @felixmariotto Thanks for your reply, it solved my problem!

原因: 用于发光模糊的渲染目标在初始化的时候分辨率减少了一半.
Reason: The resolution of the render target used for glow blur is reduced by half when it is initialized.

解决: 使用一个新的后期处理,合并辉光和辉光前景
solve: Use a new post process to merge glow and glow foreground.