Shader effect glow and blur

Hello :grinning:

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.

Maybe you know something like that?

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 and vanruesc/postprocessing can help you handle blur and glow.)

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

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 :thinking: ?

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.

As far as my expansive knowledge of computer graphics goes - it is once again not possible with just a material shader :see_no_evil: 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

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:

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

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:

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

2 Likes

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.