# Using UnrealBloomPass causes shadow acne

**URL:** <https://discourse.threejs.org/t/using-unrealbloompass-causes-shadow-acne/52790>\
**Category:** Questions\
**Tags:** unrealbloompass, post-processing\
**Created:** [June 14, 2023, 4:52am UTC](https://discourse.threejs.org/t/using-unrealbloompass-causes-shadow-acne/52790 "2023-06-14T04:52:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jouvychen](https://avatars.discourse-cdn.com/v4/letter/j/c4cdca/32.png) [@jouvychen](https://discourse.threejs.org/u/jouvychen)\
**Post date:** [June 14, 2023, 4:52am UTC](https://discourse.threejs.org/t/using-unrealbloompass-causes-shadow-acne/52790/1 "2023-06-14T04:52:29Z")

</div>

Hi, guys.

I’ve been learning Threejs for a while now, I don’t enable shadow in my scene. When I practice UnrealBloomPass, I always get circles of shadows, which seems to be exacerbated by UnrealBloomPass. It seems to have something to do with the lights, when turn off the lights, the streaks disappear. Moreover, transparent materials no longer look pure. How can i make the post-processing result more soft and smooth? Any suggestions and discussions are welcome.

By the way, my code is based on this example.  
[unrealBloom selective](https://threejs.org/examples/?q=post#webgl_postprocessing_unreal_bloom_selective)

Use UnrealBloomPass:

 ![20230613155418](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/6/b603a9331a51d45f22fbec28113faa1dcb907662.jpeg)  
 ![20230613160440](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/3/434dcbe904401515beacd5a6af1e25c557d5ef54.png)  
 ![20230613160623](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/1/71940dbf6a7fcbeb54815b1afe501ea3b90d928c.png)  
 ![20230614112359](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/7/97095522856f4a0c1fa3f53fab450cf15265877e.jpeg)

When not using UnrealBloomPass:

 ![20230613163220](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/4/e43541b723344903b72144c63c2550f3e0b53852.png)  
 ![20230613163249](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/6/d62a52ef3bc3ec513bd35648c7abb8a5c2241f4b.png)

---

<div class="post-metadata">

**Author:** ![bazylevnik0](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bazylevnik0/32/52631_2.png) [@bazylevnik0](https://discourse.threejs.org/u/bazylevnik0)\
**Post date:** [June 14, 2023, 6:46am UTC](https://discourse.threejs.org/t/using-unrealbloompass-causes-shadow-acne/52790/2 "2023-06-14T06:46:30Z")

</div>

Maybe will be usefull [Colour banding - Wikipedia](https://en.wikipedia.org/wiki/Colour_banding)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [June 14, 2023, 9:35pm UTC](https://discourse.threejs.org/t/using-unrealbloompass-causes-shadow-acne/52790/3 "2023-06-14T21:35:05Z")

</div>

If you aren’t already, use HalfFloatType for your render targets. This is the default in three.js r153+.

> <https://github.com/mrdoob/three.js/pull/26099>
>
> Related issue: #26071
> 
> \*\*Description\*\*
> 
> As discussed in #26071 this PR intro…duces \`HalfFloatType\` as the new default render target texture type for post-processing. 
> 
> Half float render targets are supported for all WebGL 2 devices. Compared to \`UnsignedByteType\` they are supporting HDR workflows and they solve color banding issues which were frequently reported by the community over the last years.
> 
> The two unreal bloom demos show no banding anymore however they are a too bright now because of wrong tone mapping. This will be solved with a follow-up PR that introduces \`OutputPass\` (see https://github.com/mrdoob/three.js/pull/26097#issuecomment-1555961872).

---

<div class="post-metadata">

**Author:** ![jouvychen](https://avatars.discourse-cdn.com/v4/letter/j/c4cdca/32.png) [@jouvychen](https://discourse.threejs.org/u/jouvychen)\
**Post date:** [June 15, 2023, 2:15am UTC](https://discourse.threejs.org/t/using-unrealbloompass-causes-shadow-acne/52790/4 "2023-06-15T02:15:32Z")

</div>

Wow, this is a breakthrough in one of the problems. On the one hand, I got to know this more technical term. On the other hand, I used ‘band’ to search other posts and specify rendertargets for finalComposer.

```javascript
const parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
encoding: THREE.sRGBEncoding
};

const renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );
this.finalComposer = new EffectComposer(this.renderer, renderTarget);

```

Good effect.

 ![修复](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/c/2c0164bc99641342cfb84bb4355e09360f9a4e94.jpeg)

This solves the colour banding problem.Thank you for your answer, have a good day!

---

<div class="post-metadata">

**Author:** ![jouvychen](https://avatars.discourse-cdn.com/v4/letter/j/c4cdca/32.png) [@jouvychen](https://discourse.threejs.org/u/jouvychen)\
**Post date:** [June 15, 2023, 3:04am UTC](https://discourse.threejs.org/t/using-unrealbloompass-causes-shadow-acne/52790/5 "2023-06-15T03:04:22Z")

</div>

Oh, I’m still use the 145. The colour banding problem is due to the fact that I don’t specify a renderTarget for EffectComposer.

Yes, HalfFloatType is also present in 145. Now, I have specified a type for renderTarget: THREE.HalfFloatType.

After a while, I will upgrade to the latest version and evaluate if this will affect my previous work. Appreciate it!