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!

score 6 · Accepted Answer · answered Jun 10 '16 at 13:51

6

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

answered Jun 10 '16 at 13:51

WestLangley

102,557
10
276
276

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? – Rui d'Orey Jul 19 '16 at 09:57
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? – Rui d'Orey Jul 19 '16 at 10:27
(1) Yes, with custom `ShaderMaterial`. (2) Perhaps you should post a new question and ask the community. – WestLangley Jul 19 '16 at 14:39
Thank you. For (1) could you please provide an example or link ? And for (2), http://stackoverflow.com/questions/38464211/threejs-correctly-mask-a-set-of-objects-rotating-around-other-and-keep-depth – Rui d'Orey Jul 19 '16 at 16:47

score 5 · Answer 2 · answered May 30 '16 at 09:23

5

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.

answered May 30 '16 at 09:23

Martin

2,575
6
32
53

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".. – Rui d'Orey May 30 '16 at 09:29
That depends on post processing you using. I know only post processing with using renderer, and renderer needs to be used on entire scene. – Martin May 30 '16 at 09:34
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? – Rui d'Orey May 30 '16 at 09:38
Thank you! Will check it – Rui d'Orey May 30 '16 at 09:58
So I do a post-process Fragment Shader Material and add it to the usual Phong/Lambert/Standard by using MultiMaterial? – Rui d'Orey May 30 '16 at 10:18
THREE js has no multimaterial, if i understand this term as from blender. Each face can have only one material. – Martin Jun 03 '16 at 15:54

Post-processing to selected meshes

2 Answers2