Post-processing to selected meshes

Question

In three.js is it possible to apply postprocessing effects only to selected meshes?

For example to have a cube with grain effect while the rest of the scene does not have it. Thank you!

Jolynjolynn

Answer 1

Yes. There is a three.js example that shows how to apply postprocessing to selected meshes using masking.

I think that example can be improved for clarity, but you can modify the example like so:

composer4 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );

composer4.addPass( renderScene );
composer4.addPass( renderMask );
composer4.addPass( effectDotScreen );
composer4.addPass( clearMask );
composer4.addPass( effectVignette );

You will get an output like this:

It is a complicated example, so you will have to study it carefully.

three.js.r.77

Witted

Thank you @WestLangley, managed to put it working. However I have one question related to the lost of depth info: Isn't possible to use the post effects of three-js (being mainly built as fragment shaders), used as materials of the meshes, bypassing the need of masks? – Friendly

And other question: I have a set of separated objects rotating around a central one and I want to apply a masking to the center object different from the one applied to the set of separated that rotate around the object... is there any way to add/subtract masks to get different postprocessing in both elements without depth glitches? – Friendly

(1) Yes, with custom ShaderMaterial. (2) Perhaps you should post a new question and ask the community. – Witted

Thank you. For (1) could you please provide an example or link ? And for (2), #38464711 – Friendly

Answer 2

Yes, if you put your object to another scene. But you will face a problem with dept rendering, some object will be always on top. It depends on situation of your scene.

Hickie

yes, I need to have depth working... can't I for example render the same scene 1st and apply some mask to the elements that don't have postprocessing and then in the other scene render everything except the "post-processing elements". so the "non-postprocessed elements" are not visible in the second scene but still occlude the "post-prcessed elements".. – Friendly

That depends on post processing you using. I know only post processing with using renderer, and renderer needs to be used on entire scene. – Hickie

Can't I apply a shader pass to a material? Or adapt the material shader to make some color/effect calculations based on screen coordinates? – Friendly

Thank you! Will check it – Friendly

So I do a post-process Fragment Shader Material and add it to the usual Phong/Lambert/Standard by using MultiMaterial? – Friendly

THREE js has no multimaterial, if i understand this term as from blender. Each face can have only one material. – Hickie