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

**URL:** <https://discourse.threejs.org/t/solved-why-the-image-looks-so-low-res-after-applied-unrealbloompass/17361>\
**Category:** Questions\
**Tags:** post-processing\
**Created:** [July 24, 2020, 3:27am UTC](https://discourse.threejs.org/t/solved-why-the-image-looks-so-low-res-after-applied-unrealbloompass/17361 "2020-07-24T03:27:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Losses](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/losses/32/12357_2.png) [@Losses](https://discourse.threejs.org/u/Losses)\
**Post date:** [July 24, 2020, 3:27am UTC](https://discourse.threejs.org/t/solved-why-the-image-looks-so-low-res-after-applied-unrealbloompass/17361/1 "2020-07-24T03:27:24Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/58521b25592c8d176178d853cae586aa56003688.png)

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f661f1c52db67e88992bd0fced564e209503c682.png)

Anyway to fix the problem…?

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

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [July 24, 2020, 5:39am UTC](https://discourse.threejs.org/t/solved-why-the-image-looks-so-low-res-after-applied-unrealbloompass/17361/2 "2020-07-24T05:39:18Z")

</div>

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](https://threejs.org/examples/?q=aa#webgl_postprocessing_fxaa) before the bloom pass.

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [July 24, 2020, 9:34am UTC](https://discourse.threejs.org/t/solved-why-the-image-looks-so-low-res-after-applied-unrealbloompass/17361/3 "2020-07-24T09:34:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [July 24, 2020, 9:50am UTC](https://discourse.threejs.org/t/solved-why-the-image-looks-so-low-res-after-applied-unrealbloompass/17361/4 "2020-07-24T09:50:31Z")

</div>

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

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

```

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

---

<div class="post-metadata">

**Author:** ![Losses](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/losses/32/12357_2.png) [@Losses](https://discourse.threejs.org/u/Losses)\
**Post date:** [July 27, 2020, 1:05am UTC](https://discourse.threejs.org/t/solved-why-the-image-looks-so-low-res-after-applied-unrealbloompass/17361/5 "2020-07-27T01:05:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dslming](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dslming/32/21746_2.png) [@dslming](https://discourse.threejs.org/u/dslming)\
**Post date:** [October 20, 2021, 9:34am UTC](https://discourse.threejs.org/t/solved-why-the-image-looks-so-low-res-after-applied-unrealbloompass/17361/6 "2021-10-20T09:34:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ember](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ember/32/53303_2.png) [@Ember](https://discourse.threejs.org/u/Ember)\
**Post date:** [November 4, 2024, 3:19am UTC](https://discourse.threejs.org/t/solved-why-the-image-looks-so-low-res-after-applied-unrealbloompass/17361/7 "2024-11-04T03:19:00Z")

</div>

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
}

```

`