# Shader effect glow and blur

**URL:** <https://discourse.threejs.org/t/shader-effect-glow-and-blur/29431>\
**Category:** Questions\
**Tags:** shaders, materials\
**Created:** [August 31, 2021, 12:41pm UTC](https://discourse.threejs.org/t/shader-effect-glow-and-blur/29431 "2021-08-31T12:41:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lighty](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lighty/32/43283_2.png) [@Lighty](https://discourse.threejs.org/u/Lighty)\
**Post date:** [August 31, 2021, 12:41pm UTC](https://discourse.threejs.org/t/shader-effect-glow-and-blur/29431/1 "2021-08-31T12:41:35Z")

</div>

Hello 😀

Interested in 2 effects made on shaders, blur and glow.  
Which can be simply connected to the material.

const material = new THREE.ShaderMaterial({  
fragmentShader,  
vertexShader,  
uniforms: {  
time: { value: 0}  
},  
});

Maybe it will be some kind of libraries.  
Tried using this repository.  
but when compiling, it gives errors that this code is written under 2.0 and under 3.0 it does not fit.

> **[GitHub - kiwipxl/GLSL-shaders at e0c52cde54e5f8412b443eca4b1df597dca8d5a4](https://github.com/kiwipxl/GLSL-shaders/tree/e0c52cde54e5f8412b443eca4b1df597dca8d5a4)**
>
> e0c52cde54e5f8412b443eca4b1df597dca8d5a4

Maybe you know something like that?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 31, 2021, 1:35pm UTC](https://discourse.threejs.org/t/shader-effect-glow-and-blur/29431/2 "2021-08-31T13:35:12Z")

</div>

Both blur and glow can usually only be applied in postprocessing, not per material, since they require the shader to be aware of the entire scene (unless you’d like these effects to appear on a 2D texture applied to an object. But that’ll look kinda flat and fake.)

(As for postprocessing libraries - both build-in [three postprocessing passes](https://threejs.org/examples/?q=glow#webgl_postprocessing_unreal_bloom_selective) and [vanruesc/postprocessing](https://github.com/vanruesc/postprocessing) can help you handle blur and glow.)

---

<div class="post-metadata">

**Author:** ![Lighty](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lighty/32/43283_2.png) [@Lighty](https://discourse.threejs.org/u/Lighty)\
**Post date:** [August 31, 2021, 1:38pm UTC](https://discourse.threejs.org/t/shader-effect-glow-and-blur/29431/3 "2021-08-31T13:38:13Z")

</div>

postprocessing in this case does not fit, need a shader.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 31, 2021, 1:41pm UTC](https://discourse.threejs.org/t/shader-effect-glow-and-blur/29431/4 "2021-08-31T13:41:37Z")

</div>

Postprocessing is using shaders - just in a screen-space :’)

Could you elaborate what’s exactly the case and how would you see a material-shader be more practical than postprocessing 🤔 ?

---

<div class="post-metadata">

**Author:** ![Lighty](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lighty/32/43283_2.png) [@Lighty](https://discourse.threejs.org/u/Lighty)\
**Post date:** [August 31, 2021, 1:50pm UTC](https://discourse.threejs.org/t/shader-effect-glow-and-blur/29431/5 "2021-08-31T13:50:07Z")

</div>

Postprocessing already in use. But he is not selective, but layered.  
So if I just assign a layer to certain objects, it will disappear from view behind other objects.  
Therefore, need a shader.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 31, 2021, 2:05pm UTC](https://discourse.threejs.org/t/shader-effect-glow-and-blur/29431/6 "2021-08-31T14:05:48Z")

</div>

As far as my expansive knowledge of computer graphics goes - it is once again not possible with just a material shader 🙈 Fragment shader applied to a material cannot affect fragments / “pixels” that do not belong to that surface:

![Blender_ E__Blender Projects_connectedvertexcolorsblend.blend_2014-07-09_16-58-28](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4b0b4bd3567ead947de9aa6861e3572ad3351f50.png)

Shader applied to each cube as a ShaderMaterial can only define color of the specific cube (ex. red cube shader cannot affect color of blue / yellow / green cubes around. Which glow / blur would require.)

What you need is still - postprocessing. And, if you want be glow / blur to be selective - you will need at least 2 postprocessing passes. The general idea (for any kind of complex screen-space magic) is:

 ![68747470733a2f2f692e696d6775722e636f6d2f646942537850492e706e67](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/8/98d0abc9d815e43c62f0b498e85e313fb374c742.png)

First Pass: render your scene to an invisible texture, in this pass render the objects you want to glow / be blurred in some colour, and everything else in another colour. Like this:

![68747470733a2f2f692e696d6775722e636f6d2f697546595657422e676966](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/1/6195ce433a9980477de682f6cd964673b1fc4d71.gif)

Second Pass: render the scene as you would usually with lighting / shadows / proper materials. Then use the texture from first pass to blur the fragments / “pixels” that were highlighted in the first pass:

 ![68747470733a2f2f692e696d6775722e636f6d2f675676783145692e706e67](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/5/b52b2d4459d95912860c6e762fdb4cd5d898187c.png)

Then add these blurred pixels to the usual rendered values - and you done.

- [Source of gifs & also the best place to quickly learn gamedev shaders](https://github.com/lettier/3d-game-shaders-for-beginners)
- [Source of these specific gifs, but it’s not about blurring but SSR but still the same idea](https://github.com/lettier/3d-game-shaders-for-beginners/blob/29700852da7b730ed7c539efc6b31e08cb3ab684/sections/screen-space-reflection.md)
- [Blur guide from that same github repo - non-selective one tho](https://github.com/lettier/3d-game-shaders-for-beginners/blob/29700852da7b730ed7c539efc6b31e08cb3ab684/sections/blur.md)

---

<div class="post-metadata">

**Author:** ![Lighty](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lighty/32/43283_2.png) [@Lighty](https://discourse.threejs.org/u/Lighty)\
**Post date:** [August 31, 2021, 2:19pm UTC](https://discourse.threejs.org/t/shader-effect-glow-and-blur/29431/7 "2021-08-31T14:19:09Z")

</div>

if postprocessing it works on shaders, then it does it like that. And in the example of the repository, it seems to be written in the same way, sorry it’s just outdated.