How to use EffectComposer with multiple layers?

Questions
,
1

I am using EffectComposer via postprocessing and r3f to try and add effects to a scene with 3 layers. The scene contains a portal to another world.

  • layer 0 is the world outside of the portal.
  • layer 1 is my stencil buffer, that forms the portal
  • layer 2 is the world inside of the portal

When I render my scene without any effects, it works great. It looks like this, with a pink ball inside of the portal only visible through the stencil mask.

image
image1519×1179 17.8 KB

However, as soon as I add an effect via EffectComposer I lose everything but layer 0. Here it is with an added PixelationEffect

image
image1492×1218 4.43 KB

Here’s a code sandbox demonstrating the issue: r3f-portal layer effects - CodeSandbox

To see what the scene looks like without the effect, change the renderPriority to -1.

2

See this thread… [SOLVED] EffectComposer + Layers - #4 by marquizzo

4

i would avoid layers at all cost, it makes the app implicit and hard to control, to me layers is go-to for threejs. in most cases layers are not needed.

as for stencil in effectcomposer, it wont work ootb. @gkjohnson explains the issue here: Clipping Stencil - #4 by gkjohnson if you fork the effect and work around the issue with the overridematerial it would be ok IF you enable stencil on all the buffers (the effect composers buffer and the buffers that the passes create).

now, solutions, …, as usual, the postprocessing library proves to be a better alternative to jsm/effectcomposer, it supports stencil for most (all?) effects.

i also think you’re going through way too much trouble for these stencils, there are super easy abstractions in drei that take care of it.

3 Likes
5

This is perfect. Drei’s Mask does exactly what I want for the stencil and throwing stencilBuffer: true on EffectComposer gets the mask respected by my effects.

Thank you!