Problem with FBO "flip-flop" technique with multiple vars

[cwrichardson]

I'm trying to implement the "flip-flop" technique for GPGPU rendering, where you render into / read from alternating render targets (i.e., a native / simplified version of what's done in three-stdlib GPUComputation Renderer). My implmentation is basically,

in the parent component

• instantiate two render targets with useFBO
• pass those to a child, which handles the rendering (I can't remember where I read/saw it, but ISTR it has to be this way)

in the child component

• use createPortal to create a portal for rendering the FBO(s)
• initialize the model uniforms for the FBOs
• in the render loop,
  • read the texture from the current render target
  • do the GPU computation (i.e., render into the alternate target)
  • return rendering to the main scene
  • update the uniforms in the main
  • swap the render targets
  • repeat

This seems to work fine if I have a single variable (e.g., "position"); however, if I add a second variable (e.g., "velocity"), then it no longer works. Specifically, sometime early (usually the 3rd–5th frame), it runs into a "GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture." problem. Although it may be unrelated, this seems to always happen within a frame or two of the 2nd render caused by running in strict mode in a development environment.

I'm working in NextJS, so there's a little bit of extra cruft, but I've put a minimal-ish implementation up on code sandbox. There's no animation, these are just displaying some particles and flipping back and forth between render targets. There are two branches:

• working with only a single variable (position), and
• failing when I add a second pair of render targets and try to update "velocity" as well as "position".

I chatted a little about this on Discord, and there's some thinking that it may be an edge case not handled by useFBO, but ... I'd appreciate if someone could take a look and see if I'm just doing something wrong. As I said, there's a little extra code because of NextJS, but you can jump in at src/components/fbo-scene.js.

If it's more useful to paste the relevant portions of code here, LMK and I'll happily do so.

Thanks!