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
1519×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
1492×1218 4.43 KB
To see what the scene looks like without the effect, change the
renderPriority
to -1.
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.
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.
