Feedback loop when using DepthOfFieldEffect with multiple other effect passes #416

Description of the bug

When using multiple passes surrounding an EffectPass that contains a DepthOfFieldEffect, chrome + firefox print errors involving feedback loops in the render graph.

Chrome error: [.WebGL-0x13400e82d80] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.

Firefox error: WebGL warning: drawArraysInstanced: Texture level 0 would be read by TEXTURE_2D unit 1, but written by framebuffer attachment DEPTH_ATTACHMENT, which would be illegal feedback.

Interestingly, these errors only seem to happen on Mac laptop. On my Linux desktop, things work fine.

To Reproduce

Repro: https://postprocessing-dof-repro.ameo.design/

Code:

import * as THREE from "three";

import {
  SMAAEffect,
  RenderPass,
  EffectPass,
  EffectComposer,
  DepthOfFieldEffect,
} from "https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/postprocessing.js";

const renderer = new THREE.WebGLRenderer();
document.body.append(renderer.domElement);
const composer = new EffectComposer(renderer);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  100
);

composer.addPass(new RenderPass(scene, camera));

composer.addPass(new EffectPass(camera, new SMAAEffect()));

composer.addPass(new EffectPass(camera, new DepthOfFieldEffect()));

composer.addPass(new EffectPass(camera, new SMAAEffect()));

function render() {
  composer.render();
  requestAnimationFrame(render);
}

render();

Expected behavior

I have a somewhat complex scene that makes use of two render passes. I render some background objects, apply some effects (notably a custom effect that makes use of depth info and then a DepthOfFieldEffect. Then, I render the foreground scene and apply a SMAAEffect at the end.

I'd like to apply the custom depth-based effect, then apply the depth of field, then render the foreground, and finally render some final effects. However, no matter what I do, I either get the feedback loop error or my custom depth-based effect does nothing.

When I include the depth-based effect in the same EffectsPass as the DepthOfFieldEffect, the custom effect is not applied. Here is a demo of that situation: https://postprocessing-dof-repro-2.ameo.design/

I'm not sure if that is expected behavior or not for that effect. I looked at the code and it appears to be a highly complex effect with many internal passes, so I'm not completely surprised it doesn't work.

However, when I include the custom effect in a separateEffectPass before the effect pass containing the DepthOfFieldPass, I get the feedback loop errors.

Note that these errors only occur on mac; this works fine on my Linux desktop.

Library versions used

• Three: 0.145
• Post Processing: 6.29

Desktop

• OS: Works on Linux Debian with Mesa graphics AMD GPU, doesn't work on M1 Mac
• Browser: Tested both Google Chrome | 108.0.5351.0 (Official Build) canary (arm64) and 106.0.1
• Graphics hardware: works on Desktop with 5700 XT GPU, doesn't work on M1 mac with built-in GPU

Mobile

Not tested on mobile