Rendering tearing / distortion when using stencils

[victorronnow]

I'm trying to render 2 planes using stencils. Somehow the green plane is not masking the red plane properly when rendering with the EffectComposer and is causing to tearing around the mask, see the attached gifs:

No postprocessing	With postprocessing:

To reproduce

Here's a stackblitz link: https://stackblitz.com/edit/vitejs-vite-6fxjcx

In the demo I'm using 2 planes:

A green plane

const geometry = new THREE.PlaneGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
});

material.depthWrite = false;
material.stencilWrite = true;
material.stencilRef = 1;
material.stencilFunc = THREE.AlwaysStencilFunc;
material.stencilZPass = THREE.ReplaceStencilOp;

const mask = new THREE.Mesh(geometry, material);

A red plane getting masked by the green plane using THREE.EqualStencilFunc

const planeGeometry = new THREE.PlaneGeometry(1, 1, 1);
const planeMaterial = new THREE.MeshBasicMaterial({
  color: 'red',
});

planeMaterial.stencilWrite = true;
planeMaterial.stencilRef = 1;
planeMaterial.stencilFunc = THREE.EqualStencilFunc;

const plane = new THREE.Mesh(planeGeometry, planeMaterial);

Library versions used

• Three: 0.167.0
• Post Processing: 6.36.0

Desktop

• OS: macOS
• Browser: Chrome 127.0.6533.72
• Graphics hardware: M2 Max

[vanruesc]

Hi, I haven't used stencil ops with postprocessing before, but there's MaskPass and ClearMaskPass which might help.