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

Questions
1

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:

image
image871×701 8.82 KB

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

image
image872×709 2.97 KB

Anyway to fix the problem…?

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

2

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.

3

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

2 Likes
4

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
5

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

6

原因: 用于发光模糊的渲染目标在初始化的时候分辨率减少了一半.
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.

1 Like
7

A new Composer may not enough, the bloom effect’s still whit a bad res,looks like blur 。
I try to resize all elements and it’s worked
`

upDate() {
let { renderScene, effectFXAAfix, outputPass, renderer, camera, dom, scene } = this
const finalComposer = new EffectComposer(renderer);

    finalComposer.addPass(renderScene);

    this.blooms = []
    const bloom1 = new BloomEffect(renderer, camera, scene, renderScene, dom,
        {
            threshold: 0,
            strength: 1,
            radius: 0.1,
            exposure: .1
        },
        1
    )
    this.blooms.push(bloom1)
    const bloom2 = new BloomEffect(renderer, camera, scene, renderScene, dom,
        {
            threshold: 0,
            strength: .1,
            radius: 0.7,
            exposure: .9
        },
        2
    )
    this.blooms.push(bloom2)
    this.blooms.forEach(bloom => {
        finalComposer.addPass(bloom.mixPass)
    })
    // finalComposer.addPass(smaaPass)
    finalComposer.addPass(effectFXAAfix)
    finalComposer.addPass(outputPass);
    this.finalComposer = finalComposer
}

`