Feedback Loop THREE.js

Question

I have implemented a feedback loop (backbuffer) by doing:

function render()   
{ 
    renderer.setRenderTarget(BufferA);       
    renderer.render(BufferAScene, camera);
    renderer.setRenderTarget(null); 
    renderer.clear(); let temp = BufferA; 
    BufferA = BufferAFeedBack; 
    BufferAFeedBack = temp; 
    ...
 }

Although it works, it gives a warning that there is a feedback loop between the texture target and the framebuffer. I guess this is the reason why none of the shaders are visible on mobile. Is there a more efficient way to swap FBO's in THREE.js? I know OpenGL and have already implemented the same thing, so I imagine that I could implement the app in vanilla WebGL, but I don't want to write again the host app from scratch! Although it seems that the layer of abstraction is making me duplicate objects that are not needed in plain WebGL, any suggestions?

Maybe you're looking for an example like [this](https://github.com/mrdoob/three.js/blob/master/examples/jsm/postprocessing/AfterimagePass.js) used in [this](https://threejs.org/examples/#webgl_postprocessing_afterimage)? — gman, Aug 15 '19 at 13:42
By the way any tips debugging shaders in mobile? I know about Chrome's mobile emulator but in this case the emulator runs and mobile doesn't. — Felipe Gutierrez, Aug 15 '19 at 15:18
You can connect Safari remotely to iOS and Chrome remotely to Android Chrome for debugging. Google for "remote debugging safari/chrome". Maybe [this article](https://threejsfundamentals.org/threejs/lessons/threejs-debugging-javascript.html) and [this one](https://threejsfundamentals.org/threejs/lessons/threejs-debugging-glsl.html)? — gman, Aug 15 '19 at 15:40
Thanks! I'll let you know if your comment worked so that you can post it as an answer — Felipe Gutierrez, Aug 15 '19 at 15:57
It worked! Thank you very much I will add what I did to fix it, if you want to post an answer of your own that explains things better I will mark it as the final one. — Felipe Gutierrez, Aug 15 '19 at 18:40
I've got the remote bugging working and unfortunately that wasn't the problem, it was that the size of the FBO was too large for mobile. — Felipe Gutierrez, Aug 16 '19 at 01:02

score 0 · Answer 1 · answered Aug 15 '19 at 18:44

From the comment by gman I made some adjustments and it works perfectly:

function render()
{

    BufferAUniforms.iChannel0.value = BufferAFeedBack.texture;
    ImageUniforms.iChannel0.value = BufferA.texture;

    renderer.setRenderTarget(BufferA);
    renderer.render(BufferAScene, camera);

    renderer.setRenderTarget(null);
    renderer.clear();

    let temp = BufferA;
    BufferA = BufferAFeedBack;
    BufferAFeedBack = temp;

    renderer.render(BufferImageScene, camera);

}

Feedback Loop THREE.js

1 Answers1