# How to bloomEffect normal shapes with no other shaders

**URL:** <https://discourse.threejs.org/t/how-to-bloomeffect-normal-shapes-with-no-other-shaders/41202>\
**Category:** Questions\
**Tags:** post-processing, bloom, materials, geometry\
**Created:** [August 8, 2022, 1:05pm UTC](https://discourse.threejs.org/t/how-to-bloomeffect-normal-shapes-with-no-other-shaders/41202 "2022-08-08T13:05:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Myth\_Xenodo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/myth_xenodo/32/27434_2.png) [@Myth\_Xenodo](https://discourse.threejs.org/u/Myth_Xenodo)\
**Post date:** [August 8, 2022, 1:05pm UTC](https://discourse.threejs.org/t/how-to-bloomeffect-normal-shapes-with-no-other-shaders/41202/1 "2022-08-08T13:05:34Z")

</div>

Why there is no bloom effect in popping in my screen even though I follow the codes right.

So basically I’m trying to bloom effect all the lines and animated it but it doesn’t work as expected.

You can check at my code and I can’t find where the bloomEffect doesn’t work at.

```javascript
        let sceneItem = document.querySelector(".header .scene")
        let scene,camera,renderer,renderScene,bloomPass,bloomComposer;

        function mathRandomX(i = 100) {
            var numValue = - Math.random() * i + Math.random() * i;
            return numValue;
        }
        function mathRandomY(i = 10) {
            var numValue = - Math.random() * i + Math.random() * i;
            return numValue;
        }

        function createLines(i,xSize,ySize) {
            let geoStar,matStar,meshStar
            
            geoStar = new THREE.BoxGeometry(2,0.1,0.1)
            matStar = new THREE.MeshLambertMaterial({color:0xfc0303, side:THREE.DoubleSide});
            meshStar = new THREE.Mesh(geoStar, matStar);
            meshStar.position.set(mathRandomX(),mathRandomY(),0)
            scene.add(meshStar)

            gsap.to(meshStar.position, {duration:3,x:0, repeat:-1, yoyo:true, delay:mathRandomX(3)});
        }
        
        init();
        onWindowResize();
        animate();

        function init() {
            scene = new THREE.Scene()
            let bgColor = 0x000000;
            scene.background = new THREE.Color(bgColor);
            camera = new THREE.PerspectiveCamera(40, sceneItem.clientWidth / sceneItem.clientHeight, 1, 10000);
            camera.position.set(0,0.5,20);
            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setPixelRatio( window.devicePixelRatio );

            renderer.toneMapping = THREE.ReinhardToneMapping;
            renderer.toneMappingExposure = 1;

            renderer.setSize(sceneItem.clientWidth, sceneItem.clientHeight);

            sceneItem.appendChild(renderer.domElement);
            // const controls = new OrbitControls( camera, renderer.domElement );

            const params = {
                exposure: 1,
                bloomStrength: 2,
                bloomThreshold: 1,
                bloomRadius: 1
            };

            renderScene = new RenderPass( scene, camera );

            bloomPass = new UnrealBloomPass( new THREE.Vector2( sceneItem.clientWidth, sceneItem.clientHeight ), 1.5, 0.4, 0.85 );
            bloomPass.threshold = params.bloomThreshold;
            bloomPass.strength = params.bloomStrength;
            bloomPass.radius = params.bloomRadius;

            bloomComposer = new EffectComposer( renderer );
            bloomComposer.renderToScreen = false;
            bloomComposer.addPass( renderScene );
            bloomComposer.addPass( bloomPass );
        

            scene.add(new THREE.AmbientLight(0xffffff));

            for (let i = 0; i < 50; i++) {

                createLines(i,0.1,3)
                
            }

            
        }

        function animate() {
            requestAnimationFrame(animate);
            
            // camera.lookAt(city.position);
            renderer.render( scene, camera );  
            bloomComposer.render()

        }
        
        function onWindowResize() {
            let w = sceneItem.clientWidth
            let h = sceneItem.clientHeight
        
            camera.aspect = w / h
            camera.updateProjectionMatrix()
            renderer.setSize(sceneItem.clientWidth,sceneItem.clientHeight)
            
        }

```

as you see in **animate()** function there is a **bloomComposer** but its not working the bloom Effect…  
did I miss anything? Anyone help thanks 🙂

---

<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:** [August 8, 2022, 1:26pm UTC](https://discourse.threejs.org/t/how-to-bloomeffect-normal-shapes-with-no-other-shaders/41202/2 "2022-08-08T13:26:29Z")

</div>

Hi!  
`bloomThreshold: 1,`  
try to put a lesser value for this property.

---

<div class="post-metadata">

**Author:** ![Myth\_Xenodo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/myth_xenodo/32/27434_2.png) [@Myth\_Xenodo](https://discourse.threejs.org/u/Myth_Xenodo)\
**Post date:** [August 9, 2022, 6:09am UTC](https://discourse.threejs.org/t/how-to-bloomeffect-normal-shapes-with-no-other-shaders/41202/3 "2022-08-09T06:09:53Z")

</div>

it is still not working…there is no bloom effect in lines.

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 9, 2022, 6:32am UTC](https://discourse.threejs.org/t/how-to-bloomeffect-normal-shapes-with-no-other-shaders/41202/4 "2022-08-09T06:32:47Z")

</div>

> [@Myth\_Xenodo](#):
>
> `bloomComposer.renderToScreen = false;`

Do not set this to false.

---

<div class="post-metadata">

**Author:** ![Myth\_Xenodo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/myth_xenodo/32/27434_2.png) [@Myth\_Xenodo](https://discourse.threejs.org/u/Myth_Xenodo)\
**Post date:** [August 9, 2022, 6:44am UTC](https://discourse.threejs.org/t/how-to-bloomeffect-normal-shapes-with-no-other-shaders/41202/5 "2022-08-09T06:44:01Z")

</div>

Now its working but its not kinda more light up its like blurry light up…do I have to adjust the ambientLight?

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 9, 2022, 6:47am UTC](https://discourse.threejs.org/t/how-to-bloomeffect-normal-shapes-with-no-other-shaders/41202/6 "2022-08-09T06:47:19Z")

</div>

Study this [example](https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom) to adjust some parameters.  
Also with post processing you need to add GammaCorrectionShader to get correct color space