Trying to do a desaturation pass on background

Questions
1

im creating a tool and I have a functionality where I want to have it so when something is selected, everything else becomes desaturated/greyed out with only the thing thats supposed to be focused with full colour. I really cant figure this out at all, not even with asking llms for help. the pass logic is really difficult for me, im trying to use the effect copmposer but I cant get the colour layer to render without the background just disappearing. whats the pattern?

2

you don’t actually need to go into effectcomposer for this. three.js already has simpler built in ways to do that focus + greyed out background look

a common pattern is just rendering twice. first render the whole scene in grayscale using scene.overrideMaterial while hiding the selected object, then render the selected object normally on top. no custom pass needed

you can also use layers and render the background and selected object separately instead of fighting with postprocessing

the reason your background is disappearing is probably because the composer chain isn’t set up right or the render pass isn’t feeding into the next pass properly. that stuff gets messy fast

honestly for this use case it’s easier to skip passes entirely and just do multi render or overrideMaterial :+1:

3

As the collegue above mentioned, there are easier ways… And to be honest, I wonder why you choose this one. Well, if you need a composer for some reason, then you can use approach when you use a mask and passes. You render mask where the hovered (or something what you need) objects are white and the rest are black. Then you pass the color scene and then count the desaturation in the shader with the mask: if the pixel in the mask is black, you give it grayscale, if white, it remains colored.

https://codepen.io/editor/Lucas_Mes/pen/019d2f03-d540-7213-9b4c-805045953679

2 Likes
4

I was under the impression that if I just swap the material, well then how would I preserve the textures on things? It is a paint tool, of sorts

5

this looks like what I am interested in thank you

okay thanks for the help. it works :3