WebGL feedback loop formed between Framebuffer and active Texture

Question

I have a webgl project setup that uses 2 pass rendering to create effects on a texture.

Everything was working until recently chrome started throwing this error:

[.WebGL-0000020DB7FB7E40] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture. 

This just started happening even though I didn't change my code, so I'm guessing a new update caused this.

I found this answer on SO, stating the error "happens any time you read from a texture which is currently attached to the framebuffer".

However I've combed through my code 100 times and I don't believe I am doing that. So here is how I have things setup.

Create a fragment shader with a uniform sampler.

uniform sampler2D sampler;

Create 2 textures

var texture0 = initTexture(); // This function does all the work to create a texture 
var texture1 = initTexture(); // This function does all the work to create a texture 

Create a Frame Buffer

var frameBuffer = gl.createFramebuffer();

Then I start the "2 pass processing" by uploading a html image to texture0, and binding texture0 to the sampler.

I then bind the frame buffer & call drawArrays:

gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

To clean up I unbind the frame buffer:

gl.bindFramebuffer(gl.FRAMEBUFFER, null);

Edit:

After adding break points to my code I found that the error is not actually thrown until I bind the null frame buffer. So the drawArrays call isn't causing the error, it's binding the null frame buffer afterwards that sets it off.

Answer 1

Chrome since version 83 started to perform conservative checks for the framebuffer and the active texture feedback loop. These checks are likely too conservative and affect usage that should actually be allowed.

In these new checks Chrome seem to disallow a render target to be bound to any texture slot, even if this slot is not used by the program.

In your 2 pass rendering you likely have something like:

1. Initialize a render target and create a texture that points to a framebuffer.
2. Render to the target.

In 1 you likely bind a texture using gl.bindTexture(gl.TEXTURE_2D, yourTexture) you need to then, before the step 2, unbind the texture using gl.bindTexture(gl.TEXTURE_2D, null); Otherwise Chrome will fail because the render target is bound as a texture, even though this texture is not sampled by the program.