MaskPass isn't working after update to 6.0.10. Can't find any examples.

[wileyknight]

I had this block working before the update to 6 and now the mask is causing it so nothing is rendered but a background color and no errors.

I'm using 3 portals to render a primary Main scene, another scene overlaid as a Secondary, and a geometry shape as a mask MaskGeo that I can move around revealing Secondary scene "thru" Main scene. I've tested and I can get everything to render as long as I remove the . This was working perfectly on R3F 5.3.7 and Three 0.123.0. After updating to 6.0.10 and Three 0.127.0 this is dead.

I've tracked it down to something different with the maskPass implementation. Any help would be greatly appreciated.

const { gl, size } = useThree();
  const sceneCamera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    10000,
  );
  const maskCamera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    10000,
  );
  const controls = useRef<OrbitControls>(0);

  const fgComposer = useRef<THREE.gl>();
  const bgComposer = useRef<THREE.gl>();
  const maskComposer = useRef<THREE.gl>();

  const fgRenderTarget = useMemo(() => new THREE.WebGLRenderTarget(), []);

  const bgRenderTarget = useMemo(
    () => new THREE.WebGLRenderTarget(), // multiply this to increase fidelity
    [],
  );

  const maskRenderTarget = useMemo(() => new THREE.WebGLRenderTarget(), []);

  const [fgScene] = React.useMemo(() => {
    const fgScene = new THREE.Scene();
    fgScene.background = new THREE.Color('orange');
    const target1 = new THREE.WebGLMultisampleRenderTarget(
      window.innerWidth,
      window.innerHeight,
      {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBAFormat,
        stencilBuffer: false,
      },
    );
    target1.samples = 8;
    return [fgScene, target1];
  }, []);

  const [bgScene] = React.useMemo(() => {
    const bgScene = new THREE.Scene();
    bgScene.background = new THREE.Color('purple');
    const target3 = new THREE.WebGLMultisampleRenderTarget(
      window.innerWidth,
      window.innerHeight,
      {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBAFormat,
        stencilBuffer: false,
      },
    );
    target3.samples = 8;
    return [bgScene, target3];
  }, []);

  const [maskScene] = React.useMemo(() => {
    const maskScene = new THREE.Scene();
    maskScene.background = new THREE.Color('purple');
    const target2 = new THREE.WebGLMultisampleRenderTarget(
      window.innerWidth,
      window.innerHeight,
      {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBAFormat,
        stencilBuffer: true,
      },
    );
    target2.samples = 8;
    return [maskScene, target2];
  }, []);

  sceneCamera.position.set(0, 0, 200);
  maskCamera.position.set(0, 0, 200);

  useEffect(() => {
    fgComposer.current.setSize(size.width, size.height);
    bgComposer.current.setSize(size.width, size.height);
    maskComposer.current.setSize(size.width, size.height);
  }, [size]);

  useFrame((state) => {
    controls.current.update();
    state.gl.autoClear = false;
    state.gl.clear();
    fgComposer.current.render();
    maskComposer.current.render();
    bgComposer.current.render();
  });

  return (
    <>
      <orbitControls
        ref={controls}
        args={[sceneCamera, gl.domElement]}
        enableDamping={true}
        enableZoom={false}
        maxAzimuthAngle={Math.PI / 4}
        minAzimuthAngle={-Math.PI / 4}
        maxPolarAngle={Math.PI / 2}
        minPolarAngle={Math.PI / 2}
        enablePan={false}
      />

      {/** PORTALS */}
      {createPortal(<Main />, fgScene)}
      {createPortal(<Hud />, bgScene)}
      {createPortal(<Box />, maskScene)}

      {/** FOREGROUND PORTAL EFFECTS */}
      <effectComposer
        ref={fgComposer}
        args={[gl, fgRenderTarget]}
        renderToScreen={false}
      >
        <renderPass attachArray="passes" args={[fgScene, sceneCamera]} />
        <shaderPass attachArray="passes" args={[CopyShader]} />
      </effectComposer>

      {/** BACKGROUND PORTAL EFFECTS */}
      <effectComposer
        ref={bgComposer}
        args={[gl, bgRenderTarget]}
        renderToScreen={false}
      >
        <renderPass attachArray="passes" args={[bgScene, sceneCamera]} />
        <shaderPass attachArray="passes" args={[CopyShader]} />
      </effectComposer>

      {/** COMPOSIT THE SCENE */}
      <effectComposer ref={maskComposer} args={[gl, maskRenderTarget]}>
        <clearPass attachArray="passes" />
        {/** BACKGROUND */}
        <texturePass attachArray="passes" args={[bgRenderTarget.texture]} />
        {/** FOREGROUND MASK */}
        <maskPass attachArray="passes" args={[maskScene, maskCamera]} />
        {/** FOREGROUND */}
        <texturePass attachArray="passes" args={[fgRenderTarget.texture]} />
        <clearMaskPass attachArray="passes" />
        <shaderPass attachArray="passes" args={[CopyShader]} renderToScreen />
      </effectComposer>
    </>
  );

[drcmda]

maskpass is a threejs thing of course, so if that changed you need to adapt. could you make a sandbox for this for testing? btw these cameras will be re-created on every render, and that means also parts of the composer since you use it as a constructor argument.

[wileyknight]

I appreciate you responding so fast. I'll create a sandbox example to test.

I thought it might be a problem with fiber because the code from three hasn't changed. Using maskpass in three is still:

const clearMaskPass = new ClearMaskPass();
const maskPass1 = new MaskPass( scene1, camera );

and

composer = new EffectComposer( renderer, renderTarget );
composer.addPass( clearPass );
composer.addPass( maskPass1 );
composer.addPass( texturePass1 );
composer.addPass( clearMaskPass );
composer.addPass( outputPass );

I'll update this thread once I narrow this down. Thank you.

[wileyknight]

I updated my projects three version to 0.127.0 still using react three fiber 5.3.7 and it's working fine.

[wileyknight]

And now I tried updating again to 6.0.10 and it seems to be working. I'm really not sure what changed.